Array.filter不会返回对象的确切属性？

Question

我正在尝试理解一些内置的数组方法。这是我的小功能代码，我想显示每个项目的“名称”和“类别”，它存储在库存中，总值大于1000.但是当我尝试打印bigPrice时，它总是显示所有的属性每个对象，我只想显示“名称”和“类别”。有人可以帮忙吗？

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.filter(function(item) {
if (item.quantity * item.unitPrice > 1000) {
    return item.name + ' || ' + item.category;
}
});

bigPrice;

Answer 1

无论你返回到传递给filter的函数是什么，都只测试其他的真实性。如果你返回一个（非空）字符串，它确定是真实的，然后立即被丢弃。对于您正在做的事情，您可以使用.filter后跟.map，但最好使用reduce，这样您只需迭代一次数组：

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.reduce((a, { quantity, unitPrice, name, category }) => {
  if (quantity * unitPrice > 1000) a.push(name + ' || ' + category);
  return a;
}, []);

console.log(bigPrice);

Answer 2

过滤功能不会返回自定义值，您需要一起使用map and filter或reduce

＆＃13;

＆＃13;

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.map(function(item) {
if (item.quantity * item.unitPrice > 1000) {
    return item.name + ' || ' + item.category;
}
}).filter(item => typeof item !== 'undefined');

console.log(bigPrice)

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.filter(function(item) {
   return (item.quantity * item.unitPrice) > 1000
}).map(item => item.name + ' || ' + item.category);

console.log(bigPrice)

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以为给定map中的每个项目应用提供的回调函数，使用array方法和销毁。

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.filter((item)=> item.quantity * item.unitPrice > 1000)
                       .map(({name,category})=>(name + '||' + category));

console.log(bigPrice);

Answer 4

filter将创建一个新数组，其中包含从函数返回truthy值的所有元素。您可以使用filter然后使用map：

var bigPrice = products.filter(function(item) {
  return item.quantity * item.unitPrice > 1000;
}).map(function(item) {
  return item.name + ' || ' + item.category;
});

Answer 5

使用Array#reduce因为您需要同时过滤和映射：

var products = [{
    name: 'A',
    quantity: 2,
    unitPrice: 100,
    category: 'Electronic goods'
  },
  {
    name: 'B',
    quantity: 1,
    unitPrice: 400,
    category: 'Electronic goods'
  },
  {
    name: 'C',
    quantity: 5,
    unitPrice: 15,
    category: 'Clothing goods'
  },
  {
    name: 'D',
    quantity: 2,
    unitPrice: 95,
    category: 'Clothing goods'
  },
  {
    name: 'E',
    quantity: 300,
    unitPrice: 10,
    category: 'Home, Garden goods'
  },
  {
    name: 'F',
    quantity: 60,
    unitPrice: 150,
    category: 'Handmade'
  },
  {
    name: 'G',
    quantity: 10,
    unitPrice: 105,
    category: 'Automotive goods'
  }
];

var bigPrice = products.reduce(function(res, item) {
  if (item.quantity * item.unitPrice > 1000) {
    res.push(item.name + ' || ' + item.category);
  }
  
  return res;
}, []);

console.log(bigPrice);

Answer 6

你试着同时做两件事。

• Array#filter返回相同项的数组，或者不依赖于回调的返回值。在这里，它用于区分更小或更高的价格。

• Array#map会为数组的每个项返回一个可能更改的项目，这是一个新的streing而不是对象。

你可以通过首先过滤数组中所需的项目和地图所需的属性来采用功能性方法。

此解决方案使用destructuring assignment作为属性。

＆＃13;

＆＃13;

var products = [{ name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods' }, { name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods' }, { name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods' }, { name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods' }, { name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods' }, { name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade' }, { name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods' }],
    big = products
        .filter(({ quantity, unitPrice }) => quantity * unitPrice > 1000)
        .map(({ name, category }) => [name, category].join(' || '));
        
console.log(big);

＆＃13;

＆＃13;

＆＃13;