js數組的方法小結

js中數組是一種很是經常使用數據結構，並且很容易模擬其餘的一些數據結構，好比棧和隊列。數組的原型Array.prototype內置了不少方法，下面就來小小總結一下這些方法。
檢測數組就不用多說了，使用ECMAScript5新增的Array.isArray()便可

轉換方法

toLocaleString() toString() join() 和 valueOf()

全部對象都有toLocaleString() toString() 和 valueOf() 方法，其中調用數組的toString()方法會返回數組每一個值得字符串形式拼接而成的一個以逗號分隔的字符串。而valueOf()返回的仍是數組。

var arr = [1,2,4];
console.log(arr.toString())  // 1,2,4
console.log(arr.toLocaleString())  // 1,2,4
console.log(arr.valueOf())  // [1,2,4]

join()可使用不一樣分隔符構建字符串，只接受一個參數，即用作分割符的字符串，返回包含數組因此項的字符串

var say = ['h','e','l','l','o'];
say.join('-');  //"h-e-l-l-o"

棧方法

push() 和 pop()

棧是一種後進先出（LIFO）的數據結構,棧中項的插入和移除都發生在一個位置——棧頂。ECMAScript爲數組專門提供了push() 和 pop()方法，實現相似棧的行爲。

• push() 方法接受任意數量的參數，把他們逐個添加在數組末尾，返回修改後的數組長度。
• pop() 方法從數組末尾移除最後一項，減小數組length值，返回移除的項

var stack = [];
console.log(stack.push(3,5,6)) // 3
console.log(stack.push(8))  // 4
console.log(stack.pop())  // 8

隊列方法

push() 和 shift()

隊列是一種先進先出（FIFO）的數據結構，因爲push()是向數組末尾添加項，所以要模擬隊列只須要一個從數組前端取得項的方法。實現這一操做的數組方法是shift()，他能夠移除數組中的第一項並返回該項。

var queue = [];
console.log(queue.push(3,5,6)) // 3
console.log(queue.push(8))  // 4
console.log(queue.shift())  // 3

*tips: ECMAScript爲數組還提供了一個unshift()方法，其用途與shift()相反，他能在數組前端添加任意個項並返回新數組的長度。同時使用 unshift()和 pop()方法，能夠從反方向模擬隊列。

重排序方法

reverse() 和 sort()

reverse() 會反轉數組的順序，返回反轉後的數組。可是不夠靈活，因此有了sort()方法。默認狀況下，sort()按升序排列數組。最小值在最前面，爲了實現排序，sort()方法會調用每一個數組項的toString()轉型方法，而後比較獲得的字符串肯定如何排序。這種排序方法一般不是最佳方案，所以sort()方法能夠接受一個比較函數，以便咱們指定哪一個值位於哪一個值的前面。好比從小到大排序，能夠以下操做：

var nums = [1,3,15,9,6,10,2];
nums.sort(function(before,next){
    return before-next;
}); // [1, 2, 3, 6, 9, 10, 15]

操做方法

concat() slice() 和 splice()

concat()能夠拼接數組，沒有參數狀況下，複製當前數組返回副本，若是參數是一個或多個數組，該方法會將數組的每一項都添加到結果數組中。若是參數不是數組，這些值會被簡單的添加到結果數組的末尾。
slice()方法能夠基於當前數組中的一個或多個項建立新的數組（前閉後開區間），若是不傳參數，也會複製當前數組返回副本。 concat() 和 slice() 均不改變原數組。
splice()就比較厲害了，是很強大的數組處理方法，能夠用來刪除、插入、和替換。第一個參數指定開始刪除的位置，第二個參數刪除的項數，第三個及之後的參數是要插入的項。

var nums = [1,2,4,5,6];
nums.splice(2,0,3);
console.log(nums) // [1, 2, 3, 4, 5, 6]

位置方法

indexOf() 和 lastIndexOf()

這兩方法都接收兩個參數，要查找的項和開始查找的位置（可選）。indexOf()從數組開頭位置查找，lastIndexOf() 從數組末尾查找。查找時和數組每一項嚴格相等比較（===），若是查到,就返回查找項在數組中的位置，查不到就返回-1.

var nums = [1,2,4,5,6];
nums.indexOf(5);  // 3
nums.indexOf(9);  // -1

迭代方法

every() filter() forEach() map() some()

ECMAScript5 提供了5個迭代方法，每一個方法都接收兩個參數：要在每一項上運行的函數和運行該函數的做用域對象——影響this的值。傳入的函數會接收三個參數：數組項的值，該項在數組的位置，數組對象自己。這5個方法有各自不一樣的做用：

• every()： 數組每一項運行給定函數，若是該函數每一項都返回true，則返回true
• some()： 數組每一項運行給定函數，若是該函數任意一項都返回true，則返回true
• filter()： 數組每一項運行給定函數，返回該函數會返回true的項組成的數組
• forEach()： 數組每一項運行給定函數，該方法無返回值
• map()： 數組每一項運行給定函數，返回該函數每次調用的結果組成的數組
  以上方法不會改變原數組的值

var arr = [1,2,3,4,5,6,7]
var plus10=arr.map(function(item){
   return item+10;
});
console.log(plus10) // [11, 12, 13, 14, 15, 16, 17]

歸併方法

reduce() 和 reduceRight()

這兩個方法都迭代全部項，而後構建一個最終返回值。reduce()從數組開頭迭代，reduceRight() 從數組末尾迭代。接收兩個參數，在每一項上調用的函數和（可選）做爲歸併基礎的初始值。調用函數接收4個參數：前一個值，當前值，項的索引和數組對象。這個函數返回的任何值都做爲第一個參數自動傳給下一項。好比累加操做：

var arr = [1,2,3,4,5,6,7,8,9,10]
var sum=arr.reduce(function(pre,cur){
   return pre+cur;
});
console.log(sum) // 55

ES6+ 新增方法

entries() fill() findIndex() includes()

entries()方法返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。

var array = ['a', 'b', 'c'];
var iterator = array.entries();
console.log(iterator.next().value);
// [0, "a"]
console.log(iterator.next().value);
// [1, "b"]
for (let e of iterator) {
    console.log(e);
}
// [0, "a"] 
// [1, "b"] 
// [2, "c"]

fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。(前閉後開)
fill 方法接受三個參數 value, start 以及 end. start 和 end 參數是可選的, 其默認值分別爲 0 和 this 對象的 length屬性值; fill 方法是個可變方法, 它會改變調用它的 this 對象自己, 而後返回它, 而並非返回一個副本。

var array = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill('fill', 2, 4)); // [1, 2, "fill", "fill"]
console.log(array); // [1, 2, "fill", "fill"]

find() 方法返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。find 方法對數組中的每一項元素執行一次 callback 函數,callback 函數帶有3個參數：當前元素的值、當前元素的索引，以及數組自己。
findIndex()用法和他同樣，不一樣的是findIndex()返回數組中找到的元素的索引，而不是其值。若是找不到，則返回-1。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
function findCherries(fruit) { 
    return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries));  // { name: 'cherries', quantity: 5 }

includes() 方法用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。

var array1 = [1, 2, 3];
console.log(array1.includes(2));
//  true
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
//  true

includes() 方法有意設計爲通用方法。它不要求this值是數組對象，因此它能夠被用於其餘類型的對象 (好比類數組對象)。下面的例子展現了 在函數的arguments對象上調用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

實驗中的功能

flat()

flat() 方法會遞歸到指定深度將全部子數組鏈接，並返回一個新數組。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

參考

• JavaScript高級程序設計（第三版） Nicholas C.Zakas
• Array.prototype.entries() | MDN
• Array.prototype.fill() | MDN
• Array.prototype.find() | MDN
• Array.prototype.flat() | MDN
• Array.prototype.includes() | MDN