ES6學習...運算子

前端coder發表於2019-02-17

ES6其他文章：

ES6學習let&const
juejin.im/entry/5c684…

...運算子定義

...運算子又叫做展開收集運算子。...運算子在不同的地方有不同的作用。
1.寫————收集作用

    function test(...arg) {

    }
    test(1,2,3)
複製程式碼

2.讀————展開作用

    var arg = [1,2,3]
    console.log(...arg) //1  2  3
複製程式碼

...運算子作用

1.簡化書寫長度
2.提高開發效率

寫 展開作用

可以接受不定引數,下面是使用arguments和...運算子對不定引數的求和。

    function sum() { //使用arguments
        let sumNumber = 0
        for(let i = 0;i < arguments.length; i ++) {
            sumNumber += arguments[i]
        }
    console.log(sumNumber) // 15
        return sumNumber
    }
    sum(1,2,3,4,5)
    
    function sum(...arg) { //使用...運算子
        console.log(arg) //[1, 2, 3, 4, 5] arg是一個陣列，可以直接使用陣列方法
        let sumNumber = 0
        arg.forEach(function(ele) {
            sumNumber += ele
        })
        console.log(sumNumber) // 15
        return sumNumber
    }
    sum(1,2,3,4,5)
複製程式碼

可以看出使用...運算子更為簡潔。

...運算子前面可以寫固定形參，可傳入值。但是...運算子後面不允許在傳入形參。

    function test(a,b,...arg) {
        console.log(a,b,arg) //10 20  ["aa", "bb"]
    }
    test(10,20,'aa','bb')
複製程式碼

下面程式碼是使用...運算子寫一個去掉最高值，去掉最低值的平均值

    function average(...arg) {
        arg.sort(function(a,b) {
            return a - b
        })
        arg.pop()
        arg.shift()
        console.log(arg) //[2, 3, 4, 5, 6]
        return computedScore(...arg)
    }
    function computedScore(...arg) {
        let sum = 0
        arg.forEach(function (ele) {
            sum += ele 
        })
        console.log(sum/arg.length) //4
        return sum/arg.length
    }
    average(1,2,3,4,5,6,7)
複製程式碼

可以看出使用...運算子會明顯比用arguments更方便。

讀 展開作用

...[1,2,3,4,5] 相當於 1,2,3,4,5 下面例子將兩陣列合並

    let arr1 = [1,2,3,4,5]
    let arr2 = [6,7,8]
    let newArr = [...arr1,...arr2] //[].concat(arr1,arr2)
    console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8] 相當於concat
複製程式碼

在ES6中...運算子主要是運算元組，ES7中可以展開物件,這裡不做過多解釋。

有錯誤歡迎指出，謝謝觀看。

廣告：
作者github：github.com/webxukai
作者gitee：gitee.com/webxukai
作者微信：e790134972
作者QQ:我想你應該知道了！
作者QQ郵箱：同上，呵呵！

相關文章