ES6 的解构赋值
原创
「英语小课堂」
解构赋值：Destructuring assignment
「参考链接」
解构赋值 - JavaScript | MDN (mozilla.org)
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
// "..." 表示剩余的意思！！！
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 4（已完成）提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}将等号右边的数据进行解构，然后赋值给左边。可以分为数组的解构赋值、对象的解构赋值。
组的解构赋值
等号两边采用了相同的语法，按照顺序进行赋值。
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2变量声明并赋值时的解构
var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"变量先声明后赋值时的解构
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2默认值
为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7交换变量
一个解构表达式中可以交换两个变量的值。
没有解构赋值的情况下，交换两个变量需要一个临时变量（或者用低级语言中的XOR-swap技巧）。
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1解构一个从函数返回的数组
当函数的返回值为数组时，使用解构赋值的语句会更加方便。
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2忽略返回值
function f() {
return [1, 2, 3];
}
// 我只想让 a=1，b=3
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
// 你也可以忽略全部返回值
[,,] = f();将剩余数值赋值给一个变量
当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma对象的解构赋值
等号两边采用了相同的语法，等号左边定义了要从等号右边的数据中取出什么变量。
基本赋值
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true无声明赋值
var a, b;
({a, b} = {a: 1, b: 2});注意：赋值语句周围的圆括号 ( ... ) 在使用无声明解构赋值时是必须的。
{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是表达式。
然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
你的 ( ... ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行的参数。
表达式、语句、代码块的定义
var a = 1 + 3;1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。
语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。
JavaScript 使用大括号，将多个相关的语句组合在一起，称为“代码块”（block）。
关于如何区分 {a:1} 是表达式还是语句？？？
给新的变量名赋值
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true 默认值
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5给新的变量命名并提供默认值
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
