什么是javascript的map方法？

map

该方法用于在数组的每个元素上应用一个功能，然后返回一个新的数组。让我们来看看语法：map()


let newArray = array.map( (v, i, a) => {

// return element to newArray

});


// newArray - the new array that is returned

// array - the array to run the map function on

// v - the current value being processed

// i - the current index of the value being processed

// a - the original array



该方法可以被认为是循环，这是专门用来转换值。让我们来看看这个例子：map()


let nums = [11, 12, 13, 14];

let minus10 = [];

for(let i = 0; i < nums.length; i++) {

minus10[i] = nums[i] - 10;

}






代码产生一个新的数组，其中旧数组的每个值减少 10。是的，这就是它的工作原理，但有一个更容易的方法来实现相同的结果。

现在，让我们使用该方法重写以前的功能。map()


let nums = [11, 12, 13, 14];

let minus10 = nums.map(value => value - 10);

// minus10 = [1, 2, 3, 4]




使用箭头功能，我们有一个漂亮和干净的功能，以创建相同的数组。因为我们只使用值，我们只传递给方法。map()

在此示例中，我们将同时使用值和索引参数：


let nums = [11, 12, 13, 14];

let newArray = nums.map( (v, i) => {

return {

value: v,

index: i

};

});



// newArr = [

// {value: 11, index: 0},

// {value: 12, index: 1},

// {value: 13, index: 2},

// {value: 14, index: 3}

// ]




我想现在你看到，无论我们在方法内返回什么，都用于创建新的数组。您可以使用当前值、当前索引甚至整个数组来确定要返回的内容。

你甚至可以做这样愚蠢的事情 下面， 只是返回一个静态字符串：


let nums = [11, 12, 13, 14];

let cats = nums.map ( ( ) => 'cats');

// cats = [`cat`, `cat`, `cat`, `cat` ]


直到这里，所有示例都改变了旧数组中的所有值。让我们看看如何改变我们数组中的某些值。


let nums = [11, 12, 13, 14];

ley newArr = nums.map(v => v % 2 === 0 ? v * 2 : v);

// newArr = [11, 24, 13, 28];




首先，我们检查了除以两个值的剩余值是否为零。如果剩余的为零，我们将返回 v * 2 或当前值的两倍。

本文章由javascript技术分享原创和收集