替換作為方法引數接收的陣列中的值

在這個陣列中，children陣列可以有更多的children。我有一個方法可以得到“lowValue”和“highValue”。“Id”將是唯一的。當我的方法被呼叫時，我需要使用這個唯一的 id 并將舊值“lowValue”和“highValue”替換為新值。我怎樣才能做到這一點？

// put your code here

<script>
  myData = [{
      "data": {
        "name": "Applications",
        "size": "200mb",
        "type": "Folder"
      },
      "children": [{
          "data": {
            "id": 1,
            "name": "editor.app",
            "highValue": 20,
            "ratingID": 0,
            "lowValue": 10,
          }
        },
        {
          "data": {
            "id": 2,
            "name": "settings.app",
            "highValue": 20,
            "ratingID": 0,
            "lowValue": 10,
            "mappedPersonaCount": 0,
          }
        }
      ]
    },
    {
      "data": {
        "name": "Cloud",
        "size": "20mb",
        "type": "Folder"
      },
      "children": [{
        "data": {
          "id": 5,
          "name": "backup-1.zip",
          "highValue": 20,
          "ratingID": 0,
          "lowValue": 10
        }
      }]
    }
  ]
</script>

uj5u.com熱心網友回復：

簡單的

const data = your_original_data
function replacer(lowValue, highValue, id){
  for(let i = 0; i < data.length; i  ){
    for(let j = 0; j < data[i].children.length; j  ){
      if(data[i].children[j].data.id === id){
        data[i].children[j].data.lowValue = lowValue
        data[i].children[j].data.highValue = highValue
        return
      }
    }
  }
}

uj5u.com熱心網友回復：

const myData = [{
        "data": {
            "name": "Applications",
            "size": "200mb",
            "type": "Folder"
        },
        "children": [{
                "data": {
                    "id": 1,
                    "name": "editor.app",
                    "highValue": 20,
                    "ratingID": 0,
                    "lowValue": 10,
                }
            },
            {
                "data": {
                    "id": 2,
                    "name": "settings.app",
                    "highValue": 20,
                    "ratingID": 0,
                    "lowValue": 10,
                    "mappedPersonaCount": 0,
                }
            }
        ]
    },
    {
        "data": {
            "name": "Cloud",
            "size": "20mb",
            "type": "Folder"
        },
        "children": [{
            "data": {
                "id": 5,
                "name": "backup-1.zip",
                "highValue": 20,
                "ratingID": 0,
                "lowValue": 10
            }
        }]
    }
]

const indexMap = new Map()

const parseDataToMap = (data = []) => {
    data.forEach(e => {
        if (e.children) {
            e.children.forEach(e => {
                indexMap.set(e.data.id, e.data)
            })
        }
    })
}

parseDataToMap(myData)

console.log(myData[0].children[0].data)
const o = indexMap.get(1)
o.highValue = 25
o.lowValue = 11
console.log(myData[0].children[0].data)

uj5u.com熱心網友回復：

鑒于以下假設：

1. id與提供的值匹配的所有孩子都將lowValue被highValue替換。
2. 提供的id將始終myData以一個或多個的形式出現在陣列中children。

以下是實作預期結果的一種可能解決方案：

const replaceValues = (id = 5, lv = 5, hv = 50, arr = myData) => (
  arr.reduce((f, i) => [...f, {
    ...i,
    children: i.children.map(
      child => ({
        ...child,
        data: {
          ...child.data,
          ...(
            child.data.id === id ? {
              lowValue: lv,
              highValue: hv
            } : {}
          )
        }
      })
    )
  }], [])
);

解釋/方法

• 外部.reduce有助于遍歷myData陣列
• 此陣列中的每個元素都按原樣放置（使用...擴展運算子）
• 接下來指定每個元素的childrenpropmyData
• 在此，i.children陣列被迭代使用map以訪問每個元素
• ...這里的每個元素（再次）使用擴展運算子按原樣放置
• 接下來，data指定
• 物件的值data也被傳播（和以前一樣）
• 然后，如果data.id與引數匹配，則更新（分別使用引數和）idlowValuehighValuelvhv
• 這是僅在為 true...( some_condition ? {k: v} : {} )時更新物件的特定 prop/s 的一種方法some_condition

請使用下面的評論要求進一步澄清。

代碼片段

const myData = [{
    "data": {
      "name": "Applications",
      "size": "200mb",
      "type": "Folder"
    },
    "children": [{
        "data": {
          "id": 1,
          "name": "editor.app",
          "highValue": 20,
          "ratingID": 0,
          "lowValue": 10,
        }
      },
      {
        "data": {
          "id": 2,
          "name": "settings.app",
          "highValue": 20,
          "ratingID": 0,
          "lowValue": 10,
          "mappedPersonaCount": 0,
        }
      }
    ]
  },
  {
    "data": {
      "name": "Cloud",
      "size": "20mb",
      "type": "Folder"
    },
    "children": [{
      "data": {
        "id": 5,
        "name": "backup-1.zip",
        "highValue": 20,
        "ratingID": 0,
        "lowValue": 10
      }
    }]
  }
];

const replaceValues = (id = 5, lv = 5, hv = 50, arr = myData) => arr.reduce((f, i) => [...f, {
  ...i,
  children: i.children.map(
    child => ({
      ...child,
      data: {
        ...child.data,
        ...(
          child.data.id === id ? {
            lowValue: lv,
            highValue: hv
          } : {}
        )
      }
    })
  )
}], []);

console.log('replace id: 5, low: 5, high: 50', replaceValues());
console.log('replace id: 1, low: 11, high: 21', replaceValues(1, 11, 21));

標籤：

上一篇：將道具從App.js傳遞到Stack.ScreenReactNative

下一篇：如何避免潛在的無限回圈？