js当中遍历方法有许多，在这记录一下常用的几个遍历方法

::: hljs-center

:::

1、普通for循环

自行指定循环次数。

复制const arr = ['Vue', 'React', 'Angular'];

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

// 打印
// 0 "Vue"
// 1 "React"
// 2 "Angular"
js

2、for…in循环

用于遍历对象的属性(数组的索引值也算属性)。

复制const obj = {name1: 'Vue', name2: 'React', name3: 'Angular'};

for(item in obj) {
  console.log(item, obj[item])
}

// 打印
// name1 Vue
// name2 React
// name3 Angular
js

但有一个缺点：如果手动向数组添加成员时，索引值会出现问题： 虽然数组的length不变，但用for…in遍历数组会遍历到那些新定义的属性。

复制const arr = ['Vue', 'React', 'Angular'];

for(item in arr) {
  if(item === '1') {
    arr.splice(item, 0, 'Java')
  }
  console.log(item, arr[item]);
}
console.log(arr)

// 打印
// 0 Vue
// 1 Java
// 2 React
// (4) ["Vue", "Java", "React", "Angular"]
js

3、for…of循环(ES6)

for…of循环修复了for…in存在的问题，他只遍历属于对象本身的属性值。 且这个对象必须是iterable可被迭代的。如Array, Map, Set。

复制const arr = ['Vue', 'React', 'Angular'];
let map = new Map();
map.set('name1', 'Vue');
map.set('name2', 'React');
map.set('name3', 'Angular');
let set = new Set();
set.add('Vue');
set.add('React');
set.add('Angular');

for(item of arr) {
  console.log(item)
}

for(item of map) {
  console.log(item)
}

for(item of set) {
  console.log(item)
}

// 打印
// Vue
// React
// Angular

// (2) ["name1", "Vue"]
// (2) ["name2", "React"]
// (2) ["name3", "Angular"]

// Vue
// React
// Angular
js

4、forEach循环

循环数组中每一个元素并采取操作，没有返回值，可以不用知道数组长度（也是现在比较常用的遍历方法）。

复制const arr = ['Vue', 'React', 'Angular'];
let map = new Map();
map.set('name1', 'Vue');
map.set('name2', 'React');
map.set('name3', 'Angular');
let set = new Set();
set.add('Vue');
set.add('React');
set.add('Angular');

arr.forEach((key, value, item) => {
  console.log(key, value, item)
})

map.forEach((key, value, item) => {
  console.log(key, value, item)
})

set.forEach((key, value, item) => {
  console.log(key, value, item)
})

// 打印
// Vue 0 (3) ["Vue", "React", "Angular"]
// React 1 (3) ["Vue", "React", "Angular"]
// Angular 2 (3) ["Vue", "React", "Angular"]

// Vue name1 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}
// React name2 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}
// Angular name3 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}

// Vue Vue Set(3) {"Vue", "React", "Angular"}
// React React Set(3) {"Vue", "React", "Angular"}
// Angular Angular Set(3) {"Vue", "React", "Angular"}
js

这里需要提醒一下，forEach方法不能使用continue和break，使用return语句的作用只能跳出当前循环，并不能跳出整个循环。如果想跳出循环只能throw一个异常。例如：

复制const arr = ['Vue', 'React', 'Angular'];

try {
    arr.forEach((item) => {
        console.log(item);
        if (item === 'React') {
            throw new Error
        }
    })
} catch {
    console.log('跳出循环')
}

// 打印
// Vue
// React
// 跳出循环
js

接下来是js中Array对象方法

5、map函数

通过指定函数处理数组的每个元素，并返回处理后的数组(不改变原数组)。

复制const arr = ['Vue', 'React', 'Angular'];

const newArr = arr.map(item => {
  return 'new' + item
})

console.log(newArr)

// 打印
// (3) ["newVue", "newReact", "newAngular"]
js

6、filter函数

检测数值元素，并返回符合条件所有元素的数组。

复制const arr = ['Vue', 'React', 'Angular'];

const newArr = arr.filter(item => {
  return item.length > 3
})

console.log(newArr)

// 打印
// (2) ["React", "Angular"]
js

还有两个判断符合条件的函数

7、some函数

检测数组元素中是否有元素符合指定条件，返回Boolean值。

复制const arr = ['Vue', 'React', 'Angular'];

const result = arr.some(item => {
  return item.length > 3
})

console.log(result)

// 打印
// true
js

8、every函数

检测数值元素的每个元素是否都符合条件，返回Boolean值。

复制const arr = ['Vue', 'React', 'Angular'];

const result = arr.every(item => {
  return item.length > 3
})

console.log(result)

// 打印
// false
js

推荐阅读

1、Vue生命周期 2、整理一下弹性布局知识点 3、推荐一下前端开发时npm源管理工具 4、强力推荐的idea插件，开发效率提升99% 5、初始TypeScript

关注公众号

关注贴吧：pei你看雪吧