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

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

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

基本用法

  •  如果解构失败,变量的值等于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. BufferedWriter中write与close函数使用

    BufferedWriter 是一个缓冲字符输出流,可以将要输出的内容先缓冲到一个字符数组中,等字符数组满了才一次性写到输出流内,默认的字符数组长度为8192.使用BufferedWriter 时需要 ...

  2. JMeter-正则表达式(取出银行卡号后4位)

    { : "custName":"奚红艳", : "banks": : [ : : { : : : "id":" ...

  3. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  4. 免费下载 SetupVPN CRX 3.7.0 for Chrome OR QQ浏览器

    免费下载 SetupVPN CRX 3.7.0 for Chrome OR QQ浏览器 Lifetime Free VPN(微劈嗯) 下载setupvpn 3.7.0的crx文件, 打开chrome的 ...

  5. oracle-密码

    Oracle 11g 默认用户名和密码安装ORACLE时,若没有为下列用户重设密码,则其默认密码如下: 用户名/密码 登录身份 说明sys/change_on_install SYSDBA 或 SYS ...

  6. Visual Studio2013的C语言编译器对C99标准的支持情况

    Visual Studio2013终于开始比较良好地支持C99特性了.在此之前,如果用C语言写代码的话,变量名都需要放到函数体的前面部分,代码写起来十分别扭. 而Visual Studio2013中的 ...

  7. Linux下的命令,删除文件夹下的所有文件,而不删除文件夹本身

    Linux下的命令,删除文件夹下的所有文件,而不删除文件夹本身 rm -rf *

  8. centOS7下的静态Ip的配置。

    centOS7下NAT的静态网卡的配置 最近在cenOS7下搭建大数据,发现centOS7配置静态ip的必要性.这篇博文就来谈谈如何VM虚拟机中配置centOS7的静态ip.如有不足,还望志同道合者纠 ...

  9. upload上传通关游戏

    第一关:后缀名限制,抓包改一下后缀. 前端脚本检测文件扩展名.当客户端选择文件点击上传的时候,客户端还没有向服务器发送任何消 息,前端的 js 脚本就对文件的扩展名进行检测来判断是否是可以上传的类型 ...

  10. 周一不睡觉,也要把pandas groupy 肝完,你该这么学,No.8

    如果图片无法观看,请移步 https://blog.csdn.net/hihell 学编程就跟打游戏一样一样的 为啥一样啊,因为要肝的 你看,学编程有很多好处 掉头发,有借口吧 不洗头,有借口吧 不洗 ...