JavaScript常見內(nèi)置函數(shù)大全數(shù)組篇(附超詳細(xì)案例)
錢言
為了鞏固所學(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下2014-06-06JavaScript offset實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動
在頁面開發(fā)時我們少不了各種鼠標(biāo)交互動作,那么JavaScript中如何實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動,本文就詳細(xì)的介紹一下,感興趣的可以了解一下2021-05-05深入聊聊Array的sort方法的使用技巧.詳細(xì)點評protype.js中的sortBy方法
深入聊聊Array的sort方法的使用技巧.詳細(xì)點評protype.js中的sortBy方法...2007-04-04js記錄點擊某個按鈕的次數(shù)-刷新次數(shù)為初始狀態(tài)的實例
下面小編就為大家?guī)硪黄猨s記錄點擊某個按鈕的次數(shù)-刷新次數(shù)為初始狀態(tài)的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02javaScript Array(數(shù)組)相關(guān)方法簡述
javaScript Array(數(shù)組)相關(guān)方法簡述,讓大家更快的熟悉array數(shù)組的用法。2009-07-07