1. 首頁 > 生活 > >

js數組常用的方法及用法 js常用數組操作

小知識js常用數組操作



文章插圖
js數組常用的方法及用法 js常用數組操作

文章插圖

在我們日常的實際開發中，經常遇到需要各種需要處理的數組，JavaScript中雖然提供了各式各樣的方法，但本菜鳥很長一段時間都分不清楚這些是干什么用的，也偷懶不去看……
前一段時間在網上沖浪時，看到一個評論里有人用符號表示了一個方法，覺得十分形象生動，于是便花了半天時間重新學習了一些常見的數組方法，并用符號、圖標進行具象化的整理，我覺得本菜鳥今天又博學了一點點 。
一、mapmap返回新數組，不改變原數組 。原始數組的每一項都會調用提供的函數并返回新的數組 。
[●,●,■,●].map(●=>■)→[■,■,■,■]letarr=['杜甫','李白','李商隱','白居易'];letmapArr=arr.map(e=>'蘇軾');//console.log(mapArr):["蘇軾","蘇軾","蘇軾","蘇軾"]【js數組常用的方法及用法 js常用數組操作】二、filterfilter返回新數組，不改變原數組 。數組內的每一項通過函數處理后，返回一個各項都符合條件的數組 。在下面這個數組中，如果想把宋朝的詩詞人過濾出來，就可以使用filter方法 。
[○,△,□,△].filter(△=>true)→[△,△]letarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];letfilterArr=arr.filter(e=>e.age==='宋');/***console.log(filterArr):[*{id:3,name:'蘇軾',age:'宋'},*{id:4,name:'辛棄疾',age:'宋'}*]*/三、findfind返回的是數組中的一項，不改變原數組 。通過函數處理后返回符合元素中的第一項，只要找到符合的就把這一項給返回出去 。
[○,△,□,△].find(△=>true)→(first)△letarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];letfindItem=arr.find(e=>e.age==='宋');/***console.log(findItem):{id:3,name:"蘇軾",age:"宋"};*/四、findIndex返回的是索引值，不改變原數組 。通過函數處理后返回符合元素中的第一項的索引值，和find方法一樣，都是只找到第一個符合的就返回 。
[○,△,□,△].findIndex(△=>true)→(first)△letarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];letfindItem=arr.find(e=>e.age==='宋');/***console.log(findItem):{id:3,name:"蘇軾",age:"宋"};*/五、everyevery返回布爾值，不改變原數組 。every是檢查數組中的所有元素是否都符合條件，如果都符合返回true，有一項不符合就返回false
[○,○,○,△].every(○=>true)→falseletarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];leteveryFlag=arr.every(e=>e.age==='宋');/***console.log(everyFlag):false*/六、somesome返回的是布爾值 。檢查數組中是否有任意一個元素符合條件，只要有一個符合就返回true 。
[△,○,○,△].some(△=>true)→trueletarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];letsomeFlag=arr.some(e=>e.age==='宋');/***console.log(someFlag):true*/七、concatconcat返回新數組 。concat是合并兩個數組，將兩個數組合并成一個新的數組并返回 。
[○,□,△].concat([△,○])→[○,□,△,△,○]letarr=[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'}];letnewArr=[{id:5,name:'李清照',age:'宋'}];letconcatArr=arr.concat(newArr);/*console.log(concatArr):[{id:0,name:'杜甫',age:'唐'},{id:1,name:'李白',age:'唐'},{id:2,name:'李商隱',age:'唐'},{id:3,name:'蘇軾',age:'宋'},{id:4,name:'辛棄疾',age:'宋'},{id:5,name:'李清照',age:'宋'}]*/八、join返回字符串 。將數組的每個元素拼接成字符串，沒有傳參就直接拼接，如果有參數就將參數當做拼接符連接 。
[○,□,△,○].join('-')→○-□-△-○letarr=['貝','加','爾','湖','畔'];letjoinStr=arr.join('-')/*console.log(joinStr):貝-加-爾-湖-畔*/九、reduce累加結果可以做一個累加器
[1,2,3,4].reduce((total,current)=>total+current,10)→20letarr=[1,2,3,4];letreduceRes=arr.reduce((total,current)=>total+current,10);/*console.log(reduceRes):20*/十、forEachforEach改變了原數組對數組中每一項都執行一次函數 。
[●,●,■,●].forEach(●=>■)→[■,■,■,■]letarr=[{id:0,name:'杜甫'},{id:1,name:'李白'},{id:2,name:'李商隱'}]letforEachArr=arr.forEach(e=>e.age='唐')/***arr:[*{id:0,name:'杜甫',age:'唐'},*{id:1,name:'李白',age:'唐'},*{id:2,name:'李商隱',age:'唐'}*]**forEachArr:undefined*/十一、flatflat改變原數組flat用于將數組扁平化，參數為要扁平化的層數，可以直接傳入Infinity，表示全部扁平化 。
[○,□,[△,[△,○]]].fill(Infinity)→[○,□,△,△,○]letarr=[1,2,[[3],4]];arr.flat(Infinity);/*console.log(arr):[1,2,3,4]*/十二、fillfill改變原數組 。fill作用為填充數組 。第一個參數為要填充的內容，后面的兩個參數分別為開始到結束的位置 。
[○,□,△,○].fill(☆,2,3)→[○,□,☆,○]letarr=[1,2,3,4];arr.fill('你好',2,3);/*console.log(arr):[1,2,'你好',4]*/