ES6学习——解构使数据访问更方便

如果之前没有接触过解构赋值，第一次听解构这个词语还比较陌生，那你可以将它理解为分解某个对象然后把这些分解后的单个对象进行重新购置

1. 对象解构 

• 接下来问一个问题，当你想要将如下的key_1,key_2属性的值赋给name_1和name_2,你将会怎么办？

let object = {
    key_1: "w",
    key_2: "r"
}
let name_1, name_2;
//如果没有解构 一般会这样赋值
name_1 = object.key_1;
name_2 = object.key_2;

//但是有了解构赋值你可以这样做
let { name_1, name_2 } = object;
//console.log(name_1) // "w"
//console.log(name_2) // "r"

• 解构的新赋值变量可以给定初始值，如果解构的对象有那个属性就赋值，没有就还是保持原值

let object = {
    key_!: "3"
}
let { key_!, key_2 = "y" } = object;
// key_1 = "3" key_2 = "y"

• 或许你想问，这个也挺简单的赋值，有的是嵌套的不还得是一层层的点来点去，那么你可以这样用

let object = {
     name: "sun",
     sex: "female",
     age: 90,
     can: {
        dance: "1",
        sing: "2"
    }
};
let { can: { dance } } = object;
console.log(dance) // "1"

    2.数组解构

• 假设你处于这样一个场景，一个数组包含10个元素，想要将这个10个值分别赋给10个变量，那么你是不是要写10行代码，或许之前真的是这样，那么有了解构之后只需要一行代码就可以解决

let color = [ "RED" , "BLUE" , "WHITE" ]
let [ color_1, color_2, color_3 ] = color;
color_1 color_2 color_3 // RED BLUE WHITE

• 需要注意的一个功能，当你不知道当前数组的长度时可以这样赋值

let color = [ "red", "blue", "white" ];
let [ ...colors ] = color;
//对于很多实际的场景这个比较有实用

   3.对象解构和数据解构混合使用

• 对象与数组的解构能被用在一起，以创建更复杂的解构表达式，在对象与数组混合而成的解构中，这么做便能准确提取其中你想要的信息片段。

let object = {
    name: "sun",
    age: 90,
    can: {
        dance: "1",
        sing: "2"
    },
    fun: [ "w", "r" , "t" ]
}
let { can: { dance } , fun[key_1] } = object;
// "1" "w"
    

   4.参数解构

• 当你想要传多层嵌套的参数的时候，解构赋值也可以为你带来便捷

function setCookie(name, value, { secure, path, domain, expires }) {};
setCookie("type", "js", { secure: true, expires: 9999 });