js array map|极客笔记

js array map

js array map引言

在JavaScript中，数组（Array）是一种非常常见和有用的数据结构。它可以用来存储任意类型的数据，并且可以容纳多个元素。数组提供了很多内置的方法和操作，其中之一就是map()方法。

map()方法是一个高阶函数，用于对数组中的每个元素进行转换或修改，然后返回一个新的数组，新数组的元素是对原数组元素进行转换的结果。在本文中，我们将详细讨论JavaScript中的map()方法，并演示其用法。

什么是js array `map()`方法？

map()方法是数组对象的一个内置方法，用于对数组中的每个元素进行操作，将每个元素传递给一个回调函数，并将回调函数的返回值作为新数组的元素。map()方法不会修改原数组，而是返回一个新的数组。

map()方法的基本语法如下：

array.map(callback(element[, index[, array]])[, thisArg])

该方法的参数包括：
– callback：一个回调函数，用于对每个元素进行操作。该函数接受三个参数：当前元素的值、当前元素的索引和被调用的数组本身。
– thisArg（可选）：在执行回调函数时，用作this的值。

js array `map()`方法的用例

示例一：对数组中的元素进行平方操作

假设我们有一个数组，包含一些数字，我们想对每个数字进行平方操作。可以使用map()方法来实现这个需求。

以下是一个示例代码：

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((number) => {
  return number * number;
});

console.log(squaredNumbers);

运行结果：

js array map

在这个示例中，我们定义了一个包含数字的数组。然后，我们使用map()方法对数组中的每个元素执行一个回调函数，该函数将每个元素平方，并返回结果。最后，我们将结果保存在squaredNumbers变量中，并打印出来。

示例二：转换对象数组中的属性值

假设我们有一个包含多个对象的数组，每个对象都有一个name属性，并且我们想要将这些name属性值提取出来，组成一个新的数组。

以下是一个示例代码：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 32 },
  { name: 'Charlie', age: 19 }
];

const names = users.map((user) => {
  return user.name;
});

console.log(names);

运行结果：

js array map

在这个示例中，我们定义了一个包含多个对象的数组。然后，我们使用map()方法对数组中的每个对象执行一个回调函数，该函数返回对象的name属性值。最后，我们将结果保存在names变量中，并打印出来。

示例三：处理多维数组

map()方法也可以用于处理多维数组。假设我们有一个二维数组，我们想要将其中的每个元素都乘以2。

以下是一个示例代码：

const matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

const doubledMatrix = matrix.map((row) => {
  return row.map((number) => {
    return number * 2;
  });
});

console.log(doubledMatrix);

运行结果：

js array map

在这个示例中，我们定义了一个二维数组matrix。然后，我们使用两个嵌套的map()方法，将外层map()用于迭代每一行，内层map()用于迭代每个元素。这样，我们可以对每个元素进行乘以2的操作。最后，我们将结果保存在doubledMatrix变量中，并打印出来。

js array `map()`方法的性能

虽然map()方法非常方便，但在处理大型数组时，它可能会影响到性能。这是因为map()方法会创建一个新数组，并对原数组中的每个元素应用回调函数。在处理大型数组时，可能会产生大量的内存开销。

为了提高性能，我们可以使用原生的for循环或Array.from()方法来替代map()方法。这样可以避免创建新数组，直接在原数组上进行修改，并节省内存开销。

以下是使用for循环实现示例一的代码：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  squaredNumbers.push(numbers[i] * numbers[i]);
}

console.log(squaredNumbers);

运行结果与示例一相同：

js array map