JS for...in 与 for...of （下）

for...of 循环

    for...of 循环用于遍历数组和对象中的元素。它的语法如下：

    ```
    for (const element of array) {
      // 循环体
    }
    ```

    其中，element 是数组或对象中的一个元素。循环体是当 element 取遍数组或对象中的所有元素时要执行的代码块。

    举个例子，我们有一个数组 `numbers`，其中包含了 1、2、3、4、5 这五个数字。我们可以使用 for...of 循环来遍历这个数组，并打印出每个数字：

    ```
    const numbers = [1, 2, 3, 4, 5];

    for (const number of numbers) {
      console.log(number);
    }
    ```

    输出结果为：

    ```
    1
    2
    3
    4
    5
    ```

    我们也可以使用 for...of 循环来遍历对象中的属性。例如，我们有一个对象 `person`，其中包含了 `name`、`age` 和 `city` 三个属性。我们可以使用 for...of 循环来遍历这个对象，并打印出每个属性的名称和值：

    ```
    const person = {
      name: 'John',
      age: 30,
      city: 'New York'
    };

    for (const property of Object.keys(person)) {
      console.log(`${property}: ${person[property]}`);
    }
    ```

    输出结果为：

    ```
    name: John
    age: 30
    city: New York
    ```

    ## for...in 循环

    for...in 循环用于遍历对象的属性。它的语法如下：

    ```
    for (const property in object) {
      // 循环体
    }
    ```

    其中，property 是对象中的一个属性。循环体是当 property 取遍对象中的所有属性时要执行的代码块。

    举个例子，我们有一个对象 `person`，其中包含了 `name`、`age` 和 `city` 三个属性。我们可以使用 for...in 循环来遍历这个对象，并打印出每个属性的名称和值：

    ```
    const person = {
      name: 'John',
      age: 30,
      city: 'New York'
    };

    for (const property in person) {
      console.log(`${property}: ${person[property]}`);
    }
    ```

    输出结果为：

    ```
    name: John
    age: 30
    city: New York
    ```

    ## for...of 和 for...in 的区别

    for...of 循环用于遍历数组和对象中的元素，而 for...in 循环用于遍历对象的属性。

    for...of 循环的循环变量是数组或对象中的元素，而 for...in 循环的循环变量是对象的属性名。

    for...of 循环不会遍历对象的原型链，而 for...in 循环会遍历对象的原型链。

    ## 总结

    for...of 循环和 for...in 循环都是 JavaScript 中常用的循环语句。它们都有自己的特点和适用场景。我们可以根据不同的情况选择合适的循环语句来遍历数组和对象。