array.filter 正在返回整个对象，而不仅仅是一个值答案

【问题标题】：array.filter is returning entire object instead of just one valuearray.filter 正在返回整个对象，而不仅仅是一个值
【发布时间】：2022-01-13 07:03:30
【问题描述】：

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

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

为什么返回的是整个对象而不仅仅是字符串？

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

有什么想法吗？

这里是代码

 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"

我有问题的输出如下，我只想返回字符串

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

更新*

我接受了 Mayur 的回答，因为它在更大的用例中解决了我的问题。下面是我更大的用例，我需要根据需要匹配 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'}

]

【问题讨论】：

.filter() 仅包含或排除项目。它接受一个数组并返回 less。不会改变结果。你给它的回调是一个谓词——它只需要为包含或排除的内容产生真假。
过滤器不是这样工作的。它只是选择哪些数组元素将出现在结果中，它不会更改元素。您可以在过滤之前或之后使用map()
其实你最好这样使用find：const { header } = Array2.find((obj) => obj.HeaderIndex === 1) 然后console.log(header)
这是亚历山大的好答案

标签： javascript arrays

【解决方案1】：

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

试试这个代码就行了

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

【讨论】：

谢谢，我会深入研究过滤器的工作原理！我会接受这个作为答案
我更新我的答案请检查！如果我的回答对你有帮助！接受它:)
缺少答案。如果您的过滤器与数组的任何对象都不匹配，则此代码将抛出 TypeError。我已经更新了答案，所以它不会给出错误。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

我认为在你的情况下最好使用 .find() 而不是 .filter() 像：

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

【讨论】：

【解决方案4】：

其实在这种情况下你最好使用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，只需使用简单的destructuring

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}

【讨论】：