关于javascript中的过滤器和数组元素[0]的问题

Question

I'm studying Javascript and I have this example using filter...

I have an object called fruits like that...

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
            }... 

I have a cart with the items of fruits.

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

this is the part that I don't understand...

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

What are doing

[0].price

??? Why I have to get the element [0] if item is going to change every step...

If I have other function...

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

Why in getConstOf

The example is using [0].price and not [item].price ?

Answer 1

You said you had a variable data which is an array. But from your example that looks like your variable data is in fact an object and not an array. And the filter method can only used for array's and not for object.

So what you need to do in order to make the filter method to start filtering is to pierce into your object and grab the "fruits" key as it the array in your example and you can do it like this:

data.fruits then you can filter those objects inside the array of fruits. ie

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

As for your [0].price without it, you will have a return of the array of object that your id parameter matches with the item.id . So [0] you are saying you want the first element in the array to be returned. And now you are returning the object from the array. then pinpoint further you wanted the price so .price will give you the price.

So at the end in example id = 3 then the price would be 45 from your result

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

console.log(getCostOf(3))

Answer 2

filter() returns an array with all items that match the given criteria. In this case item => item.id == id so all items that match the provided id . The [0] after it takes the first matching element and .price will then give you the price of the matching item.

However if you have a lot of products a better option for finding the first product is find() . Which iterates until it finds a match and directly returns it instead of trying to find all matches.

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

Or if you call getCostOf() often you might want to prepare the data structure and index the items based on id in a Map . This does introduce some overhead, but will pay off if you often need to lookup items.

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

This last solution assumes the ids are unique. If they are not, later versions of an item with the same id will override earlier defined versions. Resulting in the last item returned instead of the first one. You also need to update fruits if data.fruits is replaced or items are added/removed from the array.

Answer 3

data.fruits.filter(item => item.id == id) creates an array with just one product, the one with the id given in the parameter. Accessing this array with [0] will get the one product in the array and .price will return its price

Answer 4

因为filter()函数返回一个包含所需产品的数组，而价格是该产品的价格属性。

Answer 5

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

This code can be written as

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

A better way to write it will be to use find since find only returns first match not array.

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