ES6之解构
1、ES6允许按照一定的模式,从数组中和对象中提取值,对变量进行赋值,这种称为解构(Distructuring);
let [a,b,c] = [3,5,6];// 相当于 a=3,b=5,c=6
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于 undefined
另一种情况是不完全能解构,即等号左边的模式,只匹配一部分等号右边的数组。这种情况下,解构依然可以成功。
2、数组的解构赋值
完全解构:
let [a,b,c] = [6,7,8]; // a=6,b=7,c=8
不完全解构
let [a,[b],c] = [2,[4,6],7]; // a=2,b=4,c=7
集合解构:
let [head,...tail] = [1,3,4,5,6]; // head= 1,tail=[3,4,5,6]
可设置默认值(默认值也可以是函数):
let [x,y='b']=['a']; //x=a,y=b
3、对象解构赋值
①解构变量名必须存在于对象属性中,这样才能取到值;
let {name,age}={name:'zjl',age:18} //name='zjl',age=18 注意:左侧变量名必须在对象属性名中
②如果变量名与属性名不一致,必须写成下面这样,重命名
let {name:username,age}={name:'zjl',age:18} // username='zjl',age=18
③根据第二点可知,解构赋值是以下方式的简写
let {name:name,age:age}={name:'zjl',age:18} //所以当对象属性名和属性值相等时可以简写
④ 嵌套解构
let {p:[x,{y}]}={p:['hello',{y:'world'}]} // x=hello,y=world
⑤对象 解构也可以设置默认值
let {x:y=9}={10} //y=9
4、字符串的解构赋值
①解构时,字符串被转换成一个类似数组的对象。
const [a,b,c]='zjl' // a='z',b='j',c='l'
②对字符串的length属性进行解构
let {length}='hello' //length=5
5、数组和布尔值解构赋值
解构时,如果等号右边是数值和布尔值,则会先转为对象
let {toString: s} = 123; //函数 s === Number.prototype.toString true
let {toString: s} = true; //函数 s === Boolean.prototype.toString true
6、解构赋值的用途
① 交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
②函数返回值
function example() { return [1, 2, 3]; }
let [a, b, c] = example();
③函数参数的定义
function f([x, y, z]) { ... }
f([1, 2, 3]);
④模块的按需导入 导入指定的值
ES6之解构的更多相关文章
- ES6 对象解构
ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- 深入理解ES6之解构
变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- 进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...
- es6的解构赋值学习(1)
相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6多层解构
const info = { person: { name: 'xiaobe', other: { age: 22, } }, song: 'rolling', } // 解构person的内容 co ...
- ES6 之 解构赋值
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...
- ES6变量解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...
随机推荐
- git push 出现non-fast-forward的错误
1.git push origin liu_0909:daily_liu_0909 出现non-fast-forward的错误,证明您的本地库跟远程库的提交记录不一致,即 你的本地库版本需要更新2.g ...
- 执行shell脚本的四种方式
这篇文章主要介绍了Linux中执行shell脚本的4种方法,即总结在Linux中运行shell脚本的4种方法. 前提:bash shell 脚本的方法有多种,假设我们编写好的shell脚本的文件名为h ...
- QScintilla下载与编译
你好,我是大贺! Pou光明 大家好,我又回来了~~ 之前和大家分享的是在c/c++中通过python c api嵌入python解释器,主体都是和python相关的.其实最终要和大家分享的是如何做 ...
- Netty源码分析-- ThreadLocal分析(九)
为了更好地探讨Netty的内存模型,后面会用到,这里我还是决定跟大家一起看下ThreadLocal和FastThreadLocal的源码,有的时候我们在看源码的时候会一层层的遇到很多之前没有看过的内容 ...
- 浅谈 ASCII、Unicode、UTF-8,一目了然
对于ASCII.Unicode.UTF-8这三种编码方式我们经常用到,也经常挂到嘴边,但他们是怎么来的,为什么要存在,具体是怎么个规则,我们并没有做深入了解,下面,就带你看一下他们到底是怎么回事吧…… ...
- 邮件服务配置(虚拟域&虚拟用户)
邮件服务配置(虚拟域&虚拟用户) 现在我做的是: Linux + httpd + php + mariadb + postfix + dovecot + phpMyAdmin + postfi ...
- (13)ASP.NET Core 中的选项模式(Options)
1.前言 选项(Options)模式是对配置(Configuration)的功能的延伸.在12章(ASP.NET Core中的配置二)Configuration中有介绍过该功能(绑定到实体类.绑定至对 ...
- luogu1330_封锁阳光大学 图的遍历
传送门 解释:(转自洛谷题解) 首先,肯定要明确一点,那就是这个图是不一定联通的.于是,我们就可以将整张图切分成许多分开的连同子图来处理.然而最重要的事情是:如何处理一个连通图? 乍看下去,似乎无从下 ...
- ThreadLocal为什么会内存泄漏
1.首先看下ThreadLocal的原理图: 在ThreadLocal的生命周期中,都存在这些引用. 其中,实线代表强引用,虚线代表弱引用: 2.ThreadLocal的实现:每个Thread维护一个 ...
- java并发编程(十四)----(JUC原子类)对象的属性修改类型介绍
今天我们介绍原子类的最后一个类型--对象的属性修改类型: AtomicIntegerFieldUpdater,AtomicLongFieldUpdater,AtomicReferenceFieldUp ...