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 要多。

最后

以上就是淡然康乃馨为你收集整理的for, forEach和map的区别的全部内容，希望文章能够帮你解决for, forEach和map的区别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。