如何在Javascript中使用多个对象拆分数组的索引

Question

我有多种水果，数量和价格固定（50）。 水果是从下拉菜单中选择的。 按下回车按钮后，javascript 代码运行，其中水果连同其数量和价格被推入一个数组。

<select id="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

<button id="opt" onclick="Fruit()">Enter</button>

我设法将它们存储在一个数组中：

var storeArr = [];
quantity = 10;
selectItem = false;

function Fruit() {
    var selectedFruit;
    selectItem = document.getElementById("fruit");
    selectedFruit = selectItem.options[selectItem.selectedIndex].value;

    storeArr.push([selectedFruit,quantity,50]);
    quantity = quantity + 5;
    printArray();
}

function printArray(){
    const iterator = storeArr.values();
        for (const value of iterator) {
            console.log("values: "+value);
        }
}

结果就像我想存储这些项目一样。 从下拉列表中进行多项选择后说苹果、香蕉、苹果等，输出如下所示：

values: apple, 10, 50
values: banana, 15, 50
values: apple, 20, 50

现在我想根据变量“selectedFruit”访问索引 1 (banana, 15, 50) 并拆分这些值。 我想不出办法做到这一点。 任何人都可以帮忙吗？

Answer 1

更新 2：由于 OP 希望保留结构

storeArr: [
    ['apple', 10, 50]
    ['banana', 15, 50]
    ['orange', 20, 50]
]

向代码中添加函数

function getFruitDetails(fruit) {
    for(var i = 0; i < storeArr.length; i++) {
        if (storeArr[i][0] === fruit) {
            return storeArr[i]
        }
    }
}

并像这样使用

getFruitDetails(selectedFruit)[1]或getFruitDetails(selectedFruit)[2]

更新：根据 OP 最近的评论，您可以将storeArr更改为对象，而不是数组。 该对象的结构应如下所示

storeArr: {
    "apple": [10, 50],
    "banana": [15, 50],
    "orange": [20, 50]
}

和访问像storeArr[selectedFruit][0]等等......

原来的：

但是，看起来您在数组中有一个数组，可以像storeArr[1][0] 、 storeArr[1][1]等访问它......（对于banana ）

如果您的数组看起来像，则上述内容将起作用

storeArr: [
    ['apple', 10, 50]
    ['banana', 15, 50]
    ['orange', 20, 50]
]

更新 3：虽然不推荐，但正如 OP 所要求的

你可以更换

storeArr.push([selectedFruit,quantity,50]);

在你的代码中

var recentIndex = storeArr.push([selectedFruit, quantity, 50]) - 1

访问数组中最后一个（最近）推送的元素的索引。

但是如果你正在考虑banana, 15, 50作为一个字符串

storeArr: [
    ["apple, 10, 50"]
    ["banana, 15, 50"]
    ["orange, 20, 50"]
]

以下应该工作：

var items = storeArr[1].split(', ');

items[0]将是banana ， items[1]将是20等等......

Answer 2

您的storeArr看起来像这样[['apples', 10, 50], ['banana', 15, 50]] 。 它是一个数组数组。 因此，为了访问索引 1 处的项目数量，您必须执行storeArr[1][1] 。

一个建议是对水果功能进行一些修改

function Fruit() {
    var selectedFruit;
    selectItem = document.getElementById("fruit");
    selectedFruit = selectItem.options[selectItem.selectedIndex].value;

    storeArr.push({selectedFruit, quantity,fixedPrice: 50});
    quantity = quantity + 5;
    printArray();
}

请注意，我们将一个对象推送到数组中，因此您可以访问所需项目的数量，如storeArr[1].quantity

storeArr现在将采用这种形式，

[
    {
        selectedFruit: 'apple',
        quantity: 10,
        fixedPrice: 50
    },
    {
        selectedFruit: 'banana',
        quantity: 15,
        fixedPrice: 50
    },
    {
        selectedFruit: 'orange',
        quantity: 20,
        fixedPrice: 50
    }
]

如果你想根据水果的名字访问一个对象，你可以使用find

const banana = storeArr.find(obj => obj.selectedFruit === 'banana');

它是使用banana.quantity的数量

Answer 3

如果我理解正确，您可以将值放在对象中。 这样你就可以有如下内容：

[{
    fruit:'apple', 
    quantity: 4, 
    price: 50
},
{
    fruit:'banana'
    quantity: 1,
    price: 50
}]

例如，

function printArray(){
    const iterator = storeArr.values();
    const arrayOfObjects = []
        for (const value of iterator) {
            const splitFruitString = value.split(',')
            arrayOfObjects.push({
                fruit: splitFruitString[0],
                quantity: splitFruitString[1],
                price: splitFruitString[2]
            })
        }
}
console.log(arrayOfObjects);

Answer 4

为什么不存储对象数组而不是数组数组。

目前你的数组看起来像这样：

[
  [
    'apple',
    10,
    50,
  ],
  [
    'banana',
    15,
    50,
  ],
]

你说你很难访问每组值。 虽然您可以执行类似storeArr[0][1]来获取第一个水果的数量，但如果您为每个水果存储一个对象，则更明显，如下所示：

[
  {
    name: 'apple',
    quantity: 10,
    price: 50,
  },
  {
    name: 'banana',
    quantity: 15,
    price: 50,
  },
]

这样，您可以像这样访问每个第二个水果的数量：

storeArr[1].quantity

这比使用二维数组更清楚。