数组的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a,b,c] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

下面的同样会被解析

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3 let [ , , third] = ["foo", "bar", "baz"];
third // "baz" let [x, , y] = [1, 2, 3];
x // 1
y // 3

如果解构不成功,变量的值就等于undefined。

如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对于 Set 结构,也可以使用数组的解构赋值。

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x) // "a"
console.log(y) // "b"
console.log(z) // "c"

解构赋值允许指定默认值。

var [foo = true] = [];
console.log(foo) // true var [x, y = 'b'] = ['a']; // x='a', y='b'
console.log(x);
console.log(y);
var [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
console.log(x);
console.log(y); var [x, y = 'b'] = ['a', 'c']; // x='a', y='c'
console.log(x);
console.log(y);

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

var [x = 1] = [undefined];
console.log(x) // 1 var [x = 1] = [null];
console.log(x) // null

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined

ES6 数组的解构赋值的更多相关文章

  1. ES6 - Note2:解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  2. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  3. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

  4. 关于ES6 的对象解构赋值

    之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...

  5. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  6. ES6_入门(4)_数组的解构赋值

    //2017/7/14 //变量的解构赋值(解构:Destructuring) //(1)数组的解构赋值 let [a,b,c]=[1,2,3];//模式匹配,只要等号两边的模式相同,左边的变量就会被 ...

  7. ES6入门教程---解构赋值和字符串扩展

    解构赋值: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 数组的解构赋值: 按照对应的顺序解构. var arr = [1,[2,3]]; ...

  8. ES6变量的解构赋值

    变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...

  9. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

随机推荐

  1. 使用Eclipse+axis2一步一步发布webservice

    1.下载axis2相关软件http://axis.apache.org/axis2/java/core/download.html 2.Java环境配置:JAVA_HOME.JRE_HONE.PATH ...

  2. substring用法

    字符串截取,substring(int beginIndex) 返回一个新的字符串,它是此字符串的一个子字符串. substring(int beginIndex, int endIndex) 返回一 ...

  3. SGU 106 在区间范围内的线性方程解个数

    题意:求解方程ax+by+c=0,在区间x1->x2和y1->y2的解的个数. 看似简单,真心a的不容易啊! 开始跪于第8组数据,原因是没用long long !后来改了,跪于12组,超时 ...

  4. python3.x对python2.x变动

    原文地址:http://rookiedong.iteye.com/blog/1185403 python 2.4 与 python 3.0 的比较 一. print 从语句变为函数 原:     pr ...

  5. CODEVS_2800 送外卖 状态压缩+动态规划

    原题链接:http://codevs.cn/problem/2800/ 题目描述 Description 有一个送外卖的,他手上有n份订单,他要把n份东西,分别送达n个不同的客户的手上.n个不同的客户 ...

  6. JDK内置工具jstack(Java Stack Trace)(转)

    1.介绍 jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的js ...

  7. 【String】String.format(format,args...)的使用解析

    String.format(format,args...)的使用解析 使用kotlin 中使用示例 ================================================== ...

  8. Sentinel实现Redis高可用

    实现目标: 一主两从,集群起始VIP在master上边,如果当前master挂了,sentinel自动选出一个slave当选master,并把VIP漂移到这台机器,然后把另一台slave指向的mast ...

  9. C语言的代码内存布局具体解释

    一个程序本质上都是由 BSS 段.data段.text段三个组成的.这种概念在当前的计算机程序设计中是非常重要的一个基本概念,并且在嵌入式系统的设计中也非常重要,牵涉到嵌入式系统执行时的内存大小分配, ...

  10. 【转载】.NET Remoting学习笔记(一)概念

    目录 .NET Remoting学习笔记(一)概念 .NET Remoting学习笔记(二)激活方式 .NET Remoting学习笔记(三)信道 背景 自接触编程以来,一直听过这个名词Remotin ...