JavaScript中的嵌套陣列問題

我使用 localForage 來獲取離線存盤的資料。

localforage.iterate(function(value, key, iterationNumber) {

console.log([key, value]);  });

我得到一個陣列

Array["MyArray",
  {
      "isLoaded":true,
      "items":
      [{
          "id":"4",
          "name":"ProductA",
          "manufacturer":"BrandA",
          "quantity":1,
          "price":"25"
      },{
          "id":"1",
          "name":"ProductB",
          "manufacturer":"BrandB",
          "quantity":5,
          "price":"20"
      }],
      "coupons":null
  }
 ]

我需要從陣列中加載所有產品名稱及其數量。

例如：

產品A x 1

產品B x 5

const result = [key, value].map((item) => `${item.name} x ${item.quantity}`);

這是行不通的。

Array [ "undefined x undefined", "undefined x undefined" ]

uj5u.com熱心網友回復：

我明白了。您應該了解陣列方法，例如 map、filter、reduce。干得好...

const items = [{
              "id":"4",
              "name":"ProductA",
              "manufacturer":"BrandA",
              "quantity":1,
              "price":"25"
          },{
              "id":"1",
              "name":"ProductB",
              "manufacturer":"BrandB",
              "quantity":5,
              "price":"20"
          }];
          
const result = items.map((item) => `${item.name} x ${item.quantity}`);
console.log(result);

uj5u.com熱心網友回復：

我想我理解這個問題是說輸入是一個物件陣列，每個物件都包含一個專案陣列。關鍵是嵌套陣列需要嵌套回圈。所以，我們迭代物件和它們的內部專案（見下面注釋的//outer loop行// inner loop）

此外，從背景關系中猜測，看起來 OP 旨在為每個物件組裝一種發票。首先是一個演示，（請參閱下面的簡化版本，完全符合 OP 的要求）......

const addInvoice = obj => {
  let total = 0;
  // inner loop
  obj.invoice = obj.items.map(i => {
    let subtotal = i.quantity * i.price;
    total  = subtotal
    return `name: ${i.name}, qty: ${i.quantity}, unit price: ${i.price}, subtotal: ${subtotal}`
  });
  obj.invoice.push(`invoice total: ${total}`);
}

const objects = [{
  "isLoaded": true,
  "items": [{
    "id": "4",
    "name": "ProductA",
    "manufacturer": "BrandA",
    "quantity": 1,
    "price": "25"
  }, {
    "id": "1",
    "name": "ProductB",
    "manufacturer": "BrandB",
    "quantity": 5,
    "price": "20"
  }],
  "coupons": null
}]

// outer loop
objects.forEach(addInvoice);
console.log(objects);

如果我對目標的猜測太過分了，只需從invoice函式中洗掉單價、小計和總行...

const objects = [{
  "isLoaded": true,
  "items": [{
    "id": "4",
    "name": "ProductA",
    "manufacturer": "BrandA",
    "quantity": 1,
    "price": "25"
  }, {
    "id": "1",
    "name": "ProductB",
    "manufacturer": "BrandB",
    "quantity": 5,
    "price": "20"
  }],
  "coupons": null
}]

const summaryString = obj => {
  return obj.items.map(i => `${i.name}, ${i.quantity}`);
}
const strings = objects.map(summaryString);
console.log(strings);

uj5u.com熱心網友回復：

這是實作所需結果的一種可能方法：

const getProductsAndQuantity = ([k , v] = arr) => (
    v.items.map(it => `${it.name} x ${it.quantity}`)
);

如何在問題的背景關系中使用它？

localforage.iterate(function(value, key, iterationNumber) {
  console.log([key, value]);
  const val2 = JSON.parse(value);
  if (val2 && val2.items && val2.items.length > 0) { 
      console.log(val2.items.map(it => `${it.name} x ${it.quantity}`)
  };
});

怎么運行的？

1. 在問題中列出的引數中，即value, key, iterationNumber，只有value是必需的。
2. 上述方法接受鍵值對作為console.log([key, value]);與問題中的緊密匹配的陣列（2個元素）
3. 它僅使用v（這是一個物件）。上v，它訪問prop命名的items，這items是一個陣列。
4. 接著，.map通過所述陣列用于迭代并回傳每個產品的name和quantity在期望的/預期的格式。

在代碼片段上進行測驗：

const arr = [
  "MyArray",
  {
    "isLoaded": true,
    "items": [{
      "id": "4",
      "name": "ProductA",
      "manufacturer": "BrandA",
      "quantity": 1,
      "price": "25"
    }, {
      "id": "1",
      "name": "ProductB",
      "manufacturer": "BrandB",
      "quantity": 5,
      "price": "20"
    }],
    "coupons": null
  }
];

const getProductsAndQuantity = ([k, v] = arr) => (
  v.items.map(
    it => `${it.name} x ${it.quantity}`
  )
);

console.log(getProductsAndQuantity());

標籤：

上一篇：如何在反應中使用按鈕將陣列放入另一個陣列

下一篇：嘗試從派生結構(C )繼承時出現“無效的基類”錯誤