JS常用的循环遍历

鲸腾FE，来自鲸腾网络。是一支专注于 web 前端的开发团队，并在 web 前端领域积累了多年疑难问题解决经验。崇尚高效、优质、成长、自由、快乐。

数组和对象作为一个最基础数据结构，在各种编程语言中都充当着至关重要的角色，特别是 JS，弱类型语言，非常灵活。这里介绍一些常用数组遍历、对象遍历的使用，对比以及注意事项。

数组遍历

随着 JS 的不断发展，截至 ES7 规范已经有十多种遍历方法。下面按照功能类似的方法为一组，来介绍数组的常用遍历方法。

1，for、forEach、for …of

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0; i < list.length; i++) {
   
  if (list[i] === 5) {
   
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(list[i]);
}

for (const item of list) {
   
  if (item === 5) {
   
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(item);
}

list.forEach((item, index, arr) => {
   
  if (item === 5) return;
  console.log(index); // 0 1 2 3 5 6 7 9 10
  console.log(item); // 1 2 3 4 6 7 8 9 10
});

• 三者都是基本的由左到右遍历数组。
• forEach 无法跳出循环，for 和 for …of 可以使用 break 或者 continue 跳过或中断。
• for …of 直接访问的是实际元素，for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取。
• for …of 与 for 如果数组中存在空元素，同样会执行。

2，some、every

const list = [
  {
    name: '头部导航', backward: false },
  {
    name: '轮播', backward: true },
  {
    name: '页脚', backward: false },
];
const someBackward = list.some(item => item.backward);
// someBackward: true
const everyNewest = list.every(item => !item.backward);
// everyNewest: false

• 二者都是用来做数组条件判断的，都是返回一个布尔值。
• 二者都可以被中断。
• some 若某一元素满足条件，返回 true，循环中断。所有元素不满足条件，返回 false。
• every 与 some 相反，若有一元素不满足条件，返回 false，循环中断。所有元素满足条件，返回 true。

3，filter、map

const list = [
{
    name: '头部导航', type: 'nav', id: 1 },,
{
    name: '轮播', type: 'content', id: 2 },
{
    name: '页脚', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
   
  console.log(item);
  return item.type =&