ES6 等价于 lodash _.mapValues

Posted

技术标签:

【中文标题】ES6 等价于 lodash _.mapValues【英文标题】:ES6 equivalent to lodash _.mapValues 【发布时间】:2018-12-25 21:35:47 【问题描述】:

将 lodash _.mapValues 转换为 ES6 有哪些不同的方法。

代码:

var fruits= 
  'apple':     'name': 'apple',    'number': 5,
  'orange':  'name': 'orange', 'number': 10 
;

_.mapValues(fruits, 'number');

输出:

 'apple': 5, 'orange': 10 

【问题讨论】:

【参考方案1】:

reduce将对象的entries转换成另一个对象,只从值中提取number

var fruits= 
  'apple':     'name': 'apple',    'number': 5,
  'orange':  'name': 'orange', 'number': 10 
;

console.log(Object.entries(fruits)
  .reduce((a, [key,  number ]) => 
    a[key] = number;
    return a;
  , 
));

在较新的环境中,您可以通过使用 Object.fromEntries 来映射到键值对数组的数组,从而使其更加优雅:

var fruits= 
  'apple':     'name': 'apple',    'number': 5,
  'orange':  'name': 'orange', 'number': 10 
;

console.log(Object.fromEntries(
  Object.entries(fruits).map(([key,  number ]) => [key, number])
));

【讨论】:

【参考方案2】:

使用Array.reduce、Object.entries 和Object.assign

var fruits= 'apple':     'name': 'apple',    'number': 5,'orange':  'name': 'orange', 'number': 10 ;
let result = Object.entries(fruits).reduce((a,[k,number]) => Object.assign(a, [k]:number), );
console.log(result);

【讨论】:

【参考方案3】:

您可以使用for..in 循环并将旧对象中的键和值添加到新对象中

var fruits = 
  'apple': 
    'name': 'apple',
    'number': 5
  ,
  'orange': 
    'name': 'orange',
    'number': 10
  
;

let newObj = ;

for (let keys in fruits) 
  newObj[keys] = fruits[keys].number;


console.log(newObj)

【讨论】:

【参考方案4】:

ES6

您也可以使用Object.keys()reduce() 来获得所需的结果。

演示

var fruits= 
  'apple':     'name': 'apple',    'number': 5,
  'orange':  'name': 'orange', 'number': 10 
;


let result = Object.keys(fruits).reduce((r,v)=>Object.assign(r,[v]:fruits[v].number),);

console.log(result);
.as-console-wrapper max-height: 100% !important;top: 0;

【讨论】:

【参考方案5】:

这是对其他答案的一个小的跟进,以便减速器不会改变累加器对象。

const newObject = Object.entries(fruits)
  .reduce((acc, [fruitKey,  number ]) => (
    ...acc,
    [fruitKey]: number,
  ), 
));

使用扩展...acc 语法对于reduce 方法来说是一种更具函数式编程风格的方法。

【讨论】:

以上是关于ES6 等价于 lodash _.mapValues的主要内容,如果未能解决你的问题,请参考以下文章

在ES6 大行其道的今天,还有必要使用 lodash 之类的库吗

lodash 中常用的方法

ES6 / lodash 统计字符串中某个字符出现的次数

如何使用打字稿中的查找来推断类型化的 mapValues?

如何在 Javascript/Lodash/ES6 中同时搜索父对象和子对象?

javascript 同样从使用ES6简化的lodash获得