对象的解构与数组有一个重要的不同。

数组的元素是按次序排列的,变量的取值由它的位置决定

而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

基本用法

  •  如果解构失败,变量的值等于undefined。 

    let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
    foo // "aaa"
    bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' };
    baz // undefined
  • 如果变量名与属性名不一致,必须写成下面这样。
    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    foo // error: foo is not defined

    上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo

对象解构默认值

  • 默认值生效的条件是,对象的属性值严格等于undefined

    var {x = 3} = {};
    x // var {x, y = 5} = {x: 1};
    x //
    y // var {x: y = 3} = {};
    y // var {x: y = 3} = {x: 5};
    y // var { message: msg = 'Something went wrong' } = {};
    msg // "Something went wrong" var {x = 3} = {x: undefined};
    x // var {x = 3} = {x: null};
    x // null
  • 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
    // 错误的写法
    let x;
    {x} = {x: 1};
    // SyntaxError: syntax error上面代码的写法会报错,
    //因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。
    //只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。 // 正确的写法
    let x;
    ({x} = {x: 1});
  • 解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
    ({} = [true, false]);
    ({} = 'abc');
    ({} = []);

    上面的表达式虽然毫无意义,但是语法是合法的,可以执行。

  • 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
    let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;
    first //
    last //

【ES6 】ES6 解构赋值--对象解构赋值的更多相关文章

  1. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  2. 关于ES6 的对象解构赋值

    之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...

  3. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  4. (3)ES6解构赋值-对象篇

    对象的解构赋值(可以不按顺序,但是key必须一样否则为undefined) //demo1 var {name,age} = { name: "Jewave", age:26 }; ...

  5. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  6. ES6(二) Destructuring-变量的解构赋值

    1.解构的含义 允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构. 解构赋值时,只要等号右边的值不是对象,就先将其转换成对象. 本质上,这种写法属于 “模式匹配”,只要两边模式相同,左 ...

  7. ES6标准入门之变量的解构赋值简单解说

    首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...

  8. ES6系列_3之变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...

  9. ES6第三节:变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...

随机推荐

  1. BGP多线 有些BGP IP也会被极少数运营商劫持 取Ip逻辑

    小结: 1.租用的服务器只有一个IP,用户的访问路线是由路由器根据访客的实际访问速度选择最优访问路径,来选择访问的.而且不占用任何的服务器资源.服务器的上行和下行都是有路由器来选择最佳的路线,所以这样 ...

  2. linux之i2c子系统维护者源码仓库地址

    仓库地址: git://git.kernel.org/pub/scm/linux/kernel/git/wsa/linux.git

  3. SQL-W3School-基础:SQL WHERE 语句

    ylbtech-SQL-W3School-基础:SQL WHERE 语句 1.返回顶部 1. WHERE 子句用于规定选择的标准. WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句 ...

  4. HTM概述

    Html: Hyper Text Markup Language 超文本标记语言 超文本: 超出纯文本的范畴 标记语言: 标记其实就是标签 标签的格式: <标签名称>

  5. Markdown使用TOC自动生成导航栏

    经常使用markdown 的玩家一定很想要一个自动生成的导航栏吧,自己写的基本思路就是 轮询监听滚动条的位置,通过抛锚和跳锚实现,这里介绍一下今天的主角,markdown-toc插件: https:/ ...

  6. 使用badusb“烧鹅”制作“百度U盘”

    HID攻击:USB HID攻击技术是一种利用USB接口伪造用户击键行为实施是攻击的方式.通过恶意USB HID设备连接主机后发送伪造的按键命令,篡改系统设置.运行恶意功能.这种技术区别于传统的USB攻 ...

  7. python用户评论标签匹配的解决方法

    python用户评论标签匹配的解决方法 这篇文章主要为大家详细介绍了python用户评论标签匹配的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 我们观察用户评论发现:属性词往往和情感词伴 ...

  8. Vue学习笔记(二)

    1.引入组件需要注意的事项说明和步骤: 第一步,引入对应的组件: import Hello2 from './components/Hello2' 第二步: 需要注册该组件才可以使用 <scri ...

  9. 分析UIS-RNN源代码的代码规范和风格

    结合工程实践选题相关的一套源代码,根据其编程语言或项目特点,分析其在源代码目录结构.文件名/类名/函数名/变量名等命名.接口定义规范和单元测试组织形式等方面的做法和特点: 列举哪些做法符合代码规范和风 ...

  10. OpenGL(6)——坐标系

    在掌握基本变换后,学习如何变换coordinate space. 对coordinate space进行变换的目的是将local space中各顶点坐标转换成normalized device coo ...