JS中map()使用记录

优点和缺点

总的来说，map() 方法是一个强大的工具，适合于需要将数组中的每个元素转换为新形式的情况。然而，对于性能敏感的应用或需要更复杂控制逻辑的场景，可能需要考虑其他方法。

优点：

1. 函数式编程风格：map() 方法是函数式编程的一部分，它有助于编写简洁、声明式的代码。

2. 链式调用：map() 方法返回一个新的数组，可以与其他数组方法（如 filter()、reduce()等）进行链式调用，从而创建复杂的数据处理流程。

3. 无副作用：map() 不会修改原始数组，它返回一个新的数组，因此不会产生副作用。

4. 易于理解和维护：map() 方法的使用通常比循环更直观，特别是对于熟悉函数式编程的开发者来说。

5. 自动遍历数组：你不需要编写循环逻辑来遍历数组，map() 会自动处理。

6. 高阶函数：map() 可以接收一个函数作为参数，这使得它可以很容易地被用于各种不同的场景。

缺点：

1. 性能问题：在处理大型数组时，map() 可能会比传统的循环慢，因为它需要创建一个新数组并存储结果。

2. 内存使用：由于 map() 创建了一个新数组，因此在内存中同时存在原始数组和新的映射数组，这在处理大量数据时可能会成为一个问题。

3. 无法中断：一旦开始，map() 方法会遍历整个数组，无法提前终止。如果你需要在满足某些条件时停止处理，可能需要使用其他方法，如 forEach() 或 for...of 循环。

4. 忽略未定义的元素：如果数组中有 undefined 或 null 元素，它们会被 map() 跳过，这可能导致意外的行为，特别是如果你依赖于数组索引时。

5. 不适用于所有数据结构：map() 方法仅适用于数组，如果你需要映射其他数据结构（如对象），则需要其他方法或自定义逻辑。

6. 回调函数必须返回值：map() 方法依赖于回调函数返回一个值来构建新数组。如果回调函数没有返回值，或者返回 undefined，新数组中将会有 undefined 值。

开始使用

在JavaScript中，map() 方法是数组原型（Array.prototype）上的一个方法，它创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。map() 方法不会改变原始数组。

基础语法

array.map(function callback(currentValue[, index[, array]]) {
  // Return element for new_array
}[, thisArg])

• callback：为每个元素执行的函数，该函数接收三个参数：
  • currentValue：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：map 方法被调用的数组。
• thisArg（可选）：执行 callback 函数时值被用作 this。

map() 方法返回一个新的数组，包含由原数组中的每个元素调用一次提供的函数后的返回值。

使用带有索引的回调函数

const numbers = [1, 2, 3, 4, 5];
const withIndexes = numbers.map((n, index) => `Index ${index}:${n}`);
console.log(withIndexes); // ["Index 0: 1", "Index 1: 2", "Index 2: 3", "Index 3: 4", "Index 4: 5"]

使用 thisArg 上下文

const obj = {
  multiplier: 2,
  multiplyValues: function(array) {
    return array.map(function(item) {
      return this.multiplier * item;
    }, this);
  }
};

const numbers = [1, 2, 3];
const multiplied = obj.multiplyValues(numbers);
console.log(multiplied); // [2, 4, 6]

在这个例子中，thisArg 被设置为 obj，因此 callback 函数中的 this 指向 obj，允许访问 obj.multiplier。

将每个数组元素乘以2

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

字符串转换成数字数组

let strings = ['10', '20', '30'];
let numbers = strings.map(function(str) {
    return parseInt(str, 10);
});
console.log(numbers); // 输出 [10, 20, 30]

注意事项

• map() 不会对空数组进行检测，因此它不会改变空数组，而是返回一个新数组。
• map() 不会改变原始数组，它返回一个新的数组。
• 如果不提供 thisArg 参数，callback 函数中的 this 将默认指向全局对象（在非严格模式下）或 undefined（在严格模式下）。
• 如果数组中的某个元素是 undefined 或 null，在映射过程中它们会被跳过，但仍然会出现在结果数组中。