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)


相关推荐

  • ClearCase 与配置管理

    ClearCase 与配置管理

  • vue子组件给父组件传值 接收不到数据_vue父向子组件传值

    vue子组件给父组件传值 接收不到数据_vue父向子组件传值Usage: 子组件内容:&lt;template&gt;&lt;div@click="iclick"&gt;&lt;/div&gt;&lt;/template&gt;methods:{iclick(){letdata={a:’data’};this.$emit(‘ievent’,data,’l…

  • GoogleNet_google翻译学术论文

    GoogleNet_google翻译学术论文                             GoingDeeperwithConvolutions摘要      我们在ImageNet大规模视觉识别挑战赛2014(ILSVRC14)上提出了一种代号为Inception的深度卷积神经网络结构,并在分类和检测上取得了新的最好结果。这个架构的主要特点是提高了网络内部计算资源的利用率。通过精心的手工设计,我们在增加了网络深度和广…

  • thinkphp在app接口开发过程中的通讯安全认证

    thinkphp在app接口开发过程中的通讯安全认证

  • 什么是Promise,我们用它来做什么?[通俗易懂]

    什么是Promise,我们用它来做什么?[通俗易懂]一、什么是Promise?我们用Promise来解决什么问题?Promise是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。我…

  • java孙鑫老师视频教程笔记「建议收藏」

    java孙鑫老师视频教程笔记「建议收藏」此笔记是我开始系统学习java孙鑫老师视频教程的笔记。可供初学者学习参考哈 今天先附上第一课Java的一些基本概念第二课Java面向对象编程后面的将陆续为大家奉上 但是如果你是初学者的话,我笔记里边可能有些东西只是点了一下,没有再详尽的描述了那是因为我以前学过一段java,有一定java基础,所以如果你需要这部分更的详细讲解的话还是得麻烦你自己在网上搜一

发表回复

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

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