第5章 解构(destructure)

解构(Destructure)

解构是ES6新添加的一种功能，解构是指将复杂的数据结构拆分为小的部分。ES6添加了对对象字面量(object literals) 和 数组字面量(Array literals) 的解构。以下从3个方面来谈谈解构：

1. 对象解构 (object destructure);
   
2. 数组解构 (array destructure);
   
3. 函数参数解构 (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等，解构参数则对函数参数的定义更加的直观，总的来说解构是一种很棒的功能。