在对象中查找特定键并设置其值答案

【问题标题】：Find a specific key in object and set its value在对象中查找特定键并设置其值
【发布时间】：2021-09-29 08:43:28
【问题描述】：

我有一个大型对象，其中遍布“可见”键。我用它来显示/隐藏 UI 中的项目。

但是，我有这些名为“全部显示”/“全部折叠”的按钮，我想相应地更改“可见”键的值。所以它一次显示/隐藏所有内容。

对象看起来像这样：

{
  toplevelkey: [
    {
      innerKey: someValue,
      visible: false
    },
    {
      innerKey: someValue,
      visible: false
    }
  ],
  visible: true
}

我尝试使用recursion 来解决这个问题，但它并没有真正帮助。

【问题讨论】：

标签： javascript

【解决方案1】：

这是一个使用for...in 循环所有属性的递归解决方案：

const a={toplevelkey:[{innerKey:"someValue",visible:!1},{innerKey:"someValue",visible:!1}],visible:!0};

function toggle(obj, show) {
  if (typeof obj == "object" && obj != null) {
    obj.visible = show;
    for (const key in obj) {
      toggle(obj[key], show);
    }
  }
}
toggle(a, true);
console.log(a);

互动演示：

const a={toplevelkey:[{innerKey:"someValue",visible:!1},{innerKey:"someValue",visible:!1}],visible:!0};

function toggle(obj, show) {
  if (typeof obj == "object" && obj != null) {
    obj.visible = show;
    for (const key in obj) {
      toggle(obj[key], show);
    }
  }
}

hide.addEventListener('click', ()=>{ toggle(a, false); console.log(a);})
show.addEventListener('click', ()=>{ toggle(a, true); console.log(a);})

<button id="hide">Hide All</button>
<button id="show">Show All</button>

【讨论】：

该代码应该实际运行吗？对我来说不会改变。
@RizaKhan 是的，是的。它不适合你吗？如果你愿意，我可以把它放在小提琴里。
谢谢，现在可以使用了！标记为答案！
@RizaKhan 没问题 :) 很高兴为您提供帮助。

【解决方案2】：

我认为使用字符串方法进行直接搜索替换会很有趣。此功能将切换所有可见的：true/false。

它可以很容易地调整为将所有设置为一个或另一个，但现在它只是切换它们。享受吧！

let data = {
  toplevelkey: [{
      innerKey: 'someValue',
      visible: false,
      sub: {
        innerKey: 'someValue',
        visible: false
      }
    },
    {
      innerKey: 'someValue',
      visible: false
    }
  ],
  visible: true
}

const toggleBool = obj => JSON.parse(JSON.stringify(obj).replace(/visible\":[\w]+/g, function(m, o, s) {
  return `visible":${m.split(":")[1] === 'true' ? false : true}`
}))

console.log(toggleBool(data))

【讨论】：

JSON.parse 删除元素的反应性（我在 Vue 应用程序中使用它）