展开语法、剩余语法

展开语法定义

展开语法Spread Syntax，可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时，将对象表达式按照key-value的方式展开。（字面量一般指[1, 2, 3]或者{name:"mdn"}这种简洁的构造方式）。

展开语法

函数调用

myFunction(...iteratorObj);
1

字面量数组构造或字符串

[...iteratorObj, '4', ...'hello', 6]
1

构造字面量对象时，进行克隆或者属性拷贝（ECMAScript2018规范新增特性）

需要我们注意的是，此时通过Spread Syntax克隆或者属性拷贝属于浅拷贝。

let objClone = { ...obj };
1

展开语法示例

在函数调用时使用展开语法

如果我们像要将args数组中的元素迭代为函数参数，一般使用Function.prototype.apply的方式进行调用。因为apply方法可以接收一个数组或者类数组对象，其中的数组元素将作为单独的参数传给调用的函数。

function myFunction(x, y, z) {}
var args = [1, 2, 3];
myFunction.apply(null, args);
1
2
3

如果有了展开语法Spread Syntax语法，我们可以写成：
myFunction(...args)表示什么意思呢？我们主要关注...args的操作，...args此时表示将args数组进行**展开操作。**那么展开之后，实际上整体的效果相当于myFunction(1, 2, 3)，所以效果是和上面例子相同。

function myFunction(x, y, z) {}
var args = [1, 2, 3];
myFunction(...args);
1
2
3

在new表达式中应用

使用new关键字来调用构造函数是，不能直接使用数组+apply的方式。（apply执行的是调用[[call]]，而不是构造[[Constructor]]）。
此时我们是不能够直接通过apply的方式去调用myFunction函数，因为apply方法调用的是[[call]] internal Property，而不是[[Constructor]] internal Property，所以不能够达到目的。

function myFunction(x, y, z){};
var args = [1, 2, 3];
new myFunction.apply(null, args);
1
2
3

如果有了展开语法`Spread Syntax`，我们可以写成：
1

var dateFields = [1970, 0, 1];
var d = new Date(...dateFields);
1
2

如果不使用展开语法的话，想要将数组元素传递给构造函数，实现的方式可能是这样的：
主要的思路：虽然我们不能直接通过new myConstructor.apply(null, myArguments)的方式将myArguments数组中的元素传递给构造函数myConstructor。但是我们可以找一个缓冲层做铺垫，比如例子中的partial函数。

1. 疑问一：return constructor.apply(this, args)在做些什么？主要是使用借用构造函数的方式去处理实例化对象内部的属性。
2. 疑问二：return constructor.apply(this, args)为什么要return，此时的结果是return undefined，为什么不会影响到程序的执行呢？因为new关键字调用构造函数时，构造函数内部会自动创建this对象，并且将this对象返回出去。如果你手动返回原始值的话，是不会对构造函数返回值造成影响。如果你返回的是**引用值，**此时才会受到影响。

function applyAndNew(constructor, args) {
	function partial() {
		// 借用构造函数
		return constructor.apply(this, args);
	}

	if (typeof constructor.prototype === 'object') {
		// 继承关系 partial => 继承 => myConstructor
		partial.prototype = Object.create(constructor.prototype);
	}

	return partial;
}

function myConstructor() {
	console.log("arguments.length: " + arguments.length);
	console.log(arguments);
	this.prop1="val1";
	this.prop2="val2"
}

var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

构造字面量数组时使用展开语法

没有展开语法的时候，只能使用push、splice、concat等方法，来将已有数组元素变成新数组的一部分。有了展开语法，通过字面量方式，构造新数组会变得更简单，更优雅。

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
1
2

构造字面量对象时使用展开语法

Rest/Spread Properties for ECMAScript提议对字面量对象增加了展开的特性。其行为是，将已有对象的所有可枚举属性拷贝到新构造的对象中。
对象合并，对象浅拷贝你可以使用展开语法。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象：{ foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象：{ foo: "baz", x: 42, y: 13 }
1
2
3
4
5
6
7
8

只用于可迭代对象

在数组或者函数参数中使用展开语法时，该语法只能用于可迭代对象：

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
1
2

展开多个值

在函数调用时使用展开语法，请注意不能超过JavaScript引擎限制的最大参数个数。

剩余语法（剩余参数）定义

剩余语法Rest Syntax看起来和展开语法完全相同，不同在于，剩余参数用于解构数组和对象。从某种意义上来说，剩余语法和展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

剩余语法的描述

如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，其中从0包括到theArgs.length(排除)的元素由传递给函数的实际参数提供。
在下面的例子中，thisArgs将收集该函数的第三个参数（因为第一个参数被映射到a，而第二个参数映射到b）和所有后续参数。

function(a, b, ...theArgs) {
  // ...
}
1
2
3

剩余参数和arguments对象的区别

剩余参数和arguments对象之间的区别主要在于：

1. 剩余参数只包含哪些没有对应形参的实参，而arguments对象包含了传给函数的所有实参。
2. arguments对象不是一个真正的数组，而剩余参数是真正的Array实例，也就是说你能够在它上面直接使用所有的数组方法。
3. arguments对象还有一些附加的属性，比如callee。

解构剩余参数

剩余参数可以被解构，这意味着他们的数据可以被解包到不同的变量中。

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
1
2
3
4
5
6
7

剩余语法不仅仅用于函数参数

注意一点，剩余语法是一种语法，不仅仅只用作于函数参数。也可以用作收集数组解构时剩余的元素。

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