JavaScript 闭包&箭头函数&解构赋值

发表于 分类于

箭头函数

箭头函数是 JavaScript 中的一种函数定义方式，它提供了一种更简洁的语法来声明函数。箭头函数通常用于定义匿名函数或简单的函数表达式，特别是在回调函数或高阶函数中常见。

箭头函数的基本语法如下：

1
(parameters) => expression
  • parameters：函数的参数列表，可以是零个或多个参数。如果有多个参数，使用括号包围起来。如果没有参数，可以使用空括号 () 或 _ 来表示。
  • expression：一个表达式，通常是函数的主体，它执行操作并返回结果。

下面是一些箭头函数的示例：

  1. 箭头函数不带参数：
1
2
3
const greet = () => {
  return "Hello, world!";
};
  1. 箭头函数带一个参数：
1
2
3
const double = (x) => {
  return x * 2;
};
  1. 箭头函数带多个参数：
1
2
3
const add = (a, b) => {
  return a + b;
};
  1. 如果函数体只包含一个表达式，可以省略花括号和 return：
1
const multiply = (x, y) => x * y;
  1. 如果函数只有一个参数，可以省略参数周围的括号：
1
const square = x => x * x;

箭头函数有一些特点：

  • 它们没有自己的 this，它们继承外围上下文的 this 值。
  • 它们更适用于短小的函数，因为它们的语法非常紧凑。
  • 箭头函数不能用作构造函数，不能通过 new 关键字来实例化。

需要注意的是，箭头函数不适用于所有情况。在某些情况下，特别是需要动态 this 值的情况下，传统的函数声明可能更合适。箭头函数通常用于简单的函数定义和回调函数。

闭包

闭包（Closure）是 JavaScript 中一个重要且强大的概念。它发生在一个函数内部，这个函数可以访问外部函数的变量，即使外部函数已经执行完毕。闭包允许您将函数和其相关的数据封装在一个包裹（closure）中，提供了一种方式来保存和访问函数内部的状态。

要理解闭包，首先需要明白函数在 JavaScript 中是一等公民，可以被赋值给变量、作为参数传递给其他函数以及从函数中返回。闭包的主要特点包括以下几点：

  1. 函数内嵌套函数：在一个函数内部定义另一个函数，内部函数即为闭包。

  2. 内部函数访问外部函数变量：内部函数可以访问外部函数的变量，即使外部函数已经执行完毕，这些变量仍然可以被访问和修改。

以下是一个示例，演示了闭包的基本概念：

1
2
3
4
5
6
7
8
9
10
11
12
function outer() {
  var outerVar = "I am from outer!";
  
  function inner() {
    console.log(outerVar); // 内部函数访问外部函数的变量
  }
  
  return inner; // 返回内部函数
}

var myClosure = outer(); // 调用外部函数并将内部函数赋值给变量
myClosure(); // 输出 "I am from outer!"

在上面的示例中，inner 函数是一个闭包，它可以访问 outer 函数中的 outerVar 变量，即使 outer 函数已经执行完毕。当我们调用 myClosure() 时，它仍然可以访问和打印 outerVar 的值。

闭包在 JavaScript 中有许多实际用途，包括模块化编程、私有变量的实现、事件处理程序等。它们允许您封装数据和行为，同时保持数据的封装性和隐私性。理解和使用闭包是深入理解 JavaScript 的关键之一。

如果想访问内部函数的数据可以如下实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function outer() {
  var outerVar = "I am from outer!";
  
  function inner() {
      //定义内部变量
    var innerVar = "I am from inner!";
    return innerVar;
  }
  
 //获取内部变量返回值
 innerValue=inner()
  return innerValue;
}

console.log(outer()); //输出I am from inner!


解构赋值

解构赋值是一种 JavaScript 表达式，允许从数组或对象中提取数据并赋值给变量。解构赋值语法更简洁，能够快速访问和赋值多个变量。

数组解构赋值

1
2
3
4
5
6
7
// 从数组中提取值并赋给变量
const numbers = [1, 2, 3];
const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

对象解构赋值

1
2
3
4
5
6
// 从对象中提取值并赋给变量
const person = { name: "John", age: 30 };
const { name, age } = person;

console.log(name); // John
console.log(age);  // 30

默认值

在解构赋值中，可以为变量设置默认值：

1
2
3
4
5
6
const numbers = [1, 2];
const [a, b, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3 (默认值)

剩余元素

可以使用剩余运算符 ... 来获取数组中的剩余元素：

1
2
3
4
5
6
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

也可以全部赋值

1
2
3
4
5
const searchForm = {'keyword1':11,'keyword2':22,'keyword3':33}
const newForm={...searchForm}

console.log(newForm);  //{keyword1: 11, keyword2: 22, keyword3: 33}

在函数参数中使用解构赋值：

1
2
3
4
5
6
function getUserInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: "Alice", age: 25 };
getUserInfo(user);

解构赋值提供了一种更灵活、更简洁的方式来处理数组和对象的数据。在实际编程中，它通常用于提取 API 返回的数据、函数参数的处理等场景。