关于javascript:JavaScript中的map和forEach有什么区别

起源：https://medium.com/better-programming，作者：Moon，翻译：公众号《前端全栈开发者》

JavaScript 中一些最受欢迎的性能可能是 map 和 forEach。从 ECMAScript 5（简称 es5）开始，它们就开始存在了。

在本文中，我将探讨它们之间的次要区别，并向你展现其用法的一些示例。

浏览之前

基本上，在 JavaScript 中遍历对象取决于对象是否可迭代。默认状况下，数组是可迭代的。map 和 forEach 蕴含在 Array.prototype 中，因而咱们无需思考可迭代性。如果你想进一步学习，我举荐你看看什么是 JavaScript 中的可迭代对象！

什么是 map() 和 forEach()？

map 和 forEach 是数组中的帮忙器办法，能够轻松地在数组上循环。咱们已经像上面这样循环遍历一个数组，没有任何辅助函数。

var array = ['1', '2', '3'];
for (var i = 0; i < array.length; i += 1) {console.log(Number(array[i]));
}
// 1
// 2
// 3

自 JavaScript 时代开始以来，就始终存在 for 循环。它蕴含 3 个表达式：初始值，条件和最终表达式。

这是循环数组的经典办法。从 ECMAScript 5 开始，新性能仿佛使咱们更加高兴。

map

map 的作用与 for 循环完全相同，只是 map 会创立一个新数组，其后果是在调用数组中的每个元素上调用提供的函数。

它须要两个参数：一个是稍后在调用 map 或 forEach 时调用的回调函数，另一个是回调函数被调用时应用的名为 thisArg 的上下文变量。

const arr = ['1', '2', '3'];
// 回调函数承受 3 个参数
// 数组的以后值作为第一个参数
// 以后值在数组中的地位作为第二个参数
// 原始源数组作为第三个参数
const cb = (str, i, origin) => {console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.map(cb);
// 0: 1 / 1,2,3
// 1: 2 / 1,2,3
// 2: 3 / 1,2,3

回调函数能够如下应用。

arr.map((str) => {console.log(Number(str)); })

map 的后果不等于原始数组。

const arr = [1];
const new_arr = arr.map(d => d);

arr === new_arr; // false

你还能够将对象作为 thisArg 传递到 map。

const obj = {name: 'Jane'};

[1].map(function() {// { name: 'Jane'}
  console.dir(this);
}, obj);

[1].map(() => {
  // window
  console.dir(this);
}, obj);

对象 obj 成为 map 的 thisArg。然而箭头回调函数无奈将 obj 作为其 thisArg。

这是因为箭头函数与失常函数不同。

forEach

forEach 是数组的另一个循环函数，但 map 和 forEach 在应用中有所不同。map 和 forEach 能够应用两个参数——回调函数和 thisArg，它们用作其 this。

const arr = ['1', '2', '3'];
// 回调函数承受 3 个参数
// 数组的以后值作为第一个参数
// 以后值在数组中的地位作为第二个参数
// 原始源数组作为第三个参数
const cb = (str, i, origin) => {console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.forEach(cb);
// 0: 1 / 1,2,3
// 1: 2 / 1,2,3
// 2: 3 / 1,2,3

那有什么不同？

map 返回其原始数组的新数组，然而 forEach 却没有。然而它们都确保了原始对象的不变性。

[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;

如果更改数组内的值，forEach 不能确保数组的不变性。这个办法只有在你不接触外面的任何值时，能力保障不变性。

[{a: 1, b: 2}, {a: 10, b: 20}].forEach((obj) => obj.a += 1);
// [{a: 2, b: 2}, {a: 11, b: 21}]
// 数组已更改！

何时应用 map() 和 forEach()？

因为它们之间的次要区别在于是否有返回值，所以你会心愿应用 map 来制作一个新的数组，而应用 forEach 只是为了映射到数组上。

这是一个简略的例子。

const people = [{ name: 'Josh', whatCanDo: 'painting'},
  {name: 'Lay', whatCanDo: 'security'},
  {name: 'Ralph', whatCanDo: 'cleaning'}
];

function makeWorkers(people) {return people.map((person) => {const { name, whatCanDo} = person;
    return <li key={name}>My name is {name}, I can do {whatCanDo}</li>
  });
}

<ul>makeWorkers(people)</ul>

比方在 React 中，map 是十分罕用的制作元素的办法，因为 map 在对原数组的数据进行操作后，会创立并返回一个新的数组。

const mySubjectId = ['154', '773', '245'];

function countSubjects(subjects) {
  let cnt = 0;
  
  subjects.forEach(subject => {if (mySubjectId.includes(subject.id)) {cnt += 1;}
  });
  
  return cnt;
}

countSubjects([{ id: '223', teacher: 'Mark'},
  {id: '154', teacher: 'Linda'}
]);
// 1

另一方面，当你想对数据进行某些操作而不创立新数组时，forEach 很有用。顺便说一句，能够应用 filter 重构示例。

subjects.filter(subject => mySubjectId.includes(subject.id)).length;

综上所述，我倡议你在创立一个新的数组时应用 map，当你不须要制作一个新的数组，而是要对数据做一些事件时，就应用 forEach。

速度比拟

有些帖子提到 map 比 forEach 快。所以，我很好奇这是不是真的。我找到了这个比照后果。

该代码看起来十分类似，但后果却相同。有些测试说 forEach 更快，有些说 map 更快。兴许你在通知本人 map/forEach 比其余的快，你可能是对的。诚实说，我不确定。我认为在古代 Web 开发中，可读性比 map 和 forEach 之间的速度重要得多。

但能够必定的是——两者都比 JavaScript 内置的 for 循环慢。