錢(qián)言

為了鞏固所學(xué)的知識(shí)，作者嘗試著開(kāi)始發(fā)布一些學(xué)習(xí)筆記類(lèi)的博客，方便日后回顧。當(dāng)然，如果能幫到一些萌新進(jìn)行新技術(shù)的學(xué)習(xí)那也是極好的。

JavaScript 數(shù)組提供了許多內(nèi)置函數(shù)，用于執(zhí)行各種操作，如添加、刪除、查找、迭代和轉(zhuǎn)換數(shù)組元素。一些常用的數(shù)組函數(shù)包括 push()、pop()、shift()、unshift()、concat()、forEach()、map()、filter()、reduce() 等。

1. every() 檢測(cè)數(shù)組元素的每個(gè)元素是否都符合條件

1. 實(shí)例

檢測(cè)數(shù)組 ages 的所有元素是否都大于 18 :

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

輸出結(jié)果為:

false

2. 定義和用法

every() 方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件（通過(guò)函數(shù)提供）

every() 方法使用指定函數(shù)檢測(cè)數(shù)組中的所有元素：

如果數(shù)組中檢測(cè)到有一個(gè)元素不滿(mǎn)足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)

如果所有元素都滿(mǎn)足條件，則返回 true

注意： every() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)

注意： every() 不會(huì)改變?cè)紨?shù)組

3. 語(yǔ)法

array.every(function(currentValue,index,arr), thisValue)

4. 參數(shù)說(shuō)明

5. 技術(shù)細(xì)節(jié)

返回值： 布爾值 - 如果所有元素都通過(guò)檢測(cè)返回 true，否則返回 false

2. filter() 檢測(cè)數(shù)組元素，并返回符合條件所有元素的數(shù)組

1、實(shí)例

返回?cái)?shù)組 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

輸出結(jié)果為:

32,33,40

2. 定義和用法

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素

注意： filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)

注意： filter() 不會(huì)改變?cè)紨?shù)組

3. 語(yǔ)法

array.filter(function(currentValue,index,arr), thisValue)

4. 參數(shù)說(shuō)明

5. 技術(shù)細(xì)節(jié)

返回值：返回?cái)?shù)組，包含了符合條件的所有元素，如果沒(méi)有符合條件的元素則返回空數(shù)組

3. find() 返回符合傳入測(cè)試（函數(shù)）條件的數(shù)組元素

1. 實(shí)例

獲取數(shù)組中第一個(gè)值為 18 或更大的元素的值：

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

2. 定義和用法

?find()? 方法返回?cái)?shù)組中第一個(gè)通過(guò)測(cè)試的元素的值（作為函數(shù)提供）

?find()? 方法對(duì)數(shù)組中存在的每個(gè)元素執(zhí)行一次函數(shù)：

如果找到函數(shù)返回 true 值的數(shù)組元素，則 find() 返回該數(shù)組元素的值（并且不檢查剩余值）

否則返回 undefined

注釋?zhuān)?find()? 不對(duì)空數(shù)組執(zhí)行該函數(shù)

注釋?zhuān)?find()? 不會(huì)改變?cè)紨?shù)組

3. 語(yǔ)法

array.find(function(currentValue, index, arr), thisValue)

4. 參數(shù)值

5. 技術(shù)細(xì)節(jié)

1. 返回值： 如果數(shù)組中的任何元素通過(guò)測(cè)試，則返回?cái)?shù)組元素值，否則返回 undefined

2. JavaScript 版本: ECMAScript 6

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

1. 實(shí)例

返回一個(gè)數(shù)組，數(shù)組中元素為原始數(shù)組的平方根:

var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

輸出結(jié)果為:

2,3,4,5

2. 定義和用法

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

map() 方法按照原始數(shù)組元素順序依次處理元素

注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)

注意： map() 不會(huì)改變?cè)紨?shù)組

3. 語(yǔ)法

array.map(function(currentValue,index,arr), thisValue)

4. 參數(shù)說(shuō)明

5. slice() 選取數(shù)組的的一部分，并返回一個(gè)新數(shù)組

1. 實(shí)例

在數(shù)組中讀取元素：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

citrus 結(jié)果輸出:

Orange,Lemon

2. 定義和用法

slice() 方法可從已有的數(shù)組中返回選定的元素

slice()方法可提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分

注意： slice() 方法不會(huì)改變?cè)紨?shù)組

3. 語(yǔ)法

array.slice(start, end)

4. 參數(shù)值

5. 返回值

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

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

1. 實(shí)例

數(shù)組中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

fruits 輸出結(jié)果：

Banana,Orange,Lemon,Kiwi,Apple,Mango

2. 定義和用法

splice() 方法用于插入、刪除或替換數(shù)組的元素

注意：這種方法會(huì)改變?cè)紨?shù)組！

3. 語(yǔ)法

array.splice(index,howmany,item1,.....,itemX)

4. 參數(shù)值

5. 返回值

Array 如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。

7. shift() 刪除數(shù)組的第一個(gè)元素

1. 實(shí)例

從數(shù)組中移除元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()

fruits結(jié)果輸出:

Orange,Apple,Mango

2. 定義和用法

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

注意： 此方法改變數(shù)組的長(zhǎng)度

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

3. 語(yǔ)法

array.shift()

4. 返回值

任何類(lèi)型（*） 數(shù)組原來(lái)的第一個(gè)元素的值（移除的元素）

*：數(shù)組元素可以是一個(gè)字符串，數(shù)字，數(shù)組，布爾，或者其他對(duì)象類(lèi)型

8. unshift() 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度

1. 實(shí)例

將新項(xiàng)添加到數(shù)組起始位置:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

fruits 將輸出：

Lemon,Pineapple,Banana,Orange,Apple,Mango

2. 定義和用法

unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

注意： 該方法將改變數(shù)組的數(shù)目。

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

3. 語(yǔ)法

array.unshift(item1,item2, ..., itemX)

4. 參數(shù)值

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

1. 實(shí)例

移除最后一個(gè)數(shù)組元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

fruits 結(jié)果輸出：

Banana,Orange,Apple

2. 定義和用法

pop() 方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素

注意：此方法改變數(shù)組的長(zhǎng)度

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

3. 語(yǔ)法

array.pop()

4. 返回值

所有類(lèi)型* The removed array item

*數(shù)組元素可以是一個(gè)字符串，數(shù)字，數(shù)組，布爾，或者其他對(duì)象類(lèi)型

10. push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度

1. 實(shí)例

數(shù)組中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

fruits 結(jié)果輸出：

Banana,Orange,Apple,Mango,Kiwi

2. 定義和用法

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度

注意： 新元素將添加在數(shù)組的末尾

注意： 此方法改變數(shù)組的長(zhǎng)度

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

3. 語(yǔ)法

array.push(item1, item2, ..., itemX)

4. 參數(shù)值

5. 返回值

Number 數(shù)組新長(zhǎng)度

總結(jié)

到此這篇關(guān)于JavaScript常見(jiàn)內(nèi)置函數(shù)大全數(shù)組篇的文章就介紹到這了,更多相關(guān)JS常見(jiàn)數(shù)組內(nèi)置函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論