JavaScript Arrays: Map

Map function: one-to-one data conversion

Sometimes it is necessary to modify the data to return a part of it or perform a consistent operation, this is the mapping.

方法	返回值	一对一	对所有元素运行
.map((value, index, array) => *)	数组	是	是

Whenever you need to generate an output for each input, map is usually the preferred method. It accepts a Map function that operates on each record. The value returned by the mapping function will appear in the new array at the same position as the original value.

From for loop to .map()

.map() works perfectly with a basic for loop.

For example, all elements in the following array need to be converted to uppercase letters:

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

The following are several implementation methods:

// 旧的命令式方法 - for 循环
function mapToUpper(data) {
  const newData = new Array(data.length);

  for (let i = 0; i < data.length; i++) {
    newData[i] = data[i].toUpperCase();
  }

  return newData;
}


// 新的命令式方法 - for...of 循环
function mapToUpper(data) {
  const newData = [];

  for (let value of data) {
    newData.push(value.toUpperCase());
  }

  return newData;
}


// 新的声明式方法 - .map()
const mapToUpper = (data) => data.map(value => value.toUpperCase());

Some variations, such as `const newData = new Array(data.length)` versus `const newData = []`, are not mandated by different loop types, but rather represent some historical coding style differences.

Use Cases

Data conversion

Common uses of `.map()` include getting values ​​from objects or performing consistent changes or *transformations* to data.

Often you need to get one piece of information from each larger record. `map` is designed for exactly this.

const data = [{
  name: 'Alec Berg',
  roles: ['Creator', 'Executive Producer'],
}, {
  name: 'Bill Hader',
  roles: ['Creator', 'Executive Producer', 'Actor', 'Director'],
}];

// 只需要姓名
data.map((entry) => entry.name);
// [ 'Alec Berg', 'Bill Hader' ]

If you need to provide employee discounts on your orders, `map` can do that too!

const cart = [{
  itemId: 12345,
  name: 'shoes',
  price: 70.00,
},{
  itemId: 54321,
  name: 'shirt',
  price: 15.25,
}];

// 应用折扣
const applyDiscount = (discountPercent, order) => {
  // 首先，获取“剩余”金额。
  // 如果折扣为 10%，则乘数为 0.9
  const multiplier = 1 - (discountPercent / 100);
  // 为每个项目创建一个新条目，其中包含折扣后的价格。
  // 我们将包含旧价格以供参考。
  return order.map((item) => ({
    ...item,
    price: item.price * multiplier,
    originalPrice: item.price,
  }));
};

No output is given here. If you want to try it yourself, I recommend pasting it into a browser console or a tool like RunJS, which I use to write and test these examples.

Increment

This is a special version of data conversion. Start with "no information", but the act of having an array gives each entry an index, and you can convert the index (zero-based) into a counting number by adding 1.

It is not necessary to use `value` (the first argument supplied to the *map* function), but it must be given a name to access the second argument. The underscore character is a valid variable name and is often used to represent unwanted values, as in this example.

const getCountingNumbers = (upTo) => new Array(upTo)
  // 新数组是“稀疏的”，需要值才能映射
  .fill('')
  // 第二个参数是数组索引。
  .map((_, index) => index + 1);

getCountingNumbers(5);
// [ 1, 2, 3, 4, 5 ]

While this is an example of `.map()`, a newer function can also do this: `Array.from()`.

const getCountingNumbers = (upTo) => Array.from(
  // 通过提供具有长度的对象来“伪造”类似数组的对象
  { length: upTo },
  // 使用与 .map() 相同的映射函数。
  (_, index) => index + 1
);

It may seem strange to discuss another method when using `.map()`, but behind the scenes, `Array.from()` will call `.map()` at least for the example above.

Summary

Hope this helps you understand how to use `.map()`. Data transformation is at the core of many tools and industries, so `.map()` is a critical part of many projects.

If you have any questions or comments about `.map()`, I'd be happy to discuss!

The above is the detailed content of JavaScript Arrays: Map. For more information, please follow other related articles on the PHP Chinese website!