JavaScript ES6 新特性： 解构赋值、展开语法、剩余参数

ES6 泛指 5.1版以后的下一代 JS标准。涵盖 ECMAScript 2015、ECMAScript 2016、ECMAScript 2017。
其中 15是正式版 16,17只是在 15基础上的补丁。

解构赋值

解构数组

基本操作

var arr = [1 , 2];
var [a, b] = arr;
console.info(a, b); // 1 2

交换变量

js终于也支持这种语法了

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

丢掉一部分变量

如果函数返回一个数组，外面有需要从数组中取元素来赋值，这个就方便了。

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

默认值

// 有值直接取
var [a, b='B', c='C', d] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
// 无值用默认
var [a, b='B', c='C', d] = [1, , , 4];
console.log(a); // 1
console.log(b); // B
console.log(c); // C
console.log(d); // 4
// undefined 也当无值。但null不能触发默认值，因为null是一个值
var [a, b='B', c='C', d] = [1, undefined, undefined, 4];
console.log(a); // 1
console.log(b); // B
console.log(c); // C
console.log(d); // 4

解构对象

基本操作

var obj = {a:1 , b:2};
var {a, b} = obj ;
console.info(a, b); // 1 2

声明新变量

声明了新变量 npc1、npc2

var obj = {a: '奔波儿灞' , b: '霸波尔奔'};
var {a: npc1, b: npc2} = obj ; // 从 obj.a 取值赋给 npc1， 从 obj.b 取值赋给 npc2
console.info(npc1, npc2); // 奔波儿灞 霸波尔奔

默认值

和数组差不多

var {npc1 = '奔波儿灞' , npc2 = '霸波尔奔'} = {npc2: '赛太岁'};
console.log(npc1); // 奔波儿灞
console.log(npc2); // 赛太岁

声明新变量 + 默认值

就是上面两个功能的组合使用

var {npc1:a = '奔波儿灞' , npc2:b = '霸波尔奔'} = {npc2: '赛太岁'};
console.log(a); // 奔波儿灞
console.log(b); // 赛太岁

函数默认值

function foo({npc = '霸波尔奔', npcLoc = { x: 9527, y: 2046 }, hp = 10000} = {}){
  console.log(npc, npcLoc, hp);
}
foo(); // 霸波尔奔 {x: 9527, y: 2046} 10000
foo({npc:'奔波儿灞', npcLoc:{ x: 0, y: 0}}); // 奔波儿灞 {x: 0, y: 0} 10000

展开语法

函数调用

// 为了演示先定义个函数
function foo(a,b,c){
	console.info('第一个参数: ' + a);
	console.info('第二个参数: ' + b);
	console.info('第三个参数: ' + c);
}
// 这是我们为它准备的实参
var arr = ['666','999','9527'];
// 在以前是这样实现的
foo.apply(null, arr);
// 利用展开语法的写法
foo(...arr);

new新对象时

显然 apply 虽好，但在new新对象的时候就没那么好用了。有了展开语法可以结局这个尴尬

• 数组去重

var result = [...new Set([1,1,2,2,3,3,4,4])];
console.info(result);// [1, 2, 3, 4]
// 分解步骤
var arr = [1,1,2,2,3,3,4,4];
var myset = new Set(arr);// 实际去重是利用集合元素不重复的特性实现的
var result = [...myset];
console.info(result);// [1, 2, 3, 4]

创建时间对象

new Date(...[2019,10,05]);
new Date(..."2019-10-05".split("-"));
new Date("2019-10-05");

字面量数组

值得注意的是这种展开是一种浅复制(只遍历一层)，如果多为嵌套就要小心了。不然会无意间修改到原始对象。

// 直接展开来用
var a = [1,2,3], b = [4,5,6];
var arr = [...a, ...b];
console.info(arr);// [1, 2, 3, 4, 5, 6]
// 还可以反反复复用
var arr = [...a, ...b, ...a];
console.info(arr);// [1, 2, 3, 4, 5, 6, 1, 2, 3]

字面量对象

在数组或函数参数中使用展开语法时, 该语法只能用于 可迭代对象。
下面的例子很像 jQuery 的 $.extend

var obj1 = { 'year': '2019', 'month': '10' };
var obj2 = { 'year': '2020', 'day': '05' };
var obj3 = {...obj1, ...obj2};
// year 有两个，后面的替换了前面的。 month 和 day 只有一个，都直接留下了。
console.info(obj3);// {year: "2020", month: "10", day: "05"}
// 浅复制没问题，但不支持深度复制。
obj3.year = "2046";
obj3.month = "12";
obj3.day = '31';
console.info(obj3);// {year: "2046", month: "12", day: "31"}
console.info(obj1);// {year: "2019", month: "10"}
console.info(obj2);// {year: "2020", day: "05"}

剩余参数

其余参数封装进一个真数组里，这个是针对 arguments 说的。

// 为了演示先定义个函数
function foo(a,b,c,...arr){
	console.info('第一个参数: ' + a);
	console.info('第二个参数: ' + b);
	console.info('第三个参数: ' + c);
	console.info('其余参数封装进一个真数组里' + Array.isArray(arr) + ': ' + arr);
}
foo(1,2,3,4,5,6,7,8,9);
/*
第一个参数: 1
第二个参数: 2
第三个参数: 3
其余参数封装进一个真数组里true: 4,5,6,7,8,9
*/

参考资料

解构赋值 Destructuring_assignment
展开语法 Spread syntax
剩余参数 Rest_parameters