使用Ramda向JSONobject添加新的嵌套條目

有一個我們應該向其添加 json 資料的初始空物件。使用 lodash 可以按如下方式添加它。

const _ = require('lodash');
data = {};
_.set(data, 'client.firstName', incomingData.firstName ? incomingData.firstName : '');
_.set(data, 'client.lastName', incomingData.lastName ? incomingData.lastName : '');
_.set(data, 'client.middleInitial', incomingData.middleInitial ? incomingData.middleInitial : '');
_.set(data, 'maidenName', incomingData.maidenName ? incomingData.maidenName : '');
...

現在我應該使用rambda做同樣的實作。通過參考 ramda 檔案進行了嘗試，但無法找到確切的解決方案，以便像這樣接收輸出：

{
"client": 
  {
   "firstName":"Pete",
   "lastName":"Cathy",
   "middleInitial":"M"
  },
"maidenName":"catty"
...
...
}

請建議我正確的實作來實作相同的目標。

uj5u.com熱心網友回復：

我的第一個建議是你不要假設 lodash 中的某些東西會在 Ramda 中，反之亦然。它們是具有不同目標和不同功能的獨立庫。它們如此重疊是因為 lodash（通過 Underscore）和 Ramda（直接）從許多函式式語言中汲取靈感。但他們從不同的方向汲取靈感。

在 Ramda（免責宣告：我是它的作者之一）中，我們會避免使用像該片段這樣的代碼。但我們可以相當接近：

最直接的轉化

我們可以寫一些相對接近的東西：

const _set = (o, ps, v) => assocPath (split ('.') (ps), v, o)

const incomingData = {firstName: 'Wilma', lastName: 'Flintstone', maidenName: 'Slaghoople'}

let data = {}

data = _set (data, 'client.firstName', incomingData.firstName ? incomingData.firstName : '');
data = _set (data, 'client.lastName', incomingData.lastName ? incomingData.lastName : '');
data = _set (data, 'client.middleInitial', incomingData.middleInitial ? incomingData.middleInitial : '');
data = _set (data, 'maidenName', incomingData.maidenName ? incomingData.maidenName : '');

console .log (data)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
<script> const {assocPath, split} = R </script>

最大的區別在于 的不斷重新分配data。Ramda 不會改變輸入資料；這是其核心原則之一。所以我們必須使用我們的新_set函式來回傳一個新物件，然后重置data為結果。

不是 Ramda 方式

但是 Ramda 用戶不太可能撰寫這樣的代碼。的持續突變data是一種詛咒。此外，它是相當重復的。我們想將那些重復的命令式塊包裝成更具宣告性的東西。

使用path-configuration

第一種可能性是使用類似的配置

[
  ['client.firstName', 'firstName', ''],
  ['client.lastName',  'lastName', ''],
  ['client.middleInitial', 'middleInitial', ''],
  ['client.maidenName', 'maidenName', ''],
]

驅動我們的代碼。我們可以在 Ramda 中以足夠簡單的方式將這些條目折疊成單個物件：

const transform = curry ((config, incoming) => reduce (
  (obj, [to, from, dflt]) =>
    assocPath (split ('.') (to), defaultTo (dflt, path (split ('.') (from), incoming)), obj), 
  {}, config
))

const config = [
  ['client.firstName', 'firstName', ''],
  ['client.lastName',  'lastName', ''],
  ['client.middleInitial', 'middleInitial', ''],
  ['maidenName', 'maidenName', ''],
]

const incomingData = {firstName: 'Wilma', lastName: 'Flintstone', maidenName: 'Slaghoople'}

console .log (transform (config) (incomingData))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
<script> const {curry, reduce, assocPath, split, defaultTo, path} = R </script>

Here we use the dot-separated paths in the input configuration to detail where our data is coming from and going to, and we supply simple defaults for missing values.

This style is quite useful if you are already getting data in this dot-separated path format. But that format is not particularly natural for Ramda, which uses arrays of Strings and Integers for its paths. So, while I'll leave it as a simplification exercise, we might prefer working with a configuration like this:

const config = [
  [['client', 'firstName'], ['firstName'], ''],
  [['client', 'lastName'],  ['lastName'], ''],
  [['client', 'middleInitial'], ['middleInitial'], ''],
  [['maidenName'], ['maidenName'], ''],
]

Built into Ramda

But if you're writing from scratch, and not starting with those dot-separated paths, Ramda has a built-in function that is still more declarative and is very much designed for such jobs: the function applySpec, which takes an input object and builds a new one by applying a structured configuration object whose leaves are functions from the input data. (I see that Ori Drori has an answer with nearly identical code. I think it's worth repeating here, if nothing else to show that this is the most likely Ramda answer to the problem.)

Using applySpec is simple enough:

const transform = applySpec ({
  client: {
    firstName: propOr ('', 'firstName'),
    lastName: propOr ('', 'lastName'),
    middleInitial: propOr ('', 'middleInitial')
  },
  maidenName: propOr ('', 'maidenName')
}) 

const incomingData = {firstName: 'Wilma', lastName: 'Flintstone', maidenName: 'Slaghoople'}

console .log (transform (incomingData))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
<script> const {applySpec, propOr} = R </script>

這是很好的宣告；我們的配置物件的結構類似于我們想要接收的輸出。其葉子上的函式 usingpropOr簡單地描述了從我們的輸入中獲取資料的位置以及如果丟失該怎么辦。（如果我們的輸入是嵌套的，我們可能會使用它pathOr。）

哪種技術？

這兩種技術之間的選擇取決于路徑串列'client.firstName'是提前知道還是提供給您的資料。提供的片段建議前者，因此，我會建議applySpec解決方案。但如果情況并非如此，并且這些路徑可能作為資料提供，那么reduce基于 -based 的路徑可能是最好的。

uj5u.com熱心網友回復：

使用 Ramda，您可以R.applySpec通過提供包含生成每個屬性的函式的規范來從另一個物件創建新物件。在您的情況下，用于R.propOr從原始物件中獲取資料，并提供一個空字串作為后備：

const { applySpec, propOr } = R;

const getData = applySpec({
  client: {
   firstName: propOr('', 'firstName'),
   lastName: propOr('', 'lastName'),
   middleInitial: propOr('', 'middleInitial')
  },
  maidenName: propOr('', 'maidenName')
});

const incomingData = {
  firstName: 'Pete',
  lastName: 'Cathy',
  maidenName: 'Catty',
};

const data = getData(incomingData);

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js" integrity="sha512-rZHvUXcc1zWKsxm7rJ8lVQuIr1oOmm7cShlvpV0gWf0RvbcJN6x96al/Rp2L2BI4a4ZkT2/YfVe/8YvB2UHzQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Rambda 的作業方式相同，但至少 UMD 似乎有一個錯誤。如果R.propOr提供給所有屬性，則該函式回傳一個空物件。如果您遇到該錯誤，請將其中一個propOr呼叫與一個函式包裝起來，以使其作業。

顯示代碼片段

const { applySpec, propOr } = R;

const getData = applySpec({
  client: {
   firstName: x => propOr('', 'firstName', x), // <- stupid hack
   lastName: propOr('', 'lastName'),
   middleInitial: propOr('', 'middleInitial')
  },
  maidenName: propOr('', 'maidenName')
});

const incomingData = {
  firstName: 'Pete',
  lastName: 'Cathy',
  maidenName: 'Catty',
};

const data = getData(incomingData);

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rambda/6.9.0/rambda.umd.js" integrity="sha512-1npVFfj/soXclDC0ts7zenNSKArClG4bNYSpOLuE5ojVI7mXLLdkoRvXGejgOS1p/zORDKajYMxXw/Ia6vNulQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

標籤：javascript 有角的 ramda.js

上一篇：OnChange在[checked]應用到mat單選按鈕時不起作用

下一篇：Lombok：生成2個具有指定欄位的建構式