迭代数组

到 ES6 为止，遍历一个数组（或如何可迭代对象）的最简单方式就是使用 for/of 循环。

for/of 循环

使用for/of 重新组装了原始文本

let letters = [...'Hello world']
let string = ''
for (let letter of letters) {
  string += letter
}
console.log(string)

for/of 循环，使用 entries 可以得到数组索引

使用for/of循环，如果想知道数组的索引，可以使用entries

let everyother = ''
for (let [index, letter] of letters.entries()) {
  console.log('index:', index)
  console.log('letter:', letter)
  if (index % 2 === 0) {
    everyother += letter
  }
}
console.log(everyother) // => Hlowrd

使用 forEach()迭代数组

• 给 forEach()传一个函数，然后 forEach()会用数组的每个元素调用一次这个函数。
• 与 for/of 循环不同，forEach()能够感知稀疏数组，不会对没有的元素数组调用函数。

forEach()循环

let uppercase = ''
letters.forEach((letter) => {
  uppercase += letter.toUpperCase()
})
console.log(uppercase) // => "HELLO WORLD"

map() 方法迭代数组 （从新组装）

Array.prototype.map() 是 JavaScript 中的一个高阶数组方法，它允许你创建一个新数组，该新数组中的每个元素都是对原始数组中相应元素执行某个提供的函数的结果。这个方法不会改变原数组，而是返回一个新的数组。

语法：

arr.map(callback(currentValue[, index[, array]])[, thisArg])

• callback: 必需参数，是一个回调函数，对于数组中的每个元素都会调用一次。回调函数接收三个参数：

  • currentValue: 当前正在处理的数组元素的值。
  • index: 可选参数，当前元素在原数组中的索引位置。
  • array: 可选参数，当前正在操作的数组本身。

• thisArg: 可选参数，如果提供了此参数，回调函数内部的 this 将指向它。

回调函数返回值： 回调函数会为每个元素计算一个新值，这些新值会被收集到新的数组中。

示例：

let numbers = [1, 2, 3, 4, 5]
let squaredNumbers = numbers.map(function (num) {
  return num * num
})

console.log(squaredNumbers) // 输出: [1, 4, 9, 16, 25]

在这个例子中，map() 方法遍历 numbers 数组，对每个元素执行乘以自身的操作，并将结果放入新数组 squaredNumbers 中。

另一个使用箭头函数的例子：

let names = ['Alice', 'Bob', 'Charlie']
let capitalizedNames = names.map(
  (name, index) =>
    `${index + 1}. ${name.charAt(0).toUpperCase()}${name.slice(1)}`
)

console.log(capitalizedNames)
// 输出: ["1. Alice", "2. Bob", "3. Charlie"]

在这个示例中，map() 方法用于将数组中的每个名字首字母大写，并在其前面添加索引号和点号后形成新的字符串数组。

filter() 方法迭代数组（过滤内容）

Array.prototype.filter() 是 JavaScript 中的数组方法，它创建一个新数组，其中包含通过提供的回调函数测试的所有元素。这个方法会遍历原数组中的每个元素，并对每个元素执行给定的回调函数，只有当回调函数返回 true 时，该元素才会被包含在新生成的数组中。

语法：

arr.filter(callback(element[, index[, array]])[, thisArg])

• callback: 必需参数，是一个回调函数，用于测试数组的每个元素是否满足条件。此函数接受三个参数：

  • element: 当前正在处理的数组元素。
  • index: 可选参数，当前元素在原数组中的索引位置。
  • array: 可选参数，当前正在操作的数组本身。

• thisArg: 可选参数，如果提供了此参数，回调函数内部的 this 将指向它。

回调函数返回值： 回调函数应返回一个布尔值。如果返回 true，则当前元素会被包含在新的过滤后的数组中；如果返回 false 或者任何可转化为 false 的值，则该元素不会被包含在新数组中。

示例：

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0
})

console.log(evenNumbers) // 输出: [2, 4, 6, 8]

在这个例子中，filter() 方法遍历 numbers 数组，对于数组中的每个数字，如果该数字除以 2 的余数为 0（即为偶数），则将该数字包含到新数组 evenNumbers 中。

另一个使用箭头函数的例子：

let users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true },
]

let activeUsers = users.filter((user) => user.active)

console.log(activeUsers)
// 输出: [{ id: 1, name: 'Alice', active: true }, { id: 3, name: 'Charlie', active: true }]

在这个示例中，filter() 方法用来筛选出用户列表中所有活跃状态 (active 属性为 true) 的用户对象，并将这些对象放入新数组 activeUsers 中。

for 循环的两种比较推荐形式

// 把数组长度保存到局部变量中
for (let i = 0, len = letters.length; i < len; i++) {
  // 循环体不变
}
// 从后向前迭代数组
for (let i = letters.length - 1; i >= 0; i--) {
  // 循环体不变
}

跳过未定义或不存在的元素

for (let i = 0; i < a.length; i++) {
  if (a[i] === undefined) continue // 跳过未定义及不存在的元素
}