Spread Operators 展開運算符
展開運算符是把一個陣列展開成個別的值的速寫語法,它只會在陣列字面定義與函式呼叫時使用
展開運算符(Spread Operator)是把一個陣列展開(expand)成個別值,這個運算符後面必定接著一個陣列。最常見的是用來組合(連接)陣列,對應的陣列方法是concat,以下是一個簡單的範例:
const params = [ "hello", true, 7 ]
const other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
展開運算符可以作陣列的淺拷貝,當然陣列的淺拷貝有很多種方式,這是新的一種語法,也是目前語法上最簡單的一種:
const arr = [1,2,3]
const arr2 = [...arr]
arr2.push(4) //不會影響到arr
//arr2 = [1,2,3,4]
註: 淺拷貝(shallow-copy)對於陣列中的陣列值(多維陣列),或是有複雜的物件值情況時,是只會拷貝參照值而已。
註: 上述的展開運算符在陣列字面中使用時,並沒有限制位置,或是在個數。像
const arr = [...a, 1, ...b]這樣的語法都是可以的。
你也可以用來把某個陣列展開,然後傳入函式作為傳入參數值,例如下面這個一個加總函式的範例:
function sum(a, b, c) {
return a + b + c
}
const args = [1, 2, 3]
sum(…args) // 6
對照ES5中的相容語法,則是用apply函式,它的第二個參數也是使用陣列,以下是用ES5語法與上面相同結果的範例程式:
function sum(a, b, c) {
return a + b + c;
}
var args = [1, 2, 3];
sum.apply(undefined, args) ;// 6
展開運算符還有一個特別的功能,就是把可迭代(iterable)或與陣列相似(Array-like)的物件轉變為陣列,在JavaScript語言中內建的可迭代(iterable)物件有String、Array、TypedArray、Map與Set物件,而與陣列相似(Array-like)的物件指的是函式中的隱藏物件"arguments"。下面的範例是轉變字串為字元陣列:
const aString = "foo"
const chars = [ ...aString ] // [ "f", "o", "o" ]
下面的範例是把函式中的隱藏偽物件"arguments"轉成真正的陣列物件:
arguments是JavaScript中原生的物件,它代表函數中傳遞給函數的參數。它有類似陣列的功能,但並不是陣列。
function aFunc(x){
console.log(arguments)
// Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(Array.isArray(arguments))
// false
//轉為真正的陣列
const arr = [...arguments]
console.log(arr)
// [1]
console.log(Array.isArray(arr))
// true
}
aFunc(1)
aFunc(1, 2)