js数组遍历十种方法

╰半夏微凉° 2022-11-17 05:09 296阅读 0赞

### 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}`)
        }

![20210408154533511.png][]

### 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}`)
        }

![20210408155153569.png][]

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

![20210408155222410.png][]

## 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)}`)
          })
        }

![20210408160317805.png][]

## ##

### 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)

![20210408161001310.png][]

### 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
        }

![20210408161335138.png][]

### 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)

![20210408161624254.png][]

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)

![20210408161641787.png][]

## ##

### 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)

![20210408161836286.png][]

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)

![20210408161852980.png][]

### 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)
          }

![20210408162132133.png][]

### 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}`)
          }

![2021040816262628.png][]

### 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])
          }

![20210408162933104.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

for最快，但可读性比较差

forEach比较快，能够控制内容

for....of比较慢，香

for...in比较慢，不方便

[20210408154533511.png]: /images/20221022/9ab0c060aca54efdbfcd1b32f4a1caf6.png
[20210408155153569.png]: /images/20221022/cd2d3cf46a3a42d69ab19d91dd68ef58.png
[20210408155222410.png]: /images/20221022/bbede515edef4adf9c1335b0940c2235.png
[20210408160317805.png]: /images/20221022/27833fb40f9547bc981c90089e9f0c18.png
[20210408161001310.png]: /images/20221022/6253b295d10d41a0843cd866b5b2816a.png
[20210408161335138.png]: /images/20221022/309ef3af468346afa14faf804ddee113.png
[20210408161624254.png]: /images/20221022/724536468c2742269fb2df3eb0432df9.png
[20210408161641787.png]: /images/20221022/56e4dfa530d041ac94da750bb9723448.png
[20210408161836286.png]: /images/20221022/3c0467774f7545849b670a1328046c7c.png
[20210408161852980.png]: /images/20221022/122234868d994491a950b588d5acb455.png
[20210408162132133.png]: /images/20221022/014e186622884b2ba076dcb740f0baa9.png
[2021040816262628.png]: /images/20221022/91a6eda4f4ec4b3fac852e4f9f48f1d8.png
[20210408162933104.png]: /images/20221022/697f76103de34c22a8dcdc021a0a6235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221022/af24d5e68da0480e8c5bf1c36657a250.png