读书笔记：深入理解ES6 (五)

第五章 解构：使数据访问更便捷

第1节 为什么使用解构功能？

　　在ES5中，开发者们从对象、数组中获取特定数据并赋值给变量，编写了很多看起来同质化的代码。例如：

let options = {
    repeat: true,
    save: false
};

//从对象中提取数据
let repeat = options.repeat,
    save = options.save;

　　解构功能的目的就是为了简化获取信息的过程。

第2节 对象解构

　　1. 对象解构的语法是在一个赋值操作符的左边，设置一个对象字面量。举例：

let node = {
    type: "Identifier",
    name: "foo"
}

let {type, name} = node;

console.log(type); // "Identifier"
console.log();    //"foo"

　　2. 默认值。

　　对解构赋值中不存在的属性可以随意定义一个默认值。举例：

let node = {
    type: "Identifier",
    name: "foo"
}

let {type, name, value=true} = node;

console.log(type); //"Identifier"
console.log(name); //"foo"
console.log(value); //true

　　3. 为非同名局部变量赋值。

　　　　如果希望用不同命名的局部变量来存储对象属性的值，可以用这样一个扩展语法来实现。举例：

let node = {
    type: "Identifier",
    name: "foo"
}

let {type:localType, name:localName} = node;

console.log(localType); //"Identifier"
console.log(localName); //"foo"

　　4. 嵌套对象解构。

　　解构嵌套对象与对象字面量的语法相似。可以拆解以获取想要的信息。举例：

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};

let { loc: {start} } = node;

console.log(start.line); //1
console.log(start.column); // 1

第3节 数组解构

　　1. 数据解构和对象解构类似，看一个例子：

let colors = [ "red", "green", "blue" ];
let [firstColor, secondColor] = colors;
console.log(firstColor); //"red"
console.log(secondColor); // "green"

　　2. 解构赋值。举例：

let colors = [ "red", "green", "blue" ],
    firstColor = "black";
    secondColor = "purple";

let [firstColor, secondColor] = colors;

console.log( firstColor ); //"red"

　　3. 设定默认值。

　　也就是可以为不存在的属性添加默认值。举例：

let colors = ["red"];
let [firstColor, secondColor="green"] = colors;

console.log(firstColor); //"red"
console.log(secondColor); //"green"

　　4. 嵌套类数据解构。

　　与嵌套对象解构语法类似，在原有的数组模式中插入另一个数组模式。举例：

let colors = [ "red", ["green", "lightgreen"], "blue" ];
let [firstColor, [secondColor]] = colors;

console.log(firstColor); //"red"
console.log(secondColor); //"green"

　　5. 不定元素。

　　在数组中，可以通过 “...” 语法，将数组中的其余元素赋值给一个特定的变量。举例：

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"

第4节 混合解构

　　混合了对象解构和数组解构的解构方法。大体与上面对象解构和数组解构的方法类似。详细信息请见该书P.101。

第5节 解构参数

　　1. 解构参数，即将参数，尤其是对象数据类型的参数解构为更加易读的代码。举例：

　　有一个最开始的函数，如下：

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
});

　　如果我们来解构参数的话，可以这么写：

function setCookie(name, value, {secure, path, domain, expires}) {
    //设置cookie代码
}
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

　　但是这种情况下，如果不传递参数会报错，所以我们可以将其优化为：

function setCookie( name, value, {secure, path, domain, expires} = {} ) {
    //设置cookie代码
}
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

　　这样，即使不传参数，那么也有一个默认的空对象供使用，程序就不会抛出错误了。

　　2. 为了防止解构参数报错，还可以使用给解构参数赋默认值的做法，但是实际应用过程中可能用的地方不太多。有兴趣的读者可以参考该书的P.104、P105。

（本节完）