A-A+

ES6之解构 destructuring

2017年04月15日 HTML/CSS, JavaScript 暂无评论

简化从数据结构中获取相关子集的操作。

1

2
3
let options = {
4
    repeat: true,
5
    save: false
6
};
7
// 从对象中提取数据
8
let repeat = options.repeat,
9
save = options.save;
10

11

对象结构语法在赋值语句的左侧使用 对象字面量。
在解构中使用var、let、const声明变量的时候,必须有初始化操作。

1

2
3
let node = {
4
     type: "Identifier",
5
     name: "foo"
6
};
7
let { type, name, value } = node;
8
console.log(type); // "Identifier"
9
console.log(name); // "foo"
10
console.log(value); // undefined 该变量名在对象中找不到对应的属性名
11
let { type, name, value = true } = node; //可在变量后添加等于号(=) 并写下默认值 
12
13

14

赋值给不同的变量名

不同于传统的对象字面量语法

1
let node = {
2
type: "Identifier",
3
name: "foo"
4
};
5
let { type: localType, name: localName } = node;//
6
console.log(localType); // "Identifier"
7
console.log(localName); // "foo"
嵌套的对象解构
解构可以在任意的嵌套深度工作,而且每一层级的功能都不会被削减。

数组解构

数据解构的语法和对象解构看起来类似,只是将对象字面量替换成了数组字面量,而且解构操作的是数组内部的位置(索引) 而不是对象中的命名属性
这些值的选择和它们在数组中的位置有关;实际的变量名称是任意的。任何没有在数组解构语句中显示声明的项都会被忽略掉。注意的是数组本身不会有任何影响。

1

2
3
let colors = [ "red", "green", "blue" ];
4
let [ , , thirdColor ] = colors;
5
console.log(thirdColor);
6

7
数组中的解构赋值表达式有一个独特的使用场景 —— 对两个变量的值进行交换

1

2
let a = 1,
3
    b = 2;
4
[ a, b ] = [ b, a ];//不需要带括号
5
console.log(a); // 2
6
console.log(b); // 1
7

剩余项

… 语法来将剩余的项赋值给一个指定的变量。剩余项在提取数组中特定的项并保持其它项可用的情况下十分好用.剩余项必须是解构语句中的最后项并且不能在后面添加逗号 .

let colors = [ "red", "green", "blue" ];
let [ firstColor, …restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue" 

一个用处:数组的复制 (之前是concat)

// ECMAScript 6 中克隆数组的方法
let colors = [ "red", "green", "blue" ];
let [ …clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]" 

混合解构

实用之处在于提取 JSON 中的数据时不必访问整个数据结构.

参数解构

使用对象或数组解构的使用形式取代了命名参数。

// properties on options represent additional parameters
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// code to set the cookie
} /
/ third argument maps to options
setCookie("type", "js", {
secure: true,
expires: 60000
}); 

-------->
function setCookie(name, value, { secure, path, domain, expires }) {
// code to set the cookie
} 
setCookie("type", "js", {
secure: true,
expires: 60000
}); 

必选的参数解构

在默认情况下,未给参数解构传值会抛出一个错误,参数解构本质上是解构声明的简写形式.

//可选
function setCookie(name, value, { secure, path, domain, expires } = {}) {
    // …
}

思考

给对象和数组添加解构的原因是什么?对象解构和数组解构有什么不同?有哪些适用场景?

标签: