ES6 的解构赋值用法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，解构赋值是一种非常方便的语法，可以将数组或对象中的值赋给变量，使代码更加简洁易读。本文将详细讲解解构赋值的用法，并提供一些实用的示例代码。

数组解构赋值

数组解构赋值可以将数组中的值赋给变量，语法如下：

let [a, b, c] = [1, 2, 3];

上面的代码将数组 [1, 2, 3] 中的值分别赋给变量 a、b、c，相当于执行了下面的赋值语句：

let a = 1;
let b = 2;
let c = 3;

如果数组中的值不足以赋给所有变量，则未赋值的变量的值为 undefined。

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

如果想要忽略数组中的某些值，可以使用逗号将其占位。

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

如果数组中的值是对象，则可以通过嵌套的方式进行解构赋值。

let [{name: n}, {age: a}] = [{name: 'Tom'}, {age: 18}];
console.log(n, a); // Tom 18

数组解构赋值还可以配合默认值使用，当数组中的值为 undefined 时，变量将取默认值。

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

对象解构赋值可以将对象中的值赋给变量，语法如下：

let {a, b, c} = {a: 1, b: 2, c: 3};

上面的代码将对象 {a: 1, b: 2, c: 3} 中的值分别赋给变量 a、b、c，相当于执行了下面的赋值语句：

let a = 1;
let b = 2;
let c = 3;

如果对象中不存在某个属性，则对应变量的值为 undefined。

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

对象解构赋值还可以通过别名的方式给变量起一个新的名字。

let {name: n, age: a} = {name: 'Tom', age: 18};
console.log(n, a); // Tom 18

如果想要给变量设置默认值，可以使用 = 运算符。

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

函数参数也可以使用解构赋值的语法，可以方便地从参数中获取需要的值。

function foo({a, b}) {
  console.log(a, b);
}

foo({a: 1, b: 2}); // 1 2

函数参数解构赋值也可以配合默认值使用。

function foo({a = 1, b = 2}) {
  console.log(a, b);
}

foo({b: 3}); // 1 3

解构赋值在实际开发中有很多应用场景，下面列举一些常见的用法。

使用解构赋值可以很方便地交换两个变量的值。

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

使用解构赋值可以很方便地从函数中返回多个值。

function foo() {
  return [1, 2, 3];
}

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

使用解构赋值可以很方便地提取对象中的值。

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

使用解构赋值可以很方便地为函数参数设定默认值。

function foo({a = 1, b = 2} = {}) {
  console.log(a, b);
}

foo(); // 1 2
foo({b: 3}); // 1 3

解构赋值是一种非常方便的语法，可以大大简化代码，提高开发效率。本文介绍了数组解构赋值、对象解构赋值、函数参数解构赋值等用法，并提供了一些实用的示例代码。希望读者能够掌握解构赋值的用法，提高编程能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6561d792d2f5e1655dbe3c1d