深入解析 ES6：解构赋值

503 查看

什么是解构赋值？

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁，而且比传统的属性访问更加清晰。

在不使用解构赋值的情况下，访问数组的前三项：

var first = someArray[0];

var second = someArray[1];

var third = someArray[2];

使用解构赋值后，相应的代码变得更简洁和可读：

1	var [first, second, third] = someArray;

SpiderMonkey（Firefox 的 JavaScript 引擎）已经支持解构赋值的大部分特性，但还不完全。

数组和可迭代对象的解构赋值

上面我们已经看到了数组解构赋值的例子，该语法的一般形式是：

1	[ variable1, variable2, ..., variableN ] = array;

这将把数组中对应的项依次赋给 variable1 到 variableN，如果同时需要声明变量，可以在解构表达式前面添加 var，let 或 const 关键字。

var [ variable1, variable2, ..., variableN ] = array;

let [ variable1, variable2, ..., variableN ] = array;

const [ variable1, variable2, ..., variableN ] = array;

事实上，你还可以嵌套任意的深度：

var [foo, [[bar], baz]] = [1, [[2], 3]];

console.log(foo);

// 1

console.log(bar);

// 2

console.log(baz);

// 3

此外，还可以跳过数组中的某些项：

var [,,third] = ["foo", "bar", "baz"];

console.log(third);

// "baz"

你还可以用一个 Rest 表达式来捕获数组中的剩余项：

var [head, ...tail] = [1, 2, 3, 4];

console.log(tail);

// [2, 3, 4]

如果数组越界或访问数组中不存在的项，将得到和通过数组索引访问一样的值：undefined。

console.log([][0]);

// undefined

var [n-sy">);