27個JavaScript數(shù)組常見方法匯總與實例說明
更新時間：2022年12月10日 15:12:21 作者：IT閏土
這篇文章主要介紹了JavaScript數(shù)組常見方法匯總與實例說明包括數(shù)組修改，數(shù)組增加，數(shù)組遍歷,數(shù)組排序等操作,需要的朋友可以參考下
1. push()
概括：數(shù)組末位增加
參數(shù)：需要增加的數(shù)據(jù)
返回值：數(shù)組更新后的長度
let arr = [1,2,3] arr.push(1) // 返回新增后的數(shù)組長度 4 arr.push() // 不傳參數(shù)默認不新增 4 arr.push(1,2,3) // 新增多條數(shù)據(jù)時，返回新增完成后的數(shù)組長度 7
2. pop()
- 概括：數(shù)組末位刪除
- 參數(shù)：無
- 返回值：刪除的數(shù)據(jù)
let arr = [3] arr.pop() // 返回已刪除的數(shù)據(jù) 3 arr.pop() // 當數(shù)組數(shù)據(jù)為空時，返回 undefined
3. unshift()
- 概括：數(shù)組首位新增
- 參數(shù)：需要新增的數(shù)據(jù)
- 返回值：數(shù)組的長度
let arr = [1,2,3] arr.unshift(1) // 返回新增后的數(shù)組長度 4 arr.unshift() // 不傳參數(shù)默認不新增 4 arr.unshift(1,2,4) // 新增多條數(shù)據(jù)時，返回新增完成后的數(shù)組長度 7
4. shift()
- 概括：數(shù)組首位刪除
- 參數(shù)：無
- 返回值：數(shù)組的長度
let arr = [3] arr.shift() // 返回已刪除的數(shù)據(jù) 3 arr.shift() // 當數(shù)組數(shù)據(jù)為空時，返回 undefined
5. reverse()
- 概括：反轉數(shù)組
- 參數(shù)：無
- 返回值：會將原數(shù)組修改成反轉之后的數(shù)組
let arr = [1,2,3] arr.reverse() // 返回反轉之后的數(shù)組 [3,2,1] let arr = [] arr.reverse() // 當數(shù)組數(shù)據(jù)為空時返回 []
6. sort()
- 概括：將數(shù)組進行排序
- 參數(shù)：排序函數(shù)
// 當參數(shù)1 - 參數(shù)2時，為正序
function justSort(a,b) {
return a-b
}
// 當 參數(shù)2 - 參數(shù)1 時，為倒序
function backSort(a,b) {
return b-a
}
- 返回值：排序后的數(shù)組
let arr = [1,2,3] arr.sort() // 不傳參默認通過Unicode（萬國碼）進行排序 [1,2,3] arr.sort(backSort) // 通過排序函數(shù)進行排序 [3,2,1]
7. join()
- 概括：將數(shù)組轉化成字符串
- 參數(shù)：根據(jù)指定字符（可用空字符串）進行轉化
- 返回值：返回轉化成字符串后的字符串
let arr = [1,2,3]
arr.join() // 不傳參默認根據(jù)逗號進行轉化 1,2,3
arr.join('') // 根據(jù)空字符串進行轉化 123
arr.join(',') // 根據(jù)逗號進行轉化 1,2,3
8. splice()
- 概括：刪除并替換指定單元的數(shù)據(jù)
- 參數(shù)：該方法默認有幾種傳參情況
- 一個參數(shù)：數(shù)組中保留幾位，其余刪除
- 兩個參數(shù)：參數(shù)1（開始索引）、參數(shù)2（刪除個數(shù)）
- 三個參數(shù)：參數(shù)1（開始索引）、參數(shù)2（刪除個數(shù)）、參數(shù)3+（插入的數(shù)據(jù)，第三個參數(shù)以后可以傳多個參數(shù)）
- 返回值：已刪除的數(shù)組數(shù)據(jù)
let arr = [1,2,3,4] arr.splice() // 不傳參默認不刪除不插入，返回空數(shù)組 [] arr.splice(3) // 數(shù)組中默認保留3位數(shù)據(jù), 返回刪除后的數(shù)據(jù) [4] arr.splice(0,1) // 從數(shù)組首位刪除一條數(shù)據(jù) [1] arr.splice(0,1,9) // 從首位刪除一條數(shù)據(jù)，并插入一條數(shù)據(jù) [2] arr.splice(0,1,9,8,7,6,5,4,3,2,1) // 從首位刪除一條數(shù)據(jù)并插入多條數(shù)據(jù)（參數(shù)3之后的為插入 [9]
9. slice()
- 概括：截取并拷貝出子數(shù)組
- 參數(shù)：兩個參數(shù)
- 參數(shù)1：起始位置，不傳參數(shù)2默認截取起始位置之后的數(shù)據(jù)
- 參數(shù)2：結束位置前一位
- 返回值：截取的數(shù)組
let arr = [1,2,3,4] arr.slice() // 不傳參默認截取全部 [1,2,3,4] arr.slice(1) // 從索引為1的位置默認截取到末尾 [2,3,4] arr.slice(1,3) // 從索引為1的位置截取到索引為3的位置前一位 [2,3]
10. concat()
- 概括：將數(shù)據(jù)合并到新數(shù)組中并返回
- 參數(shù)：參數(shù)1+（參數(shù)可以設置多個，每個參數(shù)都將合并到原數(shù)組中，如果入?yún)⑹且粋€數(shù)組會將入?yún)?shù)據(jù)合并到原數(shù)組中）
- 返回值：合并后的新數(shù)組
let arr = [1,2,3,4] arr.concat(5) // 會將入?yún)?shù)據(jù)合并到原數(shù)組中 [1,2,3,4,5] arr.concat(5,6,7,8) // 可以入?yún)⒍鄺l數(shù)據(jù) [1,2,3,4,5,6,7,8] arr.concat([5,6,7,8]) // 可以入?yún)?shù)組進行合并，合并至原數(shù)組 [1,2,3,4,5,6,7,8]
11. indexOf()
- 概括：返回指定單元的索引
- 參數(shù)：參數(shù)1（要查找的數(shù)組數(shù)據(jù)），參數(shù)2（查找的起始位置）
- 返回值：找到指定數(shù)據(jù)返回索引，未找到返回 -1
let arr = [1,2,3,4] arr.indexOf(3) // 查找數(shù)組中指定數(shù)據(jù)的下標 2 arr.indexOf(5) // 未找到數(shù)組中指定數(shù)據(jù) -1
12. forEach()
- 概括：遍歷數(shù)組（需要配合函數(shù)使用）
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組單元數(shù)據(jù)
- 參數(shù)2：每個單元索引
- 參數(shù)3：數(shù)組本身
- 返回值：undefined
let arr = [1,2,3,4]
arr.forEach((data,index,array) => {
console.log(data) // 數(shù)組每個單元數(shù)據(jù)
console.log(index) // 數(shù)組下標
console.log(array) // 原數(shù)組本身
})
13. map()
- 概括：遍歷數(shù)據(jù)（進行映射）
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組單元數(shù)據(jù)
- 參數(shù)2：每個單元索引
- 參數(shù)3：數(shù)組本身
- 返回值：返回映射后的新數(shù)組
let arr = [1,2,3,4]
arr.map((data,index,array) => {
console.log(data) // 數(shù)組每個單元數(shù)據(jù)
console.log(index) // 數(shù)組下標
console.log(array) // 原數(shù)組本身
})
14. filter()
- 概括：過濾數(shù)組（過濾出返回為true的數(shù)據(jù)）
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組單元數(shù)據(jù)
- 參數(shù)2：每個單元索引
- 參數(shù)3：數(shù)組本身
- 返回值：返回過濾后的新數(shù)組
let arr = [1,2,3,4]
arr.filter((data,index,array) => {
console.log(data) // 數(shù)組每個單元數(shù)據(jù)
console.log(index) // 數(shù)組下標
console.log(array) // 原數(shù)組本身
return data == 1 // 過濾返回為true的數(shù)據(jù)
})
15. some()
- 概括：檢測數(shù)組（只要有一個數(shù)據(jù)符合條件時,返回true）
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組單元數(shù)據(jù)
- 參數(shù)2：每個單元索引
- 參數(shù)3：數(shù)組本身
- 返回值：返回檢測后的新數(shù)組
let arr = [1,2,3,4]
arr.some((data,index,array) => {
console.log(data) // 數(shù)組每個單元數(shù)據(jù)
console.log(index) // 數(shù)組下標
console.log(array) // 原數(shù)組本身
return data == 1 // 檢測指定數(shù)據(jù)是否符合條件
})
16. eveny()
- 概括：檢測數(shù)組（只有數(shù)組中所有數(shù)據(jù)符合條件時,才返回true,否則反回false）
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組單元數(shù)據(jù)
- 參數(shù)2：每個單元索引
- 參數(shù)3：數(shù)組本身
- 返回值：返回檢測后的新數(shù)組
let arr = [1,2,3,4]
arr.eveny((data,index,array) => {
console.log(data) // 數(shù)組每個單元數(shù)據(jù)
console.log(index) // 數(shù)組下標
console.log(array) // 原數(shù)組本身
return data == 1 // 檢測所有條件是否符合條件
})
17. reduce()
- 概括：迭代數(shù)組所有項(累加器)
- 參數(shù)：兩個參數(shù)
- 參數(shù)1（入?yún)⒑瘮?shù)參數(shù)）：回調函數(shù)（必選）
- 回調參數(shù)1：上一次回調返回值，或者初始值（必選）
- 回調參數(shù)2：數(shù)組中被處理的數(shù)據(jù)項（必選）
- 回調參數(shù)3：數(shù)據(jù)項在數(shù)組中的索引（可選）
- 回調參數(shù)4：原數(shù)組（可選）
- 參數(shù)2：初始值（可選）
- 參數(shù)1（入?yún)⒑瘮?shù)參數(shù)）：回調函數(shù)（必選）
- 返回值：返回數(shù)組計算后的結果
let arr = [1,2,3,4]
arr.reduce((pre,data,index,array) => {
console.log(pre) // 數(shù)組上一次計算結果，如果未計算則是初始值
console.log(data) // 數(shù)組中被處理的數(shù)據(jù)項
console.log(index) // 數(shù)據(jù)項在數(shù)組中的索引
console.log(array) // 原數(shù)組
return pre + data // 將每次累加結果進行累加下一項
}, 0) // 設置遍歷初始值
- 擴展用法：
- 計算數(shù)組中每個元素出現(xiàn)的次數(shù)
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
- 數(shù)組去重
// 單數(shù)組去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
// 數(shù)組對象去重
let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
let Obj = {}
person = person.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[])
- 將二維數(shù)組轉化為一維數(shù)組
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
- 將多維數(shù)組轉化為一維數(shù)組
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>{
pre.concat(Array.isArray(cur) ? newArr(cur) : cur
}),[])
}
console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]
- 對象里面屬性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //60
18. reduceRight()
- 概括：迭代數(shù)組所有項（從右至左進行計算，同數(shù)組reduce方法）
- 參數(shù)：同數(shù)組的reduce方法參數(shù)
- 返回值：數(shù)組計算結果
let arr = [1,2,3,4]
arr.reduceRight((pre,data,index,array) => {
console.log(pre) // 數(shù)組上一次計算結果，如果未計算則是初始值
console.log(data) // 數(shù)組中被處理的數(shù)據(jù)項
console.log(index) // 數(shù)據(jù)項在數(shù)組中的索引
console.log(array) // 原數(shù)組
return pre + data // 將每次累加結果進行累加下一項
}, 0) // 設置遍歷初始值
19. Array.from()
- 概括：將偽數(shù)組轉化成數(shù)組，只要含length屬性的都可轉化成數(shù)組（ES6）
- 參數(shù)：需要轉化的偽數(shù)組
- 返回值：轉化后的數(shù)組
let str = 'asdf'
console.log(Array.from(str)) // 將字符串轉化成數(shù)組 [a,s,d,f]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj)) // 含索引并length屬性的對象也可以轉化成數(shù)組 ['a', 'b']
20. Array.of()
- 概括：將一組值轉化成數(shù)組，類似于生明數(shù)組（ES6）
- 參數(shù)：需要轉化的值
- 返回值：轉化后的數(shù)組
console.log(Array.of('11')) // 將字符串轉化成數(shù)組 ['11']
console.log(Array.of({a:1,b:2})) // 將對象轉化成數(shù)組 [{a:1,b:2}]
console.log(new Array('11')) // 類似于構造函數(shù)聲明數(shù)組
console.log(new Array(2)) // 構造函數(shù)生明因為入?yún)栴}容易容易引起重載 [empty × 2] 空數(shù)組
21. copyWithin()
- 概括：在數(shù)組內部將指定位置的數(shù)組賦值到其他位置，會覆蓋原數(shù)組項，返回當前數(shù)組
- 參數(shù)：三個參數(shù)
- 參數(shù)1：開始位置，從該位置開始替換數(shù)組項（必傳）
- 參數(shù)2：從指定索引開始讀取數(shù)組項，默認為0，如果為負值，則從右往左讀（可選）
- 參數(shù)3：從指定索引結束讀取數(shù)組項，默認為數(shù)組長度，如果是負值表示倒數(shù)（可選）
- 返回值：處理好的數(shù)組
let arr = [1,2,3,4,5] arr.copyWithin(3) // 從下標3的位置上開始，默認將整個數(shù)組作為數(shù)據(jù)項進行替換，長度不夠默認截取 [1, 2, 3, 1, 2] arr.copyWithin(0, 2) // 從下標為0位置開始，默認將從下標2位置截取到末尾作為數(shù)據(jù)項進行替換，長度不夠默認截取 [3, 4, 5, 4, 5] arr.copyWithin(0, 2, 3) // 從下標0位置開始，默認將從下標2位置截取到下標3位置之前作為數(shù)據(jù)項進行替換，長度不夠默認截取 [3, 2, 3, 4, 5] arr.copyWithin(-1) // 從倒數(shù)倒數(shù)第一位開始，默認將整個數(shù)組作為數(shù)據(jù)項進行替換，長度不夠默認截取 [1, 2, 3, 4, 1] arr.copyWithin(-1, -2) // 從倒數(shù)第一位置開始，默認將從倒數(shù)第二位置默認截取到末尾作為數(shù)據(jù)項進項替換，長度不夠默認截取 [1, 2, 3, 4, 4] arr.copyWithin(-1, -4, -2) // 從倒數(shù)第一位置開始，默認將從倒數(shù)第四的位置開始截取到倒數(shù)第二的位置作為數(shù)據(jù)項項進項替換，長度不夠默認截取 [1, 2, 3, 4, 2]
22. find()
- 概括：找到第一個符合條件的數(shù)組數(shù)據(jù)項
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：
- 參數(shù)1：數(shù)組數(shù)據(jù)項
- 參數(shù)2：數(shù)據(jù)項下標
- 參數(shù)3：原數(shù)組
- 返回值：符合條件的數(shù)組數(shù)據(jù)項
let arr = [1,2,3,4,5]
arr.find((item, index, array) => {
console.log(item) // 數(shù)組數(shù)據(jù)項
console.log(index) // 數(shù)據(jù)項下標
console.log(array) // 原數(shù)組
return item > 1 // 此條件不會校驗數(shù)組所有數(shù)據(jù)項，只會校驗第一條符合條件的數(shù)據(jù)
})
23. findIndex()
- 概括：找到第一個符合條件的數(shù)組數(shù)據(jù)項下標
- 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：同數(shù)組find方法
- 返回值：符合條件數(shù)據(jù)項下標
let arr = [1,2,3,4,5]
arr.findIndex((item, index, array) => {
console.log(item) // 數(shù)組數(shù)據(jù)項
console.log(index) // 數(shù)據(jù)項下標
console.log(array) // 原數(shù)組
return item > 1 // 此條件不會校驗數(shù)組所有數(shù)據(jù)項，只會校驗第一條符合條件的數(shù)據(jù)
})
24. fill()
- 概括：使用指定值填充整個數(shù)組
- 參數(shù)：
- 參數(shù)1：待填充的數(shù)據(jù)
- 參數(shù)2：開始填充的位置
- 參數(shù)3：結束填充的位置（該位置前一位）
- 返回值：填充后的數(shù)組
let arr = [1,2,3,4] arr.fill(1) // 默認將數(shù)組所有項填充成該數(shù)據(jù) [1,1,1,1] arr.fill(1,2) // 以參數(shù)1為填充項，將數(shù)據(jù)從坐標為2位置開始填充至數(shù)組末尾 [1,2,1,1] arr.fill(1,2,4) // 以參數(shù)1為填充項，將是數(shù)據(jù)從坐標2位置開始填充至下標為4位置 [1,2,1,4]
25. keys()
- 概括：遍歷數(shù)組的鍵名（一般針對于Set、Map數(shù)據(jù)集合使用）
- 參數(shù)：無
- 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組下標
let arr = [1,2,3,4]
let arr2 = arr.keys()
console.log(arr2) // Array Iterator {}
for (let key of arr2) {
console.log(key); // 0,1,2,3
}
26. value()
- 概括：遍歷數(shù)組鍵名（一般針對于Set、Map數(shù)據(jù)集合使用）
- 參數(shù)：無
- 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組每個數(shù)據(jù)項
let arr = [1,2,3,4]
let arr2 = arr.value()
console.log(arr2) // Array Iterator {}
for (let val of arr2) {
console.log(val); // 1,2,3,4
}
27. entries()
- 概括：遍歷數(shù)組的鍵值和鍵名（迭代數(shù)組，一般針對于Set、Map數(shù)據(jù)集合使用）
- 參數(shù)：無
- 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組每個單元的數(shù)據(jù)項和下標作為一個數(shù)組
let arr = [1,2,3,4]
let arr1 = arr.entries()
console.log(arr1) // Array Iterator {}
for (let e of arr1) {
console.log(e); // [0,1] [1,2] [2,3] [3,4]
}
總結
- 變異方法（改變原數(shù)組方法）：
push()、pop()、unshift()、shift()、reverse()、sort() 、copyWithin()、fill() - 非變異方法（不改變原數(shù)組方法）：
join()、splice()、slice()、concat()、indexOf()、forEach()、map()、filter()、some()、eveny()、reduce()、reduceRight()、find()、findIndex()、keys()、value()、entries() - ES6新增方法：
find()、findIndex()、includes()、keys()、values()、entries()、fill()、Array.of()、copyWithin()、Array.from()、reduce()、reduceRight()、filter()、map()
本文件為大家講了27個JavaScript數(shù)組常見方法匯總并配上了源碼實例，更多關于JS數(shù)組操作請查看下面的相關鏈接
您可能感興趣的文章:
- js如何找出兩個數(shù)組中不同的元素
- JavaScript數(shù)組filter方法
- js深度合并兩個數(shù)組對象的實現(xiàn)
- JavaScript實現(xiàn)數(shù)組去重的十種方法分享
- JavaScript中數(shù)組隨機排序的實現(xiàn)詳解
- JavaScript數(shù)組合并的8種常見方法小結
- JavaScript高階API數(shù)組reduce函數(shù)使用示例
- JavaScript中運算符與數(shù)組擴展詳細講解
- JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組
- Java?從json提取數(shù)組并轉換為list的操作方法
- js對象合并的4種方式與數(shù)組合并的4種方式
相關文章
本篇文章主要介紹了微信小程序引入es6 promise的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
最近公司需求做一個微信紅包雨功能,這里給大家總結下實現(xiàn)的方法,這篇文章主要給大家介紹了關于uni-app微信小程序之紅包雨活動的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JS三級可折疊菜單實現(xiàn)方法,以實例形式分析了asp.net結合JavaScript實現(xiàn)三級折疊菜單的相關技巧,涉及JavaScript節(jié)點操作實現(xiàn)方法,需要的朋友可以參考下2016-02-02
窗口固定位置顯示元素，當頁面高度大于某高度，并且頁面向下滾動時，顯示該元素；當頁面位置小于某高度，或者頁面向上滾動時，隱藏該元素，下面通過本文給大家介紹JS實現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素，需要的朋友參考下吧2016-02-02
本文通過實例代碼給大家分享了JavaScript貪吃蛇小組件功能 ,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Javascript 對象（object）合并操作,結合實例形式分析了javascript基于jQuery的extend方法、對象屬性、遍歷賦值等操作實現(xiàn)對象合并相關操作技巧與使用注意事項,需要的朋友可以參考下2019-07-07
網(wǎng)上搜到的js格式化金額可選是否帶千分位以及保留精度，還不錯，大家可以學習下2014-01-01
本篇主要分享我對閉包的理解及使用閉包完成私有屬性、模擬類、繼承等，結合大量例子，希望大家能快速掌握！首先讓我們先從一些基本的術語開始吧2012-04-04
JavaScript 中有關數(shù)組對象的方法(詳解)
下面小編就為大家?guī)硪黄狫avaScript 中有關數(shù)組對象的方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08