js map用法|极客笔记

js map用法

JavaScript是一种高级的动态编程语言，常用于网页开发。其中，map()是JavaScript中常用的数组方法之一。它允许我们在不改变原数组的前提下，通过对数组中的每个元素应用一个函数来创建一个新数组。本文将详细介绍JavaScript的map()方法的使用。

1. `map()`方法的语法

map()方法的语法如下：

array.map(function(currentValue, index, arr), thisValue)

array：要进行映射操作的数组。
function(currentValue, index, arr)：对数组中的每个元素进行操作的函数。该函数可以接受3个参数：
- currentValue：当前元素的值。
- index：当前元素的索引。
- arr：当前元素属于的数组对象。
thisValue：可选，执行回调函数时使用的this值。

函数通过返回对currentValue的新值，来创建一个新的数组。

2. 示例说明

2.1 将数组中的元素翻倍

假设我们有一个数组numbers，包含以下元素：[1, 2, 3, 4, 5]。我们希望将该数组中的每个元素都翻倍得到一个新的数组。可以使用map()方法来实现：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
    return num * 2;
});

console.log(doubledNumbers);

运行结果：

[2, 4, 6, 8, 10]

这样，我们通过传递一个匿名函数给map()方法，对numbers数组中的每个元素进行运算，并返回一个新的数组doubledNumbers。

2.2 将字符串数组转换为大写

假设我们有一个字符串数组fruits，包含以下元素：[‘apple’, ‘banana’, ‘orange’]。我们希望将该数组中的每个字符串都转换为大写形式，并创建一个新的数组。可以使用map()方法来实现：

const fruits = ['apple', 'banana', 'orange'];
const uppercaseFruits = fruits.map(function(fruit) {
    return fruit.toUpperCase();
});

console.log(uppercaseFruits);

运行结果：

['APPLE', 'BANANA', 'ORANGE']

通过传递一个匿名函数给map()方法，对fruits数组中的每个字符串调用toUpperCase()方法，并返回一个新的数组uppercaseFruits。

2.3 使用箭头函数简化代码

从ES6开始，引入了箭头函数，可以更简洁地定义函数。因此，我们可以使用箭头函数来简化上述的代码。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);

运行结果：

[2, 4, 6, 8, 10]

同样地，我们可以使用箭头函数来简化字符串数组转换为大写的示例。

const fruits = ['apple', 'banana', 'orange'];
const uppercaseFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(uppercaseFruits);

运行结果：

['APPLE', 'BANANA', 'ORANGE']

2.4 使用箭头函数进行对象数组转换

除了对数字和字符串数组进行转换，map()方法也可以用于对象数组的转换。假设我们有以下的对象数组students：

const students = [
    { name: 'Alice', age: 20 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 22 }
];

我们希望创建一个新的对象数组，只包含学生的姓名。可以使用map()方法来实现：

const studentNames = students.map(student => student.name);

console.log(studentNames);

运行结果：

['Alice', 'Bob', 'Charlie']

通过使用箭头函数，我们可以只返回每个学生对象的name属性，从而创建一个新的对象数组studentNames。

3. 注意事项

在使用map()方法时，需要注意以下几点：

map()方法返回一个新数组，而不会修改原始数组。
如果对原数组中的某些元素未定义或为空，则在新数组中将保留相应的undefined或空元素。
当map()方法被调用时，它会使用创建map()的原始数组的空槽位进行迭代。
虽然map()中的回调函数可以接受第二个参数index，但不建议过多地依赖这个参数。因为如果原始数组中某些元素被删除，index会发生变化，可能会导致不可预料的结果。