讓代碼簡潔而優雅——恰到好處的使用數組的各種方法

本以為今天的帖子會很簡單，越寫越覺得啃了塊硬骨頭。

判斷是否是數組

沒啥好說的推薦 Array.isArray，示例：

Array.isArray([1, 2, 3, 4]);  // --> true
 
Array.isArray({
    a: 1,
    b: 2
});  // --> false
 
Array.isArray(new Array);  // --> true
 
Array.isArray("Array");  // --> false

注意：Array.isArray是ES 5.1推出的，很早以前的瀏覽器可能不支持，所以在使用的時候也應注意兼容問題。處理方法如下：

if(typeof Array.isArray != "function") {
  Array.isArray = function(obj){
    return Object.prototype.toString.call(obj) == "[object Array]";
  }
}

定義數組

直接使用下面的方式，新建一個數組。不要使用new，這並不高級，相反使用new的效率不如下面的方式。

const array = [];

恰到好處的使用

添加
1、array.push(item1, item2, ..., itemX); 將新元素添加到數組的末尾，並返回新的長度。

2、array.unshift(item1, item2, ..., itemX); 將新元素添加到數組的開頭，並返回新的長度。

3、array.splice(index, howmany, item1, ....., itemX); howmany傳0時表示純添加，多應用於從某個位置添加一個或多個元素。

4、array1.concat(array2, array3, ..., arrayX); 連接兩個或多個數組，並返回已連接數組的副本。

刪除
1、pop()；刪除數組的最后一個元素，並返回該元素。

2、shift()；刪除數組的第一個元素，並返回該元素。

3、array.splice(index, howmany, item1, ....., itemX); 從index開始刪除howmany個元素，多應用於從某個位置刪除一個或多個元素。

4、array.slice(start, end)；選擇數組的一部分，並返回新數組。

5、array.filter(function(currentValue, index, arr), thisValue)；從數組中篩選出新數組，有條件刪除元素可以用，如：array.filter(value => value > 10)

修改
1、array.splice(index, howmany, item1, ....., itemX); 這個應該理解為刪除並添加，修改了數組的元素個數。

2、array.map(function(currentValue, index, arr), thisValue)；批量修改，函數里面return的值會替換原位置的元素。

3、array.copyWithin(target, start, end)；選一部分數據，覆蓋另一部分。這個函數使用較少也比較不好理解，簡單的說可以理解為復制后面start到end的元素，然后從target開始替換，有幾個替換為幾個。

4、array.fill(value, start, end)；用某個值替換部分數據。部分場景很有用，如初始化臟數組

查詢
1、array.filter(function(currentValue, index, arr), thisValue)；篩選符合條件的元素，返回數組

2、array.find(function(currentValue, index, arr), thisValue)；查找數組中第一個符合條件的元素

3、array.findIndex(function(currentValue, index, arr), thisValue)；查找數組中第一個符合條件的元素的index

4、array.indexOf(item, start)；查找數組中第一個符合條件的元素的index。

5、array.lastIndexOf(item, start)；這個是從后往前找，可以用於查找最后一個某元素。

排序
1、array.sort(compareFunction)；使用sort能輕松的處理幾乎所有你想要的排序。如：array.sort((a, b) => a-b)

2、array.reverse()；反轉數組中元素的順序。

校驗
1、array.every(function(currentValue, index, arr), thisValue)；檢查數組中的每個元素是否通過測試。如：array.every(age => age > 10);

2、array.some(function(currentValue, index, arr), thisValue)；檢查數組中的任何元素是否通過測試。有一個符合條件就行

3、array.includes(element, start)；檢查數組是否包含指定的元素。

遍歷
符合上面場景的盡量去使用上面場景，不要隨意使用遍歷，這並不算太好閱讀。

1、array.forEach(function(currentValue, index, arr), thisValue)；遍歷所有元素，每個元素都會觸發函數。這個函數是數組的函數所以先說了，個人並不太推薦無腦使用這個，因為這個函數沒法在中間停止，除非拋出異常。

2、for (let i = 0; i < array.length; i++)；能實現幾乎所有的需要遍歷的場景。在不需要繼續執行的時候請記得使用continue和break這些跳出循環函數。

3、類似於棧消費場景（先進后消費），推薦使用如下方式：

while (array.length) {
  let item = array.pop();
  console.log(item);
}

4、類似於隊列消費場景（先進先消費），推薦使用如下方式：

while (array.length) {
  let item = array.pop();
  console.log(item);
}

數組與字符串
1、Array.from(object, mapFunction, thisValue)；從字符串創建數組，如：Array.from('123') // => ['1', '2', '3']

2、array.toString()；將數組轉換為字符串，並返回結果，如：['1', '2', '3'].toString() // => '1,2,3'

3、stringObject.split(separator,howmany)；字符串分割為數組，如：'123'.split('') // => ['1', '2', '3']

4、array.join(separator)；將數組的所有元素連接成一個字符串，separator可選。要使用的分隔符。如果省略，元素用逗號分隔。如：['1', '2', '3'].join('') // => '123'

總結

一些簡單的用法基本都在上面了，高階用法后面再寫一篇吧。
原創不易，盡量做到每天寫一篇，歡迎關注收藏點贊，發現問題歡迎留言指正。

方法匯總

方法	描述
concat()	連接兩個或多個數組，並返回已連接數組的副本。
copyWithin()	將數組中的數組元素復制到指定位置或從指定位置復制。
entries()	返回鍵/值對數組迭代對象。
every()	檢查數組中的每個元素是否通過測試。
fill()	用靜態值填充數組中的元素。
filter()	使用數組中通過測試的每個元素創建新數組。
find()	返回數組中第一個通過測試的元素的值。
findIndex()	返回數組中通過測試的第一個元素的索引。
forEach()	為每個數組元素調用函數。
from()	從對象創建數組。
includes()	檢查數組是否包含指定的元素。
indexOf()	在數組中搜索元素並返回其位置。
isArray()	檢查對象是否為數組。
join()	將數組的所有元素連接成一個字符串。
keys()	返回 Array Iteration 對象，包含原始數組的鍵.
lastIndexOf()	在數組中搜索元素，從末尾開始，並返回其位置。
map()	使用為每個數組元素調用函數的結果創建新數組。
pop()	刪除數組的最后一個元素，並返回該元素。
push()	將新元素添加到數組的末尾，並返回新的長度。
reduce()	將數組的值減為單個值（從左到右）。
reduceRight()	將數組的值減為單個值（從右到左）。
reverse()	反轉數組中元素的順序。
shift()	刪除數組的第一個元素，並返回該元素。
slice()	選擇數組的一部分，並返回新數組。
some()	檢查數組中的任何元素是否通過測試。
sort()	對數組的元素進行排序。
splice()	從數組中添加/刪除元素。返回刪除結果
toString()	將數組轉換為字符串，並返回結果。
unshift()	將新元素添加到數組的開頭，並返回新的長度。
valueOf()	返回數組的原始值。