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

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. 一文让你完全弄懂Stegosaurus

    国内关于 Stegosaurus 的介绍少之又少,一般只是单纯的工具使用的讲解之类的,并且本人在学习过程中也是遇到了很多的问题,基于此种情况下写下此文,也是为我逝去的青春时光留个念想吧~ Stegos ...

  2. Webpack 2 视频教程 005 - Webpack 编译输出日志

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  3. 总结and规划

    不知不觉中又过去了一年,马上就要读研究生了,因此有必要对自己进行必要的总结,以及对自己有个良好的规划. 首先,描述自己当前的心情——对未来充满了恐惧和焦虑. 马上大学就要毕业了,回首经历的大学生涯,似 ...

  4. Linux常用指令【转载】

    [收藏]Linux常用指令[转载] $ 命令行提示符 粗体表示命令 斜体表示参数 filename, file1, file2 都是文件名.有时文件名有后缀,比如file.zip command 命令 ...

  5. Pair Project 1 elevator

    结对编程——电梯调度 12061181 高孟烨 12061182 郝倩 1.结对编程的优缺点: 优点:结对编程可以结合两个人各自擅长之地,充分发挥两个人各自的优势,两个人一起合作效率会更高.一份工作两 ...

  6. 个人博客作业-Week7

    团队任务中个人感想 我们团队选的题目是爬虫, 采用用AVA平台开发了, 我原来JAVA语言不熟悉了, PM考虑这部分之后分配任务这部分感觉很多谢 团队当中的PM很清楚每个组员的力量, 所以PM跟每个组 ...

  7. 《Linux内核设计与实现》 第一二章学习笔记

    <Linux内核设计与实现> 第一二章学习笔记 第一章 Linux内核简介 1.1 Unix的历史 Unix的特点 Unix很简洁,所提供的系统调用都有很明确的设计目的. Unix中一切皆 ...

  8. JavaScript获取DOM节点

    常用的方法有 document.getElementById("id"); document.getElementsByTagName('tagName'); document.g ...

  9. 查看Linux机器名

    uname -a hostname vim /etc/sysconfig/network

  10. win10总是2分钟就自动睡眠怎么办 win10系统自动休眠bug怎么解决（转）

        解决方法如下: 1.右键点击开始图标,选择[运行],或者利用快捷键“win+R”打开运行窗口,win键是ctrl和alt键中间的徽标键: