美文网首页
ES6 结构赋值

ES6 结构赋值

作者: zhao_ran | 来源:发表于2021-04-18 20:17 被阅读0次
  1. 对象的解构赋值
    2.1 嵌套结构的对象
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

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

注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

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

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

另一个例子。

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

上面代码有三次解构赋值,分别是对locstartline三个属性的解构赋值。注意,最后一次对line属性的解构赋值之中,只有line是变量,locstart都是模式,不是变量。

下面是嵌套赋值的例子

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

// 报错
let {foo: {bar}} = {baz: 'baz'};

上面代码中,等号左边对象的foo属性,对应一个子对象。该子对象的bar属性,解构时会报错。原因很简单,因为foo这时等于undefined,再取子属性就会报错。

注意,对象的解构赋值可以取到继承的属性。

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

const { foo } = obj1;
foo // "bar"

上面代码中,对象obj1的原型对象是obj2foo属性不是obj1自身的属性,而是继承自obj2的属性,解构赋值可以取到这个属性。

相关文章

  • 6.ECMAScript6(ES6)- ES6的结构与赋值

    1、ES6的结构与赋值 (1)允许直接给数组进行赋值,也叫模版匹配 (2)ES6的对象与结构赋值 (3)对已经定义...

  • 26

    ES6 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,解构赋值主要...

  • JavaScript26

    ES6 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,解构赋值主要...

  • js day26

    ES6 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,解构赋值主要...

  • ES6

    ##ES6 ### 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,...

  • 2018-06-01解构赋值

    ##ES6 ### 一、解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值...

  • 变量的结构赋值

    合理使用ES6中变量的结构赋值会改变代码的整洁度和流畅性。 数组的结构赋值 1.如果结构赋值不成功,变量值就等于u...

  • ES6基础教程(第二节)——解构赋值

    es6在给对象赋值方面运用了一个新功能,称为解构赋值,以下是从数组的解构赋值,对象的解构赋值,字符串的结构赋值,以...

  • ES6 结构赋值

    对象的解构赋值2.1 嵌套结构的对象 注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写...

  • JavaScript ES6 - 解构赋值

    ES6 语法: 解构赋值 本文主要讲解 '解构赋值' 相关内容, 从两个方面入手: 1. 什么是结构赋值; 2. ...

网友评论

      本文标题:ES6 结构赋值

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