欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6——对象的解构赋值

程序员文章站 2022-07-02 10:32:52
...

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