数组与对象遍历

数组与对象的遍历语法的比较

for of 与for in对比

遍历数组

  const arr = [1, 2, 3, 4];
  for (let k in arr) {
    console.log(k);  // 0 1 2 3
 }

       const arr = [1, 2, 3, 4];
      for (let k of arr) {
        console.log(k); // 1 2 3 4
      }

for in 遍历的是索引，for of 遍历的是数组元素

但是for in不仅可以遍历数组的键，他还会遍历原型链上的键，所以如果遍历数组我们不使用for in

遍历对象

      const obj = { name: "luka", age: 20, sex: "male" };
      for (let k in obj) {
        console.log(k);  // name age sex
      }

      const obj = { name: "luka", age: 20, sex: "male" };
      for (let k of obj) {
        console.log(k);   // 报错
      }

for in遍历的是键名k，通过obj[k]就能拿到键值了

而for of不能遍历对象，他只能遍历iterator（可迭代）的类型，对象不可迭代，所以会报错

那么具有Symbol.iteratoer的数据类型有：数组、Set、 Map、字符串、类数组对象（arguments、DOM NodeList对象）

结论：遍历对象用for in;遍历数组就用其他的；for in 遍历的是索引（键名），for of 遍历的是数组元素（键值）

for of 与forEach对比

同：都可用来遍历数组

异：forEach无法使用continue、break和return中途跳出循环

      testArr.forEach((item, index) => {
        console.log(item); // 1 2 12 5 7
        if (item > 2) {
          return;
           // break;
        }
        console.log(item); // 1 2
      });

for in可以和return 、break结合使用，中途跳出循环

1. break或continue跳出循环
      const testArr = [1, 2, 12, 5, 7];
      for (let k of testArr) {
        console.log(k); // 1 2 12
        if (k > 2) {
          break;
        }
        console.log(k); // 1 2
      }

2. return 跳出循环
      const testArr = [1, 2, 12, 5, 7];
      function test() {
        for (let k of testArr) {
          console.log(k); // 1 2 12
          if (k > 2) {
            return;
          }
          console.log(k); // 1 2
        }
      }
      test();

forEach使用return break直接跳出循环是不行的，那么如果我们想要跳出该怎么办呢？

可以通过抛出错误，结合try ··· catch ···

      try {
        const testArr = [1, 2, 12, 5, 7];
        testArr.forEach((item) => {
          console.log(item); // 1 2 12
          if (item > 2) {
            throw new Error();
          }
          console.log(item); // 1 2
        });
      } catch (err) {
        // console.log(err);
      }

结论：如果是遍历数组，特别是需要使用索引，使用forEach更方便；其他数据类型Set 、Map、字符串、类数组对象（arguments、DOM NodeList对象）当然使用 for …… of 了