JavaScript 數(shù)組方法集合

一、數(shù)組方法分類(lèi)及應(yīng)用場(chǎng)景

  1. 遍歷與操作
方法 作用 應(yīng)用場(chǎng)景 示例
forEach 遍歷元素并執(zhí)行操作 日志記錄、元素轉(zhuǎn)換 [1,2].forEach(x=>console.log(x))
map 生成新數(shù)組(元素轉(zhuǎn)換) 數(shù)據(jù)格式化、計(jì)算衍生值 [1,2].map(x=>x*2) // [2,4]
filter 篩選符合條件的元素 數(shù)據(jù)過(guò)濾 [1,2,3].filter(x=>x>1) // [2,3]
some 檢查至少一個(gè)元素滿足條件 快速驗(yàn)證(如表單校驗(yàn)) [1,2].some(x=>x>1) // true
every 檢查所有元素滿足條件 數(shù)據(jù)有效性驗(yàn)證 [2,4].every(x=>x%2===0) // true
  1. 轉(zhuǎn)換與生成
方法 作用 應(yīng)用場(chǎng)景 示例
reduce 從左到右對(duì)數(shù)組元素執(zhí)行累加器函數(shù) 求和、統(tǒng)計(jì)、復(fù)雜計(jì)算 [1,2].reduce((a,b)=>a+b,0) // 3
join 合并為字符串 生成 CSV 或文本 ['a','b'].join(',') // 'a,b'
concat 合并多個(gè)數(shù)組 數(shù)組合并 [1].concat([2,[3,4]]) // [1,2,[3,4]]
flat 扁平化多維數(shù)組 處理嵌套數(shù)據(jù) [[1,2],3].flat() // [1,2,3]
fill 用固定值填充數(shù)組 mask敏感數(shù)據(jù)(value, start, end) [1,2,3,4].fill(0, 1, 3) // [1,0,0,4]
  1. 查找與定位
方法 作用 應(yīng)用場(chǎng)景 示例
find 返回第一個(gè)符合條件的元素 精準(zhǔn)定位數(shù)據(jù) [{id:1}].find(x=>x.id==1) // {id:1}
findIndex 返回第一個(gè)符合條件的元素索引 定位數(shù)據(jù)位置 ['a','b'].findIndex(x=>'b') // 1
indexOf 返回元素首次出現(xiàn)的索引 檢查元素存在性 ['a','b'].indexOf('b') // 1
includes 返回布爾值 判斷數(shù)組是否包含某個(gè)值 [1,2,3].includes(1) // true
  1. 排序與修改
方法 作用 應(yīng)用場(chǎng)景 示例
sort 對(duì)數(shù)組排序 數(shù)據(jù)排序 [3,1,2].sort() // [1,2,3] 不帶參數(shù)以字母順序排序,或者傳一個(gè)函數(shù)arr.sort((a, b) => a-b);
reverse 反轉(zhuǎn)數(shù)組順序 倒序處理 [1,2].reverse() // [2,1]
splice 增刪改元素 動(dòng)態(tài)修改數(shù)組 [1,2,3].splice(1,1,4) // [1,4,3]
slice 截取子串 兩個(gè)參數(shù)分別指定開(kāi)始結(jié)束位置,不包括第二個(gè)參數(shù)所在位置 [1,2,3,4].slice(0,3) // [1,2,3]
  1. 靜態(tài)方法
方法 作用 應(yīng)用場(chǎng)景 示例
Array.isArray() 判斷是否為數(shù)組 類(lèi)型檢查 Array.isArray([]) // true
Array.from() 類(lèi)數(shù)組或可迭代對(duì)象轉(zhuǎn)數(shù)組 轉(zhuǎn)換字符串、NodeList等 Array.from('abc') // ['a','b','c']
Array.of() 創(chuàng)建指定元素的數(shù)組 避免單參數(shù)歧義 Array.of(1) // [1]

二、是否改變?cè)瓟?shù)組

  1. 修改原數(shù)組的方法
  • splice 添加或者刪除數(shù)組中的元素
  • fill 用固定值填充數(shù)組
  • reverse 反轉(zhuǎn)
  • sort 排序
  • push 在末尾添加一個(gè)元素
  • pop 刪除最后一個(gè)元素
  • shift 刪除數(shù)組第一個(gè)元素
  • unshift 在數(shù)組開(kāi)頭添加元素
  1. 不修改原數(shù)組的方法
  • concat
  • join
  • toString
  • indexOf
  • includes

三、實(shí)際案例

  1. 多維數(shù)組扁平化(reduce)
    const nested = [[1,2],[3,[4]]];
    const flat = nested.reduce((acc, val) =>
    acc.concat(Array.isArray(val) ? val.flat() : val), []);
    // [1,2,3,4]
  2. 統(tǒng)計(jì)對(duì)象數(shù)組屬性(reduce)
    const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
    ];
    const ageSum = users.reduce((sum, user) => sum + user.age, 0); // 55
  3. 數(shù)組去重(filter + indexOf)
    const arr = [1,2,2,3];
    const unique = arr.filter((item, index) => arr.indexOf(item) === index); // [1,2,3]

四、注意事項(xiàng)
reduce 的初始值:未提供時(shí),初始值為第一個(gè)元素,索引從 1 開(kāi)始,空數(shù)組會(huì)報(bào)錯(cuò) 。
性能影響:splice、sort 等修改原數(shù)組的方法在大數(shù)據(jù)量時(shí)可能性能較低。
函數(shù)式編程:優(yōu)先使用 map/filter 等不修改原數(shù)組的方法,提升代碼可維護(hù)性 。
通過(guò)合理選擇方法,可顯著提升代碼效率和可讀性。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Array 對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值。 數(shù)組創(chuàng)建 字面量 - 推薦使用 構(gòu)造函數(shù) 當(dāng)把構(gòu)造函數(shù)作為函數(shù)調(diào)用...
    流失的陰霾閱讀 314評(píng)論 0 1
  • 數(shù)組基礎(chǔ)知識(shí) 你應(yīng)該知道數(shù)組是什么,但以下是一個(gè)簡(jiǎn)單的概述:數(shù)組就像放東西的盒子,你可以放進(jìn)東西(新增),拿出東西...
    強(qiáng)哥科技興閱讀 259評(píng)論 0 0
  • JavaScript數(shù)組方法持續(xù)更新 作為 js 的重要一員,一定要好好了解一番,若有理解不到之處,還望不吝指教。...
    陳年小萌新閱讀 217評(píng)論 0 0
  • javascript中數(shù)組的22種方法 數(shù)組總共有22種方法,本文將其分為對(duì)象繼承方法、數(shù)組轉(zhuǎn)換方法、棧和隊(duì)列方法...
    裁云作舞衣閱讀 222評(píng)論 0 0
  • 1.Array.push() 向數(shù)組的末尾添加一個(gè)或多個(gè)元素,并返回新的數(shù)組長(zhǎng)度。原數(shù)組改變。(參數(shù)不能是數(shù)組) ...
    飛天豆團(tuán)閱讀 228評(píng)論 0 0

友情鏈接更多精彩內(nèi)容