位置: IT常识 - 正文

JavaScript ,18种常用数组方法,快来看看你会吗?

编辑:rootadmin
JavaScript ,18种常用数组方法,快来看看你会吗? 前言

推荐整理分享JavaScript ,18种常用数组方法,快来看看你会吗?,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

众所周知,向后端请求数据,处理数据是前端工程师必备的技能,从后端请求回来的数据往往是数组的形式返回到前端,因此数组处理方法的重要性可想而知;数组的处理方法在MDN文档上很多,很多朋友在学习时往往会抓不住重点,导致事倍功半,但是大家不要担心,我已经为大家总结了工作中常用的18种数组处理的方法,大家一定要牢记哦!

文章の目录前言不会改变原数组的方法forEach()方法filter()方法map()方法findIndex()方法find()方法some()方法every()方法reduce()归纳函数concat()数组拼接改变原数组的方法push()/unshift()pop()/shift()sort()/reverse()splice()其它flat()fill()写在最后不会改变原数组的方法forEach()方法

forEach()方法传入的参数是一个函数,内部传入的函数的形参第一个是item数组每一项的值,第二个是索引号index,它的返回值是undefined; 运行实例如下: 控制台输出结果

filter()方法

filter()方法是筛选数组的方法,传入的参数和forEach方法一样,但是返回值为一个数组,实际应用是用来将获取到的数据中符合条件的数组筛选出来; 运行的实例如下: 控制台输出结果如下:

map()方法

map()方法传入的参数也同上,它的返回值也是一个新的数组;map()方法可以对数组的每一项进行相同的处理,运行的实例如下:

控制台的输出结果:

findIndex()方法

findIndex()方法顾名思义,是返回数组中的符合条件的第一项的索引号,如果找不到返回-1。传入的参数同上,运行实例如下所示:

let arr = [1, 3, 3, 4, 5, 6, 7]//findIndex方法,返回第一个符合条件哪一项的索引号,找不到返回-1const res = arr.findIndex((item) => item > 5)console.log(res)

控制台输出结果:

find()方法

find()方法是返回查找到的第一个符合条件的那一项,传入的参数同上。运行实例如下所示:

let arr = [1, 3, 3, 4, 5, 6, 7]//find()查找item,返回第一个符合条件的那一项,找不带返回undefinedconst res2 = arr.find((item) => { return item > 5})console.log(res2)

控制台运行结果如下:

some()方法

some()方法传入的参数同上,返回值是布尔值,只要查找到一项符合条件就返回true;示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//some方法返回布尔值const bl = arr.some((item) => { return item > 5})console.log(bl)

every()方法

every()方法传入的参数也是同上,返回值是布尔值,但是必须每一项都符合条件才返回true;示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//every()返回值为布尔值需要全部通过筛选条件才返回trueconst bl2 = arr.every((currentValue) => { return currentValue < 10})console.log(bl2)

reduce()归纳函数JavaScript ,18种常用数组方法,快来看看你会吗?

reduce()函数中的参数第一个参数是函数,第二个参数是暂存变量sum的类型,第一个参数函数有四个参数,不过常用的就是第一个参数为累加暂存变量(return就是这个值),第二个参数item。第三个是index,第四个是数组本身;代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//reduce()归纳函数const previousValue = 0const arrSum = arr.reduce((previousValue, currentValue) => { return previousValue + currentValue}, 0)console.log(arrSum)

控制台输出结果如下:

concat()数组拼接

concat()将两个数组进行拼接,返回的是拼接完的新数组,不能给多维数组(数组套数组)进行拼接; 代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]//concat 将两个数组进行拼接 , 返回的是一个新的数组const newArr3 = [2, 5, 5, 6, 6, 8]const concatArr = arr.concat(newArr3)console.log(concatArr)

改变原数组的方法push()/unshift()

push()/unshift()方法是分别在数组的最后面和最前面添加一个元素,返回值是新数组的长度;

//一下数组处理方法会改变原数组const Arr = [1, 3, 5, 6, 7, 8, 9]Arr.push(1)console.log(Arr)console.log(Arr)const a = Arr.unshift(1)console.log(a)

控制台输出结果如下:

pop()/shift()

此两种方法pop()是删除数组的最后一个值,shift()是删除数组的第一项的值;返回值是删除的那一项;

arr.pop(1)console.log(arr)arr.shift(1)console.log(arr)

控制台输出结果如下:

sort()/reverse()

sort()方法是排序,内部的参数是一个函数,function(a , b){ return a - b },通过此函数可以控制排序是降序函数升序,如果参数内部return a - b是降序,return a + b是升序; reverse()是数组翻转,即将数组的元素倒序排列;代码示例如下:

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort((a, b) => { return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

splice()方法修改原数组,返回一个删除元素的新数组,负数就是从后往前数索引;传入的第一个参数是删除的起始元素的索引号,第二个参数是删除的元素的个数;

let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

其它flat()

flat()用于多维数组拍平,传入的参数是数组拍平的深度,也可以是infiniy,代表数组拍平的深度是无穷大 代码示例如下:

const Arr2 = [ [1, 2], [2, 3], [4, 5], [5, 6],]console.log(Arr2.flat(Infinity))

控制台输出结果:

fill()

可以对数组进行填充:写法:Array.fill(1 , 2 , 4)数组中填充1 , 从索引值是2的元素开始, 到元素的索引号是4开始,不包括索引值是4的元素;填充的元素会覆盖原来对应索引号的元素; 代码示例如下:

const Arr2 = [ [1, 2], [2, 3], [4, 5], [5, 6],]console.log(Arr2.fill(1, 0, 4))

控制台输出结果:

写在最后

到此18种常用数组方法已经讲解完毕,本文因为篇幅有限,部分的方法可能讲解不够详细,请大家谅解,如有疑问的地方,可以查询MDN文章,下面附上MDN文章,有问题的查询文档即可: MDN文档

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞

本文链接地址:https://www.jiuchutong.com/zhishi/299488.html 转载请保留说明!

上一篇:uni-app--》什么是uniapp?如何开发uniapp?(uni-app是干嘛的)

下一篇:Docker在Windows环境的搭建和使用(docker windows -v)

  • 苹果13promax勿扰模式在哪(苹果13promax勿扰模式怎么设置)

    苹果13promax勿扰模式在哪(苹果13promax勿扰模式怎么设置)

  • 怎么查自己有几个微信号(怎么查自己有几个社保账户)

    怎么查自己有几个微信号(怎么查自己有几个社保账户)

  • 台积电算是中国企业吗(台积电是中国的还是外国的)

    台积电算是中国企业吗(台积电是中国的还是外国的)

  • 华为nova7支持无线充电功能吗(华为nova7支持无线反向充电吗)

    华为nova7支持无线充电功能吗(华为nova7支持无线反向充电吗)

  • 苹果x隐藏照片怎么恢复(苹果手机里的照片怎么隐藏)

    苹果x隐藏照片怎么恢复(苹果手机里的照片怎么隐藏)

  • 苹果x快捷指令在哪(苹果x快捷指令nfc在哪)

    苹果x快捷指令在哪(苹果x快捷指令nfc在哪)

  • 荣耀gt2和华为gt2区别(华为gt2与荣耀)

    荣耀gt2和华为gt2区别(华为gt2与荣耀)

  • qq被批量登录什么意思(qq批量登录什么意思)

    qq被批量登录什么意思(qq批量登录什么意思)

  • 微信没登录信息能收到吗(如果微信没登录消息能发过去吗)

    微信没登录信息能收到吗(如果微信没登录消息能发过去吗)

  • 电话未知号码什么意思(未知号码的电话)

    电话未知号码什么意思(未知号码的电话)

  • 为什么筛选显示不全(为什么筛选显示的信息不全)

    为什么筛选显示不全(为什么筛选显示的信息不全)

  • 两个手机怎么登录一个微信号(两个手机怎么登微信)

    两个手机怎么登录一个微信号(两个手机怎么登微信)

  • 荣耀10怎么设置24小时(荣耀10怎么设置灭屏显示时间)

    荣耀10怎么设置24小时(荣耀10怎么设置灭屏显示时间)

  • airpods充多久满电(airpods充多久充满电)

    airpods充多久满电(airpods充多久充满电)

  • 苹果x进入dfu模式(iphonex进入dfu模式)

    苹果x进入dfu模式(iphonex进入dfu模式)

  • 荣耀Magic Watch 2有没有扬声器(荣耀magicwatch2能下载软件吗)

    荣耀Magic Watch 2有没有扬声器(荣耀magicwatch2能下载软件吗)

  • vivo可以用语音写便签吗(vivo手机能语音接听电话吗)

    vivo可以用语音写便签吗(vivo手机能语音接听电话吗)

  • 如何在word中加参考文献(如何在word中加入新的文档)

    如何在word中加参考文献(如何在word中加入新的文档)

  • 苹果x备忘录怎么改名字(苹果x备忘录怎么设置密码)

    苹果x备忘录怎么改名字(苹果x备忘录怎么设置密码)

  • 信号锅怎么调试(信号锅怎么接线)

    信号锅怎么调试(信号锅怎么接线)

  • 收钱码姓名能隐藏吗(微信收钱码如何隐藏姓名)

    收钱码姓名能隐藏吗(微信收钱码如何隐藏姓名)

  • oppor9s游戏加速在哪(oppoa9游戏加速在哪)

    oppor9s游戏加速在哪(oppoa9游戏加速在哪)

  • 苹果7防误触模式在哪(苹果防误触模式在哪里)

    苹果7防误触模式在哪(苹果防误触模式在哪里)

  • 小米手环4有NFC吗(小米8手环功能介绍)

    小米手环4有NFC吗(小米8手环功能介绍)

  • 小红书如何加水印(小红书怎么加上自己的水印)

    小红书如何加水印(小红书怎么加上自己的水印)

  • 可以抵扣进项税额的增值税普通发票
  • 应税和课税是什么意思
  • 以个人名义汇货要交税吗
  • 不动产经营租赁服务包括哪些
  • 环评费用怎么入账
  • 水费征税
  • 蔬菜坏了还能吃吗
  • 邮政能否为固定业户代开增值税普通发票
  • 企业资产永久或实质性损害如何进行所得税处理
  • 工程实际成本核算例题
  • 卖二手车
  • 筹办期的工资费用是什么
  • 房地产企业土地成本分摊方法
  • 自查补交以前年度增值税怎么做账
  • 每个月计提工资没有发怎么办
  • 购进免税农产品怎么计算进项税额
  • 公司开出的经济补偿金可以税前扣除吗
  • 简易计税项目可以差额征税吗
  • 小规模专票冲红怎么操作
  • 环评公司的成本核算
  • 无法支付的其他账户
  • 个体工商户变更法人
  • 印花税的计税依据是销项和进项的金额
  • 简易征收税务处理
  • 企业所得税费用扣除比例
  • 暂估营业成本怎做分录
  • win11怎么添加字体到个性化
  • 贷款减值损失计提还能转回吗
  • thinkphp5自定义标签
  • 国家差旅费报销最新标准住宿
  • phpqrcode 实例
  • 怎么做外资企业赚钱
  • 实际交印花税会计分录
  • 阿尔莫什
  • Smarty3配置及入门语法
  • 外经证过期没核销罚多少钱
  • 增值税专用发票怎么开
  • js中var的用法
  • 公司车辆出售要交多少税
  • 三个数排序c语言程序从大到小
  • dedecms 授权
  • 代收的运输费用怎么入账
  • 收取水电费计入什么科目
  • 资产减值损失借方余额在利润表怎么填列
  • 混合销售行为应征增值税不征营业税的是
  • win7安装软件时提示不能打开要写入的文件
  • 员工出差加油费如何报销
  • 商品流通企业流程图
  • sql server数据库设置定时任务
  • 小规模纳税人做工资没交社保
  • 定期定额户用财务制度备案吗
  • 一般纳税人月销售额10万以下城建税
  • 一般纳税人商贸公司增值税税负率
  • 固定资产清理不及时
  • 支付给其他公司的借款属于什么现金流
  • 增值税申报销项数据怎么自动带出来
  • 票据到期无力支付怎么办
  • 一般纳税人劳务税率是多少?
  • win10系统怎么设置不锁屏和休眠
  • 腾讯tp驱动
  • win10开机绿色
  • linux特殊权限命令
  • centos 添加服务
  • linux常见服务
  • 安卓开源部分叫什么
  • opengl绘制坐标轴
  • 源码分析怎么写
  • Node.js中的事件循环是什么
  • 相同目录
  • 批处理命令读取文件内容
  • python ftp文件上传
  • jquery遍历div
  • 欢迎使用来电提醒业务是什么意思
  • JavaScript冒泡排序都不会写
  • 江苏税务查询电子发票
  • 税款怎么查询
  • 正外部性与负外部性的定义
  • 乾升黄酒好吗值得买吗
  • 非法印制发票的后果
  • 税务稽查工作底稿属于什么证据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设