掌握 JavaScript 中的函数

有志者，事竟成！如果你在学习文章，那么本文《掌握 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 关键字声明的。

示例：

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.要点

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

---

第五天练习

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

---

后续步骤

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《掌握 JavaScript 中的函数》文章吧，也可关注golang学习网公众号了解相关技术文章。