ES6中解构赋值的语法及用法实例

吾妻雷姆美如画

前言

ES6 中引入了解构赋值（Destructuring Assignment）的语法，它提供了一种方便的方式从数组或对象中提取值，并将它们赋给变量。

1. 数组解构赋值：

使用方括号[]来进行数组解构赋值。可以根据数组的结构，将其中的值赋给对应的变量。

1. const numbers = [1, 2, 3, 4, 5];
   
2. 
   
3. const [a, b, c, d, e] = numbers;
   
4. 
   
5. console.log(a); // 输出 1
   
6. console.log(b); // 输出 2
   
7. console.log(c); // 输出 3
   
8. console.log(d); // 输出 4
   
9. console.log(e); // 输出 5

复制代码

除了基本的数组解构赋值外，还可以使用默认值来处理解构时可能不存在的元素。

1. const numbers = [1, 2];
   
2. 
   
3. const [a, b, c = 3] = numbers;
   
4. 
   
5. console.log(a); // 输出 1
   
6. console.log(b); // 输出 2
   
7. console.log(c); // 输出 3

复制代码

1.1 嵌套数组的解构赋值：

当处理嵌套的数组时，可以使用多个方括号[]来表示不同层级的解构赋值。

1. const nestedArray = [1, [2, [3, 4]]];
   
2. const [a, [b, [c, d]]] = nestedArray;
   
3. 
   
4. console.log(a); // 输出 1
   
5. console.log(b); // 输出 2
   
6. console.log(c); // 输出 3
   
7. console.log(d); // 输出 4

复制代码

2. 对象解构赋值：

使用花括号{}来进行对象解构赋值。可以根据对象的属性，将对应的值赋给变量。

1. const person = {
   
2.   name: 'Alice',
   
3.   age: 30,
   
4.   city: 'New York'
   
5. };
   
6. 
   
7. const { name, age, city } = person;
   
8. 
   
9. console.log(name); // 输出 'Alice'
   
10. console.log(age); // 输出 30
    
11. console.log(city); // 输出 'New York'

复制代码

  对象解构赋值也支持默认值的设置。

1. const person = {
   
2.   name: 'Alice',
   
3.   age: 30
   
4. };
   
5. 
   
6. const { name, age, city = 'New York' } = person;
   
7. 
   
8. console.log(name); // 输出 'Alice'
   
9. console.log(age); // 输出 30
   
10. console.log(city); // 输出 'New York'

复制代码

2.1 嵌套对象的解构赋值：

当处理嵌套的对象时，可以使用多个花括号{}来表示不同层级的解构赋值。

1. const nestedObject = {
   
2.   prop1: 'value1',
   
3.   prop2: {
   
4.     nestedProp1: 'value2',
   
5.     nestedProp2: {
   
6.       deeplyNestedProp: 'value3'
   
7.     }
   
8.   }
   
9. };
   
10. 
    
11. const { prop1, prop2: { nestedProp1, nestedProp2: { deeplyNestedProp } } } = nestedObject;
    
12. 
    
13. console.log(prop1); // 输出 'value1'
    
14. console.log(nestedProp1); // 输出 'value2'
    
15. console.log(deeplyNestedProp); // 输出 'value3'

复制代码

3. 函数参数的解构赋值


3.1 对象解构赋值作为函数参数：

1. function printUserInfo({ name, age, city }) {
   
2.   console.log(`Name: ${name}`);
   
3.   console.log(`Age: ${age}`);
   
4.   console.log(`City: ${city}`);
   
5. }
   
6. 
   
7. const user = {
   
8.   name: 'Alice',
   
9.   age: 30,
   
10.   city: 'New York'
    
11. };
    
12. 
    
13. printUserInfo(user);

复制代码

在上面的例子中，我们定义了一个 printUserInfo 函数，它使用对象解构赋值作为函数参数。函数参数 { name, age, city } 指定了我们希望从传递的对象中提取的属性。当我们调用 printUserInfo 函数时，直接传递了一个对象参数 user，函数内部会根据解构赋值语法从对象中提取相应属性的值并打印出来。

3.2 数组解构赋值作为函数参数：

1. function sum([a, b, c]) {
   
2.   console.log(a + b + c);
   
3. }
   
4. 
   
5. const numbers = [1, 2, 3];
   
6. 
   
7. sum(numbers);

复制代码

在上面的例子中，我们定义了一个 sum 函数，它使用数组解构赋值作为函数参数。函数参数 [a, b, c] 指定了我们希望从传递的数组中提取的元素。当我们调用 sum 函数时，直接传递了一个数组参数 numbers，函数内部会根据解构赋值语法从数组中提取相应元素的值并计算它们的和。

附：其他解构


1. 字符串

• 字符串会被转换成了一个类似数组的对象。
  

1. let [a, b, c] = 'ES6';
   
2. console.log(a, b, c)        // E S 6

复制代码

• 字符串的
  1. length

  复制代码
  属性也能进行解构赋值
  

1. let {length : l} = 'ES6';
   
2. console.log(l) // 3

复制代码

3. 其他数据类型

• 当等号左边为对象，右边为 数值、布尔值、undefined和null时
  

1. let {a1: b1} = 666;
   
2. console.log(b1);        // undefined
   
3. let {a2: b2} = true;
   
4. console.log(b2);        // undefined
   
5. let {a3: b3} = undefined;
   
6. console.log(b3);        // 报错
   
7. let {a4: b4} = null;
   
8. console.log(b4);        // 报错

复制代码

总结

到此这篇关于ES6中解构赋值的语法及用法的文章就介绍到这了,更多相关ES6解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319118pdm.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！