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)→false

letarr=[{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)→true

letarr=[{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]*/