掌握 JavaScript 中的函数-js教程-PHP中文网

掌握 JavaScript 中的函数

花韻仙語

发布： 2024-12-13 08:12:02

转载

777人浏览过

掌握 javascript 中的函数

第 5 天：掌握 javascript 函数

日期：2024 年 12 月 12 日

欢迎来到 javascript 学习之旅的第五天！今天，我们将探讨 javascript 最基本、最强大的方面之一——函数。函数使我们能够封装逻辑、提高可重用性并有效地组织代码。读完本文后，您将深入掌握如何定义、调用和使用函数，并了解它们的作用域和闭包。

1.什么是函数？

函数是一个可重用的代码块，旨在执行特定任务。函数可以帮助您避免重复的代码，使您的程序更干净、更高效。

语法：

function functionname(parameters) {
  // function body
  return value; // optional
}

登录后复制

示例：

羽毛球馆预约小程序

羽毛球馆预订小程序，是一款专门为羽毛球馆从业者设计的小程序平台，包括本店动态，运动常识，场地预约等功能。可以随时查看当天场地的预约数量，随时掌握自己场地的经营情况。对于羽毛球爱好者来说，可以实时查看场地数据，一目了然查看还有多少场地可以预定，按自己的时段安排来合理打球时间

查看详情

function greet(name) {
  return `hello, ${name}!`;
}

console.log(greet("arjun")); // output: hello, arjun!

登录后复制

2.定义和调用函数

函数声明

函数是使用 function 关键字声明的。

立即学习“Java免费学习笔记（深入）”；

示例：

function add(a, b) {
  return a + b;
}

console.log(add(3, 4)); // output: 7

登录后复制

函数调用

调用函数会执行其代码。

示例：

function sayhello() {
  console.log("hello, world!");
}

sayhello(); // output: hello, world!

登录后复制

3.函数表达式

函数表达式将函数分配给变量。这允许像任何其他变量一样对待函数。

示例：

const multiply = function (x, y) {
  return x * y;
};

console.log(multiply(5, 6)); // output: 30

登录后复制

4.箭头函数

箭头函数为编写函数提供了简洁的语法。它们在回调和较短的函数定义中特别有用。

语法：

const functionname = (parameters) => {
  // function body
};

登录后复制

示例：

const divide = (a, b) => a / b;

console.log(divide(10, 2)); // output: 5

登录后复制

如果函数只有一个参数或只有一个 return 语句，则可以省略括号和 return 关键字。

示例：

const square = x => x * x;

console.log(square(4)); // output: 16

登录后复制

5. javascript 中的作用域

作用域 确定变量在代码中的可访问位置。

全球范围

在任何函数或块之外声明的变量都是全局作用域的。可以在脚本中的任何位置访问它。

示例：

let globalvar = "i am global";

function showglobalvar() {
  console.log(globalvar);
}

showglobalvar(); // output: i am global

登录后复制

本地范围

函数内声明的变量的作用域为该函数的本地范围。

示例：

function showlocalvar() {
  let localvar = "i am local";
  console.log(localvar);
}

showlocalvar(); // output: i am local
// console.log(localvar); // error: localvar is not defined

登录后复制

块范围

使用 let 和 const，变量的作用域限于声明它们的块。

示例：

if (true) {
  let blockscoped = "block scope!";
  console.log(blockscoped); // output: block scope!
}
// console.log(blockscoped); // error: blockscoped is not defined

登录后复制

6.关闭

closure 是一个函数，即使在外部函数完成执行之后，它也会记住其封闭范围中的变量。

示例：

function outerfunction() {
  let count = 0;

  return function innerfunction() {
    count++;
    return count;
  };
}

const counter = outerfunction();

console.log(counter()); // output: 1
console.log(counter()); // output: 2
console.log(counter()); // output: 3

登录后复制

这里，即使在outerfunction执行之后，innerfunction也会“记住”count变量。

7.现实世界的例子

示例1：温度转换

function celsiustofahrenheit(celsius) {
  return celsius * 9/5 + 32;
}

console.log(celsiustofahrenheit(30)); // output: 86

登录后复制

示例 2：使用计数器闭包

function createcounter() {
  let count = 0;

  return {
    increment: () => ++count,
    decrement: () => --count,
  };
}

const counter = createcounter();
console.log(counter.increment()); // output: 1
console.log(counter.decrement()); // output: 0

登录后复制

示例 3：数组中的箭头函数

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);

console.log(squares); // Output: [1, 4, 9, 16]

登录后复制

8.要点

函数：封装逻辑并提高可重用性。
函数类型：声明、表达式和箭头函数。
作用域：了解全局、局部和块作用域，以便更好地管理变量。
闭包：利用闭包实现强大、内存高效的代码结构。

第五天练习

编写一个计算数字阶乘的函数。
创建一个基于闭包的计数器，它可以自行递增和重置。
使用箭头函数将温度列表从摄氏度转换为华氏度。

后续步骤

在第 6 天，我们将探索 数组和对象，这是 javascript 中的两种基本数据结构。敬请期待2024年12月13日！

以上就是掌握 JavaScript 中的函数的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

数据库操作：MongoDB与Mongoose ODM 函数柯里化：偏函数与参数复用技巧 JSPromise怎么使用_JavaScriptPromise异步编程方法与实例详解 JavaScript属性描述符_对象密封与冻结 JavaScript低代码平台_可视化编排引擎设计