前面我们知道,数组的结构赋值需要按顺序进行赋值,

let [a,,c] = [,,]
console.log(a);//
console.log(c);//3 let [a,b] = [1];
console.log(a);//1
console.log(b);//undefined

而对象的解构赋值则是通过对象属性进行赋值,不需要按照顺序进行,而无法匹配的则为undefined

let {a,b,c}={b:,a:};
console.log(a);//
console.log(b);//
console.log(c);//undefined

实际上,对象的解构赋值的完整写法为:

let {a:a,b:b,c:c}={b:,a:};
console.log(a);//2
console.log(b);//1
console.log(c);//undefined

例如上边的例子中,等式左边属性名称与变量名相同,因此可以直接写成let {a,b,c}={b:1,a:2};

同理如果属性名与变量名不同,则不能简写

let {a:b} = {a:};
console.log(b);//1
//注意:b为变量名,a为属性名,不能够直接输出a

对象的解构赋值也可以设置变量默认值,默认值的生效条件为:对象属性的值严格("===")等于undefined

var {x = } = {};//x==>3

var {x = } = {x: undefined};//x==>3

var {x = } = {x: null};//x==>null

var {x = } = {x:};//x==>0
var {x: y = 3} = {};//y==>3

数组本身也是特殊的对象,可以进行对象的解构赋值

var arr=[,,];
let {:first,[arr.length-]:last}=arr;
console.log(first);//
console.log(last);//

对象解构赋值的应用:

1.可以很方便获取到现有对象的属性或方法

//console对象中log属性拥有打印功能,
//console对象赋值给创建的对象中的log,因此可以直接log()实现打印功能
const { log } = console;
log('hello') // hello 等同于console.log();

ES6变量的解构赋值(二)对象的解构赋值的更多相关文章

  1. ES6入门之变量的解构赋值(二)

    前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...

  2. 深入理解ES6(二)(解构赋值)

    变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...

  3. 浅谈ES6数组及对象的解构

    一.数组的解构,ES6的新特性,主要是方便操作数组,节省不必要的代码,提高代码质量. 上图例子中, example1: 之前想要获取数组中的值,只能挨个获取下标,然后取值 example2:ES6新特 ...

  4. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

  5. 浅谈C++中对象的复制与对象之间的相互赋值

    C++对象的复制 有时需要用到多个完全相同的对象,例如,同一型号的每一个产品从外表到内部属性都是一样的,如果要对每一个产品分别进行处理,就需要建立多个同样的对象,并要进行相同的初始化,用以前的办法定义 ...

  6. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

  7. ES6变量解构赋值的用法

    一.数组赋值(从数组中提取值,按照对应位置,对变量赋值) 1. 完全解构(变量与值数目相等) let arr = [1, 2, 3]; let [a,b,c] = arr; console.log(a ...

  8. ES6 变量与解构(二)

    一.变量的声明与使用 [测试示例需要在node环境中测试,浏览器环境下并不完全兼容ES6代码]ES6中可以使用 {} 来包含任意一段代码,被 {} 包裹的内容称为一个代码块(局部作用域) let关键字 ...

  9. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

随机推荐

  1. java spring是元编程框架---使用的机制是注解+配置

    java spring是元编程框架---使用的机制是注解+配置

  2. 《少年的你》票房被刷爆?让我用python分析一波它好看在哪里!

    最近少年的你刷爆票房,但是是真好看还是假好看,我们也不知道,所以让我们用python来分析一下~ 票房过12亿 两位主演粉丝加起来过亿 电影话题量过亿 豆瓣8.4分, 时光网8.4分, IMDB 7. ...

  3. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...

  4. docker tomcat8 mysql8部署常见错误

    出现docker: out of memory bug ,内存溢出 解决方法: free -mh 应该看一下内存 内存优化/买内存 出现java.util.zip.ZipException: erro ...

  5. ENDIAN的由来及BIG-EDIAN 和LITTLE-ENDIAN(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/kingmax54212008/arti ...

  6. acwing 47. 二叉树中和为某一值的路径

    地址 https://www.acwing.com/problem/content/description/45/ 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径. 从树的根结 ...

  7. 【洛谷5335】[THUSC2016] 补退选(指针实现Trie)

    点此看题面 大致题意: 三种操作:加入一个字符串,删除一个字符串,求最早什么时候以某个字符串为前缀的字符串个数超过给定值. \(Trie\) 这道题显然是\(Trie\)的暴力裸题. 考虑我们对于\( ...

  8. Win32 程序开发:窗口类结构体 WNDCLASS 和 WNDCLASSEX

    一.窗口类结构体简介 窗口类结构体包含了窗口的各种参数信息.比如:窗口的图标.菜单栏.背景颜色.窗口的消息处理等等. 窗口类结构体有两个:WNDCLASS(早期版本) 和 WNDCLASSEX(新版本 ...

  9. IT兄弟连 Java语法教程 注释与编码规范

    在程序代码中适当地添加注释可以提高程序的可读性和可维护性.好的编码规范可以使程序更易阅读和理解.下面将介绍Java中的集中代码注释以及应该注意的编码规范. 代码注释 通过在程序代码中添加注释可提高程序 ...

  10. 【Linux命令】常用系统工作命令11个(echo、date、reboot、poweroff、wget、ps、top、pidof、kill、killall、pkill)

    目录 echo命令 date命令 reboot命令 poweroff命令 wget命令 ps命令 top命令 pidof命令 kill命令 killall命令 pkill命令 一.echo命令 ech ...