一文分享15個(gè)JavaScript中常用的數(shù)組操作方法

數(shù)組的增刪改查
1.push(插入的元素<可傳多個(gè)>)
作用:往數(shù)組的尾部插入元素**
let arr = [1, 2, 3] arr.push(4, 5) let res = arr.push(4, 5) //返回值為插入元素后數(shù)組的長(zhǎng)度(res:5) console.log(arr) // [1, 2, 3, 4, 5]
2.unshift(插入的元素<可傳多個(gè)>)
作用:往數(shù)組的頭部插入元素**
let arr = [1, 2, 3] arr.unshift(-2, -1, 0) let res = arr.unshift(-2, -1, 0) //返回值為插入元素后數(shù)組的長(zhǎng)度(res:6) console.log(arr) // [-2, -1, 0, 1, 2, 3]
3.pop()
作用:刪除數(shù)組的最后一個(gè)元素**
let arr = [1, 2, 3] arr.pop() let res = arr.pop() // 返回值為刪除的元素(res: [3]) console.log(arr) // [1, 2]
4.shift()
作用:刪除數(shù)組的第一個(gè)元素**
let arr = [1, 2, 3] arr.shift() let res = arr.shift() // 返回值為刪除的元素(res: [1]) console.log(arr) // [2, 3]
5.slice(開(kāi)始元素的下標(biāo),結(jié)束元素的下標(biāo))
作用:截取數(shù)組特定元素(不改變?cè)瓟?shù)組,可用作淺拷貝)**
// 淺拷貝 let arr = [1, 2, 3] let newArr = arr.slice() // 返回值為截取后的新數(shù)組 console.log(newArr) // [1, 2, 3] //截取元素 let arr = [1, 2, 3] let newArr = arr.slice(0, 2) // 從第下標(biāo)為0的元素開(kāi)始截取,到元素下標(biāo)為2的元素(注:但不包括元素下標(biāo)為2的元素) console.log(newArr) // [1, 2] console.log(arr) // [1, 2, 3] // 不改變?cè)瓟?shù)組
6.splice(開(kāi)始元素的下標(biāo),刪除的元素個(gè)數(shù),添加的元素...)
作用:可新增元素或者刪除元素**
// 新增元素 let arr = [1, 3, 5] arr.splice(1, 0, 2) // 在元素下標(biāo)為1的元素后面新增一個(gè)元素2 let res = arr.splice(1, 0, 2) // 由于此處為新增元素,返回值為空數(shù)組[](res: []) console.log(arr) // [1, 2, 3, 5] //刪除元素 let arr = [1, 2, 3] arr.splice(1, 1) // 在元素下標(biāo)為1的元素后面刪除一個(gè)元素 let res = arr.splice(1, 1) // 返回值為刪除的元素(res: [2]) console.log(arr) // [1, 3]
7.join(傳入分割每個(gè)元素的標(biāo)志)
作用:數(shù)組轉(zhuǎn)換為字符串**
let arr = ['zbw', 'cyl']
let res = arr.join(',')
console.log(res) // 'zbw, cyl'
let res = arr.join('-')
console.log(res) // 'zbw-cyl'8.concat()
作用:連接多個(gè)數(shù)組或值**
let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let res = arr1.concat(arr2) console.log(res) // [1, 2, 3, 4, 5, 6] let res = arr1.concat(4, arr2, 7, 8) console.log(res) // [1, 2, 3, 4, 4, 5, 6, 7, 8]
操作數(shù)組的高階函數(shù)
高階函數(shù):把函數(shù)作為參數(shù)傳入或把函數(shù)作為返回值的函數(shù)為高階函數(shù)
1.map()
作用:操作數(shù)組,返回經(jīng)過(guò)處理后的數(shù)組**
let arr = [1, 2, 3, 4] let res = arr.map(item => item * 2) console.log(res) // [2, 4, 6, 8]
2.filter()
作用:過(guò)濾數(shù)組,返回操作表達(dá)式為true的數(shù)組元素**
let arr = [1, 2, 3, 4] let res = arr.filter(item => item >= 2) console.log(res) // [2, 3, 4]
3.reduce(pre<初始值>, cur<當(dāng)前項(xiàng)>, arr<數(shù)組本身>, <初始值>)
作用:求和,數(shù)組轉(zhuǎn)對(duì)象**
// 求和
let arr = [1, 2, 3, 4]
let res = arr.reduce((pre, cur) => {
return pre += cur
}, 0) // 這里是求和 所以初始值為0
console.log(res) // 10
// 數(shù)組轉(zhuǎn)對(duì)象
let arr = [
{ id: 1, name: 'zbw', age: 18 },
{ id: 2, name: 'cyl', age: 18 },
]
let obj = arr.reduce((pre, cur) => {
pre[cur.id] = cur.name
return pre
}, {}) // 這里是數(shù)組轉(zhuǎn)對(duì)象 所以初始值為空對(duì)象{}
console.log(obj) // {1: 'zbw', 2: 'cyl'} 4.forEach()
作用:跟map()作用類似,區(qū)別在于forEach()會(huì)改變?cè)瓟?shù)組,且沒(méi)有返回值**
let arr = [
{ name: 'zbw', age: 22 },
{ name: 'cyl', age: 18 },
]
arr.forEach(item => item.age = 20)
console.log(arr) // [{ name: 'zbw', age: 20 },{ name: 'cyl', age:20 }]5.some()
作用:判斷數(shù)組中是否存在符合條件表達(dá)式的條件,如果有一項(xiàng)符合返回true,否則返回false**
let arr = [1, 2, 3, 4] let bool = arr.some(item => item > 2) console.log(bool) // true 因?yàn)榇嬖诖笥?的元素 let bool = arr.some(item => item > 5) console.log(bool) // false 因?yàn)椴淮嬖诖笥?的元素
6.every()
作用:判斷數(shù)組中是否全部元素都符合表達(dá)式的條件,全部都符合返回true,否則返回false**
let arr = [1, 2, 3, 4] let bool = arr.every(item => item > 0) console.log(bool) // true 因?yàn)樗性囟即笥? let bool = arr.every(item => item > 1) console.log(bool) // false 因?yàn)榇嬖诓淮笥?的元素
7.find()
作用:找到數(shù)組中符合條件的第一個(gè)元素**
let arr = [{ id: 1, name: 'zbw', age: 18 }, { id: 2, name: 'cyl', age: 18 }]
let res = arr.find(item => item.age === 18)
console.log(res) // { id: 1, name: 'zbw', age: 18 }
let res = arr.find(item => item.id === 2)
console.log(res) // { id: 2, name: 'cyl', age: 18 }知識(shí)擴(kuò)展
數(shù)組是 JavaScript 中最基礎(chǔ)、最常用的數(shù)據(jù)結(jié)構(gòu)之一。JavaScript 提供了豐富的方法來(lái)操作數(shù)組,熟練使用這些方法可以極大提升開(kāi)發(fā)效率和代碼可讀性。本文將按功能分類,詳細(xì)介紹最常用的數(shù)組操作方法。
數(shù)組的創(chuàng)建與判斷
| 方法 | 說(shuō)明 | 示例 |
|---|---|---|
Array.from() | 將類數(shù)組或可迭代對(duì)象轉(zhuǎn)換為真數(shù)組 | Array.from('abc') → ['a','b','c'] |
Array.of() | 將參數(shù)列表作為數(shù)組元素 | Array.of(3) → [3](避免 new Array(3) 的空位問(wèn)題) |
Array.isArray() | 判斷一個(gè)值是否為數(shù)組 | Array.isArray([]) → true |
添加/刪除元素
| 方法 | 說(shuō)明 | 返回值 | 是否修改原數(shù)組 |
|---|---|---|---|
push(item1, item2, ...) | 末尾添加一個(gè)或多個(gè)元素 | 新數(shù)組長(zhǎng)度 | ? 是 |
pop() | 刪除末尾最后一個(gè)元素 | 被刪除的元素 | ? 是 |
unshift(item1, item2, ...) | 開(kāi)頭添加一個(gè)或多個(gè)元素 | 新數(shù)組長(zhǎng)度 | ? 是 |
shift() | 刪除開(kāi)頭第一個(gè)元素 | 被刪除的元素 | ? 是 |
splice(start, deleteCount, ...items) | 從 start 位置刪除 deleteCount 個(gè),可再插入新元素 | 被刪除元素的數(shù)組 | ? 是 |
let arr = [1, 2, 3]; arr.push(4); // [1,2,3,4] arr.pop(); // 4,arr變?yōu)閇1,2,3] arr.unshift(0); // [0,1,2,3] arr.shift(); // 0,arr變?yōu)閇1,2,3] arr.splice(1, 1, 'a', 'b'); // 從索引1刪除1個(gè)元素,然后插入'a','b' → [1,'a','b',3]
訪問(wèn)與查找元素
| 方法 | 說(shuō)明 | 返回值 | 查找依據(jù) |
|---|---|---|---|
indexOf(item, fromIndex) | 查找元素首次出現(xiàn)的位置 | 索引(未找到返回 -1) | 嚴(yán)格相等 === |
lastIndexOf(item, fromIndex) | 從后向前查找 | 索引(未找到返回 -1) | 嚴(yán)格相等 |
includes(item, fromIndex) | 判斷數(shù)組是否包含某元素 | true / false | 嚴(yán)格相等 |
find(callback) | 返回第一個(gè)滿足測(cè)試函數(shù)的元素 | 元素值或 undefined | 自定義條件 |
findIndex(callback) | 返回第一個(gè)滿足測(cè)試函數(shù)的元素索引 | 索引或 -1 | 自定義條件 |
let arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.lastIndexOf(2); // 3
arr.includes(3); // true
// find 示例
let users = [{id:1, name:'A'}, {id:2, name:'B'}];
users.find(u => u.id === 2); // {id:2, name:'B'}
users.findIndex(u => u.name === 'B'); // 1迭代與遍歷方法(不修改原數(shù)組)
這些方法都接收一個(gè)回調(diào)函數(shù),函數(shù)參數(shù)通常為 (value, index, array)。
| 方法 | 說(shuō)明 | 返回值 |
|---|---|---|
forEach(callback) | 對(duì)每個(gè)元素執(zhí)行一次回調(diào) | undefined |
map(callback) | 創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是原數(shù)組每個(gè)元素調(diào)用回調(diào)后的返回值 | 新數(shù)組 |
filter(callback) | 創(chuàng)建一個(gè)新數(shù)組,包含所有通過(guò)測(cè)試的元素 | 新數(shù)組 |
reduce(callback, initialValue) | 對(duì)數(shù)組元素累積計(jì)算,從左到右 | 累積結(jié)果 |
reduceRight(callback, initialValue) | 與 reduce 類似,但從右向左 | 累積結(jié)果 |
some(callback) | 測(cè)試是否有元素通過(guò)測(cè)試 | boolean |
every(callback) | 測(cè)試是否所有元素都通過(guò)測(cè)試 | boolean |
let arr = [1, 2, 3, 4]; arr.forEach(v => console.log(v * 2)); // 輸出2,4,6,8 let doubled = arr.map(v => v * 2); // [2,4,6,8] let evens = arr.filter(v => v % 2 === 0); // [2,4] let sum = arr.reduce((acc, cur) => acc + cur, 0); // 10 let hasEven = arr.some(v => v % 2 === 0); // true let allPositive = arr.every(v => v > 0); // true
排序、反轉(zhuǎn)與填充
| 方法 | 說(shuō)明 | 是否修改原數(shù)組 |
|---|---|---|
sort(compareFn) | 對(duì)數(shù)組元素進(jìn)行排序(默認(rèn)按字符串排序) | ? 是 |
reverse() | 反轉(zhuǎn)數(shù)組元素順序 | ? 是 |
fill(value, start, end) | 用固定值填充數(shù)組部分或全部元素 | ? 是 |
let arr = [3, 1, 4, 2]; arr.sort(); // [1,2,3,4] (字符串排序) arr.sort((a,b) => a - b); // 升序 [1,2,3,4] arr.sort((a,b) => b - a); // 降序 [4,3,2,1] let nums = [1,2,3]; nums.reverse(); // [3,2,1] let filled = [1,2,3,4]; filled.fill(0, 1, 3); // [1,0,0,4]
數(shù)組拼接、截取與扁平化
| 方法 | 說(shuō)明 | 返回值 | 是否修改原數(shù)組 |
|---|---|---|---|
concat(arr1, arr2, ...) | 合并兩個(gè)或多個(gè)數(shù)組 | 新數(shù)組 | ? 否 |
slice(start, end) | 截取數(shù)組的一部分 | 新數(shù)組 | ? 否 |
flat(depth) | 按照指定深度遞歸扁平化數(shù)組 | 新數(shù)組 | ? 否 |
flatMap(callback) | 先 map 再 flat(1) | 新數(shù)組 | ? 否 |
let arr1 = [1,2];
let arr2 = [3,4];
arr1.concat(arr2); // [1,2,3,4]
let arr = [1,2,3,4,5];
arr.slice(1, 3); // [2,3]
let nested = [1, [2, [3, [4]]]];
nested.flat(2); // [1,2,3,[4]]
let words = ["hello", "world"];
words.flatMap(w => w.split('')); // ['h','e','l','l','o','w','o','r','l','d']轉(zhuǎn)換為字符串
| 方法 | 說(shuō)明 | 示例 |
|---|---|---|
join(separator) | 將數(shù)組元素用指定分隔符連接成字符串 | [1,2,3].join('-') → "1-2-3" |
toString() | 將數(shù)組轉(zhuǎn)換為逗號(hào)分隔的字符串 | [1,2,3].toString() → "1,2,3" |
toLocaleString() | 返回本地化字符串(常用于日期、數(shù)字) | [new Date()].toLocaleString() |
其他有用方法
| 方法 | 說(shuō)明 |
|---|---|
keys() | 返回一個(gè)包含數(shù)組索引的可迭代對(duì)象 |
values() | 返回一個(gè)包含數(shù)組值的可迭代對(duì)象 |
entries() | 返回一個(gè)包含 [index, value] 的可迭代對(duì)象 |
copyWithin(target, start, end) | 在數(shù)組內(nèi)部復(fù)制一段元素(會(huì)修改原數(shù)組) |
with(index, value) | (ES2023) 返回一個(gè)新數(shù)組,將指定索引的元素替換為新值(不修改原數(shù)組) |
toSorted() | (ES2023) 返回一個(gè)新排序數(shù)組(不修改原數(shù)組) |
toReversed() | (ES2023) 返回一個(gè)新反轉(zhuǎn)數(shù)組(不修改原數(shù)組) |
// 復(fù)制自身內(nèi)部片段 let arr = [1,2,3,4,5]; arr.copyWithin(0, 3, 5); // [4,5,3,4,5] // 不修改原數(shù)組的方式 (ES2023+) let original = [3,1,2]; let sortedCopy = original.toSorted(); // [1,2,3] let reversedCopy = original.toReversed();// [2,1,3] let replacedCopy = original.with(1, 99); // [3,99,2] // original 仍然是 [3,1,2]
常用技巧總結(jié)表(按場(chǎng)景速查)
| 場(chǎng)景 | 推薦方法 |
|---|---|
| 遍歷并執(zhí)行操作 | forEach |
| 映射轉(zhuǎn)換 | map |
| 過(guò)濾篩選 | filter |
| 累積計(jì)算 | reduce / reduceRight |
| 查找元素 | find |
| 查找索引 | indexOf / findIndex |
| 判斷存在 | includes / some |
| 驗(yàn)證全部 | every |
| 尾部增刪 | push / pop |
| 頭部增刪 | unshift / shift |
| 任意位置增刪 | splice |
| 合并數(shù)組 | concat / 擴(kuò)展運(yùn)算符 [...arr1, ...arr2] |
| 截取子數(shù)組 | slice |
| 扁平化 | flat / flatMap |
| 深拷貝簡(jiǎn)單數(shù)組 | slice() 或 [...arr] |
| 去重(簡(jiǎn)單類型) | Set + Array.from |
| 數(shù)組求并集/交集/差集 | 配合 Set 和 filter |
注意事項(xiàng)
- 多數(shù)方法會(huì)改變?cè)瓟?shù)組
push,pop,shift,unshift,splice,sort,reverse,fill,copyWithin會(huì)修改原數(shù)組,使用時(shí)需注意。 sort默認(rèn)按字符串排序數(shù)字排序需要提供比較函數(shù)(a,b) => a - b。map/filter等會(huì)跳過(guò)空位,但forEach不會(huì)稀疏數(shù)組(有未定義元素)的行為可能不一致,建議避免空位。- ES2023 新增了不修改原數(shù)組的版本
toSorted(),toReversed(),toSpliced(),with()可以放心使用而不用擔(dān)心副作用。 - 性能考慮對(duì)于大數(shù)組,
reduce通常比多次map+filter效率高(避免多次遍歷)。
掌握這些方法,你可以寫(xiě)出更簡(jiǎn)潔、更高效的數(shù)組操作代碼。建議結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景多練習(xí),逐步內(nèi)化這些 API。
到此這篇關(guān)于一文分享15個(gè)JavaScript中常用的數(shù)組操作方法的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 瀏覽器類型和版本號(hào)檢測(cè)代碼(兼容多瀏覽器)
果對(duì)javascript了解不是特別深入的話,很容易就會(huì)寫(xiě)出不兼容的代碼(就像我),這時(shí)候就得判斷瀏覽器了。比如事件偵聽(tīng)、一些鼠標(biāo)和鍵盤(pán)事件、Range等,一些都會(huì)不一樣.下面列出幾種常用的檢測(cè)瀏覽器方法,以饗觀眾!2010-04-04
ts封裝axios并處理返回值的實(shí)戰(zhàn)案例
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),下面這篇文章主要給大家介紹了關(guān)于ts封裝axios并處理返回值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
在javascript中執(zhí)行任意html代碼的方法示例解讀
關(guān)于javascript的eval()函數(shù)無(wú)法執(zhí)行html代碼的問(wèn)題,下面為大家介紹下一種在javascript中執(zhí)行任意html代碼的方法,感興趣的朋友不要錯(cuò)過(guò)2013-12-12
微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JS 實(shí)現(xiàn)Json查詢的方法實(shí)例
曾經(jīng)看過(guò)一個(gè)大牛寫(xiě)的實(shí)現(xiàn)Json的一個(gè)模板類,今天突然沒(méi)事就來(lái)自己試著寫(xiě)寫(xiě)。還好,一些東西還記得,思路還算清晰。直接上代碼了2013-04-04

