20個常見的JavaScript數(shù)組操作總結(jié)
更新時間：2022年09月18日 14:55:24 作者：so_coding
JavaScript中的Array對象與其他編程語言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見操作的方法，本文整理了一些常用的，需要的可以參考一下
JavaScript中的Array對象與其他編程語言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見操作的方法。
聲明數(shù)組
有三種不同的聲明方式
1. 常規(guī)方式
const hobbys = new Array() hobbys[0] = 'Basketball' hobbys[1] = 'Badminton' hobbys[2] = 'swimming' console.log(hobbys) // [ 'Basketball', 'Badminton', 'swimming' ]
2. 簡潔方式
const hobbys = new Array('Basketball', 'Badminton','swimming')
console.log(hobbys)
// [ 'Basketball', 'Badminton', 'swimming' ]
3. 字面
const hobbys = ['Basketball','Badminton','swimming'] console.log(hobbys) // [ 'Basketball', 'Badminton', 'swimming' ]
Array 對象方法
1. forEach
forEach() 方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。沒有返回值，本質(zhì)上等同于 for 循環(huán)，對每一項執(zhí)行 function 函數(shù)。不會改變原數(shù)組。
// currentValue:必需,當(dāng)前元素 index:可選,當(dāng)前元素的索引值 arr:可選,當(dāng)前元素所屬的數(shù)組對象。 array.forEach(function(currentValue, index, arr))
let array = ['a', 'b', 'c']
let func = (currentValue, index, arr) => {
currentValue += 's'
console.log('currentValue：' + currentValue + ' index：' + index + ' arr：' + arr)
}
array.forEach(func)
console.log(array)
// 控制臺輸出：
// currentValue：as index：0 arr：a,b,c
// currentValue：bs index：1 arr：a,b,c
// currentValue：cs index：2 arr：a,b,c
// [ 'a', 'b', 'c' ]
2. map
通過指定函數(shù)處理數(shù)組的每個元素，并返回處理后的數(shù)組。
map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。方法按照原始數(shù)組元素順序依次處理元素。不會改變原數(shù)組。
// currentValue:必須,當(dāng)前元素的值 index:可選,當(dāng)前元素的索引值 arr:可選,當(dāng)前元素屬于的數(shù)組對象 array.map(function(currentValue,index,arr))
let array = [1, 2, 3, 4, 5]
let result = array.map((item) => {
return item += 5
})
console.log(array)
console.log(result)
// [ 1, 2, 3, 4, 5 ]
// [ 6, 7, 8, 9, 10 ]3. concat
JavaScript中的 concat() 方法用來連接兩個或更多的數(shù)組，并返回結(jié)果。
// array1, array2, ..., arrayN 必需,該參數(shù)可以是具體的值,也可以是數(shù)組對象,可以是任意多個 array1.concat(array2,array3,...,arrayN)
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f']
const array3 = array1.concat(array2)
console.log(array3)
const array4 = array1.concat('123')
console.log(array4)
// [ 'a', 'b', 'c', 'd', 'e', 'f' ]
// [ 'a', 'b', 'c', '123' ]
4. push
Javascript數(shù)組中的 push() 方法用來向數(shù)組的末尾添加一個或更多元素，并返回新的長度。
let fruits = ["Banana", "Orange", "Apple", "Mango"]
let length = fruits.push("Kiwi")
console.log(fruits)
console.log(length)
// [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]
// 5
5. unshift
unshift() 方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度。
let fruits = ["Banana", "Orange", "Apple", "Mango"]
let length = fruits.unshift("Lemon", "Pineapple")
console.log(fruits)
console.log(length)
// [ 'Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango' ]
// 6
6. pop
pop() 方法用于刪除數(shù)組的最后一個元素并返回刪除的元素。
let sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'] let result = sites.pop() console.log(sites) console.log(result) // [ 'Google', 'Runoob', 'Taobao', 'Zhihu' ] // Baidu
7. shift
shift() 方法用于把數(shù)組的第一個元素從其中刪除，并返回第一個元素的值
let fruits = ["Banana", "Orange", "Apple", "Mango"]; let result = fruits.shift() console.log(fruits) console.log(result) // [ 'Orange', 'Apple', 'Mango' ] // Banana
8. splice
splice() 方法用于添加或刪除數(shù)組中的元素,并返回刪除的元素數(shù)組
// 參數(shù) Values: index: 必需,規(guī)定從何處添加/刪除元素 // howmany: 可選,規(guī)定應(yīng)該刪除多少元素 必須是數(shù)字,但可以是 "0" // item1, ..., itemX 可選,要添加到數(shù)組的新元素 array.splice(index,howmany,item1,.....,itemX)
let fruits = ["Banana", "Orange", "Apple", "Mango"] let result = fruits.splice(1, 2, "Lemon", "Kiwi") console.log(fruits) console.log(result) // [ 'Banana', 'Lemon', 'Kiwi', 'Mango' ] // [ 'Orange', 'Apple' ]
9. slice
slice() 方法可從已有的數(shù)組中返回選定的元素。也可提取字符串的某個部分，并以新的字符串返回被提取的部分。不會改變原數(shù)組。
// start: 可選,規(guī)定從何處開始選取 若為負(fù)值,表示從原數(shù)組中的倒數(shù)第幾個元素開始提取 // end: 可選,規(guī)定從何處結(jié)束選取 如果沒有指定該參數(shù),那么切分的數(shù)組包含從start到數(shù)組結(jié)束的所有元素 array.slice(start, end)
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"] let result1 = fruits.slice(1, 3) let result2 = fruits.slice(2) console.log(fruits) console.log(result1) console.log(result2) // [ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ] // [ 'Orange', 'Lemon' ] // [ 'Lemon', 'Apple', 'Mango' ]
10. join
join() 方法可將所有數(shù)組元素結(jié)合為一個字符串。它的行為類似 toString()，但是您還可以規(guī)定分隔符
// separator: 可選,指定要使用的分隔符 如果省略該參數(shù),則使用逗號作為分隔符 array.join(separator)
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let energy1 = fruits.join();
let energy2 = fruits.join('-');
console.log(energy1)
console.log(energy2)
// Banana,Orange,Apple,Mango
// Banana-Orange-Apple-Mango
11. every
every() 方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。
array.every(function(currentValue,index,arr))
let ages = [32, 33, 16, 40]
let nums = [32, 33, 19, 40]
function checkAdult(age) {
return age >= 18
}
function checkNums(num) {
return num >= 18
}
// 16不滿足大于18，故結(jié)果false
let result1 = ages.every(checkAdult)
// 每一項都滿足條件，故結(jié)果true
let result2 = nums.every(checkNums)
console.log(result1)
console.log(result2)
// false
// true
12. filter
filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。不會改變原數(shù)組。
array.filter(function(currentValue,index,arr), thisValue)
let ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
let result = ages.filter(checkAdult)
console.log(result)
// [ 32, 33, 40 ]
13. indexOf
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。沒有找到會返回-1
// searchvalue: 必需。規(guī)定需檢索的字符串值。 // start: 可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。值：0~array.length-1 string.indexOf(searchvalue,start)
let str = "Hello world, welcome to the universe.";
// 輸出w所在的下標(biāo)索引13（空格也算），沒有找到會返回-1
let n = str.indexOf("welcome");
console.log(n)
console.log(str[n])
// 13
// w
14. reduce
reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
let numbers = [2, 3, 5, 6]
function getSum(total, num) {
return total + num
}
let result = numbers.reduce(getSum, 0)
console.log(result)
// 16
15. reverse
reverse() 方法用于顛倒數(shù)組中元素的順序。會改變原數(shù)組，并返回改變順序的數(shù)組。
let fruits = ["Banana", "Orange", "Apple", "Mango"] let resut = fruits.reverse() console.log(fruits) console.log(resut) // [ 'Mango', 'Apple', 'Orange', 'Banana' ] // [ 'Mango', 'Apple', 'Orange', 'Banana' ]
16. sort
sort() 方法用于對數(shù)組的元素進(jìn)行排序。排序順序可以是字母或數(shù)字，并按升序或降序。
// sortfunction: 可選。規(guī)定排序順序。必須是函數(shù)。 array.sort(sortfunction)
let fruits = ["Banana", "Orange", "Apple", "Mango"]
let ages = [9, 3, 4, 5, 7, 10]
// 升序
let agesFunAsc = function (ag1,ag2) {
return ag1 - ag2
}
// 降序
let agesFunDes= function (ag1,ag2) {
return -(ag1 - ag2)
}
fruits.sort()
ages.sort(agesFunAsc)
console.log(fruits)
console.log(ages)
ages.sort(agesFunDes)
console.log(ages)
// [ 'Apple', 'Banana', 'Mango', 'Orange' ]
// [ 3, 4, 5, 7, 9, 10 ]
// [ 10, 9, 7, 5, 4, 3 ]
17. toString
toString() 方法用于把數(shù)字轉(zhuǎn)換為字符串。
number.toString(radix)
let num = 15 let n = num.toString() // 也可以使用不同的進(jìn)制把一個數(shù)字轉(zhuǎn)換為字符串 // 2進(jìn)制 let b = num.toString(2); // 8進(jìn)制 let c = num.toString(8); // 16進(jìn)制 let d = num.toString(16); console.log(n) console.log(b) console.log(c) console.log(d) // 15 // 1111 // 17 // f
18. at
at()方法接受整數(shù)值并返回at索引的值，正整數(shù)和負(fù)整數(shù)皆可。負(fù)整數(shù)表示從數(shù)組的最后一項開始倒數(shù)。
array.at(index)
let str = 'helso word' let item1 = str.at(2) let item2 = str.at(-1) console.log(item1) console.log(item2) // l // d
19. find
find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。
array.find(function(currentValue, index, arr),thisValue)
let ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
let value = ages.find(checkAdult)
console.log(value)
// 18
20. some
some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。
array.some(function(currentValue,index,arr),thisValue)
let ages = [3, 10, 19, 20];
function checkAdult(age) {
return age > 18;
}
let result = ages.some(checkAdult)
console.log(result)
// true到此這篇關(guān)于20個常見的JavaScript數(shù)組操作總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
syntaxhighlighter 使用方法...2007-07-07
這篇文章主要介紹了Bootstrap表單布局的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實現(xiàn)輪播效果的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被后一個方法覆蓋掉，使用此特點就可以實現(xiàn)模板方法，感興趣的朋友可以了解下本文哈2013-07-07
js 回車提交一些新手朋友還是比較陌生的，本文介紹兩種實現(xiàn)方法:jQuery方法、JavaScript方法,感興趣的朋友可以研究下2012-12-12
JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了layui表格數(shù)據(jù)重載，根據(jù)條件查詢，監(jiān)聽按鈕事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Bootstrap多級導(dǎo)航欄(級聯(lián)導(dǎo)航)的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap多級導(dǎo)航欄的實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
學(xué)習(xí)JavaScript設(shè)計模式(策略模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計模式，其中重點介紹策略模式，以年終獎為實例對策略模式進(jìn)行分析，對策略模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
weex slider實現(xiàn)滑動底部導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了weex slider實現(xiàn)滑動底部導(dǎo)航功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08