在嵌套数组中查找一个值，然后从上层范围返回一个值答案

【问题标题】：Finding a value in nested array then returning a value from the upper scope在嵌套数组中查找一个值，然后从上层范围返回一个值
【发布时间】：2021-12-12 21:37:13
【问题描述】：

我想要实现的是：

查找数组中的文本对象是否为空。
如果来自 no1 的条件匹配，则返回位于该对象顶层的 id 值。

https://codesandbox.io/s/cranky-swirles-gb6ct?file=/src/App.js:410-412 在代码沙箱的示例中，我添加了两个带有空文本字符串的对象，在这种情况下，我希望得到一个字符串数组 (result = ['662e4120', '782h7a9x'])

我能够找到空值，但是我不确定如何从上层范围返回对象。

如果你无法访问codeSandbox，sn-p就附在下面：

const array = [
{
  id: "5548d3c2",
  state: {
    properties: [
      {
        text: "text",
        key: "fs5a"
      }
    ]
  }
},
{
  id: "662e4120",
  state: {
    properties: [
      {
        text: "",
        key: "m03n"
      }
    ]
  }
},
{
  id: "782h7a9x",
  state: {
    properties: [
      {
        text: "",
        key: "y5x1"
      }
    ]
  }
}];

  const findItem = () => {
    return array
      .map((item) => item.state)
      .map((item) => item.properties)
      .flat()
      .filter((item) => item.text === "");
  };

【问题讨论】：

" 但是我不确定如何从上层范围返回对象" 你是什么意思？你得到了什么结果，你想要达到什么目标？
请在此处将代码直接嵌入到 sn-p 中
嘿Corrl，感谢您回来。目前我只能从“属性”中找到并返回包含空文本字符串的对象。我想得到的是来自上层范围的 ID，在这种情况下将是 '782h7a9x' 和 '662e4120'
我的回答有帮助吗？
嘿Corrl，感谢您回来。当然可以，就像一个魅力。感谢您与我分享知识！

标签： javascript arrays object multidimensional-array filtering

【解决方案1】：

尝试做这样的事情https://codesandbox.io/s/jovial-mcnulty-2fwh4

export default function App() {
  const array = [
    {
      id: "5548d3c2",
      state: {
        properties: [
          {
            text: "text",
            key: "fs5a"
          }
        ]
      }
    },
    {
      id: "662e4120",
      state: {
        properties: [
          {
            text: "",
            key: "m03n"
          }
        ]
      }
    },
    {
      id: "782h7a9x",
      state: {
        properties: [
          {
            text: "",
            key: "y5x1"
          }
        ]
      }
    }
  ];

  const findItem = () => {
    return array.filter(obj=>obj.state.properties[0].text==="").map(obj=>obj.id)
  };

  console.log(findItem());

  return <div className="App"></div>;
}

在这里，我们根据谓词obj=>obj.state.properties[0].text==="" 对原始数组进行过滤。这基本上得到了满足这个谓词函数的数组的所有元素。在此之后，我们只是在结果上应用 map 来获取满足这个谓词函数的数组元素的 id。

【讨论】：

如果您解释了解决方案，对读者来说会更有教育意义。

【解决方案2】：

要获得一个包含对象 ID 且没有文本的数组，您必须更改顺序或迭代。

.filter() 包含空文本字段的元素的数组。
.map() 将剩余元素设置为您的目标值

在映射或过滤时，您不能只进行一层，而是可以根据需要进行任意多的级别。由于“属性”包含一个数组并且您想要第一个元素，您可以使用索引数组 [0] 访问它（您所做的 flat() 是多余的）

  const findItem = () => {
    return array
      .filter(item => item.state.properties[0].text === "")   // (2) [{…}, {…}] the original items with no text
      .map(item => item.id)  // ['662e4120', '782h7a9x']
  };

（代码可以嵌入到 sn-p 中，可以直接运行）

const array = [
{
  id: "5548d3c2",
  state: {
    properties: [
      {
        text: "text",
        key: "fs5a"
      }
    ]
  }
},
{
  id: "662e4120",
  state: {
    properties: [
      {
        text: "",
        key: "m03n"
      }
    ]
  }
},
{
  id: "782h7a9x",
  state: {
    properties: [
      {
        text: "",
        key: "y5x1"
      }
    ]
  }
}];

  const findItem = () => {
    return array
      .filter(item => item.state.properties[0].text === "")   // (2) [{…}, {…}] the original items with no text
      .map(item => item.id)  // ['662e4120', '782h7a9x']
  };

console.log(findItem())

【讨论】：