ES6 —— 數組總結

1. map：映射   一個對一個

arr.map(function(item) { ... })    能夠配合箭頭函數：arr.map(item => ... ) 

 

        let arr1 = [1,2,3]
        let result1 = arr1.map(item=>item*2)
        console.log(result1)    // [2,4,6]

 

        let score = [56,88,90];
        let grade = score.map(item=>item>=60?'及格':'不及格');
        console.log(score);  // [56, 88, 90]
        console.log(grade);  // ["不及格", "及格", "及格"] 

能夠看到一一對應的關係

 

 

2. reduce：彙總 一堆對一個

語法：arr.reduce(function(tmp, item, index [,arr]){ ... }[, initialValue])

tmp：初始值，或是上一次的疊加結果值，不指定initialValue時默認爲arr[0]的值爲起始值

item：當前值

index：當前值在數組中的index值

arr：當前數組，可不寫

initialValue：指定初始執行的值

 

下面給幾個例子用於熟悉這幾個參數的含義

        let arr2 = [12,69,180,8763]
        arr2.reduce((tmp,item,index)=>{
            console.log(tmp,item,index)
        })
        // 12,69,1
　　　　 // undefined,180,2
　　　　 // undefined,8763,3  

        arr2.reduce((tmp,item,index)=>{
            console.log(tmp,item,index)
        },[])
        // [] 12 0
　　　　 // undefined,69,1
　　　　 // undefined,180,2
　　　　 // undefined,8763,3

　　　　 arr2.reduce((tmp,item,index)=>{
            console.log(tmp,item,index)
        },0)
　　　　 // 0 12 0
　　　　 // undefined,69,1
　　　　 // undefined,180,2
　　　　 // undefined,8763,3

 tmp是初始值或是上一次的疊加結果值，因此第一個咱們能夠看到tmp是有值的：

當有initialValue時顯示爲initialValue值，若是initialValue缺省則顯示arr[0]的值，即12

後面剩下的循環這裏undefined是由於reduce裏面沒有寫二者相加這個語句，因此tmp這個值是沒有的

 

在function裏添加tmp+item，看下面這兩個例子：

        arr2.reduce((tmp,item,index)=>{
            console.log(tmp,item,index)
            return tmp+item
        },[])
        // [] 12 0
　　　　 // 12,69,1
　　　 　// 1269,180,2
　　　　 // 1269180,8763,3

　　// 這裏明顯是字符串的拼接了，由於初始值是[]，因此tmp+item是按照字符串拼接的方式相加的


        let result2 = arr2.reduce((tmp,item,index)=>{
            console.log(tmp,item,index)
            return tmp+item
        }, 0)
        // 0 12 0
　　　　 // 12,69,1
　　　 　// 81,180,2
　　　 　// 261,8763,3

        console.log(result2)    // 9024   result2最後是最終求和的結果

 

 若是想求平均值呢？邏輯是：前面循環求和，最後一次求和後除以數組個數，即：

        let result3 = arr2.reduce((tmp,item,index)=>{
            if(index!=arr2.length-1){  // 不是最後一個
                return tmp+item
            }else {                    // 是最後一個
                return (tmp+item)/arr2.length
            }
        })
        console.log(result3)  // 2256 求平均值

3. filter 過濾  返回值是符合過濾條件的元素

arr.filter(function(){ ... })

        let arr3 = [22,5,63,34,12,7,69]
        let result4 = arr3.filter(item=>item%3==0)

        console.log(result4)   // [63, 12, 69]

filter在循環的過程當中有一個判斷過程，是true則返回，false則去掉

 

4. forEach  循環迭代

arr.forEach(function(item, index){ ... })