JS中的4种for循环

桃扇骨 2022-03-01 12:36 225阅读 0赞

## 分类 ##

*  普通`for`循环  
    自行指定循环次数。

for (i = 0; i < loopTimes; i++) {
      console.log(i);
    }

*  `for..in`循环  
    属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。  
    但有一个缺点：如果手动向数组添加成员属性，则：  
    虽然数组的length不变，但用`for..in`遍历数组会遍历到那些新定义的属性。

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

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

for (element of iterable) {
      console.log(element);
    }

*  `forEach(callbackFn, ?thisArg)`方法(`ES5.1`)  
    `iterable`可被迭代的对象都有`forEach(callbackFn, ?thisArg)`。  
    而`Array, Map, Set`对象都是可被迭代的。  
    `forEach()`接收一个回调函数`callbackFn`，每次迭代都回调该函数。  
    回调函数的参数列表为`(value, key, iterable)`，依次是`(值, 键, 可迭代的对象本身)`。

iterable.forEach(function(value, key, iterable) {
      console.log(key, value, iterable);
    });

## sum ##

*  `iterable`可被迭代的对象类型有`Array, Map, Set`。
 *  普通`for`循环可用于`遍历数组`。
 *  `for..in`可遍历`Array, Object`对象，且`会遍历到新添加的成员属性`。
 *  `for..in`可遍历`iterable`可被迭代的对象(`不包括Object`)。且`只遍历属于对象本身的属性`。
 *  `iterable`可被迭代的对象有成员方法`forEach()`，也`只遍历属于对象本身的属性`。

## code ##

arr = [1,2,3,4];
    (4) [1, 2, 3, 4]
    // 1. 普通for循环
    for (i = 0; i < arr.length; i++) {
      console.log(i, arr[i]);
    }
    0 1
    1 2
    2 3
    3 4
    undefined
    // 2. for..in，遍历对象的属性(数组下标也算)。
    for (property in arr) {
      console.log(property, arr[property]);
    }
    0 1
    1 2
    2 3
    3 4
    undefined
    // 但是，如果向数组手动添加成员属性，则for..in也会遍历到这些新的属性。
    console.log(arr.length, arr);
    arr.name = "JT";
    arr.age = 22;
    console.log(arr.length, arr);
    4 (4) [1, 2, 3, 4]
    4 (4) [1, 2, 3, 4, name: "JT", age: 22]
    undefined
    // 再次用for..in遍历数组。会发现新定义的成员属性也被遍历。
    for (property in arr) {
      console.log(property, arr[property]);
    }
    0 1
    1 2
    2 3
    3 4
    name JT
    age 22
    undefined
    // 3. 用for..of遍历数组对象。只会遍历属于数组本身的值。
    for (element of arr) {
      console.log(element);
    }
    1
    2
    3
    4
    undefined
    // 4. 用`iterable.forEach(callbackFn, ?thisArg)`遍历。
    arr.forEach(function(value, key, arr) {
      console.log(key, value, arr);
    });
    0 1 (4) [1, 2, 3, 4, name: "JT", age: 22]
    1 2 (4) [1, 2, 3, 4, name: "JT", age: 22]
    2 3 (4) [1, 2, 3, 4, name: "JT", age: 22]
    3 4 (4) [1, 2, 3, 4, name: "JT", age: 22]

![JS中农的4种for循环][JS_4_for]

[JS_4_for]: /images/20220301/484ea6a21a2449d9bbef72cc4ea60a82.png