錢言

為了鞏固所學(xué)的知識，作者嘗試著開始發(fā)布一些學(xué)習(xí)筆記類的博客，方便日后回顧。當(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() 檢測數(shù)組元素的每個元素是否都符合條件

1. 實例

檢測數(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() 方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）

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

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

如果所有元素都滿足條件，則返回 true

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

注意： every() 不會改變原始數(shù)組

3. 語法

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

4. 參數(shù)說明

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

返回值： 布爾值 - 如果所有元素都通過檢測返回 true，否則返回 false

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

1、實例

返回數(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)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素

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

注意： filter() 不會改變原始數(shù)組

3. 語法

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

4. 參數(shù)說明

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

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

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

1. 實例

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

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

2. 定義和用法

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

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

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

否則返回 undefined

注釋：?find()? 不對空數(shù)組執(zhí)行該函數(shù)

注釋：?find()? 不會改變原始數(shù)組

3. 語法

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

4. 參數(shù)值

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

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

2. JavaScript 版本: ECMAScript 6

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

1. 實例

返回一個數(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() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值

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

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

注意： map() 不會改變原始數(shù)組

3. 語法

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

4. 參數(shù)說明

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

1. 實例

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

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

citrus 結(jié)果輸出:

Orange,Lemon

2. 定義和用法

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

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

注意： slice() 方法不會改變原始數(shù)組

3. 語法

array.slice(start, end)

4. 參數(shù)值

5. 返回值

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

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

1. 實例

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

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

fruits 輸出結(jié)果：

Banana,Orange,Lemon,Kiwi,Apple,Mango

2. 定義和用法

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

注意：這種方法會改變原始數(shù)組！

3. 語法

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

4. 參數(shù)值

5. 返回值

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

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

1. 實例

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

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

fruits結(jié)果輸出:

Orange,Apple,Mango

2. 定義和用法

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

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

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

3. 語法

array.shift()

4. 返回值

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

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

8. unshift() 向數(shù)組的開頭添加一個或更多元素，并返回新的長度

1. 實例

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

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

fruits 將輸出：

Lemon,Pineapple,Banana,Orange,Apple,Mango

2. 定義和用法

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

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

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

3. 語法

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

4. 參數(shù)值

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

1. 實例

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

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

fruits 結(jié)果輸出：

Banana,Orange,Apple

2. 定義和用法

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

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

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

3. 語法

array.pop()

4. 返回值

所有類型* The removed array item

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

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

1. 實例

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

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

fruits 結(jié)果輸出：

Banana,Orange,Apple,Mango,Kiwi

2. 定義和用法

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

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

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

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

3. 語法

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

4. 參數(shù)值

5. 返回值

Number 數(shù)組新長度

總結(jié)

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

最新評論