你应该了解的JavaScript Array.map()五种用途小结

JavaScript Array.map() 是 Array.prototype 的一个函数，它使用一个传入函数来将数组的每个元素转换成另一个元素，最后返回一个新的数组。

在本篇攻略中，将会介绍五种常用的 JavaScript Array.map() 的用途，以及示例代码。

1. 数组的转换

在很多情况下，我们需要将一个数组中的元素转换成另一个类型，例如字符串数组转换成数字数组或者对象数组转换成纯字符串数组。使用 Array.map() 函数可以非常轻松地实现这个过程。

const stringArr = ['1', '2', '3'];
const numberArr = stringArr.map(Number);
console.log(numberArr); // [1, 2, 3]

在这个例子中，我们首先定义了一个包含三个字符串类型元素的数组 stringArr，然后我们使用 Array.map() 将每个元素转换成数字，最后返回值为包含三个数字类型元素的数组 numberArr。

2. 对象数组转换成其他对象数组

在前端开发中，我们需要经常将一个对象数组转换成另一个对象数组，例如从服务器请求数据后需要将返回的对象数组中的元素转换成一个更适合用户界面的对象数组。通过 Array.map() 函数，我们可以非常方便地将一个对象数组中的元素转换成另一个对象数组中的元素。

const objArr = [
  { name: 'John', age: 25 },
  { name: 'Mary', age: 30 },
  { name: 'Peter', age: 35 }
];

const nameArr = objArr.map(obj => ({ name: obj.name }));
console.log(nameArr); // [{ name: 'John' }, { name: 'Mary' }, { name: 'Peter' }]

这个例子中，我们定义了一个包含三个对象元素的数组 objArr，每个对象中有两个属性 name 和 age。我们使用 Array.map() 函数将每个对象元素转换成只包含 name 属性的对象元素，最后输出结果为只包含 name 属性的对象数组 nameArr。

3. 在一个对象数组中查找属性

如果我们想从一个包含多个对象的对象数组中查找一个特定属性的值，就可以使用 Array.map() 函数进行实现。

const userData = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Mary' },
  { id: 3, name: 'Peter' }
];

const searchUser = userData.map(user => user.id === 2 ? user.name : null);
console.log(searchUser); // [null, 'Mary', null]

这个例子中，我们定义了一个包含三个对象元素的数组 userData，每个对象中有两个属性 id 和 name。现在我们想从 userData 数组中查找 id 为 2 的元素，并返回这个对象中的 name 字符串属性。

我们使用 Array.map() 函数对数组进行遍历，判断每一个元素是否符合我们的查找条件，如果符合，则返回这个元素中的 name 属性。如果不符合，返回 null。最后输出一个新的数组 searchUser，数组中包含的值只有 Mary，而其他的为空。

4. 对象数组元素过滤

在某些情况下，我们需要将一个对象数组中不符合条件的元素过滤掉，使用 Array.filter() 函数往往是一个更好的选择。但如果我们想保留原有数组的数据结构，即返回一个数组中的部分元素，我们可以使用 Array.map() 函数。

const userData = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Mary', age: 30 },
  { id: 3, name: 'Peter', age: 35 }
];

const ageArr = userData.map(user => {
  if (user.age >= 30) {
    return { name: user.name, age: user.age };
  } else {
    return null;
  }
});

console.log(ageArr); // [null, { name: 'Mary', age: 30 }, { name: 'Peter', age: 35 }]

这个例子中，我们希望从 userData 数组中选出年龄大于等于 30 岁的用户信息。我们使用了 Array.map() 函数对 userData 数组进行遍历，对于每一个符合条件的对象，我们将其转换成只包含 name 和 age 属性的对象。

最后再用一个新数组 ageArr 存储年龄大于等于 30 岁的用户信息，并保持和原有数组结构一致。输出结果为只包含 Mary 和 Peter 元素的数组。

5. 创建一个新的数组

有时候，我们需要根据一个算法、一个指定的长度或者其他规则来创建一个新的数组，我们可以使用 Array.map() 函数来对一个数组的所有元素进行转换，最后创建一个新的数组。

const newArray = Array.from({ length: 5 }).map((val, index) => index + 1);
console.log(newArray); // [1, 2, 3, 4, 5]

这个例子中，我们需要创建一个长度为 5 的数组，并且需要将数组中的每个元素赋值为其在数组中的索引值加 1。我们可以使用 Array.from() 创建一个长度为 5 的数组，然后对每个元素进行转换，返回一个新的数组 newArray，包含索引值加 1 的所有元素。

至此，“你应该了解的JavaScript Array.map()五种用途小结”的完整攻略就结束了。希望你已经可以熟练地使用 Array.map() 函数，以及理解其常见的应用场景。