展开语法、剩余语法

展开语法定义

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

展开语法
函数调用
myFunction(...iteratorObj);
字面量数组构造或字符串
[...iteratorObj, '4', ...'hello', 6]
构造字面量对象时,进行克隆或者属性拷贝(ECMAScript2018规范新增特性)

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

let objClone = { ...obj };
展开语法示例
在函数调用时使用展开语法

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

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

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

function myFunction(x, y, z) {}
var args = [1, 2, 3];
myFunction(...args);
在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);
如果有了展开语法`Spread Syntax`,我们可以写成:
var dateFields = [1970, 0, 1];
var d = new Date(...dateFields);

如果不使用展开语法的话,想要将数组元素传递给构造函数,实现的方式可能是这样的:
主要的思路:虽然我们不能直接通过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);
构造字面量数组时使用展开语法

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

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
构造字面量对象时使用展开语法

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 }
只用于可迭代对象

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

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
展开多个值

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

剩余语法(剩余参数)定义

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

剩余语法的描述

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

function(a, b, ...theArgs) {
  // ...
}
剩余参数和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)
剩余语法不仅仅用于函数参数

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

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

你可能感兴趣的:(前端集合,javascript,前端,es6)