ECMAScript 2017 中的解构赋值和展开运算符详解

ECMAScript 2017 中的解构赋值和展开运算符详解

在 ECMAScript 2015 中，解构赋值作为一种方便的语法结构被引入，可以在一个单独的语句中从数组或对象中快速提取值并赋给变量。在 ECMAScript 2017 中，解构赋值得到了更加广泛的应用和语法，同时增加了展开运算符的支持，这篇文章将详细介绍解构赋值和展开运算符的用法和技巧。

一、解构赋值

1. 数组的解构赋值

数组的解构赋值使用方括号 []，可以将数组中的元素赋值给多个变量。

例如，以下代码将数组 [1, 2, 3] 中的第一、第二、第三个元素分别赋值给变量 a、b、c：

let [a, b, c] = [1, 2, 3];
console.log(a); //1
console.log(b); //2
console.log(c); //3

如果数组中的元素多于变量，则多余的元素将被忽略。

例如，以下代码将数组 [1, 2, 3, 4, 5] 中的第一、第二个元素分别赋值给变量 a、b：

let [a, b] = [1, 2, 3, 4, 5];
console.log(a); //1
console.log(b); //2

如果数组中的元素少于变量，则未匹配到的变量将被赋值为 undefined。

例如，以下代码将数组 [1, 2] 中的第一、第二个元素分别赋值给变量 a、b、c：

let [a, b, c] = [1, 2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined

解构赋值还可以用于嵌套数组的解构赋值，例如：

let [a, [b, c], d] = [1, [2, 3], 4];
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //4

1. 对象的解构赋值

对象的解构赋值使用花括号 {}，可以将对象的属性赋值给多个变量。

例如，以下代码将对象 {name: "John", age: 30} 中的属性 name、age 分别赋值给变量 name、age：

let {name, age} = {name: "John", age: 30};
console.log(name); //John
console.log(age); //30

如果对象中的属性名与变量名不一致，则需要在变量名后面加上冒号 :，将变量名与属性名进行映射。

例如，以下代码将对象 {n: "John", a: 30} 中的属性 n、a 分别赋值给变量 name、age：

let {n: name, a: age} = {n: "John", a: 30};
console.log(name); //John
console.log(age); //30

如果对象中的属性缺少对应的变量名，则会被忽略。

例如，以下代码将对象 {name: "John"} 中的属性 name 赋值给变量 name，而变量 age 被赋值为 undefined：

let {name, age} = {name: "John"};
console.log(name); //John
console.log(age); //undefined

解构赋值还可以用于嵌套对象的解构赋值，例如：

let {name, userInfo: {age}} = {name: "John", userInfo: {age: 30}};
console.log(name); //John
console.log(age); //30

二、展开运算符

展开运算符 (...) 可以将数组或对象展开成一系列的值，可以被用于函数调用、数组和对象的合并等场景。

1. 数组的展开运算符

数组的展开运算符用于展开数组的元素，可以将一个数组展开为多个元素。

例如，以下代码将数组 [1, 2, 3] 和 [4, 5, 6] 中的元素展开并合并成一个新的数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];
console.log(arr); //[1, 2, 3, 4, 5, 6]

展开运算符还可以用于数组的拷贝，例如：

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
console.log(arr2); //[1, 2, 3]

1. 对象的展开运算符

对象的展开运算符用于展开对象的属性，可以将一个对象展开为多个属性。

例如，以下代码将对象 {name: "John", age: 30} 和 {gender: "male"} 中的属性展开并合并成一个新的对象：

let obj1 = {name: "John", age: 30};
let obj2 = {gender: "male"};
let obj = {...obj1, ...obj2};
console.log(obj); //{name: "John", age: 30, gender: "male"}

展开运算符还可以用于对象的拷贝，例如：

let obj1 = {name: "John", age: 30};
let obj2 = {...obj1};
console.log(obj2); //{name: "John", age: 30}

三、高级用法

1. 默认值

在解构赋值中，可以为变量设置默认值，如果解构赋值的源对象不存在对应的属性或者属性值为 undefined，则变量将被赋值为默认值。

例如，以下代码将变量 a 赋值为源对象 {a: 1} 中的属性 a，而变量 b 赋值为 undefined，变量 c 设置了默认值 3：

let {a, b, c = 3} = {a: 1};
console.log(a); //1
console.log(b); //undefined
console.log(c); //3

1. 函数参数的解构赋值

在函数参数中，可以使用解构赋值的语法来实现更加简洁的参数传递。

例如，以下代码展示了一个函数 add，它使用解构赋值来接收一个包含 x 和 y 属性的对象作为参数：

function add({x, y}) {
    return x + y;
}
console.log(add({x: 1, y: 2})); //3

1. Mixed destructuring

数组解构赋值和对象解构赋值可以混用，称为 Mixed destructuring。

例如，以下代码展示了一个 Mixed destructuring 的例子：

let {prop: objProp, arr: [arrItem]} = {prop: "value", arr: [100]};
console.log(objProp); //"value"
console.log(arrItem); //100

四、总结

本文详细介绍了 ECMAScript 2017 中的解构赋值和展开运算符的语法和用法，同时也包含了一些高级用法和技巧。掌握好解构赋值和展开运算符的使用，可以提高我们的代码编写效率，并使代码更加简洁和易于维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65014ca195b1f8cacdf0b4cb