模式匹配:只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [a, b, c] = [1, 2, 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 let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4] let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

不完全解构:等号左边的模式,只匹配一部分的等号右边的数组。

let [x, y] = [1, 2, 3];
x // 1
y // 2 let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script> function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
} let [first, second, third, fourth, fifth, sixth] = fibs();
alert(sixth);
</script>
</body>
</html>

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let { foo, bar } = {foo: "aaa", bar: "bbb"};
console.log(foo);
console.log(bar);
</script>
</body>
</html>

结果:aaa,bbb

简写:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f);
console.log(l);
</script>
</body>
</html>

结果:

hello

world

数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
console.log(first); // 1
console.log(last); // 3
</script>
</body>
</html>

结果为:

1

3

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e); </script>
</body>
</html>

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function move({x = 0, y = 0} = {}) {
return [x, y];
}
console.log(move({x: 3, y: 8}));
console.log(move({x: 3}));
console.log(move({}));
console.log(move());
</script>
</body>
</html>

结果:

ECMAScript 6 -- 数组的解构赋值的更多相关文章

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

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

  2. ES6 数组的解构赋值

    数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...

  3. ECMAScript 6 变量的解构赋值

    1.数组的结构赋值 1.1 基本用法 可以用“模式匹配”的写法给数组的元素赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值.注意:元素的值和位置是一一对应关系,如果对应的位置没有值,就会解构 ...

  4. ES6变量的解构赋值(一)数组的解构赋值

    let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>und ...

  5. ES6学习-4 解构赋值(1)数组的解构赋值

    解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性. 数组解构赋值 在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像 ...

  6. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  7. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  8. 关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}

    关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种 ...

  9. ECMAScript 6 入门学习笔记(二)——变量的解构赋值

    一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...

随机推荐

  1. Ubuntu轻松编译openJDK

    花了三天在windows上搞openJDK,对bash本来就不熟,加上各种莫名依赖和脚本里的bug,身心俱疲.最后make all的时候产生一个莫名其妙的错误说什么有warning且-Werror置为 ...

  2. C# 读取Json配置文件

    今天需要用到读取Json配置文件的helper   结果竟然没找到合适的    微软自己有一个 不过不支持.Net fw 4.0 于是自己在NewTonSoft.Json的基础上  加了点小小的封装  ...

  3. Authorize的Forms认证

    页面请求步骤: 1.登录地址: http://localhost:4441/SysLogin/AdminLogin 2.登陆成功地址:http://localhost:4441/Frame/MainF ...

  4. 不重叠的线段 51nod

    链接 [http://www.51nod.com/onlineJudge/questionCode.html#problemId=1133&noticeId=468024] 题意 X轴上有N条 ...

  5. git 的安装及使用

    一.Git的安装和使用 1.1 Linux下版本库的创建 1.1.1 创建一个版本库 repository,在一个合适的地方创建一个空目录: root@zengyue:/# mkdir -p /hom ...

  6. PAT 1046 划拳

    https://pintia.cn/problem-sets/994805260223102976/problems/994805277847568384 划拳是古老中国酒文化的一个有趣的组成部分.酒 ...

  7. js十大排序算法:冒泡排序

    排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...

  8. No input file specified ci

    1. php.ini(/etc/php5/cgi/php.ini)的配置中这两项cgi.fix_pathinfo=1  (这个是自己添加的)

  9. Oracle数据库 查看表是否是 索引组织表的方法

    1. 最近在工作过程中发现 一个表插入很慢 以为是索引组织表, 所以一直有点纠结 但是发现 产品里面是没有IOT的 于是找了下公司的OCP 问了下 如何查看 就是 user_tables 视图里面的一 ...

  10. [转帖] select、poll、epoll之间的区别总结[整理] + 知乎大神解答 https://blog.csdn.net/qq546770908/article/details/53082870 不过图都裂了.

    select.poll.epoll之间的区别总结[整理] + 知乎大神解答 2016年11月08日 15:37:15 阅读数:2569 http://www.cnblogs.com/Anker/p/3 ...