关于程序员:for-forEach和map的区别

在开发过程中，常常须要对数组进行遍历。咱们能够应用 for, forEach 和 map 来实现对数组的遍历，他们各自有什么特点？让咱们来一探到底。

for

根本应用 （以for..of为例）

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

个性

1.能够应用 break 提前终止遍历。

const arr = [1, 2, 3]
for (let item of arr) {
    if (item > 1) {
        break
    }
    console.log(item)
}
// 1

2.能够应用 continue 来跳过以后的循环。

const arr = [1, 2, 3]
for (let item of arr) {
    if (item === 2) {
        continue
    }
    console.log(item)
}
// 1
// 3

forEach

根本应用

const arr = [1, 2, 3]
arr.forEach((item) => {
    console.log(item)
})
// 1
// 2
// 3

个性

1.不能通过 continue 跳过循环，想跳过循环须要应用 return。

const arr = [1, 2, 3];
arr.forEach((item) => {
  if (item === 2) {
    return;
  }
  console.log(item);
});

2.forEach 没有返回值，返回值为 undefined。

const arr = [1, 2, 3];
let res = arr.forEach((item) => {
  console.log(item);
  return item
});
console.log(res) // undefined
// 1
// 2
// 3

map

根本应用

const arr = [1, 2, 3];
arr.map((item) => {
  console.log(item)
});
// 1
// 2
// 3

个性

1.遍历数组不扭转数组自身。

const arr = [1, 2, 3];
arr.map((item) => {
  // 将每个元素的值减少 1
  item = item + 1
});
console.log(arr) // [1, 2, 3]

2.有返回值，返回一个新的数组。

const arr = [1, 2, 3];
let res = arr.map((item) => {
  return item
});
console.log(res) // [1, 2, 3]

3.如需返回元素，必须通过 return，否则返回的元素为 undefined

const arr = [1, 2, 3];
let res = arr.map((item) => {
  // 当元素大于 1 时，返回该元素
  if(item > 1) {
    return item
  }
});
console.log(res) // [undefined, 2, 3]

在以上的例子中，在 item 值为1时，没有 return 值，所以 map 返回数组的映射（对应）的值为 undefined。

for, forEach 和 map 的区别

1. 停止循环。for 通过 break 关键字来停止循环，forEach 和 map 不能够。
2. 跳过此次循环。for 通过 continue 来跳过，forEach 通过 return 跳过，map 不能跳过。
3. 返回值。map 返回一个数组，在 map 的回调函数中，不应用 return 返回值的话，会返回 undeifned。for 和 forEach 没有返回值。
4. 扭转原数组。map 不扭转原数组，for 和 forEach 能够扭转原数组。
5. 代码量。for 的代码量比 forEach 和 map 要多。

本文由mdnice多平台公布