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

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. RabbitMQ TroubleShooting

    RabbitMQ是一款优秀的消息队列中间件,提供了稳定.监控完善的产品,但是软件就会有bug.为了前进路径可以畅通,我们必须了解出现的一些故障的快速处理方式,毕竟在生产环境,时间就是生命,尽快的处理是 ...

  2. ExtJs 编译

    前台使用Extjs加载源码的话是非常庞大的,编译之后就只加载一个app.js文件.这种技能如果不知道的话怕别人骂我不是个女程序员.哈哈哈哈哈. 打开cmd,进入程序Extjs的文件夹,如我的程序Ext ...

  3. 使用Megacli64对服务器物理磁盘做Raid并通过uuid方式挂载

    需求说明:公司最近来了一批服务器,用于大数据业务部署.数据节点服务器由14块物理磁盘,其中有2块是900G的盘,12块是4T的盘.在服务器系统安装时,进入系统的BIOS界面:1)将2块900G的磁盘做 ...

  4. Centos7系统下修改主机名操作笔记

    习惯了在Centos6系统下修改主机名的操作,但是Centos7下修改主机名的操作却大不相同!操作笔记如下: 在CentOS中,有三种定义的主机名:静态的(static),瞬态的(transient) ...

  5. cordova打包webapp

    cordova打包webapp 在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包.在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我 ...

  6. Notes of Daily Scrum Meeting（12.24）

    平安夜了,我们还在这里辛苦地赶代码,整个人都不好了... 今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 寻找大神帮助,调试网络连接 王迪 建立搜索的UI界面,把算法加入进去 金鑫 调试网络 ...

  7. 12.24daily_scrum

    今天是平安夜,大家开心地度过一个平安夜的同时,也完成了很多软件的调试工作,我们争取在下周前完成本阶段的所有调试工作. 具体工作如下: 具体工作: 小组成员 今日任务 明日任务 工作时间 李睿琦 软件调 ...

  8. 同步手绘板——PC端实现画板

    同步显示上设想通过bitmap传值再在web端显示,查阅资料发现有点难以实现,所以在web也生成一个画板,实现与android端类似功能,由android传递路径集合到web端显示.

  9. 剑指offer：复杂链表的复制

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  10. javac编译提示错误需要为 class、interface 或 enum

    HelloWorld.java:1: 需要为 class.interface 或 enum锘缝ublic class HelloWorld{^1 错误 这个错误出现的原因主要是在中文操作系统中,使用一 ...