JS映射返回对象答案

【问题标题】：JS map return objectJS映射返回对象
【发布时间】：2018-05-30 05:28:13
【问题描述】：

我得到了这个数组，

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

我需要做什么才能返回一个映射的数组，每个数组加 10

推出

值，这是我的第一种方法，

var launchOptimistic = rockets.map(function(elem){
  // return  elem.launches+10;
     return (elem.country, elem.launches+10);


});
console.log(launchOptimistic);

【问题讨论】：

您要更改原始对象吗？还是要创建新对象（副本）？
返回类似的数组可以是新的

标签： javascript dictionary

【解决方案1】：

以简单的方式使用 .map 而不返回。也开始使用 let 和 const 而不是 var 因为更推荐使用 let 和 const

const rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

const launchOptimistic = rockets.map(elem => (
  {
    country: elem.country,
    launches: elem.launches+10
  } 
));

console.log(launchOptimistic);

【讨论】：

只有一个问题：为什么返回对象周围的圆角括号是必要的？为什么那个 lambda 不能像这样返回对象：const launchOptimistic = rockets.map(elem => { country: elem.country, launches: elem.launches+10 } );？
圆括号用于返回多行语句。
@Iorweth333 因为语法 () => {} 使用大括号来声明函数体，因此它实际上不会返回对象，而是尝试将大括号的内容作为函数进行计算，并抛出语法错误.

【解决方案2】：

你已经很接近了，你只需要返回你想要的新对象。在这种情况下，除了启动值增加 10 之外，其他相同：

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

var launchOptimistic = rockets.map(function(elem) {
  return {
    country: elem.country,
    launches: elem.launches+10,
  } 
});

console.log(launchOptimistic);

【讨论】：

【解决方案3】：

如果你想改变原始对象，那么一个简单的Array#forEach 就可以了：

rockets.forEach(function(rocket) {
    rocket.launches += 10;
});

如果您想保持原始对象不变，请使用Array#map 并使用Object#assign 复制对象：

var newRockets = rockets.map(function(rocket) {
    var newRocket = Object.assign({}, rocket);
    newRocket.launches += 10;
    return newRocket;
});

【讨论】：

您的意思是在第二个示例中使用 map 而不是 forEach?

【解决方案4】：

map 火箭并在其发射中添加 10：

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];
rockets.map((itm) => {
    itm.launches += 10
    return itm
})
console.log(rockets)

如果你不想修改rockets，你可以这样做：

var plusTen = []
rockets.forEach((itm) => {
    plusTen.push({'country': itm.country, 'launches': itm.launches + 10})
})

【讨论】：

我会注意到这会改变原始数组中的项目。
@CRice true，添加了另一个不会改变原始数组的选项

【解决方案5】：

最干净的解决方案是解构。

const rockets = [
        { country:'Russia', launches:32 },
        { country:'US', launches:23 },
        { country:'China', launches:16 },
        { country:'Europe(ESA)', launches:7 },
        { country:'India', launche`enter code here`s:4 },
        { country:'Japan', launches:3 }
    ];
    const updated = rockets.map(rocket=>{
    return {...rocket,launches:rocket.launches+10}
    });

【讨论】：

【解决方案6】：

考虑到对象可以有很多属性，最好将对象的内容散开，重新分配特定的属性，以实现更简洁的代码。

const rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

const launchOptimistic = rockets.map(function(elem) {
  return {
    ...elem,
    launches: elem.launches+10,
  } 
});

console.log(launchOptimistic);

【讨论】：

【解决方案7】：

使用新示例的解决方案（单行）

假设您银行的客户（当然包括您）获得了奖金。

let finance = [
    {funds:10050, client_id: 1020},
    {funds:25000, client_id: 77},
    {funds:90000, client_id: 442}
];

finance = finance.map(({funds, client_id}) => {funds = funds + 2000; return {funds, client_id}});

↑ 测试并复制到 Chrome / Firefox / Edge DevTools 控制台↑

这种技术称为Destructuring Assignment

解构赋值语法是一个 JavaScript 表达式可以从数组中解压缩值，或从对象，转换为不同的变量。

【讨论】：