JavaScript数组方法终极指南-地图

The map() method applies a function to each element in an array and returns a copy of the original array with modified values (if any).

map()方法对数组中的每个元素应用一个函数，并返回具有修改后的值(如果有)的原始数组的副本。

句法： (Syntax:)

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});

• newArr - the new array that is returned

  newArr返回的新数组

• oldArr - the old array being operated on. This array will not be changed

  oldArr正在操作的旧数组。 该数组将不会更改

• currentValue - the current value being processed

  currentValue正在处理的当前值

• index - the current index of the value being processed

  index正在处理的值的当前索引

• array - the original array

  array原始数组

例子： (Examples:)

ES5 (ES5)

var arr = [1, 2, 3, 4];

var newArray = arr.map(function(element) {
  return element * 2
});

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]

ES6 (ES6)

const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]

map与forEach (map vs forEach)

On the surface, the map() and forEach() methods are very similar. Both methods iterate through an array and apply a function to each element. The main difference is that map() returns a new array, while forEach() doesn't return anything.

从表面上看， map()和forEach()方法非常相似。 两种方法都遍历数组并将函数应用于每个元素。 主要区别在于map()返回一个新数组，而forEach()不返回任何内容。

So which method should you use? Generally, it's better to use forEach() if you don't need to change the values in the original array. forEach() is a good choice if all you need to do is log each element of an array to the console, or save them to a database:

那么您应该使用哪种方法？ 通常，如果不需要更改原始数组中的值，最好使用forEach() 。 如果您需要做的只是将数组的每个元素记录到控制台或将它们保存到数据库中，那么forEach()是一个不错的选择：

const letters = ['a', 'b', 'c', 'd'];

letters.forEach(letter => {
  console.log(letter);
});

map() is a better choice if you need to update the values in the original array. It's especially useful if you want to store the updated array as a variable and keep the original as a reference.

如果需要更新原始数组中的值，则map()是更好的选择。 如果要将更新后的数组存储为变量并将原始数组保留为引用，则此功能特别有用。

如何与其他数组方法一起使用map (How to Use map with Other Array Methods)

Since map() returns an array, you can use it with other array methods to make your code much more succinct and readable.

由于map()返回一个数组，因此您可以将其与其他数组方法一起使用，以使您的代码更简洁明了。

将map与filter (Using map with filter)

One thing to remember while using map() is that it applies a function to every element of the original array, and returns a new array the same length as the old one. In other words, it's not possible to skip over elements of the array that you don't want to modify:

使用map()要记住的一件事是，它将函数应用于原始数组的每个元素，并返回与旧数组长度相同的新数组。 换句话说，不可能跳过您不想修改的数组元素：

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.map(num => {
  if (num > 10) {
    return num * 2;
  }
});

console.log(doublesOverTen); // [undefined, undefined, 30, 40]

That's where the filter() method comes in. filter() returns a new array of filtered elements that meet a certain condition, which you can then chain map() to:

这就是filter()方法的用处filter()返回一个满足特定条件的过滤元素的新数组，然后可以将map()到：

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => {
  return num > 10;
}).map(num => {
  return num * 2;
});

console.log(doublesOverTen); // [30, 40]

This code can be simplified even further:

该代码可以进一步简化：

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2);

console.log(doublesOverTen); // [30, 40]

reverse使用map (Using map with reverse)

There may be times when you need to reverse an array while mapping through it. The reverse() method makes this easy, but it's important to remember that, while map() is immutable, reverse() isn't. In other words, the reverse() method will change the original array:

有时候，您在映射数组时需要反转数组。 reverse()方法使此操作变得容易，但是要记住，虽然map()是不可变的，但是reverse()却并非如此。 换句话说， reverse()方法将更改原始数组：

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.reverse().map(num => num * 2);

console.log(nums); // [5, 4, 3, 2, 1]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

One of the main advantages of map() is that it doesn't alter the original array, and using reverse() like this defeats the purpose. However, this is a simple fix – just remember to use map() first, then reverse() the new array it returns:

map()的主要优点之一是它不会更改原始数组，并且像这样使用reverse()达到目的。 但是，这是一个简单的修复方法–只需记住先使用map() ，然后reverse()使用它返回的新数组：

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.map(num => num * 2).reverse();

console.log(nums); // [1, 2, 3, 4, 5]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

在对象上使用map (Using map on an Object)

While map() is meant for operating on arrays, with just a little extra work you can also iterate through objects. Object.keys(), Object.values(), and Object.entries() all return an array, meaning that map() can easily be chained to each method:

虽然map()用于在数组上进行操作，但只需做一些额外的工作，您就可以遍历对象。 Object.keys() ， Object.values()和Object.entries()都返回一个数组，这意味着map()可以轻松地链接到每个方法：

const obj = { 
  a: 1, 
  b: 2, 
  c: 3 
}
const doubles = Object.values(obj).map(num => num * 2);

console.log(doubles); // [2, 4, 6]

Now go forth and map() all the things!

现在， map()所有内容都map() ！

翻译自: https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-array-methods-map/