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

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. 求组合数、求逆元、求阶乘 O(n)

    在O(n)的时间内求组合数.求逆元.求阶乘.·.· #include <iostream> #include <cstdio> #define ll long long ;// ...

  2. [C#]SQLite执行效率优化结论

    一.如要使用SQLite,可以从Visual Studio中的“程序包管理器控制台”输入以下命令完成安装: PM> Install-Package System.Data.SQLite.Core ...

  3. ceph学习

    网络: ceph必须要有公共网络和集群网络: public network:负责客户端交互以及osd与mon之间的通讯 cluster network:负责osd之间的复制,均衡,回填,数据恢复等操作 ...

  4. redis持久化策略梳理及主从环境下的策略调整记录

    redis是一个支持持久化的内存数据库,也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化.可以不定期的通过异步方式保存到磁盘上(即“半持久化模式”):也可以把每一次数据变化都写入到一个A ...

  5. Redis常见问题和解决办法梳理

    =============Redis主从复制问题和解决办法 ================= 一.Redis主从复制读写分离问题 1)数据复制的延迟读写分离时,master会异步的将数据复制到sla ...

  6. 全景3d

    Three.js Tour.js Run.js 3D Css3 酷家乐:https://www.kujiale.com/ 爱空间:http://bj.ikongjian.com/?utm_source ...

  7. poj3126 Prime Path(c语言)

    Prime Path   Description The ministers of the cabinet were quite upset by the message from the Chief ...

  8. mysql外键关联

    主键:是唯一标识一条记录,不能有重复的,不允许为空,用来保证数据完整性 外键:是另一表的主键, 外键可以有重复的, 可以是空值,用来和其他表建立联系用的.所以说,如果谈到了外键,一定是至少涉及到两张表 ...

  9. zookeeper安装和使用 windows环境（转）

    原文地址: http://blog.csdn.net/tlk20071/article/details/52028945 简介 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是G ...

  10. h5定位geolaction无法调试解决方法

    昨天接到一个在h5获取经纬度的需求,看了文档后,代码其实很简单,但在浏览器上调试就比较蛋疼了... 代码: function successfulCallback(position) { consol ...