Array.filter не возвращает точно свойства объекта?

Question

Array.filter не возвращает точно свойства объекта?

1

Я пытаюсь понять некоторые встроенные методы массива. Вот мой код для небольшой функции, я хочу отображать "имя" и "категорию" каждого элемента, который хранится в инвентаре с общим значением больше 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;

Alex Le 12 июнь 2018, в 10:01

Источник

0

Фильтр возвращает массив объектов, которые соответствуют критериям (то есть обратный вызов возвращает истину-y), а не результат обратного вызова. См. Например, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .
jonrsharpe 12 июнь 2018, в 07:26
0

Array.filter() ожидает, что вы Array.filter() либо true, либо false, в зависимости от того, должен ли элемент оставаться или нет. То, что вы пытаетесь сделать, это либо Array.foEach() либо Array.map() .
Shilly 12 июнь 2018, в 07:27

Теги:

javascript

arrays

methods

filter

6 ответов

0

Вы пытаетесь сделать две вещи одновременно.

Array#filter возвращает массив из тех же элементов или не зависит от возвращаемого значения обратного вызова. Здесь он используется для дифференциации между меньшими или более высокими ценами.
Array#map возвращает для каждого элемента массива возможный измененный элемент, который здесь представляет собой новую полосу вместо объекта.

Вы можете использовать функциональный подход, отфильтровывая сначала нужные элементы массива и отображая нужные свойства.

Это решение использует ~~назначение~~ destructuring для свойств.

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);

Nina Scholz 12 июнь 2018, в 06:33

0

Все, что вы возвращаете к функции, переданной 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);

CertainPerformance 12 июнь 2018, в 05:55

0

filter создаст новый массив со всеми элементами, возвращающими истинное значение из функции. Вы можете использовать filter а затем map:

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

Tholle 12 июнь 2018, в 05:18

0

Используйте Array#reduce для 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);

31piy 12 июнь 2018, в 05:06

0

Я также был понижен, но я написал правильный ответ. Таким образом, +1 за ваш правильный ответ тоже.
Mihai Alexandru-Ionut 12 июнь 2018, в 07:36

0

Вы можете использовать метод 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);

Mihai Alexandru-Ionut 12 июнь 2018, в 04:55

Ещё вопросы

Фильтр возвращает массив объектов, которые соответствуют критериям (то есть обратный вызов возвращает истину-y), а не результат обратного вызова. См. Например, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .
Array.filter() ожидает, что вы Array.filter() либо true, либо false, в зависимости от того, должен ли элемент оставаться или нет. То, что вы пытаетесь сделать, это либо Array.foEach() либо Array.map() .
Я также был понижен, но я написал правильный ответ. Таким образом, +1 за ваш правильный ответ тоже.

Shubham Khatri · Accepted Answer · 2018-06-12T06-24-00.000Z

функция фильтра не возвращает пользовательское значение, вам нужно использовать map and filter вместе или, наоборот, 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.map(function(item) {
if (item.quantity * item.unitPrice > 1000) {
    return item.name + ' || ' + item.category;
}
}).filter(item => typeof item !== 'undefined');

console.log(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) {
   return (item.quantity * item.unitPrice) > 1000
}).map(item => item.name + ' || ' + item.category);

console.log(bigPrice)