ES6 中解构赋值的常见应用

在 ES6 中，解构赋值成为了一种非常方便的语法，可以让我们更加简洁地从数组或对象中取出值并赋值给变量。下面我们将介绍解构赋值的常见应用。

数组解构

交换变量

在 ES5 中，我们需要通过中间变量来交换两个变量的值：

var a = 1;
var b = 2;
var temp = a;
a = b;
b = temp;

而在 ES6 中，我们可以使用解构赋值来更加简洁地实现：

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

从函数返回多个值

在 ES5 中，如果我们需要从函数中返回多个值，通常会将它们放在一个对象中返回。而在 ES6 中，我们可以使用数组解构来实现：

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

let [a, b] = foo();

快速获取数组中的值

在 ES5 中，如果我们需要从一个数组中取出其中的值，通常需要使用索引来获取。而在 ES6 中，我们可以使用数组解构来更加方便地获取：

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

快速获取函数的参数

在 ES5 中，如果我们需要获取函数的参数，通常需要使用 arguments 对象来获取。而在 ES6 中，我们可以使用数组解构来更加方便地获取：

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

foo([1, 2]);

对象解构

快速获取对象中的值

在 ES5 中，如果我们需要从一个对象中取出其中的值，通常需要使用点号或方括号来获取。而在 ES6 中，我们可以使用对象解构来更加方便地获取：

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

给对象设置默认值

在 ES6 中，我们可以给对象的属性设置默认值，当对象中没有该属性或该属性的值为 undefined 时，使用默认值：

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

重命名对象的属性

在 ES6 中，我们可以使用对象解构来重命名对象的属性：

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

混合解构

在 ES6 中，我们可以混合使用数组解构和对象解构：

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

总结

ES6 中的解构赋值是一种非常方便的语法，可以让我们更加简洁地从数组或对象中取出值并赋值给变量。常见的应用包括交换变量、从函数返回多个值、快速获取数组中的值、快速获取函数的参数、快速获取对象中的值、给对象设置默认值、重命名对象的属性和混合解构等。掌握解构赋值可以让我们的代码更加简洁和易读。

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