數組是js中最常用到的數據集合，其內置的方法有很多，熟練掌握這些方法，可以有效的提高我們的工作效率，同時對我們的代碼質量也是有很大影響。本文所有的栗子都是在es7環境下測試的，如果有問題歡迎留言交流
創建數組
我將創建數組的方式分為以下四大類
一、字面量方式
使用對象字面量方式創建數組是我們最常用的一種方式
const array1 = [1, 2, 3, 4, 5]; 二、使用Array構造方法
無參構造
使用無參構造可以創建一個長度為0的空數組
const array1 = new Array(); 帶參構造
- 如果只傳一個數值參數，則表示創建一個初始長度為指定數值的空數組
const array2 = new Array(3); - 如果傳入一個非數值的參數或者參數個數大於1，則表示創建一個包含指定元素的數組
const array3 = new Array(1, 2, 3, 'array'); // [1, 2, 3, "array"] const array4 = new Array('23'); // ["23"] 三、Array.of方法創建數組(es6新增)
ES6為數組新增創建方法的目的之一，是幫助開發者在使用Array構造器時避開js語言的一個怪異點。Array.of()方法總會創建一個包含所有傳入參數的數組，而不管參數的數量與類型。
let arr = Array.of(1, 2); console.log(arr.length);//2 let arr1 = Array.of(3); console.log(arr1.length);//1 console.log(arr1[0]);//3 let arr2 = Array.of('2'); console.log(arr2.length);//1 console.log(arr2[0]);//'2' 在使用Array.of()方法創建數組時，只需將想要包含在數組內的值作為參數傳入。
四、Array.from方法創建數組(es6新增)
在js中將非數組對象轉換為真正的數組是非常麻煩的。在ES6中，將可迭代對象或者類數組對象作為第一個參數傳入，Array.from()就能返回一個數組。
function arga(...args) { let arg = Array.from(arguments); console.log(arg); } arga('arr1', 26, 'from'); // ['arr1',26,'from'] 映射轉換
如果你想實行進一步的數組轉換，你可以向Array.from()方法傳遞一個映射用的函數作為第二個參數。此函數會將數組對象的每一個值轉換為目標形式，並將其存儲在目標數組的對應位置上。
function arga(...args) { return Array.from(arguments, value => value + 1); } let arr = arga('arr', 26, 'pop'); console.log(arr);//['arr1',27,'pop1'] 如果映射函數需要在對象上工作，你可以手動傳遞第三個參數給Array.from()方法，從而指定映射函數內部的this值
const helper = { diff: 1, add(value) { return value + this.diff; } } function translate() { return Array.from(arguments, helper.add, helper); } let arr = translate('liu', 26, 'man'); console.log(arr); // ["liu1", 27, "man1"] 數組方法
創建數組完成之后，接下來我們就來看一下數組中的每一個方法是什么功能及其詳細用法。下面的方法是按照字母順序寫的
concat
concat() 方法用於連接兩個或多個數組。
該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。
const array1 = [22, 3, 31, 12]; const array2 = [19, 33, 20]; const newArray = array1.concat(10, array2, 9); console.log(array1); // [22, 3, 31, 12] console.log(newArray); // [22, 3, 31, 12, 10, 19, 33, 20, 9] 通過上面的例子可以看出：concat傳入的參數可以是具體的值，也可以是數組對象。可以是任意多個。
copyWithin(es6新增)
copyWithin() 方法用於從數組的指定位置拷貝元素到數組的另一個指定位置中。
該方法會改變現有數組
//將數組的前兩個元素復制到數組的最后兩個位置 let arr = [1, 2, 3, 'arr', 5]; arr.copyWithin(3, 0); console.log(arr);//[1,2,3,1,2] 默認情況下，copyWithin()方法總是會一直復制到數組末尾，不過你還可以提供一個可選參數來限制到底有多少元素會被覆蓋。這第三個參數指定了復制停止的位置（不包含該位置本身）。
let arr = [1, 2, 3, 'arr', 5, 9, 17]; //從索引3的位置開始粘貼 //從索引0的位置開始復制 //遇到索引3時停止復制 arr.copyWithin(3, 0, 3); console.log(arr);//[1,2,3,1,2,3,17] every
every()方法用於判斷數組中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true。
const array1 = [22, 3, 31, 12]; const isRight1 = array1.every((v, i, a) => { return v > 1; }); const isRight2 = array1.every((v, i, a) => { return v > 10; }); console.log(isRight1); // true console.log(isRight2); // false fill(es6新增)
fill()方法能使用特定值填充數組中的一個或多個元素。當只是用一個參數時，該方法會用該參數的值填充整個數組。
let arr = [1, 2, 3, 'cc', 5]; arr.fill(1); console.log(arr);//[1,1,1,1,1]; 如果不想改變數組中的所有元素，而只是想改變其中一部分，那么可以使用可選的起始位置參數與結束位置參數（不包括結束位置的那個元素）
let arr = [1, 2, 3, 'arr', 5]; arr.fill(1, 2); console.log(arr);//[1,2,1,1,1] arr.fill(0, 1, 3); console.log(arr);//[1,0,0,1,1]; filter
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。該方法不會改變原數組
const array1 = [22, 3, 31, 12]; const array2 = array1.filter((v, i, a) => { if (v > 13) { return v; } }); console.log(array1); // [22, 3, 31, 12] console.log(array2); // [22, 31] find()與findIndex()(es6新增)
find()與findIndex()方法均接受兩個參數：一個回調函數，一個可選值用於指定回調函數內部的this。該回調函數可接受三個參數：數組的某個元素，該元素對應的索引位置，以及該數組本身。該回調函數應當在給定的元素滿足你定義的條件時返回true，而find()和findIndex()方法均會在回調函數第一次返回true時停止查找。
二者唯一的區別是：find()方法返回匹配的值，而findIndex()返回匹配位置的索引。
let arr = [1, 2, 3, 'arr', 5, 1, 9]; console.log(arr.find((value, keys, arr) => { return value > 2; })); // 3 返回匹配的值 console.log(arr.findIndex((value, keys, arr) => { return value > 2; })); // 2 返回匹配位置的索引 forEach
forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。
let sum = 0; const array1 = [22, 3, 31, 12]; array1.forEach((v, i, a) => { sum += v; }); console.log(sum); // 68 includes(es7新增)
includes() 方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。
參數有兩個，其中第一個是（必填）需要查找的元素值，第二個是（可選）開始查找元素的位置
const array1 = [22, 3, 31, 12, 'arr']; const includes = array1.includes(31); console.log(includes); // true const includes1 = array1.includes(31, 3); // 從索引3開始查找31是否存在 console.log(includes1); // false 需要注意的是：includes使用===運算符來進行值比較，僅有一個例外：NaN被認為與自身相等。
let values = [1, NaN, 2]; console.log(values.indexOf(NaN));//-1 console.log(values.includes(NaN));//true indexOf
indexOf() 方法可返回數組中某個指定的元素位置。
該方法將從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。
如果在數組中沒找到指定元素則返回 -1。
參數有兩個，其中第一個是（必填）需要查找的元素值，第二個是（可選）開始查找元素的位置
const array1 = [22, 3, 31, 12, 'arr']; const index = array1.indexOf(31); console.log(index); // 2 const index1 = array1.indexOf(31, 3); console.log(index1); // -1 join
join() 方法用於把數組中的所有元素轉換一個字符串。
元素是通過指定的分隔符進行分隔的。默認使用逗號作為分隔符
const array1 = [22, 3, 31, 12, 'arr']; const str = array1.join('~'); console.log(str); // 22~3~31~12~arr const str1 = array1.join(); console.log(str1); // 22,3,31,12,arr lastIndexOf
lastIndexOf() 方法可返回一個指定的元素在數組中最后出現的位置，在一個數組中的指定位置從后向前搜索。
如果要檢索的元素沒有出現，則該方法返回 -1。
該方法將從尾到頭地檢索數組中指定元素 item。開始檢索的位置在數組的 start 處或數組的結尾（沒有指定 start 參數時）。如果找到一個 item，則返回 item 從尾向前檢索第一個次出現在數組的位置。數組的索引開始位置是從 0 開始的。
如果在數組中沒找到指定元素則返回 -1。
const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43]; const index1 = array1.lastIndexOf(31); console.log(index1); // 6 const index2 = array1.lastIndexOf(31, 5); console.log(index2); // 2 const index3 = array1.lastIndexOf(35); console.log(index3); // -1 map
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
該方法不會改變原數組
const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43]; const array2 = array1.map((v, i, a) => { return v + 1; }); console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43] console.log(array2); // [23, 4, 32, 13, "arr1", 20, 32, 57, 44] pop
pop() 方法用於刪除數組的最后一個元素並返回刪除的元素。
const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43]; const item = array1.pop(); console.log(item); // 43 console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56] push
push()方法從數組末尾向數組添加元素，可以添加一個或多個元素。
const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43]; array1.push(11, 16, 18); console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43, 11, 16, 18] reduce
reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
const array1 = [22, 3, 31, 12]; const sum = array1.reduce((total, number) => { return total + number; }); console.log(sum); // 68 reduceRight
reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從數組的末尾向前將數組中的數組項做累加。
const array1 = [22, 3, 31, 12]; const sum = array1.reduceRight((total, number) => { return total + number; }); console.log(sum); // 68 reverse
reverse() 方法用於顛倒數組中元素的順序。
const array1 = [22, 3, 31, 12]; array1.reverse(); console.log(array1); // [12, 31, 3, 22] shift
shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。
const array1 = [22, 3, 31, 12]; const item = array1.shift(); console.log(item); // 22 console.log(array1); // [3, 31, 12] slice
slice() 方法可從已有的數組中返回選定的元素。
slice()方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。
slice() 方法不會改變原始數組。
const array1 = [22, 3, 31, 12]; const array2 = array1.slice(1, 3); console.log(array1); // [22, 3, 31, 12] console.log(array2); // [3, 31] some
some() 方法用於檢測數組中的元素是否滿足指定條件（函數提供）。
some() 方法會依次執行數組的每個元素：
如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。
const array1 = [22, 3, 31, 12]; const someTrue1 = array1.some((v, i, a) => { return v == 11; }); const someTrue2 = array1.some((v, i, a) => { return v == 31; }); console.log(someTrue1); // false console.log(someTrue2); // true sort
sort() 方法用於對數組的元素進行排序。
排序順序可以是字母或數字，並按升序或降序。
默認排序順序為按字母升序。
const array1 = [22, 3, 31, 12]; array1.sort((a, b) => { return a > b ? 1 : -1; }); console.log(array1); // 數字升序 [3, 12, 22, 31] splice
splice() 方法用於添加或刪除數組中的元素。
- 刪除元素,並返回刪除的元素
const array1 = [22, 3, 31, 12]; const item = array1.splice(1, 2); console.log(item); // [3, 31] console.log(array1); // [22, 12] - 向指定索引處添加元素
const array1 = [22, 3, 31, 12]; array1.splice(1, 0, 12, 35); console.log(array1); // [22, 12, 35, 3, 31, 12] - 替換指定索引位置的元素
const array1 = [22, 3, 31, 12]; array1.splice(1, 1, 8); console.log(array1); // [22, 8, 31, 12] toLocaleString和toString
將數組轉換為字符串
const array1 = [22, 3, 31, 12]; const str = array1.toLocaleString(); const str1 = array1.toString(); console.log(str); // 22,3,31,12 console.log(str1); // 22,3,31,12 unshift
unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。
該方法將改變數組的數目。
const array1 = [22, 3, 31, 12]; const item = array1.unshift(11); console.log(item); // 5 新數組的長度 console.log(array1); // [11, 22, 3, 31, 12]