添加/移除首端或尾端數(shù)組元素

從數(shù)組的首端或尾端添加和刪除元素的方法：

• arr.push(...items) —— 從尾端添加元素袭灯，
• arr.pop() —— 從尾端提取元素，
• arr.shift() —— 從首端提取元素，
• arr.unshift(...items) —— 從首端添加元素儡循。

從數(shù)組中刪除元素

因為數(shù)組是對象隅茎，所以可以使用 delete：

let arr = ["I", "go", "home"];
delete arr[1]; // remove "go"
alert( arr[1] ); // undefined
// now arr = ["I",  , "home"];
alert( arr.length ); // 3

元素被刪除了，但數(shù)組仍然有 3 個元素剑鞍，因為 delete obj.key 是通過 key 來移除對應(yīng)的值怜浅，被釋放的位置沒有被占據(jù)铐然，如果想讓數(shù)組空位置被占據(jù)蔬崩，就要使用數(shù)組的方法。

splice(添加搀暑，刪除和插入)

arr.splice(str)可以添加沥阳，刪除和插入元素

語法：

arr.splice(index[, deleteCount, elem1, ..., elemN])

從 index 開始：刪除 deleteCount 個元素并在當(dāng)前位置插入 elem1, ..., elemN。最后返回已刪除元素的數(shù)組。

只有index時會刪除從當(dāng)前索引開始的所有元素

例子：

1. 從索引 1 開始刪除 1 個元素

let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 從索引 1 開始刪除 1 個元素
alert( arr ); // ["I", "JavaScript"]

2. 從頭刪除三個元素并替換

let arr = ["I", "study", "JavaScript", "right", "now"];
// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]

3. 返回已刪除元素的數(shù)組

let arr = ["I", "study", "JavaScript", "right", "now"];
// 刪除前兩個元素
let removed = arr.splice(0, 2);
alert( removed ); // "I", "study" <-- 被從數(shù)組中刪除了的元素

4. 將 deleteCount 設(shè)置為 0，splice 方法就能夠插入元素而不用刪除任何元素：

let arr = ["I", "study", "JavaScript"];
// 從索引 2 開始
// 刪除 0 個元素
// 然后插入 "complex" 和 "language"
arr.splice(2, 0, "complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"
---------------------------------------------------------------------
// 也可以使用負(fù)向索引
arr.splice(-1, 0,"complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"

slice(返回新數(shù)組)

arr.slice 方法比 arr.splice 簡單得多鱼鸠，就是根據(jù)兩個(開始潮峦、結(jié)束)索引返回新數(shù)組怠李。

語法：

arr.slice([start], [end])

它會返回一個新數(shù)組，將所有從索引 start 到 end（不包括 end）的數(shù)組項復(fù)制到一個新的數(shù)組。start 和 end 都可以是負(fù)數(shù)，在這種情況下薪伏，從末尾計算索引。

只有start時粗仓，返回從位置start 到尾端的的數(shù)組

例子：

let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s（復(fù)制從位置 1 到位置 3 的元素）
alert( arr.slice(-2) ); // s,t（復(fù)制從位置 -2 到尾端的元素）
alert( arr.slice() ); //

當(dāng)不帶參數(shù)地調(diào)用時：arr.slice() 會創(chuàng)建一個 arr 的副本嫁怀。其通常用于獲取副本，以進(jìn)行不影響原始數(shù)組的進(jìn)一步轉(zhuǎn)換借浊。

concat(數(shù)組拼接數(shù)組/值)

arr.concat 創(chuàng)建一個新數(shù)組塘淑，其中包含來自于其他數(shù)組和其他項的值。

語法：

arr.concat(arg1, arg2...)

它接受任意數(shù)量的參數(shù) —— 數(shù)組或值都可以蚂斤。

返回一個包含來自于 arr存捺，然后是 arg1，arg2 的元素的新數(shù)組曙蒸。

如果參數(shù) argN 是一個數(shù)組捌治，那么其中的所有元素都會被復(fù)制。否則逸爵，將復(fù)制參數(shù)本身

例子：

let arr = [1, 2];
// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4
// create an array from: arr and [3,4] and [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// create an array from: arr and [3,4], then add values 5 and 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

當(dāng)拼接對象時具滴，對象會作為一個整體添加

let arr = [1, 2];
let obj = {
  aaa: "something",
};
console.log( arr.concat(obj) ); // [1, 2, {…}]

即使該對象看起來像數(shù)組一樣凹嘲，但仍然會被作為一個整體添加

let arr = [1, 2];
let arrayLike = {
  0: "something",
  length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]
console.log(arr.concat(arrayLike) ) // [1, 2, {…}]

但是师倔，如果類似數(shù)組的對象具有 Symbol.isConcatSpreadable 屬性，那么它就會被 concat 當(dāng)作一個數(shù)組來處理：此對象中的元素將被添加：

let arr = [1, 2];

let arrayLike = {
  aaa: "something",
  bbb: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

遍歷：forEach

arr.forEach 方法對數(shù)組的每個元素執(zhí)行一次給定的函數(shù)

語法：

arr.forEach(function(item[, index [, array]]) {
  // ... do something with item
})[, thisArg]);// thisArg為可選參數(shù)周蹭，當(dāng)執(zhí)行回調(diào)函數(shù)時趋艘，用作 this 的值。

• item是數(shù)組中正在處理的當(dāng)前元素
• index是數(shù)組中正在處理的當(dāng)前元素的索引
• array是正在操作的數(shù)組

例子：

對每個元素調(diào)用 alert

["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

這段代碼更詳細(xì)地介紹了它們在目標(biāo)數(shù)組中的位置

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {  
    alert(`${item} is at index ${index} in ${array}`); 
});

該方法沒有返回值（undefined）凶朗。

注意：如果使用箭頭函數(shù)表達(dá)式來傳入函數(shù)參數(shù)瓷胧， thisArg 參數(shù)會被忽略，因為箭頭函數(shù)在詞法上綁定了 this 值棚愤。

在數(shù)組中搜索

indexOf

arr.indexOf(searchElement[, fromIndex])

searchElement:要查找的元素

從索引fromIndex開始查找搓萧，返回在數(shù)組中要查找的元素searchElement的第一個索引杂数，如果不存在，則返回-1瘸洛。

• 如果該索引值大于或等于數(shù)組長度揍移，意味著不會在數(shù)組里查找，返回-1反肋。
• 如果參數(shù)中提供的索引值是一個負(fù)值那伐，則將其作為數(shù)組末尾的一個抵消，即-1表示從最后一個元素開始查找石蔗，-2表示從倒數(shù)第二個元素開始查找 罕邀，以此類推。
• 注意：如果參數(shù)中提供的索引值是一個負(fù)值养距，并不改變其查找順序诉探，查找順序仍然是從前向后查詢數(shù)組。如果抵消后的索引值仍小于0棍厌，則整個數(shù)組都將會被查詢阵具。其默認(rèn)值為0.

例子：

let arr = [1, 0, false];
alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1
alert( arr.includes(1) ); // true

lastIndexOf

arr.lastIndexOf(searchElement[, fromIndex])

從索引fromIndex從右向左開始查找，返回在數(shù)組中要查找的元素searchElement的最后一個索引定铜，如果不存在阳液，則返回-1。

• 如果索引值大于或等于數(shù)組的長度揣炕，則整個數(shù)組會被查找帘皿。
• 如果索引值為負(fù)值，數(shù)組仍然會被從后向前查找畸陡。
• 如果索引值為負(fù)值鹰溜，其絕對值大于數(shù)組長度，則方法返回 -1丁恭，即數(shù)組不會被查找曹动。
• 索引值默認(rèn)為數(shù)組的長度減 1(arr.length - 1)，即整個數(shù)組都被查找牲览。

includes

includes() 方法用來判斷一個數(shù)組是否包含一個指定的值墓陈，根據(jù)情況，如果包含則返回 true第献，否則返回false贡必。

arr.includes(item[, from])

從索引 from 開始搜索 item，如果找到則返回 true庸毫，如果沒找到仔拟，則返回 false。

如果我們想檢查是否包含某個元素飒赃，并且不想知道確切的索引利花，那么 arr.includes 是首選科侈。

此外，includes 的一個非常小的差別是它能正確處理NaN炒事，而不像 indexOf/lastIndexOf：

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1（應(yīng)該為 0兑徘，但是嚴(yán)格相等 === equality 對 NaN 無效）
alert( arr.includes(NaN) );// true（這個結(jié)果是對的）

找到具有特定條件的對象

find和findindex

find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined羡洛。

語法:

let result = arr.find(function(item, index, array) {
  // 如果返回 true挂脑，則返回 item 并停止迭代
  // 對于 falsy 則返回 undefined
});

• item 是當(dāng)前元素。
• index 是當(dāng)前元素的索引欲侮。
• array 是數(shù)組本身崭闲。

依次對數(shù)組中的每個元素調(diào)用該函數(shù)：

如果它返回 true，則搜索停止威蕉，并返回 item刁俭。如果沒有搜索到，則返回 undefined韧涨。

例子：

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
alert(user.name); // John

arr.findIndex 方法（與 arr.find 方法）基本上是一樣的牍戚，但它返回找到元素的索引，而不是元素本身虑粥。并且在未找到任何內(nèi)容時返回 -1如孝。

filter

如果需要匹配的有很多，我們可以使用 arr.filter(fn)娩贷。

語法與 find 大致相同第晰，但是 filter 返回的是所有匹配元素組成的數(shù)組：

let results = arr.filter(function(item, index, array) {
  // 如果 true item 被 push 到 results，迭代繼續(xù)
  // 如果什么都沒找到彬祖，則返回空數(shù)組
});

例子：

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 返回前兩個用戶的數(shù)組
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

轉(zhuǎn)換數(shù)組（遍歷）

map(返回數(shù)組)

arr.map 方法是最有用和經(jīng)常使用的方法之一茁瘦。

它對數(shù)組的每個元素都調(diào)用函數(shù)，并返回結(jié)果數(shù)組储笑。

語法：

let result = arr.map(function(item, index, array) {
  // 返回新值而不是當(dāng)前元素
})

例子：

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort(fn)

arr.sort 方法對數(shù)組進(jìn)行 原位（in-place） 排序甜熔，更改元素的順序。(原位是指在此數(shù)組內(nèi)突倍，而非生成一個新數(shù)組腔稀。)

它還返回排序后的數(shù)組，但是返回值通常會被忽略赘方，因為修改了 arr 本身烧颖。

語法：

arr.sort([compareFunction])

compareFunction 可選

用來指定按某種順序進(jìn)行排列的函數(shù)弱左。如果省略窄陡，元素按照轉(zhuǎn)換為的字符串的各個字符的Unicode位點進(jìn)行排序。

• firstEl

  第一個用于比較的元素拆火。

• secondEl

  第二個用于比較的元素跳夭。

例子：

let arr = [ 1, 2, 15 ];
// 該方法重新排列 arr 的內(nèi)容
arr.sort();
alert( arr );  // 1, 15, 2

如果指明了 compareFunction 涂圆，那么數(shù)組會按照調(diào)用該函數(shù)的返回值排序。即 a 和 b 是兩個將要被比較的元素：

• 如果 compareFunction(a, b) 小于 0 币叹，那么 a 會被排列到 b 之前润歉；

• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相對位置不變颈抚。備注： ECMAScript 標(biāo)準(zhǔn)并不保證這一行為踩衩，而且也不是所有瀏覽器都會遵守（例如 Mozilla 在 2003 年之前的版本）；

• 如果 compareFunction(a, b) 大于 0 贩汉， b 會被排列到 a 之前驱富。

• compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結(jié)果，否則排序的結(jié)果將是不確定的匹舞。

function compareNumeric(a, b) {
  // if (a > b) return 1;
  // if (a == b) return 0;
  // if (a < b) return -1;
  return a - b; 
}

let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr);  // 1, 2, 15
// 上面簡寫arr.sort( (a, b) => a - b );

reverse反轉(zhuǎn)數(shù)組

arr.reverse 方法用于顛倒 arr 中元素的順序褐鸥。

例如：

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

它也會返回顛倒后的數(shù)組 arr。

split (分割字符串為數(shù)組)

str.split(delim) 可以通過給定的分隔符 delim 將字符串分割成一個數(shù)組赐稽。

使用"逗號后跟著一個空格"作為分隔符

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `A message to ${name}.` ); // A message to Bilbo（和其他名字）
}

split 方法有一個可選的第二個數(shù)字參數(shù) —— 對數(shù)組長度的限制叫榕。如果提供了，那么額外的元素會被忽略姊舵。但實際上它很少使用：

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

拆分為字母

調(diào)用帶有空參數(shù) s 的 split(s)晰绎，會將字符串拆分為字母數(shù)組：

let str = "test";

alert( str.split('') ); // t,e,s,t

join(拼接字符串為數(shù)組)

arr.join(glue) 與 split 相反。它會在它們之間創(chuàng)建一串由 glue 粘合的 arr 項括丁。

例子：

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分號 ; 將數(shù)組粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight(根據(jù)數(shù)組計算單個值)

當(dāng)我們需要遍歷一個數(shù)組時 —— 我們可以使用 forEach寒匙，for 或 for..of。

當(dāng)我們需要遍歷并返回每個元素的數(shù)據(jù)時 —— 我們可以使用 map躏将。

arr.reduce 方法和 arr.reduceRight 方法和上面的種類差不多锄弱，但稍微復(fù)雜一點。它們用于根據(jù)數(shù)組計算單個值祸憋。

語法是：

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

該函數(shù)一個接一個地應(yīng)用于所有數(shù)組元素会宪，并將其結(jié)果“搬運（carry on）”到下一個調(diào)用。

參數(shù)：

• accumulator —— 是上一個函數(shù)調(diào)用的結(jié)果蚯窥，第一次等于 initial（如果提供了 initial 的話）掸鹅。
• item —— 當(dāng)前的數(shù)組元素。
• index —— 當(dāng)前索引拦赠。
• arr —— 數(shù)組本身巍沙。

應(yīng)用函數(shù)時，上一個函數(shù)調(diào)用的結(jié)果將作為第一個參數(shù)傳遞給下一個函數(shù)荷鼠。

因此句携，第一個參數(shù)本質(zhì)上是累加器，用于存儲所有先前執(zhí)行的組合結(jié)果允乐。最后矮嫉，它成為 reduce 的結(jié)果削咆。

在這里，我們通過一行代碼得到一個數(shù)組的總和：

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

傳遞給 reduce 的函數(shù)僅使用了 2 個參數(shù)蠢笋，通常這就足夠了

讓我們看看細(xì)節(jié)拨齐，到底發(fā)生了什么。

1. 在第一次運行時昨寞，sum 的值為初始值 initial（reduce 的最后一個參數(shù)）瞻惋，等于 0，current 是第一個數(shù)組元素援岩，等于 1熟史。所以函數(shù)運行的結(jié)果是 1。
2. 在第二次運行時窄俏，sum = 1蹂匹，我們將第二個數(shù)組元素（2）與其相加并返回。
3. 在第三次運行中凹蜈，sum = 3限寞，我們繼續(xù)把下一個元素與其相加，以此類推……

計算流程：

計算流程

或者以表格的形式表示仰坦，每一行代表的是對下一個數(shù)組元素的函數(shù)調(diào)用：

在這里履植，我們可以清楚地看到上一個調(diào)用的結(jié)果如何成為下一個調(diào)用的第一個參數(shù)。

我們也可以省略初始值：

let arr = [1, 2, 3, 4, 5];

// 刪除 reduce 的初始值（沒有 0）
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

結(jié)果是一樣的悄晃。這是因為如果沒有初始值玫霎，那么 reduce 會將數(shù)組的第一個元素作為初始值，并從第二個元素開始迭代妈橄。

計算表與上面相同庶近，只是去掉第一行。

但是這種使用需要非常小心眷蚓。如果數(shù)組為空鼻种，那么在沒有初始值的情況下調(diào)用 reduce 會導(dǎo)致錯誤。

例子：

let arr = [];

// Error: Reduce of empty array with no initial value
// 如果初始值存在沙热，則 reduce 將為空 arr 返回它（即這個初始值）叉钥。
arr.reduce((sum, current) => sum + current);

所以建議始終指定初始值。

arr.reduceRight 和 arr.reduce 方法的功能一樣篙贸，只是遍歷為從右到左投队。

Array.isArray(判斷是否為數(shù)組)

數(shù)組是基于對象的，不構(gòu)成單獨的語言類型爵川。

所以 typeof 不能幫助從數(shù)組中區(qū)分出普通對象：

alert(typeof {}); // object
alert(typeof []); // object

Array.isArray(value)可以對此進(jìn)行判斷敷鸦，如果 value 是一個數(shù)組，則返回 true；否則返回 false轧膘。

alert(Array.isArray({})); // false
alert(Array.isArray([])); // true

thisArg(附加參數(shù))

幾乎所有調(diào)用函數(shù)的數(shù)組方法 —— 比如 find钞螟，filter兔甘，map谎碍，除了 sort 是一個特例，都接受一個可選的附加參數(shù) thisArg洞焙。

上面的部分中沒有解釋該參數(shù)蟆淀，因為該參數(shù)很少使用以下是這些方法的完整語法：

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg 是可選的最后一個參數(shù)

thisArg 參數(shù)的值在 func 中變?yōu)?this。

例如澡匪，在這里我們使用 army 對象方法作為過濾器熔任，thisArg 用于傳遞上下文（passes the context）：

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// 找到 army.canJoin 返回 true 的 user
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

如果在上面的示例中我們使用了 users.filter(army.canJoin)，那么 army.canJoin 將被作為獨立函數(shù)調(diào)用唁情，并且這時 this=undefined疑苔，從而會導(dǎo)致即時錯誤。

可以用 users.filter(user => army.canJoin(user)) 替換對 users.filter(army.canJoin, army) 的調(diào)用甸鸟。前者的使用頻率更高惦费，因為對于大多數(shù)人來說，它更容易理解抢韭。

總結(jié)

數(shù)組方法備忘單：

• 添加/刪除元素：
  • push(...items) —— 向尾端添加元素薪贫，
  • pop() —— 從尾端提取一個元素，
  • shift() —— 從首端提取一個元素刻恭，
  • unshift(...items) —— 向首端添加元素瞧省，
  • splice(pos, deleteCount, ...items) —— 從 index 開始刪除 deleteCount 個元素，并在當(dāng)前位置插入 items鳍贾。
  • slice(start, end) —— 創(chuàng)建一個新數(shù)組鞍匾，將從位置 start 到位置 end（但不包括 end）的元素復(fù)制進(jìn)去。
  • concat(...items) —— 返回一個新數(shù)組：復(fù)制當(dāng)前數(shù)組的所有元素骑科，并向其中添加 items候学。如果 items 中的任意一項是一個數(shù)組，那么就取其元素纵散。
• 搜索元素：
  • indexOf/lastIndexOf(item, pos) —— 從位置 pos 開始搜索 item梳码，搜索到則返回該項的索引，否則返回 -1伍掀。
  • includes(value) —— 如果數(shù)組有 value掰茶，則返回 true，否則返回 false蜜笤。
  • find/filter(func) —— 通過 func 過濾元素濒蒋，返回使 func 返回 true 的第一個值/所有值。
  • findIndex 和 find 類似，但返回索引而不是值沪伙。
• 遍歷元素：
  • forEach(func) —— 對每個元素都調(diào)用 func瓮顽，不返回任何內(nèi)容。
• 轉(zhuǎn)換數(shù)組：
  • map(func) —— 根據(jù)對每個元素調(diào)用 func 的結(jié)果創(chuàng)建一個新數(shù)組围橡。
  • sort(func) —— 對數(shù)組進(jìn)行原位（in-place）排序暖混，然后返回它。
  • reverse() —— 原位（in-place）反轉(zhuǎn)數(shù)組翁授，然后返回它拣播。
  • split/join —— 將字符串轉(zhuǎn)換為數(shù)組并返回。
  • reduce(func, initial) —— 通過對每個元素調(diào)用 func 計算數(shù)組上的單個值收擦，并在調(diào)用之間傳遞中間結(jié)果贮配。
• 其他：
  • Array.isArray(arr) 檢查 arr 是否是一個數(shù)組。

請注意塞赂，sort泪勒，reverse 和 splice 方法修改的是數(shù)組本身。

這些是最常用的方法宴猾，它們覆蓋 99％ 的用例圆存。但是還有其他幾個：

• arr.some(fn)/arr.every(fn) 檢查數(shù)組。

  與 map 類似鳍置，對數(shù)組的每個元素調(diào)用函數(shù) fn辽剧。如果任何/所有結(jié)果為 true，則返回 true税产，否則返回 false怕轿。

• arr.fill(value, start, end) —— 從索引 start 到 end，用重復(fù)的 value 填充數(shù)組辟拷。

• arr.copyWithin(target, start, end) —— 將從位置 start 到 end 的所有元素復(fù)制到 自身 的 target 位置（覆蓋現(xiàn)有元素）撞羽。

有關(guān)完整列表，請參閱 手冊衫冻。

參考：

1.現(xiàn)代javascript教程

2.mdn