如何在数组中使用过滤器方法并仅打印对象的特定值答案

【问题标题】：how to use filter method in array and print only specific value of the object如何在数组中使用过滤器方法并仅打印对象的特定值
【发布时间】：2020-08-17 15:01:43
【问题描述】：

const arr = [
    { value: "Value one",
      label: "Value at one"

    },
    {
      value: "Value 2",
      label: "Value at 2"
    },
    {
      value: "" ,
      label: "Value at 3"
    }
  ]

这是我的数组，我将其作为道具传递给不同的组件。但我也想添加过滤器，如果数组中的值为空，则不要在子组件中显示其标签

{arr.filter(val => !val.value).map((data)=>
                  <ChildComponent data ={data}/>
                  )}

我的疑问是如何使用 .filter 来隐藏空值。我已经编写了逻辑，但即使数组中有值，它也不起作用。
当我在做console.logs来获取数组的值时：

console.logs(this.arr)，输出如下：

1: Object { value: "Value one", label: "Value at one" }
2: Object { value: "Value 2", label: "Value at 2" }
3: Object { value: "", label: "Value at 3" }

我只想获取对象 1 的值，不知道如何获取它。 console.log("sampleData", arr.map(data=>data.label)) 输出为：[ "Value at one", "Value at 2", "Value at 3" ]。虽然我只希望输出为 ["Value at one"]。谁能帮助我如何过滤存在的值并仅从数组中单独打印第一个值/第二个值/第三个值。

【问题讨论】：

您的代码是正确的。问题在于您的 console.log，它记录了 original 数组，而不是您过滤掉 value: "" 对象的那个数组。 filter 不会更改您调用它的数组，它会创建一个仅包含您选择保留的项目的新数组。它很好，干得好！ :-)
您的过滤器 arr.filter(val => !val.value) 可能是倒置的：您必须使用 arr.filter(val => !!val.value)
即使在 arr.filter(val => !!val.value) 之后，我仍然得到空值的标签。当我的子组件中的值为 null 时，我希望隐藏标签
@T.J.Crowder 如何获取第一个位置的值
请用minimal reproducible example 更新您的问题来证明问题，最好是使用堆栈片段（[<>] 工具栏按钮）可运行。 Stack Snippets 支持 React，包括 JSX； here's how to do one.

标签： javascript arrays reactjs typescript object

【解决方案1】：

您的代码是正确的，您唯一需要更改它arr.filter(val => !val.value) tbhat 应该是arr.filter(val => val.value != '') 或arr.filter(val => val.value)，如果您想要有效的空格，您可以执行 arr.filter(val => val.value .trim() != ''); console.log() 也向您展示了第一个数组，所以如果您想获得新值，您必须创建一个新变量来分配该值，例如 let newarray = arr.filter(val => val.value)，如果您使用 console.log(newarray)，它将显示正确的价值观。

【讨论】：

我不想获取新值，我想获取位置 1 的值