javascript数据解构

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 11 天，点击查看活动详情

ES5的数据获取

let obj = {
  name:'张三',
  age:5,
}

在ES5当中，如果你想要获取obj对象当中的name属性的值和age属性的值，一般常用的方法如下

let obj = {
  name:'张三',
  age:5,
}
let name = obj.name;
let age = obj.age;

这样获取数据不但代码写的多了，而且都是一些重复的代码，在ES6当中，我们有了新的获取方式，。那就是数据解构。数据解构可以对数组、对象等负责的数据结构进行解构赋值。

ES6当中的数据获取方式——解构赋值

同样是一个对象

let obj = {
  name:'张三',
  age:5
}
let {name,age} = obj;
console.log(name); //张三
console.log(age); // 5

在面对比较复杂的对象时，也能表现良好，能够简单快捷的获取深层次的对象。

        let obj = {
            name:'张三',
            age:5,
            data:{
                fields:{
                    name:"名字",
                    classNO:"班级编号",
                    className:"班级名称"
                }
            }
        }

        let {data:{ fields}} = obj;
        console.log(fields) //输出fields对象包含的数据

根据type来获取数据

        let obj = {
            name:'张三',
            age:5,
            data:{
                fields:{
                    name:"名字",
                    classNO:"班级编号",
                    className:"班级名称"
                }
            }
        }
        //为变量指定接收那些数据
        let {name:name,age:age} = obj;
        console.log(name,age); //输出 张三 5

数组解构

        let color = ["red","blue","greed","black","sky"];

        let {name:name,age:age} = obj;
        let [firstColor,...restColors] = color;
        console.log(firstColor); //red
        console.log(restColors); //["blue","greed","black","sky"]

• 剩余项 数组解构有个与函数的剩余参数类似的、名为剩余项（ rest items ）的概 念，它使用" ..." 语法来将剩余的项目赋值给一个指定的变量

混合解构

        let obj = {
            name:'张三',
            age:5,
            data:{
                fields:{
                    name:"名字",
                    classNO:"班级编号",
                    className:"班级名称"
                }
            },
            color:["red","blue","greed","black","sky"]
        }
        let {data:{fields},color:[firstColor,...restColors]} = obj
        console.log(fields); //fields的数据
        console.log(firstColor);// red
        console.log(restColors); //["blue","greed","black","sky"]

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}