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; ...
随机推荐
- 入门MySQL——架构篇
前言: 上篇文章我们介绍了入门MySQL的基本概念,看完上篇文章,相信你应该了解MySQL的前世今生了吧.本篇文章将带你从架构体系来学习MySQL.我认为学习MySQL架构体系应该是入门阶段必须的, ...
- Linux下zookeeper下载与安装教程
原文连接:(http://www.studyshare.cn/blog-front//blog/details/1169/0)一.下载 官网下载:点这里 百度网盘下载:点这里 官网下载图示: jav ...
- S3 介绍
S3 是ceph rgw的基础,在学习RGW之前,先了解S3.
- NOIP 2018旅行题解
从佳木斯回来刷一刷去年没A的题 题目描述 小 Y 是一个爱好旅行的 OIer.她来到 X 国,打算将各个城市都玩一遍. 小Y了解到, X国的 nn 个城市之间有 mm 条双向道路.每条双向道路连接两个 ...
- .Net异步编程详解入门
前言 今天周五,早上起床晚了.赶着挤公交上班.但是目前眼前有这么几件事情.刷牙洗脸.泡牛奶.煎蛋.在同步编程眼中.先刷牙洗脸,然后烧水泡牛奶.再煎蛋,最后喝牛奶吃蛋.毫无疑问,在时间紧促的当下.它完了 ...
- appcan IDE 无法 请求数据
我们4月27号从4.0.1升级到4.0.2后,IDE本地预览get请求不到数据.但是在线打包安装到手机又是正常的. 先下载 "uexXmlHttpMgr.rar",下载链接:htt ...
- java并发编程(十九)----(JUC集合)总体框架介绍
本节我们将继续学习JUC包中的集合类,我们知道jdk中本身自带了一套非线程安全的集合类,我们先温习一下java集合包里面的集合类,然后系统的看一下JUC包里面的集合类到底有什么不同. java集合类 ...
- 剑指offer-链表
1. 链表中环的入口节点 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 思路一:用哈希表存已经遍历过的节点,O(1)复杂度查找,如果再次遇到就是环入口 # -*- cod ...
- ElasticSearch 安装与使用
目录 Elastic Search Docker中安装ElasticSearch Elastic Search API得使用 创建Index: 修改Index Mapping: 修改Index Set ...
- Eureka 缓存结构以及服务感知优化
目录 Eureka-Client获取注册信息 Eureka-Server管理注册信息 服务感知优化 果然好记性不如烂笔头,再简单的东西不记录下来总是会忘的! 本文首先会分析eureka中的缓存架构.并 ...