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

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. MySQL数据库对象-索引

    1. 概述2. 索引分类2.1 不同索引的概念2.1.1 普通索引2.1.2 唯一索引2.1.3 全文索引2.1.4 多列索引3. 索引操作3.1 普通索引3.1.1 创建表时创建普通索引3.1.2 ...

  2. PAT甲题题解-1130. Infix Expression (25)-中序遍历

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789828.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  3. Linux课题实践四——ELF文件格式分析

    2.4   ELF文件格式分析 20135318 刘浩晨 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目 ...

  4. 第三个spring冲刺第3天

    基本功能跟界面都完成了,今天小组开了个会,基于跟别的小组对比的效果,感觉自己组的效果没别人的好,很多方面还欠缺,所以我们会继续跟进完善.

  5. 分布式版本控制系统Git的安装与使用 第二次作业

    (本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103) 一.安装Git bash软件和安装notepad++ 二 ...

  6. HDOJ2007_平方和与立方和

    应该注意到一个细节是题目中没有说明输入的两个数据一定是先小后大的关系,所以需要做一次判断.其他的比较简单. HDOJ2007_平方和与立方和 #include<iostream> #inc ...

  7. react 动态获取数据

    如果reander()里面的dom元素是动态获取的,就要将函数放到setSTATE()里面执行

  8. slot 插槽的作用域用法(摘自vue.js 官网)

    有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽.例如一个简单的 <todo-list> 组件的模板可能包含了如下代码: <ul> <li v-for=& ...

  9. octave基本指令1

    octave基本指令1 注释 使用: disp 输出指令 eg: >>a = pi; >>disp(sprintf('2 decimals:%0.2f'a)) 2 decima ...

  10. 『编程题全队』"Gugua"事务管理系统项目宣传文案

    一.项目简介 1.项目简介 Gugua是为了解决有事务管理需要的人群的痛苦, 他们需要 一个便利和高效的个人和团体事务管理平台,但是现有的方案并没有很好地解决这些需求,我们有独特的办法是提供跨平台的软 ...