js中Array方法歸類解析

爲何要對Array方法進行歸類解析

由於它經常使用，並且面試必問

改變原數組的方法

pop 刪除並返回數組最後一個元素
push 從末尾給數組添加元素，返回新數組length值
reverse 顛倒數組元素，返回顛倒後的數組
shift 刪除並返回第一個元素值
sort 數組排序
splice 刪除指定位置開始指定長度的元素，返回被刪除的項目。
unshift 向數組開頭添加多個元素，返回新數組長度

不改變原數組

concat 返回合併後數組的副本
join 返回一個經過鏈接符鏈接數組元素的字符串
slice 返回選中元素的新數組
toString 返回字符串等同於join()

如何循環一次刪除多個元素並改變數組長度

for (var i = arr.length - 1; i >= 0; i--){
    if(arr[i] === 1){
        arr.splice(i,1)
    }
}

操做Array元素的callback的方法集合

forEach、map、filter、every、some、reduce、reduceRight

• forEach對元素上執行callback的操做

var a = ['1', 20, 30];
a.forEach((item, index, a)=>{
    ++item
}) // 不會改變a值
a.forEach((item, index)=>{
    a[index] = ++item
}) // 改變a值

• map對元素callback並返回一個由callback返回值組成的新數組

var a = ['1', 20, 30];
var b = a.map((item, index, a)=>{
    return ++item // 若是沒有return會輸出undefined
}) // [2,22,32]

• filter返回元素callback返回值爲true的元素組成的新數組

var a = ['1', 20, 30];
console.log(a.filter((item)=>{
    return typeof item === 'string'
})) //['1']

• every當全部元素的callback都返回true時，值爲true。用於判斷全部元素是否符合某一條件

var a = ['1', 20, 30];
console.log(a.every((item)=>{
    return typeof item === 'string'
})) // false

• some只要其中一個元素callback返回true，值爲true。用於判斷某一個元素符合單一條件的狀況

var a = ['1', 20, 30];
console.log(a.some((item)=>{
    return typeof item === 'string'
})) // true

• reduce和reduceRight是數組元素兩兩按照callback的邏輯進行遞歸處理。返回處理完之後的結果。

var a = ['1', 20, 30];
var total = a.reduce(function(first, second) { return first + second; }, 2);
console.log(total) // 212030(((第二個參數2+'1')+20)+30)
var total = a.reduceRight(function(first, second) { return first + second; }, 2);
console.log(total) // 521(((第二個參數2+30)+20)+'1')

如何循環刪除多個元素，數組長度不變

for (let i = 0; i < arr.length; i++){
    if(arr[i] === 1){
       delete arr[i]
    }
}
// 刪除對應元素後，對應元素被置換爲undefined,可是對應的i值(i in arr爲false),直接複製arr[i]=undefined時i in arr 爲 true

ES6 數組去重

let arr = [1,2,3,1,2,3,4]
let set = new Set(arr)
arr = [...set]

數組的一些擴展方法

Array.from()，Array.of()，Array.prototype.copyWithin()，includes()

參考文獻

Array的擴展方法