Read More: http://es6.ruanyifeng.com/#docs/destructuring

Array

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

Exp 1:

var [head, ...tail] = [1, 2, 3, 4];
console.log(head); //
console.log(tail); // [2, 3, 4]

Exp 2:

var [foo, [[bar], baz]] = [1, [[2], 3]];
foo //
bar //
baz //

如果解构不成功,变量的值就等于undefined:

var [foo] = false;
console.log(foo); // undefined var [foo] = [false];
console.log(foo); // false

另一种情况是不完全解构:

var [x, y] = [1, 2, 3];
console.log(x); //
console.log(y); //

解构只能用于数组或对象, 对undefined或null进行解构,会报错:

// 报错
var [foo] = undefined;
var [foo] = null;

解构赋值允许指定默认值:

[x, y='b'] = ['a'] // x='a', y='b'

Object

var o = {
p: [
"Hello",
{ y: "World" }
]
}; var { p: [x, { y }] } = o;
x // "Hello"
y // "World"

如果要将一个已经声明的变量用于解构赋值,必须非常小心:

// 错误的写法

var x;
{x} = {x:1};
// SyntaxError: syntax error

上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。

// 正确的写法

({x}) = {x:1};
// 或者
({x} = {x:1});

[ES6] 09. Destructuring Assignment -- 2的更多相关文章

  1. [ES6] 08. Destructuring Assignment -- 1

    Here is the way you get value from an object: var obj = { color: "blue" } console.log(obj. ...

  2. 逆转序列的递归/尾递归(+destructuring assignment)实现(JavaScript + ES6)

    这里是用 JavaScript 做的逆转序列(数组/字符串)的递归/尾递归实现.另外还尝鲜用了一下 ES6 的destructuring assignment + spread operator 做了 ...

  3. ES6 Destructuring Assignment All In One

    ES6 Destructuring Assignment All In One ES6 & Destructuring Assignment Axios, vue https://develo ...

  4. 解构赋值 Destructuring Assignment

    解构赋值 Destructuring Assignment ES6中可以通过一定的模式将数组或对象中的值直接赋值给外部变量,称为解构 对象的解构赋值 // 在ES5中,当需要获取一个对象中的变量值的时 ...

  5. Destructuring Assignment in JS(解构assignment in js)

    Destructuring Assignment In JavaScript 更省事,代码显得也清楚. Arrays 传统的声明赋值: let johnDoe = ["John", ...

  6. destructuring assignment

    [destructuring assignment] The destructuring assignment syntax is a JavaScript expression that makes ...

  7. Object Destructuring Assignment vs Object.assign

    Object Destructuring Assignment vs Object.assign // const params = Object.assign({}, this.$route.par ...

  8. js destructuring assignment bug

    js destructuring assignment bug https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Op ...

  9. ES6新特性:利用解构赋值 (destructuring assignment), 简化代码

    本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...

随机推荐

  1. CentOS7.5***

    一.借助谷歌上网助手 二.用ss来实现*** 下载工具 sudo yum install shadowsocks-libev 修改配置文件 sudo chmod 777 /etc/shadowsock ...

  2. 三十八 ThreadLocal

    在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响其他线程,而全局变量的修改必须加锁. 但是局部变量也有问题,就是在函数调用的 ...

  3. (3) go 指针

    1.获取地址 取地址 &i 2.指针 var p *int=&i ptr 是一个地址 *ptr 是可看成一个变量,该地址所在的变量,也就是 num 3.常见值类型 引用类型 值类型:栈 ...

  4. CSU 2151 集训难度【多标记线段树】

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=2151 Input 第一行三个数n,m,v0 表示有n名萌新和m次调整,初始时全部萌新的集训难度 ...

  5. 【Numpy】python机器学习包Numpy基础知识学习

    一.安装:在之前的博客中已经写过:http://www.cnblogs.com/puyangsky/p/4763234.html 二.python数组切片知识: python中序列类有list.str ...

  6. START法则

    用途:在做项目总结以及阶段性报告等的时候,可以很好的帮自己对整个工作过程进行梳理和总结,很好的表现出自己分析问题的清晰性.条理性和逻辑性. 定义:STAR法则是情境(situation).任务(tas ...

  7. [Sgu395][bzoj2363]Binary Cat Club

    一道神题…… rzO 发现立杰在初三(http://hi.baidu.com/wjbzbmr/item/4a50c7d8a8114911d78ed0a9据此可以推断)就怒A了此题…… Orz /*** ...

  8. 【动态规划】POJ1664-放苹果

    非常经典的划分数问题,即相当于把m个物体分成至多n组,求出分组总数. [思路]当前状态dp[i][j]表示将i个物体分成至多j组的分组总数.对于当前状态,有以下两种情形: (1)j组中有组为空,则这种 ...

  9. Java并发(一):多线程干货总结

    一.进程 线程 进程:一个进程来对应一个程序, 每个进程对应一定的内存地址空间,并且只能使用它自己的内存空间,各个进程间互不干扰. 进程保存了程序每个时刻的运行状态,这样就为进程切换提供了可能.当进程 ...

  10. 【Data URL】【RE】【bugku】逆向入门writeup

    在写wp之前先来了解一下Data URL是什么 Data URL 在浏览器向服务端发送请求来引用资源时,一般浏览器都有同一时间并发请求数不超过4个的限制.所以如果一个网页需要引用大量的服务端资源,就会 ...