如何在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

這比使用二維數組更清楚。