如何使用Underscore.js的_.map为对象数组添加新属性

你的代码存在几个问题，导致无法达到预期效果：

• 你给glutenFree赋值的是字符串类型的'false'/'true'，但需求是布尔类型，应该用不带引号的false/true
• _.map的回调函数返回的是赋值操作的结果（也就是那个字符串），而不是修改后的甜点对象，最终得到的数组会是一堆字符串，而非带新属性的对象数组
• 直接修改原对象虽然能添加上属性，但如果希望保持原数组不变，应该创建新对象而非修改原数据

方案1：允许修改原对象的情况 #

如果可以直接修改原数组里的对象，调整回调函数返回修改后的对象即可：

var glutenFree = function (desserts) {
  return _.map(desserts, function(dessert) {
    // 赋值布尔值，而非字符串
    dessert.glutenFree = !dessert.ingredients.includes('flour');
    // 返回修改后的对象，让_.map生成包含这些对象的新数组
    return dessert;
  });
};

方案2：不修改原对象（Immutable方式） #

如果不想改动原数组里的对象，用Underscore的_.extend或ES6展开语法创建新对象：

var glutenFree = function (desserts) {
  return _.map(desserts, function(dessert) {
    // 用_.extend创建新对象，合并原属性和新属性
    return _.extend({}, dessert, {
      glutenFree: !dessert.ingredients.includes('flour')
    });
  });
};

// 或者用ES6展开语法（环境支持时可用）
var glutenFree = function (desserts) {
  return _.map(desserts, dessert => ({
    ...dessert,
    glutenFree: !dessert.ingredients.includes('flour')
  }));
};

补充说明 #

• !dessert.ingredients.includes('flour')等价于：如果包含flour，glutenFree为false；否则为true，比if-else写法更简洁
• 如果运行环境不支持数组的includes方法，可以用Underscore的_.contains（别名_.includes）替代：!_.contains(dessert.ingredients, 'flour')

内容的提问来源于stack exchange，提问作者boshao13