const myUsers = [ { name: 'chuloo', likes: 'grilled chicken' }, { name: 'chris', likes: 'cold beer' }, { name: 'sam', likes: 'fish biscuits' } ] const usersByFood = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.age = item.name.length * 10; return container; }) console.log(usersByFood); // [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]
我们所做的就是使用括号和点符号简单地修改数组中的每个对象。这个用例可以用于在前端应用程序上保存或解析之前处理或压缩接收到的数据。
5.小技巧使用案例
通常情况下，.map() 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。 生成新数组元素的 callback 函数，有 三个参数：
currentValue – callback 的第一个参数，数组中正在处理的当前元素，最常用的参数。
index – callback 的第二个参数，数组中正在处理的当前元素的索引。
array – callback 的第三个参数，map 方法被调用的数组。
来看一下例子：
// 下面的语句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能觉的会是[1, 2, 3] // 但实际的结果是 [1, NaN, NaN] // 通常使用parseInt时,只需要传递一个参数. // 但实际上,parseInt可以有两个参数.第二个参数是进制数. // 可以通过语句"alert(parseInt.length)===2"来验证. // map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, // 元素索引, 原数组本身. // 第三个参数parseInt会忽视, 但第二个参数不会,也就是说, // parseInt把传过来的索引值当成进制数来使用.从而返回了NaN. function returnInt(element) { return parseInt(element, 10); } ['1', '2', '3'].map(returnInt); // [1, 2, 3] // 意料之中的结果 // 也可以使用简单的箭头函数，结果同上 ['1', '2', '3'].map( str => parseInt(str) ); // 一个更简单的方式: ['1', '2', '3'].map(Number); // [1, 2, 3] // 与`parseInt` 不同，下面的结果会返回浮点数或指数: ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
还有一个非常实用的小技巧，像 .map() ，.reduce(), .filter() 这些方法支持链式调用。例如：
var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; var result = myArr .map(function(element) { // 数值大于5的数值视为5 if (element > 5) return 5; return element; }) .reduce(function(prev, element) { // 与之前的数值加总，回传后代入下一轮的处理 return prev + element; }, 0); // 40 console.log(result);
这代码看着有点啰嗦是吧？感谢 pythonicx 提供的优化代码：
var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; let result = myArr.map(m => m>5 ? 5 : m).reduce((x,y) => x+y); console.log(result); // 40
小结
在这篇文章中，我们研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是，与其他方法结合使用时，.map() 的函数可以得到强大的扩展和利用。 尝试找出更多用例。
您可能感兴趣的文章: