当前位置: 首页>>代码示例>>用法及示例精选>>正文


JavaScript Array map用法及代码示例

JavaScript Array map()方法创建一个新数组,并为每个数组元素调用一个函数。

用法:

arr.map(callback(currentValue), thisArg)

这里,arr是一个数组。


map()参数

这个map()方法采用:

  • callback-为每个数组元素调用的函数。它的返回值将添加到新数组中。它包含:
    • currentValue-从数组传递当前元素。
  • thisArg(可选)-用作的值this执行时callback。默认情况下是undefined

从map()返回值
  • 返回一个新数组,其中元素作为元素的返回值callback每个元素的功能。

笔记

  • map()不会更改原始数组。
  • map()执行callback对于每个数组元素,顺序为一次。
  • map()不执行callback用于没有值的数组元素。

示例1:使用自定义函数映射数组元素
const prices = [1800, 2000, 3000, 5000, 500, 8000];

let newPrices = prices.map(Math.sqrt);
// [ 42.42640687119285, 44.721359549995796, 54.772255750516614,
//   70.71067811865476, 22.360679774997898, 89.44271909999159 ]
console.log(newPrices);

// custom arrow function
const string = "JavaScript";
const stringArr = string.split(''); // array with individual string character

let asciiArr = stringArr.map(x => x.charCodeAt(0));

// map() does not change the original array
console.log(stringArr); // ['J', 'a', 'v', 'a','S', 'c', 'r', 'i', 'p', 't']

console.log(asciiArr); // [ 74,  97, 118,  97, 83,  99, 114, 105, 112, 116 ]

输出

[
  42.42640687119285,
  44.721359549995796,
  54.772255750516614,
  70.71067811865476,
  22.360679774997898,
  89.44271909999159
]
[
  'J', 'a', 'v', 'a',
  'S', 'c', 'r', 'i',
  'p', 't'
]
[
   74,  97, 118,  97,
   83,  99, 114, 105,
  112, 116
]

示例2:map()用于数组中的对象元素
const employees = [
    { name: "Adam", salary: 5000, bonus: 500, tax: 1000 },
    { name: "Noah", salary: 8000, bonus: 1500, tax: 2500 },
    { name: "Fabiano", salary: 1500, bonus: 500, tax: 200 },
    { name: "Alireza", salary: 4500, bonus: 1000, tax: 900 },
];

// calculate the net amout to be given to the employees
const calcAmt = (obj) => {
    newObj = {};
    newObj.name = obj.name;
    newObj.netEarning = obj.salary + obj.bonus - obj.tax;
    return newObj;
};

let newArr = employees.map(calcAmt);
console.log(newArr);

输出

[
  { name: 'Adam', netEarning: 4500 },
  { name: 'Noah', netEarning: 7000 },
  { name: 'Fabiano', netEarning: 1800 },
  { name: 'Alireza', netEarning: 4600 }
]

注意map()分配undefined到新数组,如果callback函数返回undefined或者什么都没有。


相关用法

注:本文由纯净天空筛选整理自 JavaScript Array map。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。