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. cordova plugin 大全及安装命令

    前言:用cordova开发hybrid app的过程中,由于是html5开发的app,在手机上很多权限受限制,这就导致了我们需要安装很多插件来弥补这一缺点.在网上搜了好久,感觉都不是很全,所以自己整理 ...

  2. 使用css让文字两端对齐

    text-align:justify; text-justify:distribute-all-lines; text-align-last:justify;可以让文字实现两端对齐

  3. LoadRunner中的C Vuser函数

    LoadRunner中的C Vuser函数     事务函数: lr_end_sub_transaction 标记子事务的结束以便进行性能分析. lr_end_transaction 标记事务的结束. ...

  4. TCP握手协议简述

    TCP握手协议简述在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器 ...

  5. HttpClient不同版本超时时间的设置

    引自 https://www.cnblogs.com/hisunhyx/p/5028391.html 3.X是这样的 HttpClient client=new DefaultHttpClient() ...

  6. Bzoj 1014&Luogu 4036 火星人Prefix(FHQ-Treap)

    题面 洛谷 Bzoj 题解 首先,这种带修改的是不能用$SA$的,然后,我们做$SA$的题一般也能二分+$Hash$,所以不妨考虑用$FHQ-Treap$维护树,然后查询就用二分+$Hash$. $H ...

  7. 洛谷—— P1908 逆序对

    https://www.luogu.org/problem/show?pid=1908 题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏, ...

  8. 【UOJ #201】【CTSC 2016】单调上升路径

    http://uoj.ac/problem/201 别人都一眼秒的题对我而言怎么那么难qwq 这道题就是要构造一个n*n的邻接矩阵,满足矩阵\(A\)是一个拉丁方阵(也是数独?),\(a_{ij}=a ...

  9. Codeforces 455 B. A Lot of Games

    \(>Codeforces \space 455 B. A Lot of Games<\) 题目大意 : 有两个人在玩游戏,一共玩 \(k\) 轮,每一轮的一开始有一个空串,双方每一回合需 ...

  10. 「2018山东一轮集训」Game

    %%神仙题 首先转化一波模型:可以把原问题看成,初始每个位置有0/1个石子,1操作看成从一个位置拿走一个石子,2操作看成从l[i]拿走一个石子,并在[ l[i]+1 , r[i] ]的每个位置放上一个 ...