Блог

Я изучаю Javascript, и у меня есть этот пример с использованием фильтра…

У меня есть такой объект, называемый фруктами…

 let data = {
        "fruits": [{
        "id": 0,
        "name": "plum",
        "description": "A plum is a purple fruit.",
        "image": "https://cdn.shopify.com/s/files/1/0610/2881/products/cherries.jpg?v=1446676415",
        "price": 220
            }, 
            {
                "id": 1,
                "name": "Apple",
                "description": "An apple is a sweet, edible fruit produced by an apple tree. Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus.",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/265px-Red_Apple.jpg",
                "price": 35
            },
            {
                "id": 2,
                "name": "Banana",
                "description": "A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called plantains, distinguishing them from dessert banana",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Bananas_white_background_DS.jpg/320px-Bananas_white_background_DS.jpg",
                "price": 12
            },
            {
                "id": 3,
                "name": "Grapes",
                "description": "A small bunched fruit used to make wine",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Table_grapes_on_white.jpg/320px-Table_grapes_on_white.jpg",
                "weight": 0.1,
                "price": 45
            }... 
 

У меня есть тележка с фруктами.

 cart = [0, 3, 4, 5, 3]
 

это та часть, которую я не понимаю…

 const getCostOf = id => (data.fruits.filter(item => item.id == id))[0].price
 

Что ты делаешь

 [0].price
 

???
Почему я должен получить элемент [0], если элемент будет меняться на каждом шаге…

Если у меня есть другая функция…

 const getTotal = cart => {
  let total = 0;
  cart.map(item => total  = getCostOf(item))
  return total;
}
 

Почему в getConstOf

Пример используется [0].price и не [item].price используется ?

Вы сказали, что у вас есть переменные данные, которые являются массивом. Но из вашего примера видно, что ваши переменные данные на самом деле являются объектом, а не массивом. И метод фильтра может использоваться только для массива, а не для объекта.

Итак, что вам нужно сделать для того, чтобы метод фильтра начал фильтрацию, — это проникнуть в ваш объект и захватить ключ «фрукты», как в массиве в вашем примере, и вы можете сделать это следующим образом:

data.fruits затем вы можете отфильтровать эти объекты внутри массива фруктов. т.е.

 const getCostOf = id => data.fruits.filter(item => item.id == id))[0].price
 

Что касается вашего [0].price без него, у вас будет возврат массива объектов id , с которым совпадает ваш параметр item.id . Итак, [0] вы говорите, что хотите, чтобы был возвращен первый элемент в массиве. И теперь вы возвращаете объект из массива. затем укажите, какую цену вы хотели получить, чтобы .price получить цену.

Так что в конце примера id = 3, тогда цена будет 45 от вашего результата

 const getCostOf = id => data.fruits.filter(item => item.id === id)[0].price

console.log(getCostOf(3))
 

filter() возвращает массив со всеми элементами, соответствующими заданным критериям. В этом случае item => item.id == id поэтому все предметы, соответствующие предоставленным id . [0] После того, как он примет первый соответствующий элемент, а .price затем сообщит вам цену соответствующего элемента.

Однако, если у вас много продуктов, лучшим вариантом для поиска первого продукта является find() . Который повторяется до тех пор, пока не найдет совпадение и не вернет его напрямую, вместо того, чтобы пытаться найти все совпадения.

 const getCostOf = id => data.fruits.find(item => item.id == id).price;
 

Или, если вы getCostOf() часто звоните, вам может потребоваться подготовить структуру данных и проиндексировать элементы на основе id в a Map . Это действительно накладывает некоторые накладные расходы, но окупится, если вам часто нужно искать элементы.

 const fruits = new Map(data.fruits.map(item => [item.id, item]));
const getCostOf = id => fruits.get(id).price;
 

Это последнее решение предполагает, что идентификаторы уникальны. Если это не так, более поздние версии элемента с тем же идентификатором будут переопределять более ранние определенные версии. В результате возвращается последний элемент вместо первого. Вам также необходимо обновить fruits , если data.fruits он заменен или элементы добавлены/удалены из массива.

Потому filter() что функция возвращает массив с требуемым товаром, а цена является свойством цены для этого товара.

 const getCostOf = id => (data.fruits.filter(item => item.id == id))[0].price
 

Этот код может быть написан следующим образом

  const getCostOf = id => { 
let fruits  = data.fruits.filter(item => item.id == id)) // filter will array return an array;
let fruit  = fruits[0]; // selecting first match
return fruit.price;
}
 

Лучшим способом написать его будет использовать find, так как find возвращает только первое совпадение, а не массив.

  const getCostOf = id => data.fruits.find(item => item.id == id).price
 

data.fruits.filter(item => item.id == id) создает массив только с одним продуктом, тем id , который указан в параметре. Доступ к этому массиву с [0] помощью получит один продукт в массиве и .price вернет его цену