rest參數(shù)

為了解決JavaScript函數(shù)傳入任意數(shù)量參數(shù)時愧杯，存在的一些小問題晾咪，在ECMAScript 6中引入了rest參數(shù)收擦，通過在函數(shù)的明明參數(shù)前添加三個點（...）來標識rest參數(shù)，解決多參傳入問題

原始方式接收任意數(shù)量參數(shù)

function calculate(op) {
    if (op === "+") {
        let result = 0
        for (let i = 1; i < arguments.length; i++) {
            result += arguments[i]
        }
        return result
    } else if (op === "*") {
        let result = 1
        for (let i = 1; i < arguments.length; i++) {
            result *= arguments[i]
        }
        return result
    }
}

上面通過一個小例子展示了arguments對象在處理任意數(shù)量參數(shù)傳入的問題谍倦，但是這種方式仍有一些不足的地方：

• 調(diào)用者需要知道該函數(shù)可以接受任意數(shù)量的參數(shù)塞赂，這點但從函數(shù)聲明的參數(shù)列表是看不出來的
• 因為第一個參數(shù)是明明參數(shù)且已經(jīng)被使用，因此遍歷arguments對象時昼蛀，索引值并非從0開始宴猾，需要額外注意

使用rest參數(shù)重寫calculate()函數(shù)

function calculate(op, ...data) {
    if (op === "+") {
        let result = 0
        for (let i = 0; i < data.length; i++) {
            result += data[i]
        }
        return result
    } else if (op === "*") {
        let result = 1
        for (let i = 0; i < data.length; i++) {
            result *= data[i]
        }
        return result
    }
}

上述代碼中，rest參數(shù)data包含op之后傳入的所有參數(shù)叼旋，這種代碼結(jié)構(gòu)更加清晰
但是使用rest參數(shù)也有幾個需要注意的地方

• 每個函數(shù)只能聲明一個rest參數(shù)
• rest參數(shù)只能放在函數(shù)參數(shù)列表的最右側(cè)

展開運算符

展開運算符在語法上與rest參數(shù)相似仇哆，也是通過三個點（...）實現(xiàn)響應的功能,具體代碼如下:

使用展開運算符（...）提取數(shù)組元素傳入到函數(shù)中

function sum(a, b, c) {
    return a + b + c
}

let arr = [1, 2, 3]
sum(...arr)

使用展開運算符（...）復制數(shù)組

// 創(chuàng)建原始數(shù)組
let arr1 = [1, 2, 3]
// arr2與arr1是同一數(shù)組對象
let arr2 = arr1
// arr3與arr1是兩個不同的數(shù)組對象
let arr3 = [...arr1]

// 改變原始數(shù)組的值
arr1[0] = 4
// arr2中的元素也發(fā)生改變，輸出4
console.log(arr2[0])
// arr3中的元素不變夫植，輸出1
console.log(arr3[0])

使用展開運算符（...）合并數(shù)組

let arr1 = ['a']
let arr2 = ['b', 'c']
let arr3 = ['d', 'e']
// 輸出結(jié)果為“['a', 'b', 'c', 'd', 'e']”
console.log(...arr1, ...arr2, ...arr3)

使用展開運算符（...）取出對象的所有可遍歷屬性

let book = {
    title: "ECMAScript 6",
    price: 24
}

let bookDetail = {...book, desc: "a fine book"}
// 輸出結(jié)果為{title: 'ECMAScript 6'讹剔，price: 24,  desc: 'a fine book'}
console.log(bookDetail)