位置: 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)

  • 华为手表能连接小米手机吗(华为手表能连接荣耀手机吗)

    华为手表能连接小米手机吗(华为手表能连接荣耀手机吗)

  • 微信实名认证怎么弄(微信实名认证怎么换人)

    微信实名认证怎么弄(微信实名认证怎么换人)

  • 抖音如何退粉丝团(抖音如何退粉丝会员)

    抖音如何退粉丝团(抖音如何退粉丝会员)

  • p40pro和p40pro+尺寸是一样的吗(p40pro和p40pro+尺寸对比)

    p40pro和p40pro+尺寸是一样的吗(p40pro和p40pro+尺寸对比)

  • 苹果手机删掉的微信记录还可以找到吗(苹果手机删掉的游戏在哪里能找到)

    苹果手机删掉的微信记录还可以找到吗(苹果手机删掉的游戏在哪里能找到)

  • 荣耀10x支持wifi6吗(荣耀10x支持多少瓦快充)

    荣耀10x支持wifi6吗(荣耀10x支持多少瓦快充)

  • 音响中英文语音切换(音响中英文语音怎么设置)

    音响中英文语音切换(音响中英文语音怎么设置)

  • 苹果11左边喇叭不响(苹果11左边喇叭声音小)

    苹果11左边喇叭不响(苹果11左边喇叭声音小)

  • 优酷视频怎么下载到手机里(优酷视频怎么下载到手机相册)

    优酷视频怎么下载到手机里(优酷视频怎么下载到手机相册)

  • 芯片的主要作用(什么是芯片,芯片是干嘛的)

    芯片的主要作用(什么是芯片,芯片是干嘛的)

  • tips是什么的缩写(tips缩写)

    tips是什么的缩写(tips缩写)

  • iphone能不能自动重拨(iPhone能不能自动调节亮度)

    iphone能不能自动重拨(iPhone能不能自动调节亮度)

  • 华为手机给苹果无线充电怎么充(华为手机给苹果手机充电)

    华为手机给苹果无线充电怎么充(华为手机给苹果手机充电)

  • 小米9pro 5G采用什么马达(小米9pro是什么5g基带)

    小米9pro 5G采用什么马达(小米9pro是什么5g基带)

  • 把快手粉丝删除会怎样(快手粉丝删除了怎么找回)

    把快手粉丝删除会怎样(快手粉丝删除了怎么找回)

  • 华为手机拦截的电话在哪里(华为手机拦截的短信怎么能不显示)

    华为手机拦截的电话在哪里(华为手机拦截的短信怎么能不显示)

  • ipad pro电池损耗查询(ipadpro电池损耗快吗)

    ipad pro电池损耗查询(ipadpro电池损耗快吗)

  • 华为p30游戏免打扰在哪里设置(华为p30pro游戏免打扰怎么关)

    华为p30游戏免打扰在哪里设置(华为p30pro游戏免打扰怎么关)

  • 天猫88折卡如何获取(天猫88折vip卡什么样的商品使用)

    天猫88折卡如何获取(天猫88折vip卡什么样的商品使用)

  • 黑莓q10和q20的区别(黑莓q10各个版本有什么区别)

    黑莓q10和q20的区别(黑莓q10各个版本有什么区别)

  • 小米屏蔽的相册去哪里找?(小米屏蔽的相册怎么看)

    小米屏蔽的相册去哪里找?(小米屏蔽的相册怎么看)

  • 荣耀playip几级防水(华为荣耀play防不防水)

    荣耀playip几级防水(华为荣耀play防不防水)

  • 怎么在小红书保存原图(怎么在小红书保存动图)

    怎么在小红书保存原图(怎么在小红书保存动图)

  • 抖音怎么两人换脸(两个抖音怎样切换)

    抖音怎么两人换脸(两个抖音怎样切换)

  • 安卓手机怎么恢复聊天记录(安卓手机怎么恢复删除的软件)

    安卓手机怎么恢复聊天记录(安卓手机怎么恢复删除的软件)

  • Win11如何更改开始菜单和任务栏颜色(win11如何更改开始菜单位置)

    Win11如何更改开始菜单和任务栏颜色(win11如何更改开始菜单位置)

  • 织梦DEDECMS栏目后台设置隐藏,前台栏目如何显示(织梦如何给栏目增加缩略图)

    织梦DEDECMS栏目后台设置隐藏,前台栏目如何显示(织梦如何给栏目增加缩略图)

  • 启用新账簿时,应填写
  • 增值税普通发票怎么开
  • 销项税额和进项税额月底怎么结转
  • 个体注销了名下的车辆
  • 研发费用辅助账谁来做
  • 建筑劳务公司业务范围是什么
  • 个人转让房产涉税政策
  • 纳税人减免税备案登记表是在税务局领吗
  • 准予结转以后年度怎么算
  • 红字发票信息表是销方还是购方开
  • 金税盘年费全额抵扣分录
  • 分摊费用怎么说合适
  • 物业 免物业费
  • 母公司收到的分红计入利润吗
  • 出口发票金额和备注了差了1分钱
  • 多转出的进项税能否转回
  • 进项税使报表应交税费负数如何处理?
  • 建筑业的发票
  • 餐饮发票增值税税率是多少
  • 建筑施工企业购进材料会计分录
  • 个人转让住房要交哪些税费?
  • 利润表为什么没有主营业务收入
  • 填制和审核凭证是什么意思
  • 销售退回发票怎么处理
  • 商贸企业固定资产计提折旧吗
  • 一般纳税人企业所得税如何计算
  • 1697509550
  • 预付卡销售怎么做账
  • 个人综合所得适用什么税率?
  • 电脑病毒的特点包括
  • 母公司给子公司拨款要交税吗
  • 如何在windows10搜索文件
  • linux安装xen
  • 递延负债减递延资产
  • 城建税的会计账务处理
  • 印花税和所得税需要计提吗
  • 转让土地使用权的条件是什么
  • 微信小程序前端源码
  • 累计盈余科目怎么填
  • 固定资产卡片账自固定资产报废后的保管期限是
  • 前端实现文件上传的命令
  • 软件折旧费
  • 不免征个人所得税的是个人转让著作权所得
  • 增值税专用发票怎么开
  • 代扣代缴附加税减免政策文件
  • 非流动资产处置损失计入什么科目
  • 顺流交易为什么也要减
  • 发票盖错章怎么擦掉
  • 赊销应收款余额怎么算
  • 计提的工会经费年底有余额咋处理
  • 土地测绘费计入开发间接费?
  • 增值税加计抵减企业所得税如何处理
  • 汽车固定资产清理怎么交税
  • 砂石资源税怎么算
  • 发票失控成本怎么算
  • 劳务费能否作为农民工工资优先支付
  • 预付货款用什么会计科目
  • 工程开票金额大写怎么写
  • 企业短期借款可以是个人吗
  • mysql如何输入数据
  • ubuntu 添加开机启动
  • 两台苹果怎么用电脑把数据同步
  • ubuntul
  • ubuntu屏幕突然变大
  • 微软警告:64位Win7系统或无法安装KB3033929补丁更新
  • win10鼠标箭头怎么换样式
  • centos安装v2
  • 电脑市场调查报告
  • iframe transparent透明背景方法
  • selenium自动化步骤
  • nodejs-websocket
  • js移动dom
  • 深入理解新发展理念,推进供给侧结构性改革
  • android存储方式
  • 怎么撤销税务三方协议
  • 怎样理解句子我还没弄清楚是怎么回事
  • 郑州房管局办事大厅预约
  • 如何取消个人所得税预约
  • 国外寄东西到国内要身份证号码吗
  • 餐饮票抵扣成本怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设