解构
ES6 新增了解构( destructuring )，它按照一定模式，从数组和对象中提取值，对变量进行赋值，这是将一个数据结构分解为更小的部分的过程。
对象解构
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
默认值
当你使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为 undefined 。
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined
你可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。若要这么做，需要在属性名后面添加一个等号并指定默认值。
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
赋值给不同的本地变量名
let node = {
type: "Identifier",
name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
type: localType 这种语法表示要读取名为 type 的属性，并把它的 值存储在变量 localType 上。该语法实际上与传统对象字面量语法相反，传统语法将名称放在冒号左边、值放在冒号右边;而在本例中，则是名称在右边，需要进行值读取的位置则被放在了左边。
数组解构
数组解构的语法看起来与对象解构非常相似，只是将对象字面量替换成了数组字面量。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具名属性上。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
只要等号两边的模式相同，左边的变量就会被赋予对应的值
剩余项
使用 ... 语法来将剩余的项目赋值给一个指定的变量
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let colors = ["red", "green", "blue"];
let [...clonedColors] = colors;
clonedColors // ["red", "green", "blue"]
剩余项必须是数组解构模式中最后的部分，之后不能再有逗号，否则就是语法错误。
混合解构
对象与数组解构能被用在一起，以创建更复杂的解构表达式。在对象与数组混合而成的结构中，这么做便能准确提取其中你想要的信息片段。
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
字符串解构
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
参数解构
当 JS 的函数接收大量可选参数时，一 个常用模式是创建一个 options 对象，其中包含了附加的参数。
// options 上的属性表示附加参数
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// 设置 cookie 的代码
}
// 第三个参数映射到 options
setCookie("type", "js", {
secure: true,
expires: 60000
});
很多 JS 的库都包含了类似于此例的 setCookie() 函数。在此函数内， name 与 value 参 数是必需的，而 secure 、 path 、 domain 与 expires 则不是。此处虽然无须列出一堆额外的具名参数。但无法仅通过查看函数定义就判断出函数所期望的输入。参数解构能够更清楚地标明函数期望输入。它使用对象或数组解构的模式替代了具名参数。
function setCookie(name, value, { secure, path, domain, expires }) { // 设置 cookie 的代码
}
setCookie("type", "js", {
secure: true,
expires: 60000
});
解构参数在没有传递值的情况下类似于常规参数，它们会被设为 undefined 。同样参数解构也可以设置默认值。
用途
互换两个变量的值
let a = 1, b = 2;
[a, b] = [b, a ];
console.log(a); // 2
console.log(b); // 1
简洁，易读，语义清晰。
从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
如果函数要返回多个值，我们只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
提取 JSON 数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
解构赋值可以方便地将一组参数与变量名对应起来。
网友评论