ES6——对象的解构赋值

ES6——对象的解构赋值

与数组一样,对象也可以进行解构

let {name, age} = {name: 'jisoo',  age:25};
console.log(name);//'jisoo'
console.log(age);//25

但是对象的解构赋值和数组的解构赋值有一个区别就是,数组的元素是按次序排列的,变量的取值是由它的位置决定的,而对象的属性没有次序,变量必须与属性同名才能取到正确的值

let {job, salary}={salay: 20000, job: 'doctor'};
console.log(salary);//20000
consol.log(job);//'doctor'

与数组一样,取不到值还是会返回undefined

let {gender}={sex: 'female', level: 'boss'};
console.log(gender);//undefined

对象的解构赋值是下列代码的简写let {foo: foo , bar: bar} = {foo: 'aaa', bar: 'bbb'},也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者而不是前者,如下面代码所示:

let obj = {first: 'hello', last: 'world'};
let {first: f, last: l}=obj;
console.log(f);//first
console.log(l);//last
console.log(first);//Error(first is not defined)

与数组一样,解构也可以用于嵌套结构的对象

        let obj1 = {
            p: ['hello', {
                y: 'world'
            }]
        };
        let {
            p: [x, {
                y
            }]
        } = obj1;
        console.log(x); //'hello'
        console.log(y); //'world'

对象的解构也可以使用默认值,默认值生效的条件是对象的属性严格等于undefined

        var {
            x3 = 3
        } = {
            x: undefined
        };
        console.log(x3); //3
        var {
            x4 = 3
        } = {
            x4: null
        }
        console.log(x4); //null

由于数组是特殊的对象,所以可以对数组进行对象属性的解构

        let arr = [1, 2, 3];
        let {
            0: first1,//0号索引
            [arr.length - 1]: last1//2号索引
        } = arr;
        console.log(first1); //1
        console.log(last1); //3

猜你喜欢

转载自blog.csdn.net/Angela_Connie/article/details/110998252