JS数组的遍历方式for循环与for…in

JS数组是常用的数据类型之一，数组中存放着一系列的元素，我们通过数组索引来访问这些元素。JS数组的遍历方式有许多，其中包括for循环和for...in两种方式。

for循环

for循环是JS中最常用的循环语句，用于对数组的元素进行遍历操作。for循环的语法格式如下：

for (let i = 0; i < arr.length; i++) {
  // do something with arr[i]
}

其中，i是一个计数器，初始化为0，每次循环递增1，当i的值等于数组arr的长度时，循环结束。在循环中，我们可以通过数组索引i来访问数组元素arr[i]。以下是一个示例，演示了如何使用for循环来遍历数组：

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

以上代码将输出数组arr中的所有元素。

for...in

for...in循环用于遍历对象中的属性，但也可以用来遍历数组中的元素。for...in循环的语法格式如下：

for (let index in arr) {
  // do something with arr[index]
}

其中，index是一个字符串类型的索引值，表示数组的下标，arr[index]表示数组中对应下标的元素。以下是一个示例，演示了如何使用for...in循环来遍历数组：

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

以上代码将输出数组arr中的所有元素。

但需要注意的是，for...in循环不仅会遍历数组中的元素，还会遍历数组中的所有属性，包括原型对象上的属性。因此，在使用for...in循环遍历数组时，需要使用hasOwnProperty方法判断属性是否为对象自身的属性，以避免出现错误的遍历结果。以下是一个示例：

const arr = [1, 2, 3, 4, 5];
arr.foo = 'bar';

for (let index in arr) {
  if (arr.hasOwnProperty(index)) { // 判断是否为自身属性
    console.log(arr[index]);
  }
}

以上示例中，我们在数组arr中添加了一个名为foo的属性，属性值为字符串'bar'。在遍历数组时，我们使用hasOwnProperty方法判断数组的属性是否为自身属性，输出结果中将不包含名为foo的属性值'bar'。