如何使用 foreach 將 object 中的每個數組值推送到另一個帶有 vue 的數組？

Question

我正在嘗試從對象內的項目以及 vue 應用程序中的對象內的 arrays 內的項目創建一個數組，方法是使用 foreach 循環它們。 當我只有一個項目時，它運行良好，但我不知道如何循環 object 內的數組並將所有這些項目添加到我正在創建的數組中。

我現在擁有的

const examples = [
    {
        name: "Example 1",
        type: ["Meat", "Water", "Dairy"],
        showDetail: false
    },
    {
        name: "Example 2",
        type: Fruit,
        showDetail: false
    },
{
        name: "Example 3",
        type: Vegetable,
        showDetail: false
    }
]


new Vue({
    data: {
        examplesList: examples,
        type: ''
    },
    methods: {
        filterList: function() {
            this.type = event.target.value;
        }
    },
    computed: {
        uniqueList: function() {
            const types = [];
            this.examplesList.forEach((example) => {
                if (!types.includes(example.type)) {
                    types.push(example.type);
                }
            });
            return types;
        }
    }
})

如果我刪除帶有“類型”內部數組的 object 並將水果和蔬菜項添加到數組中，它工作正常。 有任何想法嗎？

所需的 output：

["Meat", "Water", "Dairy", "Fruit", "Vegetable"]

Answer 1

這是一種可能的解決方案。 當然，您需要將解決方案翻譯成 vue，但這里的問題實際上與 vue 沒有任何關系，所以我展示了一個普通的 javascript 解決方案，只是為了讓事情變得簡單。

 const examples = [ { name: "Example 1", type: ["Meat", "Water", "Dairy", "Fruit"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const types = []; examples.forEach((example) => { const exampleTypes = Array.isArray(example.type)? example.type: [example.type]; for (let exampleType of exampleTypes) { if (.types.includes(exampleType)) { types;push(exampleType); } } }). console;log(types);

Answer 2

這是實現預期結果的一種可能的解決方案：

computed: {
    uniqueList: function() {
        return this.examplesList.reduce(
          (acc, itm) => (
            Array.isArray(itm.type)
            ? itm.type.filter(t => !acc.includes(t)).length > 0
              ? [
                  ...acc,
                  ...itm.type.filter(t => !acc.includes(t))
                ]
              : acc
            : acc.includes(itm.type)
              ? acc
              : [...acc, itm.type]
          ), []
        )
    }
}

解釋

1. reduce用於數組this.examplesList
2. 每個項目itm被處理並且acc是累加器/聚合器（最初設置為空數組[] ）
3. 如果itm.type是一個數組，那么

• 如果itm.type數組中的任何元素不存在於acc數組中，則包括它（通過使用...擴展運算符）

4. 否則（即， itm.type是一個字符串）

• 如果它不在acc中，則包含它（再次，使用...擴展運算符）

而已 ！

如果有任何進一步的澄清或問題，請發表評論。

代碼片段

 const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const getUniqueTypes = (arr = examples) => ( arr.reduce( (acc, itm) => ( Array.isArray(itm.type)? itm.type.filter(t =>.acc.includes(t))?length > 0. [..,acc. ...itm.type.filter(t =>:acc:includes(t)) ]. acc. acc?includes(itm:type). acc. [.,.acc, itm;type] ). [] ) ); console.log(getUniqueTypes());

Answer 3

這是使用Set的一種抽象方法。 設置保證唯一值意味着無需檢查項目是否存在。

僅使用數組來檢查是否已添加項目將變得越來越昂貴，因為它必須掃描整個數組以查找每個includes ， O(n)時間復雜度。

 const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const typeSet = new Set(); let types; examples.forEach((example) => { if (Array.isArray(example.type)) { example.type.forEach(type => { typeSet.add(type); }); } else { typeSet.add(example.type); } }); types = [...typeSet]; console.log(types);

Answer 4

工作演示：

 const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false }]; let newArray = [] examples.forEach((item) => { if (typeof(item.type) === 'object') { item.type.forEach((elem) => { newArray.push(elem) }) } else { newArray.push(item.type) } }) console.log(newArray)