使用Array.prototype.map对JavaScript数组进行操作的十个例子

发布时间：2023-05-21

一、map的基本用法

Array.prototype.map()是JavaScript数组对象的一个原型方法，可以将一个数组映射成其他形式的数组。它接收一个函数作为参数，该函数将作用于原数组的每一个可枚举元素，返回一个新的数组。 以下是一个基本的map用法示例：

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map((x) => x * 2);
console.log(arr2); // [2, 4, 6, 8]

在这个例子中，arr1数组的每个元素都乘以2，返回一个新的arr2数组。

二、将字符串数组转换为数字数组

当我们需要将一个字符串数组转换为数字数组时，可以使用map方法加上一元箭头函数将每个字符串转换为数字：

const strArr = ['1', '2', '3', '4'];
const numArr = strArr.map((x) => Number(x));
console.log(numArr); // [1, 2, 3, 4]

在这个例子中，将字符串数组转换为数字数组时，箭头函数的Number将每个字符串转换为相应的数字。

三、将对象数组中的某个属性提取到一个新的数组中

当我们需要将一个对象数组中的某个属性提取到一个新的数组中时，可以使用map方法加上一元箭头函数获取该属性：

const userArr = [
  { name: 'Mike', age: 30 },
  { name: 'Tom', age: 25 },
  { name: 'Jane', age: 35 },
];
const nameArr = userArr.map((x) => x.name);
console.log(nameArr); // ['Mike', 'Tom', 'Jane']

在这个例子中，将userArr数组中每个对象的name属性提取出来放到新的nameArr数组中。

四、使用map实现过滤

当我们需要在数组中进行过滤时，可以结合map和filter方法实现。以下示例将数组中所有大于3的元素过滤掉：

const arr3 = [1, 2, 3, 4, 5];
const arr4 = arr3.map((x) => {
  if (x > 3) {
    return null;
  } else {
    return x;
  }
}).filter((x) => x !== null);
console.log(arr4); // [1, 2, 3]

在这个例子中，map方法结合if语句过滤掉大于3的元素，返回一个包含null元素的数组。filter方法再将null元素过滤掉，得到最终结果。

五、使用map实现数组元素的去重

当我们需要去掉数组中的重复元素时，可以利用map方法实现。以下示例去掉数组中的重复元素：

const arr5 = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const arr6 = [...new Set(arr5.map((x) => x))];
console.log(arr6); // [1, 2, 3, 4]

在这个例子中，利用map方法将数组元素映射成可枚举的set对象，再利用展开运算符和Set对象的特性去重。

六、使用map和join方法实现字符连接

当我们需要将数组元素连接成一个字符串时，可以结合map和join方法实现。以下示例将数组元素连接成以逗号分隔的字符串：

const arr7 = ['apple', 'banana', 'orange'];
const str1 = arr7.map((x) => x).join(',');
console.log(str1); // 'apple,banana,orange'

在这个例子中，利用map方法将数组元素映射为一个新的数组，再利用join方法将新数组中的元素以逗号分隔连接成一个字符串。

七、使用map和reduce方法实现数组元素的求和

当我们需要计算数组元素的和时，可以结合map和reduce方法实现。以下示例对数组元素进行求和：

const arr8 = [1, 2, 3, 4];
const sum = arr8.map((x) => x).reduce((a, b) => a+b);
console.log(sum); // 10

在这个例子中，利用map方法将数组元素映射为一个新的数组，再利用reduce方法对新数组元素求和。

八、使用map和reduce方法实现一维数组的转置

当我们需要将一维数组转置为二维数组时，可以结合map和reduce方法实现。以下示例将一维数组[1,2,3,4]转置为二维数组[[1,2],[3,4]]：

const arr9 = [1, 2, 3, 4];
const size = 2;
const transposedArr = arr9.map((x, i) => i % size === 0 ? arr9.slice(i, i + size) : null )
                        .filter((x) => x != null);
console.log(transposedArr); // [[1, 2], [3, 4]]

在这个例子中，利用map方法和slice方法将一维数组映射为二维数组的可枚举元素，再利用filter方法过滤null元素得到最终结果。

九、使用map实现数组元素的排列组合

当我们需要对数组元素进行排列组合时，可以利用map方法实现。以下示例将数组[1,2,3]的所有排列组合列出来：

const arr10 = [1, 2, 3];
const combArr = arr10.map((x) => arr10.map((y) => [x, y]))
                      .reduce((pre, cur) => pre.concat(cur))
                      .filter((x) => x[0] !== x[1]);
console.log(combArr); // [[1, 2], [1, 3], [2, 1], [2, 3], [3, 1], [3, 2]]

在这个例子中，利用map方法和嵌套map方法将数组元素进行组合，再利用reduce方法将组合结果合并为一个数组。最后再利用filter方法过滤掉自身重复元素得到最终结果。

十、使用map实现二维数组的转置

当我们需要将二维数组转置时，可以利用map方法实现。以下示例将二维数组[ [1,2], [3,4] ]转置为[ [1,3], [2,4] ]：

const arr11 = [[1,2], [3,4]];
const transposedArr2 = arr11[0].map((x, i) => arr11.map((y) => y[i]));
console.log(transposedArr2); // [[1, 3], [2, 4]]

在这个例子中，利用map方法和嵌套map方法将二维数组进行转置。

推荐文章