(Day28) ES6 展开运算子与其余参数

前言

展开运算子与其余参数是 ES6 新增的两个特性，使用上都一样是 ... 也就是三个点，不过实际上这两个方法代表的意义会不太一样，接下来一一介绍。

展开运算子 (Spread syntax)

展开运算子是主要用在阵列上的运算子，在实做中这个方法其实满常用的，而他的概念正如名称一样，将资料展开，并且一一取得该阵列的值，在过去若想将阵列资料传至另一个阵列资料时，我们会使用 .contant() 方法比如：

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1 = array1.concat(array2)
console.log(array1)

要达成这个需求，现在则可以使用展开运算子达成：

var array1 = ['a', 'b', 'c' ];
var array2 = ['d', 'e', 'f'];
array1 =  [...array1, ...array2]
console.log(array1) //(6) ['a', 'b', 'c', 'd', 'e', 'f']

这样看或许还对这个功能感到有些模糊，这时直接使用 console.log( ...array1 ) ，变可以明白他其实就是将阵列中的值一一的使用并 return 出来。

浅层复制

从上面说明也可以明白，展开运算子，也可用於复制阵列上，若使用 展开运算子 复制阵列时他是属於浅层复制的一种，如果是浅层复制的阵列，他们第一层的参考会是不同的，也就是不会影响原始物件，例如：

var array1 = ['a', 'b', 'c' ]
var array2 = [ ... array1 ]
array2.push('d')
console.log(array1)  // ['a', 'b', 'c']

而非浅层复制就会使用共同参考:

var array1 = ['a', 'b', 'c' ]
var array2 = array1
array2.push('d')
console.log(array1)  // ['a', 'b', 'c', 'd']

上面范例虽然都用在阵列上，但其实如果只是要使用复制功能，物件也能使用这个方法，例如：

var obj1 = { name1:'Ryder', name2:'Jack', name3:'Annie'}
var obj2 = { ...obj1 }
console.log( obj2 ) // { name1:'Ryder', name2:'Jack', name3:'Annie'}

类阵列转成纯阵列

展开运算子还有一个功能，就是将类阵列转换成纯阵列，JS 某些语法会创造出的类阵列（非完全阵列没有完整的阵列原型），例如

• 函式中的 arguments 参数：

function Fn1(){
	console.log(arguments)
	console.log( [...arguments] )
}
Fn1(1,2,3)

• document.querySelectorAll() 等等的取得 DOM 元素的方法：

const buttons = document.querySelectorAll('button')
console.log( buttons )
console.log( [...buttons] )

其余参数 (rest parameter)

若要使用其余参数，我们可以在函式参数打上 ...arg (名称可自订），这样便是使用其余参数的功能。
上面刚好有提到，函式的 arguments 参数，而其余参数其实就跟 arguments 参数非常相像，就是将所有参数，使用阵列包起来呈现，而这两个写法主要差别有两点：

• arguments 是类阵列、其余参数 是真正的阵列。
• 有写上自定义参数时 arguments 并不会自动配合参数给予剩余值，而其余参数写法会自动调配。

// 其余参数，显示剩余参数的所有值。
function Fn1( num, ...arg  ){
	console.log(num, arg) // 1 , [2, 3]
}
Fn1(1,2,3)

// arguments 只会显示该函式所有参数，不会自动调配。
function Fn2( num, ...arg  ){
	console.log(num, arg) // 1  [1, 2, 3]
}
Fn2(1,2,3)

参考文献

• 铁人赛：JavaScript 展开与其余