解构(Destructure)
解构是ES6新添加的一种功能，解构是指将复杂的数据结构拆分为小的部分。ES6添加了对对象字面量(object literals) 和 数组字面量(Array literals) 的解构。以下从3个方面来谈谈解构：
- 对象解构 (object destructure);
- 数组解构 (array destructure);
- 函数参数解构 (parameters destructure)
一.对象解构
对象解构使用对象字面量在等式的左侧，和对象字面量属性初始化器(property initializer)语法一致。
let node = {
type: "javascript",
name: "main"
};
// 解构 变量声明
let {type, name} = node; // node为初始化器
console.log(type); // "javascript"
console.log(name); // "main"
// 上面解构相当于
var type = node.type;
var name = node.name;
1.解构赋值
上面的例子是使用变量声明的方式，也可以采用赋值的方式，即变量名已经声明，重新赋值
注意对象字面量解构赋值： 必须使用括号将解构赋值包裹起来， 因为javascript中{}表示块状语句(block statement)，如果不添加括号不能添加等于号变成表达式
let node = {
type: "javascript",
name: "main"
},
type = "literals",
name = "whatever";
// 解构赋值 加上()
({type, name} = node);
console.log(type); // "javascript"
console.log(name); // "main"
解构赋值表达式最后的值为等号右边的值，上面的例子即为node
即：
let node = {
type: "javascript",
name: "main"
},
type = "literals",
name = "whatever";
function outputInfo(value) {
console.log(value === node);
}
outputInfo({type, name} = node); // 内部表达式的值等于node,所以返回true
console.log(type); // "javascript"
console.log(name); // "main"
2.默认值
当解构赋值时，局部变量在对象中不存在时，默认值为undefined， 可以提供一个默认值
let node = {
type: "javascript",
name: "main"
};
let {type, name, someProperty} = node;
console.log(someProperty); // undefined
// 添加默认值
let {type, name, someProperty = true} = node;
console.log(someProperty); // true
3.改变局部变量名
上面的例子，我们都使用属性名当作变量名，我们可以改变这个变量名
let node = {
type: "javascript",
name: "main"
};
let {type: localType, name: localName} = node;
// 相当于
var localType = node.type;
var localName = node.name;
4.嵌套对象解构
解构可以用于任意深度的嵌套
let node = {
type: "javascript",
name: "main",
loc: {
start: {
rows: 1
columns: 3
},
end: {
rows: 5,
columns: 19
}
}
};
let {loc: { start }} = node;
// 相当于
var start = node.loc.start;
// 当然也可以改变变量名
let {loc: { start: localStart }} = node;
// 相当于
var localStart = node.loc.start;
console.log(localStart.rows); // 1
console.log(localStart.columns); // 3
二.数组解构
数据解构和对象解构大同小异，只不过数组解构不是根据命名属性，而是根据索引位置，另外一点不同就是数组解构赋值不需要使用括号包裹起来，下面会谈到这一点。
let colors = ["red", "yellow", "green"];
let [firstColor, secondColor] = colors;
// 相当于
var firstColor = colors[0]; // "red"
var secondColor = colors[1]; // "yellow"
还可以忽略属性，只解构想要的属性
let colors = ["red", "yellow", "green"];
let [， ， thirdColor] = colors;
// 相当于
thirdColor = colors[2]; // "green"
1.解构赋值
let colors = ["red", "yellow", "green"],
firstColor = "blue",
secondColor = "pink";
// 注意下面不需要使用括号包裹起来，因为没有{}和块状语句语法冲突
[firstColor, secondColor] = colors;
// 相当于
var firstColor = colors[0]; // "red"
var secondColor = colors[1]; // "yellow"
数组解构赋值还有另一个特别独特的使用： 交互两个属性的值
eg:
let a = 1,
b = 2;
// 下面表达式左边，右边的含义：解构 = 数组
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
2.默认值
和对象解构一样，对数组中没有值默认为undefined, 可以另外提供一个默认值
let colors = ["red"];
let [firstColor, secondColor = "green"] = colors;
//相当于
var firstColor = colors[0];
var secondColor = "green";
console.log(firstColor); // "red"
console.log(secondColor); // "green"
3.嵌套数组解构
let colors = ["red", ["pink", "aqua"], purple];
let [redColor, [pinkColor]] = colors;
// 相当于
var redColor = colors[0];
var pinkColor = color[1][0];
4.rest items（...）
1.剩余项目使用 ... 语法（和任意参数，spread操作符一样）来表示数组中剩下的项目,同样rest items必须放到最后
let colors = ["red", "yellow", "green"];
let [firstColor, ...restColors] = colors;
console.log(firstColor); // "red"
restColors.length; // 2
restColors[0]; // "yellow"
restColors[1]; // "green"
// 相当于
var restColors = ["yellow", "green"]
2.数组的另一个容易被忽略的能力就是快速赋值一个数组，使用concat方法，比如：
let colors = ["red", "yellow", "green"];
let cloneColors = colors.concat();
console.log(cloneColors); // ["red", "yellow", "green"]
使用rest items来达到这一目的：
let colors = ["red", "yellow", "green"];
let [...cloneColors] = colors;
三.混合解构
结合对象解构和数组解构提取更复杂的数据结构，这种方式对提取JSON配置结构显得十分有用
let node = {
type: "javascript",
name: "main",
loc: {
start: {
rows: 1,
columns: 1
},
end: {
rows: 2,
columns: 2
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
// 相当于
var start = node.loc.start; // {rows: 1, columns: 1}
var startIndex = node.range[0]; // 0
四.解构参数
对象解构，数组解构拥有的特性，比如默认值，混合解构等， 解构参数都拥有
1.当js函数需要大量可选参数时，一般做法就是传入一个 options 对象， 它的属性为其余可选参数，如：
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// other code here ...
}
// 调用时
setCookie("type", "js", {
secure: true,
expires: 60000
});
2.解构参数使用对象解构或数组解构来代替named parameter,可以写为：
function setCookie(name, value, {secure, path, domain, expires}) {
// other code here ...
}
// 调用时
setCookie("type", "js", {
secure: true,
expires: 60000
});
实质上是:解构参数本质上是解构声明的简写
function setCookie(name, value, options) {
let {secure, path, domain, expires} = options; // 解构声明
// ...
}
这种写法有个问题，就是解构参数变成必须的，不能省略， 因为不给出第3个参数，将自动为undefined， 解构声明中，当解构右边值为null, undefined时抛出错误
setCookie("type", "js"); // 抛出错误
3.如果上面options为必须参数这种写法没问题，如果options为可选则要写为另一种写法
function setCookie(name, value, {secure, path, domain, expires} = {}) {
// other code here ...
}
// 调用时
setCookie("type", "js"); // OK
// 这样第三个参数不提供，则secure等属性值解构为undefined
4.解构参数默认参数
function setCookie(name, value,
{
secure = true,
path = "/",
domain = "example.com",
expires = new Date(Date.now() + 3600000000)
} = {}
) {
// ...
}
总结
解构的出现给数据的提取提供了很直观的结构，数组解构还提供了其他的一些功能，比如交换两个数，rest items等，解构参数则对函数参数的定义更加的直观，总的来说解构是一种很棒的功能。
网友评论