點燈坊

學而時習之,不亦悅乎

使用 fromPairs() 將 Pair Array 轉成 Object

Sam Xiao's Avatar 2019-07-08

若以 Pair 形式表示 Key / Value,而以 Pair Array 表示整個 Object,可使用 Ramda 的 fromPairs() 直接轉成 Object。

Version

macOS Mojave 10.14.5
VS Code 1.35.1
Quokka 1.0.232
Ramda 0.26.1

Imperative

let data = [
  ['FP in JavaScript', 100],
  ['Rx in Action', 200],
  ['Speaking JavaScript', 300]
];

// fromPairs :: [[k,v]] → {k: v}
let fromPairs = arr => {
  let result = {};

  for(let elem of arr) {
    result[elem[0]] = elem[1];
  }

  return result;
};

console.dir(fromPairs(data)); 

建立 fromPairs(),imperative 會先建立欲回傳的 result object,使用 for loop 拆解 key 與 value 建立 object。

frompairs000

Functional

let data = [
  ['FP in JavaScript', 100],
  ['Rx in Action', 200],
  ['Speaking JavaScript', 300]
];

// reducer :: (a, b) => a
let reducer = (acc, val) => {
  acc[val[0]] = val[1];
  return acc;
};

// fromPairs :: [[k,v]] → {k: v}
let fromPairs = arr => arr.reduce(reducer, {});

console.dir(fromPairs(data));

由於最後結果為單一 object,很適合使用 reduce(),可使用 Array.prototype 內建的 reduce() 處理。

frompairs001

import { reduce, assoc } from 'ramda';

let data = [
  ['FP in JavaScript', 100],
  ['Rx in Action', 200],
  ['Speaking JavaScript', 300]
];

// reducer :: (a, b) => a
let reducer = (acc, val) => assoc(val[0], val[1], acc);

// fromPairs :: [[k,v]] → {k: v}
let fromPairs = reduce(reducer, {});

console.dir(fromPairs(data)); 

Array.prototype.reduce() 其實還是 OOP 風格,若想更 FP,也可使用 Ramda 的 reduce()assoc()

frompairs002

Ramda

import { fromPairs } from 'ramda';

let data = [
  ['FP in JavaScript', 100],
  ['Rx in Action', 200],
  ['Speaking JavaScript', 300]
];

console.dir(fromPairs(data)); 

其實 Ramda 已經內建 fromPairs(),可直接使用。

fromPairs()
[[k,v]] → {k: v}
將 pair array 轉成 object

import { fromPairs } from 'ramda';

let data = [
  ['FP in JavaScript', 100],
  ['Rx in Action', 200],
  ['Speaking JavaScript', 300],
  ['FP in JavaScript', 400],
];

console.dir(fromPairs(data)); 

若 array 中的 key 重複則 後蓋前

frompairs004

Conclusion

  • 傳統將 array 轉成 object 都會使用 reduce(),透過 fromPairs() 可見更簡單將 pair array 轉成 object

Reference

MDN, Array.prototype.reduce()
Ramda, fromPairs()
Ramda, reduce()
Ramda, assoc()