js数组遍历十种方法

js数组遍历十种方法1.some()遍历数组,只要有一个以上的元素满足条件就返回true,否则返回false,退出循环对数组中每个元素执行一次ok函数,知道某个元素返回true,则直接返回true。如果都返回false,则返回false检查整个数组中是否有满足元素。privatesome(id:number){constarr=[{cityId:195,cityName:’深圳’},{cityId:196,cityNa

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1. some()

遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false ,退出循环

对数组中每个元素执行一次ok函数,知道某个元素返回true,则直接返回true。如果都返回false,则返回false

检查整个数组中是否有满足元素。

    private some(id: number) {
      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 198, cityName: '上海'}
      ]
      let result = arr.some((item: any) => {
        return item.cityId === id
      })
      console.log(`传入:${id},结果:${result}`)
    }

js数组遍历十种方法

 

2. every()

遍历数组,每一个元素都满足条件 则返回 true,否则返回 false

    private every() {
      const arr = [1,2,3,4,5]
      let result = arr.every((item: any) => {
        return item > 0
      })
      console.log(`结果:${result}`)
    }

js数组遍历十种方法

    private every() {
      const arr = [1,2,3,4,5]
      let result = arr.every((item: any) => {
        return item > 10
      })
      console.log(`结果:${result}`)
    }

js数组遍历十种方法

3. forEach()

  •  数组里的元素个数有几个,该方法里的回调就会执行几次
  •  第一个参数是数组里的当前元素,第二个参数为数组里当前元素的索引值,第三个参数则是它自己
  •  没有返回值,本质上等同于 for 循环,对每一项执行 function 函数。即map是返回一个新数组,原数组不变,forEach 是改变原数组。
  •  不支持 continue,用 return false 或 return true 代替。
  •  不支持 break,用 try catch/every/some 代替
  • 数组自带的遍历方法,虽然使用频率略高,但是性能仍然比普通循环略低
    private forEach() {
      type itemType = {
        cityId: number,
        cityName: string
      }
      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 197, cityName: '上海'}
      ]
      arr.forEach((item: itemType, index: number, arr: any) => {
        console.log(`index:${index},item:${JSON.stringify(item)},arr:${JSON.stringify(arr)}`)
      })
    }

js数组遍历十种方法

 

4. map()

  • map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
  • map() 方法按照原始数组元素顺序依次处理元素。
  • 使用比较广泛,但其性能还不如 forEach
  • 不会改变原始数组。
      let arr = [1, 2, 3, 4, 5, 6]
      let newArr = arr.map((item: any) => {
        return item * item
      })
      console.log(newArr)

js数组遍历十种方法

 

5. filter()

  • 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • 不会改变原始数组。
    private filter(id: number): string {
      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 197, cityName: '上海'}
      ]
      let name: string = ''
      arr.filter((item: any) => {
        if(item.cityId === id) {
          name = item.cityName
        }
      })
      console.log(`传入:${id},结果:${name}`)
      return name
    }

js数组遍历十种方法

 

6. find()

遍历数组,返回符合条件的第一个元素,如果没有符合条件的元素则返回 undefined

      let arr = [1,2,2,3,3,3,3,4,4,5,6]
      let num = arr.find((item:any) => {
        return item === 3
      })
      console.log(num)

js数组遍历十种方法

      let arr = [1,2,2,3,3,3,3,4,4,5,6]
      let num = arr.find((item:any) => {
        return item === 10
      })
      console.log(num)

js数组遍历十种方法

 

7. findIndex()

遍历数组,返回符合条件的第一个元素的索引,如果没有符合条件的元素则返回 -1

      let arr = [1,2,2,3,3,3,3,4,4,5,6]
      let num = arr.findIndex((item:any) => {
        return item === 2
      })
      console.log(num)

js数组遍历十种方法

      let arr = [1,2,2,3,3,3,3,4,4,5,6]
      let num = arr.findIndex((item:any) => {
        return item === 10
      })
      console.log(num)

js数组遍历十种方法

 

8. for…of…(ES6)

自动解构

for of不能对象用

      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 197, cityName: '上海'}
      ]
      for(const {cityId, cityName} of arr) {
        console.log(cityId, cityName)
      }

js数组遍历十种方法

 

9. for…in…

for…in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
for in得到对对象的key或数组,字符串的下标

      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 197, cityName: '上海'}
      ]
      const obj = { cityId: 195, cityName: '深圳'}

      for(const key in arr) {
        console.log(`数组key-${key}`)
      }
      for(const key in obj) {
        console.log(`对象key-${key}`)
      }

js数组遍历十种方法

 

10. for

最简单的一种循环遍历方法,也是使用频率最高的一种,可优化

      const arr = [
        { cityId: 195, cityName: '深圳'},
        { cityId: 196, cityName: '北京'},
        { cityId: 197, cityName: '上海'}
      ]
      for(let i = 0; i < arr.length; i++) {
        console.log(arr[i])
      }

js数组遍历十种方法

四种遍历方法对于100万的循环时间

js数组遍历十种方法

for最快,但可读性比较差

forEach比较快,能够控制内容

for….of比较慢,香

for…in比较慢,不方便

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184830.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm设置成中文_怎样将pycharm变成中文版的

    pycharm设置成中文_怎样将pycharm变成中文版的Pycharm作为一款IDE,经常作为python编译器。很多人在用pycharm时都是英文格式,现在,本文推荐一种可以将其改成中文模式的方法:1.首先,打开pychram中的“File”,找到“Setting”;2.在“Plugins”中找到汉化插件并安装,这样就可以设置成中文。3.如果想改回英文,可以在“已安装”中取消应用插件即可。…

  • 即期利率和远期利率的区别「建议收藏」

    即期利率和远期利率的区别「建议收藏」一、考点精讲1、即期利率金融市场的基本利率,以St表示,指已设定到期日的零息票债券的到期收益率,表示的是从现状到未来时间t的年华收益率。利率和本金都是在时间t支付的。2、远期利率指资金的远期价格,隐含

  • java文件上传到指定的路径_java sftp上传文件

    java文件上传到指定的路径_java sftp上传文件在java中获得文件的路径在我们做上传文件操作时是不可避免的。web上运行1:this.getClass().getClassLoader().getResource(“/”).getPath();this.getClass().getClassLoader().getResource(“”).getPath();得到的是ClassPath的绝对URI路径。如:/D:/jboss-4.2….

  • Oracle partitions 简介

    Oracle partitions 简介基于Oracle11.2.04分区表的概念当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区。表进行分区后,逻辑上仍然是一张完整的表,只是将表中的数据在物理上存放到多个表空间(物理文件上),这样查询数据时,不至于每次都扫描整张表。分区表的优点改善查询性能:对分区对象的查询可以公搜索自己关心的分区,提高检索速度。增强可用性:如果表的某个分区…

  • Traits技法[终于解决]

    扮演“特性萃取机”角色,萃取各个迭代器的特性(迭代器的相应类型)模板特例化:提供一份template定义式,而其本身仍为templatization通过classtemplatepartial

    2021年12月18日
  • webstorm正则替换(正则替换字符串)

    Command+R 进入替换页面,选择Regex,进行正则替换。参考页面https://www.jetbrains.com/help/webstorm/2016.1/regular-expression-syntax-reference.html

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号