深入理解ES6-第5章 解构

解构：使数据访问更便捷

* 解构是从右向左的过程 *
Tip：
为值=undefined的对象数组或数组元素设置默认值，赋值表达式右侧不可=null或undefined。
2. var let const解构声明变量，必须初始化。
3. options的使用。

1 对象解构——let {…} = node

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

let { type, name } = node;

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

必须初始化：

// syntax error!
var { type, name };

// syntax error!
let { type, name };

// syntax error!
const { type, name };

1.1 解构赋值()

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

// assign different values using destructuring
// 用一对小括号包裹解构赋值语句：
({ type, name } = node);

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

PS： 左边=null或undefined，报错。

1.2 默认值

let node = {
        type: "Identifier"
    };

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

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

当node没有value属性或属性值为undefined生效

1.3 非同名局部变量赋值

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

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

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

这种语法的意思为右边的值等于左边

1.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

let { loc: { start: localStart }} = node;

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

let { loc: { start }} = node

loc、start等冒号前的标识符是对象中的检索位置，右侧为被复制的变量名。

2 数组解构——let […] = colors

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

通过值在数组中的位置进行选取——>数组不会发生变化

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;  //thirdColor -> "blue"

,占位符

2.1 解构赋值

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

[ firstColor, secondColor ] = colors;

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

变量交换

// Swapping variables in ECMAScript 6
let a = 1,
    b = 2;

[ a, b ] = [ b, a ];

console.log(a);     // 2
console.log(b);     // 1

PS： 左边=null或undefined，报错。

2.2 默认值

let colors = [ "red" ];

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

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

PS： 可以为任意位置添加默认值

2.3 嵌套数组解构

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

// later

let [ firstColor, [ secondColor ] ] = colors;

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

2.4 不定元素

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"

应用

// cloning an array in ECMAScript 6
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;

console.log(clonedColors);      //"[red,green,blue]"

PS： 不定元素必须为最后一个，在后面继续添加逗号报错。

3 混合解构

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

解构模式下中的loc:和range：仅代表它们在node对象中所处的位置（也就是该对象的属性）。

4 解构参数

function setCookie(name, value, { secure, path, domain, expires }) {

    // code to set the cookie
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
});

4.1 必须传参

// Error!
setCookie("type", "js");

不传默认为undefined，报错。

4.2 默认值

function setCookie(name, value, options) {

    let { secure, path, domain, expires } = options;

    // code to set the cookie
}

function setCookie(name, value, { secure, path, domain, expires } = {}) {

    // ...
}

function setCookie(name, value,
    {
        secure = false,
        path = "/",
        domain = "example.com",
        expires = new Date(Date.now() + 360000000)
    } = {
        secure : false,
        path : "/",
        domain : "example.com",
        expires : new Date(Date.now() + 360000000)
}
) {
    // ...
}

const setCookieDefaults = {
		secure : false,
        path : "/",
        domain : "example.com",
        expires : new Date(Date.now() + 360000000)
};

function setCookie(name, value,
    {
        secure = false,
        path = "/",
        domain = "example.com",
        expires = new Date(Date.now() + 360000000)
    } 
) {
    // ...
}