array.filter 返回整个 object 而不是一个值

Question

我有一个简单的 function 过滤数组。

我只想要字符串值，而不是整个 object。

为什么整个 object 都回来了，而不仅仅是字符串？

如果我将返回切换到 console.log()，我会得到所需的 output

有任何想法吗？

这是代码

 const Array2 = [
        { header: 'First name', HeaderIndex: 0},
        { header: 'Last name', HeaderIndex: 1},
        { header: 'Company', HeaderIndex: 2},
        { header: 'Favorite food', HeaderIndex: 3},
        { header: 'Favorite color', HeaderIndex: 4},
    ]

const testing = Array2.filter((obj) => { if(obj.HeaderIndex === 1) { return obj.header } } )

console.log(testing)

// gives undesired output

[{…}]
0: {header: 'Last name', HeaderIndex: 1}
length: 1
[[Prototype]]: Array(0)



const testing = Array2.filter((obj) => { if(obj.HeaderIndex === 1) { console.log(obj.header)} } )

// gives desired output

"Last name"

我有问题的 output 在下面，我只想返回字符串

[{…}]
0: {header: 'Last name', HeaderIndex: 1}
length: 1
[[Prototype]]: Array(0)

更新*

我接受了 Mayur 的回答，因为它在更大的用例中解决了我的问题。 下面是我更大的用例，我需要合并这两个 arrays 取决于需要匹配 Array2 中的 HeaderIndex 的 Array1 索引

const Array1 = [ 
    ['Alex', 'Boe', 'MeowWolf', 'pizza', 'pink'],
    ['Arron', 'Coe', 'Kmart', 'tofu', 'purple'],
    ['Jane', 'Doe', 'Sears', 'tacos', 'orange'],
    ['John', 'Eoe', 'YugiOh', 'blueberries', 'magenta'],
    ['Suzie', 'Boe', 'Toyota', 'steroids', 'blue']
    ]
    
    
    const Array2 = [
        { header: 'First name', HeaderIndex: 0},
        { header: 'Last name', HeaderIndex: 1},
        { header: 'Company', HeaderIndex: 2},
        { header: 'Favorite food', HeaderIndex: 3},
        { header: 'Favorite color', HeaderIndex: 4},
    ]

const testResult = Array1.map((arr) => arr.map((string) => { return  {"ChosenHeader": Array2.filter((obj) => obj.HeaderIndex === arr.indexOf(string))[0]?.header, "content": string}} ))

console.log(testResult)


// desired output


[

0: {ChosenHeader: 'First name', content: 'Alex'}
1: {ChosenHeader: 'Last name', content: 'Boe'}
2: {ChosenHeader: 'Company', content: 'MeowWolf'}
3: {ChosenHeader: 'Favorite food', content: 'pizza'}
4: {ChosenHeader: 'Favorite color', content: 'pink'}

]

Answer 1

因为filter()总是返回一个数组。 你想从返回数组中过滤。 使用[0].header你可以做到！

试试这个代码它的工作

 const testing = Array2.filter((obj) => obj.HeaderIndex === 1)[0].header;
    console.log(testing, 'testing')

Answer 2

数组过滤器方法总是返回一个带有结果的新数组。 在第二个测试的示例中，当您 console.log 时，您将在 function 中打印此结果，但如果您 console.log 变量（测试），您还应该有一个与第一个测试类似的数组。

您应该做的是在返回新数组后，使用 forEach、map 或仅访问具有索引的元素（如果您总是只有一个结果，您总是可以使用 testing[0] ）。

Answer 3

实际上，在这种情况下，您最好使用find insted filter ：

 const Array2 = [{ header: 'First name', HeaderIndex: 0},{ header: 'Last name', HeaderIndex: 1},{ header: 'Company', HeaderIndex: 2},{ header: 'Favorite food', HeaderIndex: 3},{ header: 'Favorite color', HeaderIndex: 4},]; const { header } = Array2.find((obj) => obj.HeaderIndex === 1); console.log(header);

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

但是如果你必须使用filter ，只需使用单一解构

 const Array2 = [{ header: 'First name', HeaderIndex: 0},{ header: 'Last name', HeaderIndex: 1},{ header: 'Company', HeaderIndex: 2},{ header: 'Favorite food', HeaderIndex: 3},{ header: 'Favorite color', HeaderIndex: 4},]; const [{ header }] = Array2.filter((obj) => obj.HeaderIndex === 1); console.log(header);

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

Answer 4

在.filter() 使用.map() 之后：

const testing = Array2.filter((obj) => obj.HeaderIndex === 1).map(x => x.header);

我认为在你的情况下更好的 use.find() 而不是 .filter() 喜欢：

const testing = (Array2.find((obj) => obj.HeaderIndex === 1) || {}).header;