前写了关于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 的对象解构赋值的更多相关文章

  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. ES6 中 Promise 详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...

  2. Java 并发编程实践基础 读书笔记: 第二章 构建线程安全应用程序

    1,什么是线程安全性? 简单概括就是一个类在多线程情况下能安全调用就是线程安全 2,Servlet  的线程安全性  默认是非线程安全的,写servlet代码的时候需要注意线程安全,注意同步 3,vo ...

  3. Beta冲刺第六天

    一.昨天的困难 没有困难. 二.今天进度 1.林洋洋:更新申请ip为域名,去除druid数据源统计 2.黄腾达:协作详情中添加成员对话框优化 3.张合胜:修复侧栏菜单mini状态下不能显示问题 三.明 ...

  4. beta版本复审

    C++team复审 小组 优点 缺点 打分 MyGod小组 MyGod团队开发了一个让武汉大学的学生能够方便地了解校内二手物品交易信息,并进行相应的交易的安卓app.出发点不错,有创新点.使用了一下他 ...

  5. 201621123050 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承.抽象.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 1.3 可选:使用常规方法 ...

  6. 20162328蔡文琛week05

    学号 20162328 <程序设计与数据结构>第X周学习总结 教材学习内容总结 面向对象程序设计的核心是类的定义,它代表定义了状态和行为的对象. 变量的作用域依赖于变量声明的位置,作用域决 ...

  7. 201621123057 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...

  8. CPP链表示例

    #include<iostream> #include<stdlib.h> using namespace std; typedef struct Student_data { ...

  9. EXT3文件系统误删除导致文件系统中的邮件丢失恢复方法

    一.故障描述 由8块盘组成的RAID5, 上层是EXT3文件系统,由于误删除导致文件系统中的邮件丢失 二.镜像磁盘为防止数据恢复过程中由于误操作对原始磁盘造成二次破坏, 使用winhex软件为每块磁盘 ...

  10. IDEA之Jrebel插件激活

    问题: 码农日常中,热部署是必不可少的,而jrebel插件很好的实现热部署功能. IDEA下载jrebel插件,可以免费试用15天,但之后就无法使用.因为Jrebel是收费的. 解决方法: 楼主也是百 ...