前写了关于ES6数组的解构

现在 go on ;

解构不仅可以用于数组,还可以用于对象;

对象的解构和数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由他的位置决定的;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值;

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

这个例子显示变量没有对应的同名属性,导致取不到值,最后等于undefined;

如果变量名与属性名不一致,必须写成下面这样。

也就是说,对象的解构赋值是下面形式的简写;

  1. let{foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"};

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋值给对应的变量。真正呗赋值的是后者,而不是前者;

  1. let{ foo:baz} = {foo:"aaa",bac:"ccc"}
  2.  
  3. baz; //aaa
  4.  
  5. foo // undefined

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

其实说白了,就是位置的问题;

  1. let{foo,baz} = {foo:"aaa",baz:"bbb"}
  2. //上面的代码就等于
  3. let{foo:foo,baz:baz} = {foo:"aaa",baz:"bbb"}
  4.  
  5. let{foo:abc,baz} = {foo:"aaa",baz:"ccc"};
  6. //这个时候,foo只是一个模式。而abc才是变量,所以主要才是赋值给abc,而不是模式foo

总而言之,就是一辆车foo 当里面没有乘客时,整个车都是叫foo的人,当出现乘客abc时,这个时候变量就是abc,而赋值也不再赋值给foo,赋值给了abc;

与数组一样,解构也可以用于嵌套解构的对象。\

  1. let km = {
  2. p:[
  3. 'hello',
  4. {o:'world'}
  5. ]
  6. };
  7.  
  8. let {p:[n,{o}]} = km;
  9.  
  10. undefined
  11. n
  12. //"hello"
  13. o
  14. //"world"

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

要想p被赋值,按照下面的模式就可以赋值

  1. let km = {
  2. p:[
  3. 'hello',
  4. {o:'world'}
  5. ]
  6. };
  7.  
  8. let {p,p:[n,{o}]} = km;

归根结底,就是一句话,哪个位置对应哪个变量,如果,该位置只有单个变量,则就是那个;

当然还有许多奇怪的问题;

附上个阮一峰的链接吧:http://es6.ruanyifeng.com/#docs/destructuring

关于ES6 的对象解构赋值的更多相关文章

  1. ES6变量的解构赋值(二)对象的解构赋值

    前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...

  2. ES6学习-5 解构赋值(2)对象的解构赋值

    啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...

  3. ES6 - Note2:解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  4. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

  5. ES6学习之 解构赋值

    最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...

  6. 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 ...

  7. es6基础(2)--解构赋值

    //解构赋值 { let a,b,rest; [a,b]=[1,2]; console.log(a,b); } //数组解构赋值 { let a,b,rest; [a,b,...rest]=[1,2, ...

  8. 【es6】变量解构赋值

    1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...

  9. ES6 对象解构赋值(浅拷贝 VS 深拷贝)

    对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; co ...

随机推荐

  1. Matlab绘图基础——绘制三维曲线

    %% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...

  2. 设计模式之 观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本章我们讨论一个除前面的单例 ...

  3. 微信公众平台开发,图文回复、access_token生成调用、以及微信SDK的实现(2)

    上一节课,我给大家分享了微信API接入以及事件推送的回复,这是微信开发的第二节课,重点给说一说单图文回复,多图文回复,access_token,微信SDK. 公众号消息回复很多种形式,常见的形式有,文 ...

  4. Java之排序

    1.插入排序 假设第一个数已经是排好序的,把第二个根据大小关系插到第一个前面或维持不动,把第三个根据前面两个的大小关系插到对应位置,依次往后. public class InsertSort { pu ...

  5. 福州大学W班-助教总结

    开学初对自己的期望 在即将到来的学期前,我希望我可以做到以下几点: 1.多参与同学的课程设计,并提出自己的见解 2.不断提高个人的专业技能,活到老学到老 3.能够及时对同学的博客进行评论,并给出有用的 ...

  6. sql 几种循环方式

    1:游标方式 ALTER PROCEDURE [dbo].[testpro] as ) --日期拼接 ) --仪表编号 ) --数据采集表 ) --数据采集备份表 ) ) begin set @yea ...

  7. 使用 Vue 和 epub.js 制作电子书阅读器

    ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...

  8. OpenShift实战(三):OpenShift持久化存储Registry

    1.查看Registry组件的DC关于volume的定义 可以看到registry-storage这个挂载点被指向了一个/registry目录,使用的是empty directory,即数据保存在计算 ...

  9. idea 找不到classpath 为resource下的xml

    注入时不能自动找到在src/main/resources下的xml. @ContextConfiguration(locations = { "classpath:applicationCo ...

  10. Spring Security 入门(3-11)Spring Security 的登录密码验证过程 UsernamePasswordAuthenticationFilter

    认证过程如下 一.先判断请求(请求必须是post请求)地址是否为配置的 login-processing-url 值(默认/j_spring_security_check),如果不是,则放行,进入下一 ...