美文网首页重学es6
解构赋值 讲解之4 对象

解构赋值 讲解之4 对象

作者: zhang463291046 | 来源:发表于2020-08-17 09:52 被阅读0次

    以下内容是引用或者借鉴别人的,自己只是做个笔记,方便学习。理解错误的地方,欢迎评论。如有侵权,私聊我删除,未经允许,不准作为商业用途

    只写属性名时,变量名将会使用属性名

    let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
    foo // "aaa"
    bar // "bbb"
    
    // 等同
    let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
    foo // "aaa"
    bar // "bbb"
    

    没有对应的同名属性,导致取不到值,变量的值等于undefined

    let { baz } = { foo: 'aaa', bar: 'bbb' };
    baz // undefined
    

    内部机制:先找到同名属性,再赋给对应的变量,因此真正被赋值的是后者,而不是前者

    let { foo: foo, bar: bar2 } = { foo: 'aaa', bar: 'bbb' };
    foo // "aaa"
    bar2 // "bbb"
    bar // ReferenceError: bar is not defined
    

    嵌套结构的对象

    let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]
    

    继承的属性

    const obj1 = {};
    const obj2 = { foo: 'bar' };
    Object.setPrototypeOf(obj1, obj2);
    
    const { foo } = obj1;
    foo // "bar"
    

    默认值:当一个数组成员严格等于undefined,默认值才会执行代码生效

    var {x = 3} = {x: 5};
    x // 5
    
    var {x: y = 3} = {x: 5};
    y // 5
    
    var {x = 3} = {};
    x // 3
    
    var {x = 3} = {x: undefined};
    x // 3
    
    var {x = 3} = {x: null};
    x // null
    

    特殊情况:解构数组赋值对象

    let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;
    first // 1
    last // 3
    

    相关文章

      网友评论

        本文标题:解构赋值 讲解之4 对象

        本文链接:https://www.haomeiwen.com/subject/dukjdktx.html