美文网首页重学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 对象

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

  • 解构赋值和拓展运算符

    解构 1、数组解构 2、对象的解构赋值 3、字符串的解构赋值 4、数值和布尔值的解构赋值 5、函数参数的解构赋值 ...

  • 解构赋值

    ES 6 的解构赋值: 1,数组的解构赋值2,对象的解构赋值3,字符串的解构赋值4,数值和布尔值的解构赋值5,函数...

  • ES6变量的解构赋值

    目录 1、数组的解构赋值 2、对象的解构赋值 3、字符串的解构赋值 4、函数参数的解构赋值 5、用途 1、数组的解...

  • ES6 变量的解构赋值

    1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • ES6 2.解构赋值

    解构赋值 解构赋值的分类 数组解构赋值 对象解构赋值 字符串解构赋值 布尔值解构赋值 函数参数解构赋值 数值解构赋...

  • ES6知识点详解

    主要会贴上代码,这样容易理解些持续更新中...1.let const 2.解构赋值主要讲解了数组解构赋值和对象解构...

  • 第三章 变量的解构赋值

    1.数组的解构赋值2.对象的解构赋值3.字符串的解构赋值4.数值和布尔值的解构赋值5.函数参数的解构赋值6.圆括号...

  • ECMAScript6 -- 解构赋值

    解构赋值 数组的解构赋值 对象的解构赋值 特殊: 数组的解构赋值 如果右边不是数组,默认转换为类数组 对象的解构赋...

网友评论

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

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