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; ...
随机推荐
- Java_Map接口
Map接口 1.1 Map接口概述 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. Collection中的集合,元素是孤立存在 ...
- SpringBoot入门(一):从HelloWorld开始
从0开始创建springBoot项目,话不多说,跟着我一步一步来就行了. 1.新建项目 1) 创建新项目,选择project, 点点点就好了 2) Spring Initializr——>选择 ...
- 什么是WebP以及如何在WordPress中使用WebP图像
图像通常是缓慢加载网页的最大原因之一.它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源.仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化.另一种选择是使 ...
- jQuery入门一(jQuery下载以及基本语法)
1. jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是 ...
- STL map 详细用法
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个称为该关键字的值)的数据 处理能力. 需要的库 #include <map> ...
- hdu多校第八场Parentheses Matrix
#include<bits/stdc++.h> using namespace std; ][]; int main() { int t; scanf("%d",&am ...
- 快速安装k8s,版本为1.13.8
利用rpm快速部署k8s #!/bin/bash #快速安装k8s #by love19791126 107420988@qq.com pwd=$(pwd) masteripaddr=#(ip a s ...
- POI导入excel
前言 在做后台管理的时候经常会用到excel导入的问题,就是将excel中的内容批量导入到数据库中,正好在新项目中我也做了excel导入的功能,来分享给大家,也给自己做个记录. 核心思想 excel导 ...
- MapReduce 运行全过程解析
关注公众号,大家可以在公众号后台回复“博客园”,免费获得作者 Java 知识体系/面试必看资料. 前言 前面我们讲了 MapReduce 的编程模型,我们知道他主要分成两大阶段来完成一项任务,一是 m ...
- WPF:window设置单一开启
方法一: Window window = new Window();window.ShowDialog; 方法二: 设置一个判断窗口打开状态的全局控制变量 private bool i ...