數(shù)組（Array）作為 JavaScript 位列第一的對象， 其重要性可見一般，在這里就讓我們來詳細(xì)的扒一扒數(shù)組對象都有哪些方法，它們分別能對數(shù)組做什么。

一、數(shù)組是什么

官方對于 Array（數(shù)組）對象的解釋是這樣的：使用單獨(dú)的變量名來存儲一系列的值。簡而言之就是把你要儲存的值都放在一個(gè)房間里，然后給他們每人一個(gè)固定的座位號，你在找這些值的時(shí)候可以通過座位號 1、2、3...... 快速的找到你需要的數(shù)值。

在 JavaScript 中，數(shù)組是一種特殊的對象，用于表示和操作有序的數(shù)據(jù)集。數(shù)組是一種數(shù)據(jù)結(jié)構(gòu)，可以存儲多個(gè)值在一個(gè)變量中，并通過數(shù)字索引來訪問這些值。

JavaScript 中的數(shù)組與其他編程語言中的數(shù)組有所不同，因?yàn)樗哂袆討B(tài)大小，這意味著可以在運(yùn)行時(shí)添加或刪除元素。

以下是一些關(guān)于 JavaScript 數(shù)組的基本特點(diǎn)：

• 索引訪問：可以通過索引訪問數(shù)組中的元素，索引從0開始。例如，arr[0]將訪問數(shù)組的第一個(gè)元素。
• 動態(tài)大小：可以隨時(shí)向數(shù)組添加或刪除元素，而不需要預(yù)先指定其大小。
• 異質(zhì)性：數(shù)組可以包含不同類型的元素。
• 方法：JavaScript數(shù)組有大量內(nèi)置方法，如push(), pop(), shift(), unshift(), splice(), slice(), map(), filter(), reduce()等，這些方法可用于操作數(shù)組。
• 多維數(shù)組：JavaScript中的數(shù)組也可以是二維或多維的。
• 關(guān)聯(lián)數(shù)組：除了數(shù)字索引外，還可以使用字符串或其他對象作為鍵來存儲和訪問值。

Array對象的方法可以根據(jù)其用途和功能來進(jìn)行分類，本文將按照不同的分類來分別對這些方法做解釋。

二、轉(zhuǎn)換方法

以下這些方法用于將數(shù)組轉(zhuǎn)換為其他數(shù)據(jù)類型，或者將其他數(shù)據(jù)類型轉(zhuǎn)換為數(shù)組。

1. concat() 連接兩個(gè)或更多的數(shù)組

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。該方法不會改變現(xiàn)有的數(shù)組，而是返回一個(gè)新數(shù)組。

語法：array1.concat(array2, array3,..., arrayN)

注：如果要進(jìn)行 concat() 操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素，而不是數(shù)組。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat(array2, array3);
console.log(array4); // 輸出： ['a', 'b', 'c','d', 'e', 'f', 'g', 'h', 'i']

2. join() 把數(shù)組的所有元素放入一個(gè)字符串

join() 方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個(gè)字符串，元素是通過指定的分隔符進(jìn)行分隔的。語法：array.join(separator) 參數(shù)說明：

• separator 可選，指定要使用的分隔符，如果省略該參數(shù)，則使用逗號作為分隔符。

返回值： 返回一個(gè)字符串，該字符串是通過把 arrayObject 的每個(gè)元素轉(zhuǎn)換為字符串，然后把這些字符串連接起來，在兩個(gè)元素之間插入 separator 字符串而生成的。

var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log('and')
// 輸出：Banana and Orange and Apple and Mango

3. slice() 選取數(shù)組的一部分

slice() 方法可從已有的數(shù)組中返回選定的元素，slice() 方法可提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分，slice() 方法不會改變原始數(shù)組。 語法：array.slice(start, end) 參數(shù)說明：

• start 可選，規(guī)定從何處開始選取，如果該參數(shù)為負(fù)數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取，slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（包含最后一個(gè)元素）；
• end 可選，規(guī)定從何處結(jié)束選取，該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)，如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素，如果該參數(shù)為負(fù)數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取，slice(-2,-1) 表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（不包含最后一個(gè)元素，也就是只有倒數(shù)第二個(gè)元素）。

返回值： Array 返回一個(gè)新的數(shù)組，包含從 start（包括該元素） 到 end （不包括該元素）的 arrayObject 中的元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(-3,-1))
console.log(fruits.slice(-3))
// 輸出: ['Lemon', 'Apple']
// ['Lemon', 'Apple', 'Mango']

4. toString() 把數(shù)組轉(zhuǎn)換為字符串

toString() 方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

注：數(shù)組中的元素之間用逗號分隔。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
console.log(str)
// 輸出：Banana,Orange,Apple,Mango

三、位置方法

以下這些方法用于獲取或設(shè)置數(shù)組中特定元素的位置或值。

5. indexOf() 返回?cái)?shù)組中某個(gè)指定的元素位置

該方法將從頭到尾地檢索數(shù)組，看它是否含有對應(yīng)的元素，開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒有指定 start 參數(shù)時(shí)），如果找到一個(gè) item，則返回 item 的第一次出現(xiàn)的位置，開始位置的索引為 0，如果在數(shù)組中沒找到指定元素則返回 -1。

注：提示如果你想查找字符串最后出現(xiàn)的位置，請使用 lastIndexOf() 方法。

語法 ：array.indexOf(item,start)

參數(shù)說明：

• item 必須，查找的元素；
• start 可選，規(guī)定在數(shù)組中開始檢索的位置，它的合法取值是 0 到 stringObject.length - 1，如省略該參數(shù)，則將從字符串的首字符開始檢索。

返回值：Number 元素在數(shù)組中的位置，如果沒有搜索到則返回 -1。

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.indexOf("Apple",4))
// 輸出：6
console.log(fruits.indexOf("Apple",0))
// 輸出：2

6. lastIndexOf() 搜索數(shù)組中的元素，并返回它最后出現(xiàn)的位置

lastIndexOf() 方法可返回一個(gè)指定的元素在數(shù)組中最后出現(xiàn)的位置，從該字符串的后面向前查找，如果要檢索的元素沒有出現(xiàn)，則該方法返回 -1，該方法將從尾到頭地檢索數(shù)組中指定元素 item，開始檢索的位置在數(shù)組的 start 處或數(shù)組的結(jié)尾（沒有指定 start 參數(shù)時(shí)），如果找到一個(gè) item，則返回 item 從尾向前檢索第一個(gè)次出現(xiàn)在數(shù)組的位置，數(shù)組的索引開始位置是從 0 開始的，如果在數(shù)組中沒找到指定元素則返回 -1。

注：如果你想查找數(shù)組首次出現(xiàn)的位置，請使用 indexOf() 方法。

語法：array.lastIndexOf(item,start)

參數(shù)說明：

• item必需，規(guī)定需檢索的字符串值；
• start可選，整數(shù)參數(shù)，規(guī)定在字符串中開始檢索的位置，它的合法取值是 0 到stringObject.length - 1，如省略該參數(shù)，則將從字符串的最后一個(gè)字符處開始檢索。

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.lastIndexOf("Apple"))
// 輸出：6

7. shift() 刪除并返回?cái)?shù)組的第一個(gè)元素

shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值，此方法改變數(shù)組的長度。

提示：移除數(shù)組末尾的元素可以使用 pop() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift())
// 輸出：Mango
console.log(fruits)
// 輸出：[Orange,Apple,Mango]

8. unshift() 向數(shù)組的開頭添加一個(gè)或更多元素

unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度，該方法將改變原數(shù)組。

提示: 將新項(xiàng)添加到數(shù)組末尾，請使用 push() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits)
// 輸出：Lemon,Pineapple,Banana,Orange,Apple,Mango

9. splice() 從數(shù)組中添加或刪除元素

splice() 方法用于添加或刪除數(shù)組中的元素，這種方法會改變原始數(shù)組，

語法：array.splice(index,howmany,item1,.....,itemX)

參數(shù)說明：

• index 必需，規(guī)定從何處添加/刪除元素，該參數(shù)是開始插入和（或）刪除的數(shù)組元素的下標(biāo)，必須是數(shù)字；
• howmany 可選，規(guī)定應(yīng)該刪除多少元素，必須是數(shù)字，但可以是 "0"。如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素；
• item1, ..., itemX 可選，要添加到數(shù)組的新元素。

返回值：如果刪除一個(gè)元素，則返回一個(gè)元素的數(shù)組，如果未刪除任何元素，則返回空數(shù)組。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2,1,"Lemon","Kiwi"))
// 移除數(shù)組的第三個(gè)元素，并在數(shù)組第三個(gè)位置添加新元素:
// 輸出：[Banana,Orange,Lemon,Kiwi,Mango]

10. pop() 刪除數(shù)組的最后一個(gè)元素并返回刪除的元素

pop() 方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素，此方法會改變數(shù)組的長度。

提示：移除數(shù)組第一個(gè)元素，請使用 shift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop())
// 輸出：Mango
console.log(fruits)
// 輸出：["Banana", "Orange", "Apple"]

11. push() 向數(shù)組的末尾添加一個(gè)或更多元素

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度，新元素將添加在數(shù)組的末尾，此方法會改變數(shù)組的長度。

提示：在數(shù)組起始位置添加元素請使用 unshift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push('Cherry'))
// 輸出：5
console.log(fruits)
// 輸出：['Banana', 'Orange', 'Apple', 'Mango', 'Cherry']

四、排序方法

這些方法用于對數(shù)組進(jìn)行排序。

12. sort() 對數(shù)組的元素進(jìn)行排序

sort() 方法用于對數(shù)組的元素進(jìn)行排序，排序順序可以是字母或數(shù)字，并按升序或降序，默認(rèn)排序順序?yàn)榘醋帜干颍ó?dāng)數(shù)字是按字母順序排列時(shí)"40"將排在"5"前面），使用數(shù)字排序，你必須通過一個(gè)函數(shù)作為參數(shù)來調(diào)用，函數(shù)指定數(shù)字是按照升序還是降序排列，這種方法會改變原始數(shù)組。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort())
//輸出：['Apple', 'Banana', 'Mango', 'Orange']

13. reverse() 反轉(zhuǎn)數(shù)組的元素順序

reverse() 方法用于反轉(zhuǎn)數(shù)組中元素的順序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.reverse())
// 輸出：['Mango', 'Apple', 'Orange', 'Banana']

五、迭代方法

這些方法允許你遍歷數(shù)組的每個(gè)元素。

14. forEach() 對數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)

forEach() 用于對數(shù)組中的每個(gè)元素執(zhí)行一次提供的函數(shù)；這個(gè)方法不會改變數(shù)組的長度。（注: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的）

語法：array.forEach(callback(currentValue, index, arr), thisArg)

參數(shù)說明：

(1) callback(currentValue, index, arr) 必需，數(shù)組中每個(gè)元素需要調(diào)用的函數(shù)；

• currentValue 必需，當(dāng)前元素；
• index 可選，當(dāng)前元素的索引值；
• arr 可選，當(dāng)前元素所屬的數(shù)組對象；

(2) thisArg 可選，執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

var numbers = [65, 44, 12, 4];
var temp=0;
numbers.forEach((item)=>{return temp=temp+item})
console.log(temp)
// 輸出：125

15. map() 通過指定函數(shù)處理數(shù)組的每個(gè)元素，并返回處理后的數(shù)組

map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值，該方法按照原始數(shù)組元素順序依次處理元素。

注：map() 不會對空數(shù)組進(jìn)行檢測；map() 不會改變原始數(shù)組。

語法：array.map(callback(currentValue,index,arr), thisArg)

參數(shù)說明：

(1) callback(currentValue, index,arr)必須，函數(shù)，數(shù)組中的每個(gè)元素都會執(zhí)行這個(gè)函數(shù)；

• currentValue必須，當(dāng)前元素的值；
• index可選，當(dāng)前元素的索引值；
• arr可選，當(dāng)前元素屬于的數(shù)組對象；

(2) thisArg（可選）：執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

var numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt))//function函數(shù)使用Math函數(shù)，可選參數(shù)均省略
// 輸出：2,3,4,5

16. filter() 過濾符合條件的數(shù)值元素

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，過濾出舊數(shù)組中符合條件的元素，存儲到新數(shù)組中，篩選條件由調(diào)用方提供。（注：filter() 不會對空數(shù)組進(jìn)行檢測；filter() 不會改變原始數(shù)組）

語法：array.filter(callback(currentValue,index,arr), thisArg)

參數(shù)說明：

(1) callback(currentValue, index,arr) 必需，過濾條件函數(shù)，數(shù)組中的每個(gè)元素都會執(zhí)行這個(gè)函數(shù)，執(zhí)行為 true 的符合篩選條件；

• currentValue 必需，當(dāng)前元素的值；
• index 可選，當(dāng)前元素的索引值；
• arr 可選，當(dāng)前元素屬于的數(shù)組對象；

(2) thisArg 可選，執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

const ages = [32, 33, 16, 40];
function checkAdult(age) {
  return age >= 18;
}
const newArr = ages.filter(checkAdult);
console.log(newArr) // 輸出：[32,33,40]


var newArr1 = ages.filter((item, index) => (item >= 18));
console.log(newArr1); // 輸出：[32,33,40]

這里詳細(xì)解釋一下 thisArg 參數(shù)的具體作用，后邊再出現(xiàn)就不做解釋了！thisArg 參數(shù)是 Array.prototype.filter() 方法的一個(gè)可選參數(shù)。

它是一個(gè)值，用于指定在回調(diào)函數(shù)中作為 this 上下文執(zhí)行時(shí)的上下文對象。如果沒有提供 thisArg 參數(shù)，回調(diào)函數(shù)將在全局對象上作為 this 上下文執(zhí)行。

當(dāng)你在回調(diào)函數(shù)中使用 thisArg 參數(shù)時(shí)，你實(shí)際上是在告訴 JavaScript 在執(zhí)行回調(diào)函數(shù)時(shí)應(yīng)該使用哪個(gè)對象作為 this 的上下文。

這對于那些依賴于特定上下文的對象（如對象方法）尤其有用。

下面是一個(gè)簡單的例子來幫助理解：

const numbers = [1, 2, 3, 4, 5, 6];  


const evenNumbers = numbers.filter(function(num) {  
  return this.isEven(num); // 這里假設(shè)有一個(gè)名為 isEven 的方法在 this 上 
}, { isEven: function(num) { return num % 2 === 0; } });  


console.log(evenNumbers); // 輸出: [2, 4, 6]

在這個(gè)例子中，我們假設(shè)存在一個(gè)名為 isEven 的方法，該方法用于檢查一個(gè)數(shù)字是否為偶數(shù)。

我們使用 thisArg 參數(shù)來指定一個(gè)對象，該對象具有一個(gè)名為 isEven 的方法。在 filter() 方法中，回調(diào)函數(shù)將在這個(gè)對象上作為 this 上下文執(zhí)行，因此this.isEven(num) 將調(diào)用該對象上的 isEven 方法。

17. find() 查找第一個(gè)符合條件的數(shù)組元素

find() 方法查找目標(biāo)數(shù)組中第一個(gè)滿足條件的數(shù)組元素；find() 方法會為數(shù)組中的每個(gè)元素依次調(diào)用一次傳入的篩選條件，找到第一個(gè)滿足條件的數(shù)組元素時(shí)，直接返回符合條件的元素，之后的元素不會再調(diào)用篩選函數(shù)，如果沒有符合條件的元素返回 undefined。（注: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的，find() 并沒有改變數(shù)組的原始值） 語法：array.find(callback(currentValue, index, arr),thisArg)

參數(shù)說明：

(1) callback(currentValue, index,arr) 必需，數(shù)組每個(gè)元素需要依次執(zhí)行的函數(shù)；

• currentValue 必需，當(dāng)前元素；
• index 可選，當(dāng)前元素的索引值；
• arr 可選，當(dāng)前元素所屬的數(shù)組對象；

(2) thisArg 可選，執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

var ages = [4, 12, 16, 20];
function checkAdult(age) {
  return age >= 18;
}
const temp= ages.find(checkAdult);
console.log(temp) // 輸出：20


temp = ages.find((item, index) => { return item>= 10; });
console.log(temp) // 輸出：12

18. some() 檢測數(shù)組元素中是否有元素符合指定條件

some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供），some() 方法會為數(shù)組的每個(gè)元素依次執(zhí)行 callback 函數(shù)，如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測。

如果沒有滿足條件的元素，則返回false。

注：some() 不會對空數(shù)組進(jìn)行檢測；some() 不會改變原始數(shù)組。

語法：array.some(callback(currentValue,index,arr),thisArg) 參數(shù)說明：

(1) callback(currentValue, index,arr) 必須，函數(shù)，數(shù)組中的每個(gè)元素都會執(zhí)行這個(gè)函數(shù)；

• currentValue 必須，當(dāng)前元素的值；
• index 可選，當(dāng)前元素的索引值；
• arr 可選，當(dāng)前元素屬于的數(shù)組對象；

(2) thisArg 可選，對象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值，如果省略了 thisArg ，"this" 的值為 "undefined"。

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
console.log(ages.some(checkAdult))
// 輸出：true

19. every() 檢測數(shù)值元素的每個(gè)元素是否都符合條件方法

every() 方法用于檢測數(shù)組中所有元素是否都通過指定的測試函數(shù)；如果數(shù)組中檢測到有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會再進(jìn)行檢測；如果所有元素都滿足條件，則返回 true。

語法：array.every(callback(currentValue,index,arr), thisArg)

參數(shù)說明：

(1) callback（必需）：用于測試每個(gè)元素的函數(shù)。這個(gè)函數(shù)應(yīng)返回一個(gè)布爾值來指示元素是否通過測試。

• currentValue 必需，當(dāng)前元素的值；
• index 可選，當(dāng)前元素的索引值；
• arr 可選，當(dāng)前元素屬于的數(shù)組對象；

(2) thisArg（可選）：執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

返回值：返回一個(gè)布爾值，表示數(shù)組中的所有元素是否都通過了測試。

注：every() 不會對空數(shù)組進(jìn)行檢測，every() 不會改變原始數(shù)組。

const arr = [1, 2, 3, 4, 5];  
const isEven = function(num) { return num % 2 === 0; };  
const allEven = arr.every(isEven);  
console.log(allEven); // 輸出: false


var ages = [32, 33, 16, 40];
console.log(ages.every((item)=>item>18)) // 輸出：false
console.log(ages.every((item)=>item>10)) // 輸出：true

六、檢測方法

這些方法用于檢測數(shù)組的一些特性，例如是否存在某個(gè)元素或某個(gè)值是否存在于數(shù)組中。

20. includes() 判斷一個(gè)數(shù)組是否包含一個(gè)指定的值

includes() 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，如果是返回 true，否則false。

語法：arr.includes(searchElement,fromIndex) 參數(shù)說明：

• searchElement 必須，需要查找的元素值；
• fromIndex 可選，從該索引處開始查找 searchElement 如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜索，默認(rèn)值為 0。

**注：**如果 fromIndex 大于等于數(shù)組長度 ，則返回 false，如果 fromIndex 為負(fù)值，計(jì)算出的索引將作為開始搜索 searchElement 的位置。如果計(jì)算出的索引小于 0，則整個(gè)數(shù)組都會被搜索。

var  site = ['runoob', 'google', 'taobao'];
console.log(site.includes('runoob')
// 輸出：true

21. findIndex() 查找第一個(gè)符合條件的數(shù)組元素索引

findIndex() 方法查找數(shù)組中第一個(gè)符合條件的元素位置，findIndex() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行，當(dāng)數(shù)組中的元素在測試條件時(shí)返回 true 時(shí)，findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)，如果沒有符合條件的元素返回 -1。（注: findIndex() 對于空數(shù)組，函數(shù)是不會執(zhí)行的; findIndex() 并沒有改變數(shù)組的原始值）

語法：array.findIndex(callback(currentValue, index, arr), thisArg)

參數(shù)說明：

(1) callback(currentValue, index,arr) 必須，數(shù)組每個(gè)元素需要執(zhí)行的函數(shù)；

• currentValue 必需，當(dāng)前元素；
• index 可選，當(dāng)前元素的索引；
• arr 可選，當(dāng)前元素所屬的數(shù)組對象；

(2) thisArg 可選，執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
const temp = ages.findIndex(checkAdult);
console.log(temp)
// 輸出：2
const temp = ages.findIndex((item, index) =>( item >= 18))
console.log(temp)
// 輸出：2

七、解構(gòu)賦值方法

這些方法允許你將數(shù)組的元素解構(gòu)到變量中。

22. entries() 生成數(shù)組的可迭代對象

entries() 方法主要用于遍歷數(shù)組或?qū)ο蟮逆I值對。在數(shù)組中，entries 方法返回一個(gè)新的數(shù)組迭代器對象，該對象包含數(shù)組中每個(gè)索引的鍵值對。例如，對于數(shù)組 arr = ["a", "b", "c"]，調(diào)用 arr.entries() 后，可以得到如下結(jié)果：

[  
  [0, "a"],  
  [1, "b"],  
  [2, "c"]  
]

具體使用方式：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var arr = fruits.entries();
console.log((arr.next()).value) 
console.log((arr.next()).value[1]) 
// 輸出：[0, 'Banana']
// 輸出：Banana

23. keys() 返回?cái)?shù)組的可迭代對象

keys() 方法用于從數(shù)組創(chuàng)建一個(gè)包含數(shù)組鍵的可迭代對象。

const arr = ["Banana", "Orange", "Apple", "Mango"]; 
const newArr = arr.keys();
for (const iterator of newArr) { 
  console.log(iterator);
} 
// 輸出：0 1 2 3

八、其他方法

24. copyWithin() 從數(shù)組的指定位置拷貝元素到數(shù)組的另一個(gè)指定位置中

copyWithin() 方法用于將數(shù)組的內(nèi)部元素復(fù)制到數(shù)組的其他位置，覆蓋數(shù)組的原有元素，而不會改變數(shù)組的長度，是一種移動數(shù)組的高效方法。

語法：array.copyWithin(target, start, end)

參數(shù)說明：

• target 必需，復(fù)制到指定目標(biāo)索引位置；
• start 可選，元素復(fù)制的起始位置，默認(rèn)為 0；
• end 可選，停止復(fù)制的索引位置 (默認(rèn)為 array.length)。如果為負(fù)值，表示倒數(shù)，從后往前數(shù) (注：end 小于 start 時(shí)，該方法不生效)。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
console.log(fruits.copyWithin(2, 0, 2));
// 輸出：[Banana,Orange,Banana,Orange,Kiwi,Papaya]


console.log(fruits.copyWithin(2,0,-2));
// 輸出：[Banana,Orange,Banana,Orange,Apple,Mango]

25. fill() 使用一個(gè)固定值來填充數(shù)組

fill() 方法用于將一個(gè)固定值替換數(shù)組的元素（注：該方法會改變原始數(shù)組）。

語法：array.fill(value, start, end)

參數(shù)說明：

• value 必需，填充的值；
• start 可選，開始填充位置；
• end 可選，停止填充位置 (默認(rèn)為 array.length)；

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.fill("Runoob",2,4))
// 輸出：['Banana', 'Orange', 'Runoob', 'Runoob']

26. from() 通過給定的對象中創(chuàng)建一個(gè)數(shù)組

from() 方法是一個(gè)靜態(tài)方法，用于從一個(gè)類似數(shù)組或可迭代對象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例，如果對象是數(shù)組返回 true，否則返回 false；這個(gè)方法主要用在以下幾個(gè)方面：

• 從類似數(shù)組對象創(chuàng)建數(shù)組：當(dāng)你有一個(gè)類似數(shù)組的對象（例如一個(gè)NodeList或htmlCollection），你可以使用 Array.from() 來將它轉(zhuǎn)換為真正的數(shù)組。
• 從非可迭代對象創(chuàng)建數(shù)組：任何可迭代對象都可以使用 Array.from() 轉(zhuǎn)換為數(shù)組。例如，一個(gè)字符串、一個(gè)Map、一個(gè)Set等。
• 使用映射函數(shù)：Array.from() 方法允許你提供一個(gè)映射函數(shù)，該函數(shù)會在每個(gè)元素上調(diào)用，然后將結(jié)果收集到一個(gè)新數(shù)組中。

語法：Array.from(object, mapFunction, thisArg)

參數(shù)說明：

• object 必需，要轉(zhuǎn)換為數(shù)組的對象；
• mapFunction 可選，數(shù)組中每個(gè)元素要調(diào)用的函數(shù)；
• thisArg 可選，映射函數(shù) mapFunction 中的 this 對象。

var arr = Array.from([1, 2, 3], x => x * 10);
// 輸出：//arr[0] == 10; arr[1] == 20; arr[2] == 30;

27. isArray() 判斷一個(gè)對象是否為數(shù)組

isArray() 方法用于判斷一個(gè)對象是否為數(shù)組，如果對象是數(shù)組返回 true，否則返回 false。

語法：Array.isArray(obj)

參數(shù)說明：obj 必需，要判斷的對象。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits))
// 輸出：true

28. reduce() 將數(shù)組元素計(jì)算為一個(gè)值（從左到右）

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值，reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose。

注: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

語法：array.reduce(callback(total, currentValue, currentIndex, arr), initialValue) 參數(shù)說明：

(1) callback(total,currentValue, index,arr ) 必需，用于執(zhí)行每個(gè)數(shù)組元素的函數(shù)；

• total 必需，初始值或計(jì)算結(jié)束后的返回值；
• currentValue 必需，當(dāng)前元素；
• currentIndex 可選，當(dāng)前元素的索引；
• arr 可選，當(dāng)前元素所屬的數(shù)組對象；

(2) initialValue 可選，傳遞給函數(shù)的初始值。

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
  return total + num;
}
console.log(numbers.reduce(getSum))
// 輸出：125 //65+44+12+4

29. reduceRight() 將數(shù)組元素計(jì)算為一個(gè)值（從右到左）

reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加。

注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

語法：array.reduceRight(callback(total, currentValue, currentIndex, arr), initialValue) 參數(shù)與reduce()一樣。

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
  return total + num;
}
console.log(numbers.reduce(getSum))
// 輸出：125//4+12+44+65

30.valueOf() 返回?cái)?shù)組對象的原始值

valueOf() 方法返回 Array 對象的原始值，該原始值由 Array 對象派生的所有對象繼承，valueOf() 方法通常由 JavaScript 在后臺自動調(diào)用，并不顯式地出現(xiàn)在代碼中，**valueOf() 方法不會改變原數(shù)組，**valueOf() 是數(shù)組對象的默認(rèn)方法，array.valueOf() 與 array的返回值一樣。

31. of() 將一組值轉(zhuǎn)換為數(shù)組

of() 方法用于將一組值轉(zhuǎn)換為數(shù)組，不考慮參數(shù)的數(shù)量或類型，Array.of() 和 Array() 構(gòu)造函數(shù)之間的區(qū)別在于對單個(gè)參數(shù)的處理：Array.of(7) 創(chuàng)建一個(gè)具有單個(gè)元素 7 的數(shù)組，而 Array(7) 創(chuàng)建一個(gè) length 為 7 的空數(shù)組，如果對象是數(shù)組返回 true，否則返回 false。

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

32. at() 用于接收一個(gè)整數(shù)值并返回該索引對應(yīng)的元素

at() 方法用于接收一個(gè)整數(shù)值并返回該索引對應(yīng)的元素，允許正數(shù)和負(fù)數(shù)，負(fù)整數(shù)從數(shù)組中的最后一個(gè)元素開始倒數(shù)，匹配給定索引的數(shù)組中的元素，如果找不到指定的索引，則返回 undefined，在傳遞非負(fù)數(shù)時(shí)，at() 方法等價(jià)于括號表示法。

例如，array[0] 和 array.at(0) 均返回第一個(gè)元素，但是，當(dāng)你需要從數(shù)組的末端開始倒數(shù)時(shí)，則不能使用 Python 和 R 語言中支持的 array[-1]，因?yàn)榉嚼ㄌ杻?nèi)的所有值都會被視為字符串屬性，因此你最終讀取的是 array["-1"]，這只是一個(gè)普通的字符串屬性而不是數(shù)組索引，通常的做法是訪問 length 并將其減去從末端開始的相對索引，

例如：array[array.length - 1]，at() 方法允許使用相對索引，因此上面的示例可以簡化為 array.at(-1)，更正式地，當(dāng) index < 0 時(shí)，該方法將訪問索引 index + array.length，at() 方法是通用的，其僅期望 this 具有 length 屬性和以整數(shù)為鍵的屬性。

const array1 = [5, 12, 8, 130, 44]; 
let index1 = 2; 
strt1 = `索引號為 ${index1} 的值為 ${array1.at(index1)}`; 
let index2 = -2; 
strt2 = `索引號為 ${index2} 的值為 ${array1.at(index2)}`;
// 輸出：
// 索引號為 2 的值為 8
// 索引號為 -2 的值為 130

33. flat() 創(chuàng)建一個(gè)新數(shù)組

flat() 方法方法會按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回，flat() 方法返回一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組，該方法可用于：扁平化嵌套數(shù)組，扁平化與數(shù)組空項(xiàng)。

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

34. flatMap() 使用映射函數(shù)映射每個(gè)元素，然后將結(jié)果壓縮成一個(gè)新數(shù)組

flatMap() 方法首先使用映射函數(shù)映射每個(gè)元素，然后將結(jié)果壓縮成一個(gè)新數(shù)組，它與 map 連著深度值為 1 的 flat 幾乎相同，但 flatMap 通常在合并成一種方法的效率稍微高一些，flatMap() 方法一個(gè)新的數(shù)組，其中每個(gè)元素都是回調(diào)函數(shù)的結(jié)果，并且結(jié)構(gòu)深度 depth 值為 1。

語法：array.flatMap(callback(currentValue,index,arr), thisArg)

// 箭頭函數(shù)
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )


// 回調(diào)函數(shù)
flatMap(callbackFn)
flatMap(callbackFn, thisArg)


// 行內(nèi)回調(diào)函數(shù)
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

參數(shù)說明：

(1) callback可以生成一個(gè)新數(shù)組中的元素的函數(shù)，可以傳入三個(gè)參數(shù)：

• currentValue 必需，當(dāng)前正在數(shù)組中處理的元素；
• index 可選的，數(shù)組中正在處理的當(dāng)前元素的索引；
• array 可選的，被調(diào)用的 map 數(shù)組；

(2) thisArg 可選，執(zhí)行 callback 函數(shù)時(shí) 使用的this 值。

let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

flatMap 能用于在 map 期間增刪項(xiàng)目（也就是修改 items 的數(shù)量），換句話說，它允許你遍歷很多項(xiàng)使之成為另一些項(xiàng)（靠分別把它們放進(jìn)去來處理），而不是總是一對一，從這個(gè)意義上講，它的作用類似于 filter的對立面，只需返回一個(gè) 1 項(xiàng)元素?cái)?shù)組以保留該項(xiàng)，返回一個(gè)多元素?cái)?shù)組以添加項(xiàng)，或返回一個(gè) 0 項(xiàng)元素?cái)?shù)組以刪除該項(xiàng)。

總結(jié)

以上分類并不是絕對的，有些方法可能具有多種功能，可以同時(shí)歸入多個(gè)分類中，除了上述分類方法，還可以根據(jù)其他標(biāo)準(zhǔn)對 JavaScript 中的 Array 對象的方法進(jìn)行分類，例如：

• 靜態(tài)方法與實(shí)例方法：根據(jù)是否需要?jiǎng)?chuàng)建Array實(shí)例來調(diào)用，可以將Array對象的方法分為靜態(tài)方法和實(shí)例方法。靜態(tài)方法可以直接通過Array對象來調(diào)用，而實(shí)例方法則需要在創(chuàng)建Array實(shí)例后才能調(diào)用。例如，Array.isArray() 是靜態(tài)方法，而 push()、pop()、slice() 等是實(shí)例方法。
• 修改數(shù)組的方法與非修改數(shù)組的方法：根據(jù)是否會改變原始數(shù)組，可以將Array對象的方法分為修改數(shù)組的方法和非修改數(shù)組的方法。修改數(shù)組的方法會直接改變原始數(shù)組，例如 push()、pop()、splice() 、shift()、unshift()、sort()、reverse()、fill()等；而非修改數(shù)組的方法則不會改變原始數(shù)組，例如 map()、filter()、reduce()、contact() 等。
• 根據(jù)作用范圍分類：根據(jù)方法的作用范圍，可以將Array對象的方法分為全局方法和實(shí)例方法。全局方法可以直接通過Array對象調(diào)用，而實(shí)例方法只能在Array實(shí)例上調(diào)用。例如，Array.isArray() 是全局方法，而 push()、pop()、slice() 等是實(shí)例方法。

Array 作為 JS 中我們最常用的對象，以上就是 Array 常用的 34 種方法，將這些方法吃透用熟，能使得我們在平常的開發(fā)工作中事半功倍，提高開發(fā)效率。