ES6之解构赋值

解构赋值概念数组的解构赋值对象的解构赋值函数参数的解构赋值用途 概念 解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 换句话说也就是ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。 数组的解构赋值 基本用法: let [a, b, c] = [1, 2, 3]; console.log(a,b,c)//1,2,3 let [a, [[b], c]] = [11, [[12], 13]]; console.log(a,b,c)//11,12,13 //本质上，这种写法属于“模式匹配”，只要等号两边 解构赋值是ES6引入的一种新的语法特性，极大地提升了JavaScript中处理数组和对象赋值的效率和灵活性。解构赋值允许我们按照特定模式，从数组或对象中提取值并赋给变量，使得代码更加简洁易读。 **数组的解构赋值** 在数组的解构赋值中，我们可以按照数组元素的顺序来赋值给相应的变量。例如： ```javascript let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 输出：1, 2, 3 ``` 这里，`[a, b, c]` 是解构模式，与 `[1, 2, 3]` 进行匹配，将值分别赋给 `a`, `b`, `c`。 解构赋值还可以处理嵌套的数组，例如： ```javascript let [a, [[b], c]] = [11, [[12], 13]]; console.log(a, b, c); // 输出：11, 12, 13 ``` 在这个例子中，`[[b], c]` 是一个嵌套的解构模式，用于从数组中提取嵌套的值。 **默认值** 在解构赋值中，我们可以为变量提供默认值，以防从数组中取出的值为 `undefined`。例如： ```javascript let [x, y = 'b'] = ['a']; console.log(x, y); // 输出：a, b let [x, y = 'b'] = ['a', undefined]; console.log(x, y); // 输出：a, b let [x = 1] = [null]; console.log(x); // 输出：null ``` 需要注意的是，`null` 不等于 `undefined`，因此不会触发默认值的设定。 **对象的解构赋值** 对象的解构赋值与数组不同，它依赖于属性名称，而不是位置。例如： ```javascript let { x, y } = { x: 'wk', y: '21' }; console.log(x, y); // 输出：wk, 21 ``` 对象解构同样支持默认值，但只有当属性值严格等于 `undefined` 时，才会使用默认值： ```javascript let { x = 'wk' } = { x: undefined }; console.log(x); // 输出：wk let { x = 'wk' } = { x: null }; console.log(x); // 输出：null ``` **函数参数的解构赋值** 函数参数的解构赋值让传参变得更加灵活，尤其是当参数是对象时。它可以简化参数的定义和传递： ```javascript function myInfo({ name = 'wk', age = 21 } = {}) { console.log(name, age); } myInfo(); // 输出：wk, 21 ``` 这里，`{ name, age }` 是参数的解构模式，即使参数对象的属性顺序不同，也能正确赋值。 **用途** 解构赋值在很多场景下都很有用，比如： 1. **处理JSON数据**：可以直接从返回的JSON对象中提取所需属性，例如： ```javascript let jsonObj = { page: 1, total: 20 }; let { page, total } = jsonObj; ``` 2. **设置函数参数默认值**：不再需要将默认值参数放在可以自由地在函数参数中使用解构赋值设定默认值。 通过解构赋值，开发者可以编写更简洁、更具可读性的代码，减少不必要的临时变量，并提高了代码的可维护性。在处理复杂的数据结构时，这种特性尤其显得强大。