首页 > 作文

js的数组有哪些常用方法(超详细的 JS 数组方法)

更新时间:2023-04-05 09:53:11 阅读: 评论:0

在我们日常的实际开发中,经常遇到需要各种需要处理的数组,jav儿童睡前故事免费听ascript中虽然提供了各式各样的方法,但本菜鸟很长一段时间都分不清楚这些是干什么用的,也偷懒不去看……

前一段时间在网上冲浪时,看到一个评论里有人用符号表示了一个方法,觉得十分形象生动,于是便花了半天时间重新学习了一些常见的数组方法,并用符号、图标进行具象化的整理,我觉得本菜鸟今天又博学了一点点。

一、map

map返回新数组,不改变原数组。原始数组的每一项都会调用提供的函数并返回新的数组。
[●,●,■,●].map(●=>■)→[■,■,■,■]
letarr=['杜甫','李白','李商隐','白居易'];letmaparr=arr.map(e=>'苏轼');//console.log(maparr):["苏轼","苏轼","苏轼","苏轼"]

二、filter

filter返回新数组,不改变原数组。数组内的每一项通过函数处理后,返回一个各项都符合条件的数组。 在下面这个数组中,如果想把宋朝的诗词人过滤出来,就可以使用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:'宋'}*]*/

三、find

find返回的是数组中的一项,不改变原数组。通过函数处理后返回符合元素中的第一项,只要找到符合的就把这一项给返回出去。初中满分作文
[○,△,□,△].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:"宋"};*/

五、ever如果没有你 吉他谱y

every返回布尔值,不改变原数组。every是检查数组中的所有元素是否都符合条件,如果都符合返回true,有一项不符合就返回fal
[○,○,○,△].ev婆婆媳妇和小姑ery(○=>true)→fal
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):fal*/

六、some

some返回的是布尔值。检查数组中是否有任意一个元素符合条件,只要有一个符合就返回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*/

七、concat

concat返回新数组。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)→20
letarr=[1,2,3,4];letreduceres=arr.reduce((total,current)=>total+current,10);/*console.log(reduceres):20*/

十、foreach

foreach改变了原数组对数组中每一项都执行一次函数。
[●,●,■,●].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*/

十一、flat

flat改变原数组flat用于将数组扁平化,参数为要扁平化的层数,可以直接传入infinity,表示全部扁平化。
[○,□,[△,[△,○]]].fill(infinity)→[○,□,△,△,○]
letarr=[1,2,[[3],4]];arr.flat(infinity);/*console.log(arr):[1,ltaly2,3,4]*/

十二、fill

fill改变原数组。fill作用为填充数组。第一个参数为要填充的内容,后面的两个参数分别为开始到结束的位置。
[○,□,△,○].fill(,2,3)→[○,□,,○]
letarr=[1,2,3,4];arr.fill('你好',2,3);/*console.log(arr):[1,2,'你好',4]*/

本文发布于:2023-04-05 09:53:09,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/3c45f754cf0ea5632500756738992aee.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:js的数组有哪些常用方法(超详细的 JS 数组方法).doc

本文 PDF 下载地址:js的数组有哪些常用方法(超详细的 JS 数组方法).pdf

上一篇:梦见看医生
下一篇:返回列表
标签:数组   苏轼   杜甫   李白
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图