【问题标题】:Advanced Ramda Array Transformation高级 Ramda 数组变换
【发布时间】:2019-04-12 11:38:08
【问题描述】:

TLTR:看看javascript sn-p。

我有一个项目数组。

我想映射项目并更改它们的结构。

我需要保留一些属性,还需要设置一个新属性。但是,新的属性值将基于我当前正在映射的项目。

// change title to whatever shape you desire
const customTitleTransformation = title => title

const arrayOfItems = [
  {
    id: 'some id 1',
    isSelected: true,
    title: 'some title 1',
    text: 'some text',
    description: 'some description'
  },
  {
    id: 'some id 2',
    isSelected: false,
    title: 'some title 2',
    text: 'some text',
    description: 'some description'
  },
]

// I need array of items like:
// {
//   id,
//   isSelected,
//   cells: [
//     customTitleTransformation(title),
//     text
//   ]
// }

// REGULAR JAVASCRIPT WAY  
const normalizedItems = arrayOfItems.map(item => ({
  id: item.id,
  isSelected: item.isSelected,
  cells: [
    customTitleTransformation(item.title),
    item.text,
  ]
}))

console.log('first result ', normalizedItems)

// USING RAMDA  

const normalizedItemsRamda = R.map(
  R.compose(
    R.pick(['id', 'isSelected', 'cells']),
    R.set(R.lensProp('cells'), ['how do I set the array?'])
  )
)(arrayOfItems)

console.log('ramda result ', normalizedItemsRamda)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>

【问题讨论】:

    标签: javascript node.js functional-programming ramda.js


    【解决方案1】:

    我认为applySpec 可能就是这种情况。

    mapObject 函数定义了新对象的形状。然后将该转换应用于arrayOfItems

    当然,这是否更具可读性完全取决于您的欣赏:

    // change title to whatever shape you desire
    const customTitleTransformation = title => title
    
    const arrayOfItems = [{
        id: 'some id 1',
        isSelected: true,
        title: 'some title 1',
        text: 'some text',
        description: 'some description'
      },
      {
        id: 'some id 2',
        isSelected: false,
        title: 'some title 2',
        text: 'some text',
        description: 'some description'
      },
    ]
    
    const mapObject = R.applySpec({
      id: R.prop('id'),
      isSelected: R.prop('isSelected'),
      cells: R.juxt([
        R.o(customTitleTransformation, R.prop('title')),
        R.prop('text')
      ])
    });
    
    const normalizedItemsRamda = R.map(mapObject, arrayOfItems)
    
    console.log('ramda result ', normalizedItemsRamda)
    console.log('\n\nOriginal Items Unchanged:')
    console.log(arrayOfItems);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>

    【讨论】:

    • 这很漂亮。 :) 我更喜欢你的解决方案而不是纯 javascript。
    • 只有一个问题你在哪里找到R.o
    • R.o 只是compose 的简化版本,正好有两个一元函数。
    【解决方案2】:

    无论如何,我都不是 Ramda 或 FP 方面的专家,但似乎最简单的方法是将一个普通函数传递给您的 R.compose,在 @ 之前将单元格属性添加到每个对象987654322@ing 您想要的属性。

    让我知道这是否适合您,或者这是否是一种反模式并且您正在严格寻找 Ramda 内置插件。

    // change title to whatever shape you desire
    const customTitleTransformation = title => title
    
    const arrayOfItems = [
      {
        id: 'some id 1',
        isSelected: true,
        title: 'some title 1',
        text: 'some text',
        description: 'some description'
      },
      {
        id: 'some id 2',
        isSelected: false,
        title: 'some title 2',
        text: 'some text',
        description: 'some description'
      },
    ]
    
    // USING RAMDA  
    
    const normalizedItemsRamda = R.map(
      R.compose(
        R.pick(['id', 'isSelected', 'cells']),
        // shallow copy, add cells property, return new updated object
        item => R.assoc('cells', [customTitleTransformation(item.title), item.text], item)
      )
    )(arrayOfItems)
    
    console.log('ramda result ', normalizedItemsRamda)
    console.log('\n\nOriginal Items Unchanged:')
    console.log(arrayOfItems);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>

    【讨论】:

    • 很好,我刚刚注意到您更改了item.cells = ... :)
    • @Michal 是的,我的第一个版本修改了原始项目列表,更新后的解决方案将保持原样,这意味着没有副作用。
    • item => R.assoc('cells', [customTitleTransformation(item.title), item.text], item)? :)
    • @Michal 是的!看起来很完美,我会更新我的解决方案
    • @Michal 我不能不同意你的观点,这对读者来说肯定更加明确和明确。
    猜你喜欢
    • 2017-04-14
    • 2021-11-08
    • 2019-01-04
    • 2023-01-23
    • 1970-01-01
    • 2018-04-01
    • 1970-01-01
    • 2021-12-07
    • 2018-12-15
    相关资源
    最近更新 更多