搜索一个深嵌套的数组以更新对象

Question

我有一个深度嵌套的数据结构，我有兴趣匹配数组中的某个值（和数组数组），然后在随附的数组中推动一些数据。 以下是我的颜色和伴随的数组

var myData = [{
    "color": "green",
    "moreColors": [
        {
            "color": "beige"
        },
        {
            "color": "black",
            "moreColor": [
                {
                    "color": "grey"
                },
                {
                    "color": "white",
                    "moreColors": [...]
                }
            ]
        }
    ]
}]

例如， 和添加morecolors数组的对象morecolors：[{“ color”：“ blue”}]。在某些情况下，如果数组已经存在，则可能使用 push（）方法。我将如何最好地实现这一目标？我的目标是我想添加值并更新/突变 myData 数组，因为这将传递给另一个功能。这里的嵌套可以深度深，因此循环内部的简单循环无法正常工作。递归功能在这里效果最好吗？我也可以接受更好的方法或使用下划线或 lodash 之类的库。尽管我更喜欢香草JS版本。下面是我启动的递归解决方案，但是该代码的运行不会超过深度。

findNested(myData, "grey")

function findNested(myArray, color) {
    myArray.moreColors?.forEach(element => {
        if(element.color !== color){
            if(element.moreColors.length > 0) {
                findNested(element.moreColors, color);
            }
        } else {
                element.moreColors.push({
                    "color": "blue"
                });
        }
    });
}

Answer 1

这是我认为您正在尝试的快速示例。

findNestedColorObject（）接受一个数组和一个颜色字符串来搜索并返回第一个color属性匹配的对象。

UpdateMoreColors（）接受一个从上述返回的对象，并首先分配MoreColors如果不存在，然后将其推向数组。

function findNestedColorObject(array, color) {
  let colorObject;

  for (const obj of array) {
    if (obj.color === color) {
      colorObject = obj;
    } else if (obj.moreColors !== undefined) {
      colorObject = findNestedColorObject(obj.moreColors, color);
    }

    if (colorObject !== undefined) {
      break;
    }
  }

  return colorObject;
}

function updateMoreColors(colorObject, colors) {
  colorObject.moreColors ??= [];
  
  for (const color of [].concat(colors)) {
    colorObject.moreColors.push({ color });
  }
}

const myData = [{ "color": "green", "moreColors": [{ "color": "beige" }, { "color": "black", "moreColors": [{ "color": "grey" }, { "color": "white", "moreColors": ["ochre"] }] }] }];

const greyObject = findNestedColorObject(myData, 'grey');
console.log('found:')
console.log(greyObject);

updateMoreColors(greyObject, 'purple');
console.log('updated:');
console.log(greyObject);

const beigeObject = findNestedColorObject(myData, 'beige');
console.log('found:')
console.log(beigeObject);

updateMoreColors(beigeObject, ['salmon', 'crimson']);
console.log('updated:');
console.log(beigeObject);

// edit per the commments
const data = [{ color: "beige", moreColors: [{ color: "blue" }] }, { color: "black", moreColors: [{ color: "white" }] }];
const blue = findNestedColorObject(data, 'blue');
console.log('fixed overwrite error:')
console.log(blue);

或者，由于您的尝试似乎以相同功能搜索和更新，因此可以将上述两个功能组合在一起。 （这将继续更新匹配的所有对象，而不仅仅是第一个对象）。

function updateNestedColorObject(array, color, moreColors) {
  for (const obj of array) {
    if (obj.color === color) {
      obj.moreColors ??= [];
      for (const color of [].concat(moreColors)) {
        obj.moreColors.push({ color });
      }
    }
    if (obj.moreColors !== undefined) {
      updateNestedColorObject(obj.moreColors, color, moreColors);
    }
  }
}

const myData = [{ "color": "green", "moreColors": [{ "color": "beige" }, { "color": "black", "moreColors": [{ "color": "grey" }, { "color": "white", "moreColors": ["ochre"] }] }] }];

updateNestedColorObject(myData, 'grey', 'purple');
updateNestedColorObject(myData, 'purple', 'beige');
updateNestedColorObject(myData, 'beige', ['salmon', 'crimson']);

console.log(myData);

如评论中所述的编辑

我的第一个findNestedColorObject没有在成功搜索时退出循环。快速修复使用可能有更干净的解决方案。

Answer 2

抱歉，我不会让自己沉没的深度。我不会帮助您做一些如此野蛮的事情，例如突变您的原始数据。

但是，如果您对从旧结构中创建新结构的版本感兴趣，并且在其适当的位置具有附加的颜色节点，我们可以编写一个相当简单的递归：

const addColor = (target, newColor) => (xs) =>
  xs .map (({color, moreColors = []}) => ({
    color,  
    ... (color == target
      ? {moreColors: addColor (target, newColor) (moreColors) .concat ({color: newColor})}
      : moreColors .length > 0
        ? {moreColors: addColor (target, newColor) (moreColors)} 
        : {}
    )
  }))

const myData = [{color: "green", moreColors: [{color: "beige"}, {color: "black", moreColors: [{color: "grey"}, {color: "white", moreColors: [{color: "..."}]}]}]}]

console .log (addColor ('grey', 'blue') (myData))
// console .log (myData) // uncomment to see that the original has not been folded, spindled, or mutilated

.as-console-wrapper {max-height: 100% !important; top: 0}

我们通过数组映射，保持颜色属性完好无损，然后以三种方式之一处理MoreColors：

• 如果color与我们的目标颜色匹配，我们会在morecolors 节点，并将其附加到我们的其他颜色。 （如果缺少此节点，我们将其默认为一个空数组。）
• 如果没有，我们有现有的morecolor条目，我们会重新出现
• ，如果我们没有任何内容，我们都会跳过morecolor完全节点。

Answer 3

嗨，请检查我现在做出的这个功能，我真的很短，我认为它真的很好，我不知道什么是“递归”，但是我在带有对象的非常嵌套的数组上对此进行了测试，这也可以与对象一起使用，我认为看一下输出:)
编辑：我找到了一种没有删除数据但返回排序的OBJ/或数组的更好方法

var myData = [{
    "color": "green",
    "moreColors": [
        {
            "color": "blue"
        },
        {
            "color": "blue",
            "moreColor": [
                {
                    "color": "blue"
                },
                {
                    "color": "blue",
                    "moreColors": []
                }
            ]
        }
    ]
},['blue'],"blue"]
function searchArrOrObj(objOrArray,color,newColor) {
    let arrayOrObj = Object.assign((objOrArray.constructor===Array?[]:{}), objOrArray)
    for (item in arrayOrObj) {
        if (arrayOrObj[item]===color) {
            arrayOrObj[item] = newColor;
        } else if (typeof arrayOrObj[item]==='object') {
            arrayOrObj[item] = searchArrOrObj(arrayOrObj[item],color,newColor)
        }
    } 
    return arrayOrObj;
}
let newData = searchArrOrObj(myData,"blue","red")
console.log(myData)
console.log(newData)