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之解构的更多相关文章

  1. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  2. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  3. 深入理解ES6之解构

    变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...

  4. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  5. 进军es6(2)---解构赋值

    本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...

  6. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  7. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  8. ES6多层解构

    const info = { person: { name: 'xiaobe', other: { age: 22, } }, song: 'rolling', } // 解构person的内容 co ...

  9. ES6 之 解构赋值

    本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...

  10. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

随机推荐

  1. Java_Map接口

    Map接口 1.1 Map接口概述 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. Collection中的集合,元素是孤立存在 ...

  2. SpringBoot入门(一):从HelloWorld开始

    从0开始创建springBoot项目,话不多说,跟着我一步一步来就行了. 1.新建项目 1) 创建新项目,选择project, 点点点就好了 2)  Spring Initializr——>选择 ...

  3. 什么是WebP以及如何在WordPress中使用WebP图像

    图像通常是缓慢加载网页的最大原因之一.它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源.仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化.另一种选择是使 ...

  4. jQuery入门一(jQuery下载以及基本语法)

    1. jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是 ...

  5. STL map 详细用法

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个称为该关键字的值)的数据 处理能力. 需要的库 #include <map> ...

  6. hdu多校第八场Parentheses Matrix

    #include<bits/stdc++.h> using namespace std; ][]; int main() { int t; scanf("%d",&am ...

  7. 快速安装k8s,版本为1.13.8

    利用rpm快速部署k8s #!/bin/bash #快速安装k8s #by love19791126 107420988@qq.com pwd=$(pwd) masteripaddr=#(ip a s ...

  8. POI导入excel

    前言 在做后台管理的时候经常会用到excel导入的问题,就是将excel中的内容批量导入到数据库中,正好在新项目中我也做了excel导入的功能,来分享给大家,也给自己做个记录. 核心思想 excel导 ...

  9. MapReduce 运行全过程解析

    关注公众号,大家可以在公众号后台回复“博客园”,免费获得作者 Java 知识体系/面试必看资料. 前言 前面我们讲了 MapReduce 的编程模型,我们知道他主要分成两大阶段来完成一项任务,一是 m ...

  10. WPF:window设置单一开启

    方法一: Window window = new Window();window.ShowDialog; 方法二: 设置一个判断窗口打开状态的全局控制变量         private bool i ...