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


等号与右边两个同名属性的次序不一致,但是对取值没有任何的影响

这个例子显示变量没有对应的同名属性,导致取不到值,最后等于undefined;
如果变量名与属性名不一致,必须写成下面这样。


也就是说,对象的解构赋值是下面形式的简写;
let{foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"};
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量。真正呗赋值的是后者,而不是前者;
let{ foo:baz} = {foo:"aaa",bac:"ccc"}
baz; //aaa
foo // undefined
上面的代码中。foo是匹配的模式,baz才是变量。真正被赋值给变量的baz,而不是模式foo.
其实说白了,就是位置的问题;
let{foo,baz} = {foo:"aaa",baz:"bbb"}
//上面的代码就等于
let{foo:foo,baz:baz} = {foo:"aaa",baz:"bbb"}
let{foo:abc,baz} = {foo:"aaa",baz:"ccc"};
//这个时候,foo只是一个模式。而abc才是变量,所以主要才是赋值给abc,而不是模式foo
总而言之,就是一辆车foo 当里面没有乘客时,整个车都是叫foo的人,当出现乘客abc时,这个时候变量就是abc,而赋值也不再赋值给foo,赋值给了abc;
与数组一样,解构也可以用于嵌套解构的对象。\
let km = {
p:[
'hello',
{o:'world'}
]
};
let {p:[n,{o}]} = km;
undefined
n
//"hello"
o
//"world"

注意下,这里的p是模式,不是变量,因此不会被赋值

要想p被赋值,按照下面的模式就可以赋值
let km = {
p:[
'hello',
{o:'world'}
]
};
let {p,p:[n,{o}]} = km;
归根结底,就是一句话,哪个位置对应哪个变量,如果,该位置只有单个变量,则就是那个;
当然还有许多奇怪的问题;
附上个阮一峰的链接吧:http://es6.ruanyifeng.com/#docs/destructuring
关于ES6 的对象解构赋值的更多相关文章
- ES6变量的解构赋值(二)对象的解构赋值
前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...
- ES6学习-5 解构赋值(2)对象的解构赋值
啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...
- ES6 - Note2:解构赋值
ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...
- es6学习笔记--解构赋值
昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构 ...
- ES6学习之 解构赋值
最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...
- es6 语法 (解构赋值)
1.结构赋值 { let a,b,c; [a,b] = [1,2]; console.log(a,b); //1,2} { let a,b,rest; [a,b,...rest] = [1,2,3,4 ...
- es6基础(2)--解构赋值
//解构赋值 { let a,b,rest; [a,b]=[1,2]; console.log(a,b); } //数组解构赋值 { let a,b,rest; [a,b,...rest]=[1,2, ...
- 【es6】变量解构赋值
1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...
- ES6 对象解构赋值(浅拷贝 VS 深拷贝)
对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; co ...
随机推荐
- 【Docker】 积累
■ 磁盘空间和docker资源之间的关系 通过docker info | grep Space可以看到Docker占据的磁盘空间的信息.其中Data Space Used表示实际上docker资源占用 ...
- 设计模式 --> (12)装饰模式
装饰模式 时常会遇到这样一种情况,我已经设计好了一个接口,并且也有几个实现类,但是这时我发现我设计的时候疏忽了,忘记了一些功能,或者后来需求变动要求加入一 些功能,最简单的做法就是修改接口,添加函数, ...
- jQuery学习笔记 .addClass()/.removeClass()简单学习
使用jQuery或javaScript来动态改变页面中某个或部分元素的样式,为了实现这样的功能,我们往往都是使用jQuery或javaScript来控制HTML中DOM的类名(class)从而实现增加 ...
- 基于ECharts的饼状数据展示
一.导入ECharts文件 二.HTML代码 大小后期自己调 三.后台代码 四.js代码 不要问为什么- -我是扒下来的 可复制代码: //基于准备好的dom,初始化echarts实例 var myD ...
- Python+reuqests自动化接口测试
1.最近自己在摸索Python+reuqests自动化接口测试,要实现某个功能,首先自己得有清晰的逻辑思路!这样效率才会很快! 思路--1.通过python读取Excel中的接口用例,2.通过pyth ...
- linux分析、诊断及调优必备的“杀器”之二
先说明下,之所以同类内容分成多篇文章,不是为了凑篇数,而是为了便于自己和大家阅读,下面继续: 7.sar The sar command is used to collect, report, and ...
- alpha冲刺第三天
一.合照 二.项目燃尽图 三.项目进展 今天是一个瓶颈期,在昨天被困住的地方今天还是没能解决,所以今天的项目进展并没有发生什么变化. 今天晚上xl和lj去实验室找学姐了,在学姐的帮助下大概有了一点思路 ...
- 进程与fork()、wait()、exec函数组
进程与fork().wait().exec函数组 内容简介:本文将引入进程的基本概念:着重学习exec函数组.fork().wait()的用法:最后,我们将基于以上知识编写Linux shell作为练 ...
- C语言——总结回顾
1.当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 答:①当初选择计算机专业是出于一种选择,是一种带着冲 ...
- win7下,使用django运行django-admin.py无法创建网站
安装django的步骤: 1.安装python,选择默认安装在c盘即可.设置环境变量path,值添加python的安装路径. 2.下载ez_setup.py,下载地址:http://peak.tele ...