如何从数组中的 JavaScript 对象中删除属性？答案

【问题标题】：How do I remove properties from JavaScript object in array?如何从数组中的 JavaScript 对象中删除属性？
【发布时间】：2021-09-29 18:10:20
【问题描述】：

假设我有这个数组如下：

[
    {
        "id": 111,
        "productName": "Chicken",
        "variant": 9,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    },
    {
        "id": 112,
        "productName": "Fish",
        "variant": 25,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    }
]

如何删除一些属性，使其最终如下？

[
  {
     "id": 111,
     "variant": 9,
     "extrasSelected": [],
     "qty": "1"
  },
  {
     "id": 112,
     "variant": 25,
     "extrasSelected": [],
     "qty": "1"
  }
]

我需要这样做的原因，因为我需要将newObject 数据发送到我的finalCart，但我需要oldObject 中的productName 才能将其显示在我的视图中。

【问题讨论】：

您可以使用delete operator
是时候学习delete operator和Array.Map()了。

标签： javascript vue.js laravel-8

【解决方案1】：

您可以使用Array.prototype.map

[
    {
        "id": 111,
        "productName": "Chicken",
        "variant": 9,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    },
    {
        "id": 112,
        "productName": "Fish",
        "variant": 25,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    }
].map(({id, variant, extrasSelected, qty}) => ({id, variant, extrasSelected, qty}))

【讨论】：

感谢您的帮助！ :)

【解决方案2】：

有很多方法可以做到这一点。
如果你真的想delete 属性，这里有一种方法：

let array = [
    {
        "id": 111,
        "productName": "Chicken",
        "variant": 9,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    },
    {
        "id": 112,
        "productName": "Fish",
        "variant": 25,
        "variantName": "small",
        "extrasSelected": [],
        "price": 26,
        "qty": "1"
    }
]

array.forEach(obj => {
  delete obj.variantName;  
  delete obj.price;
  delete obj.productName;
});

console.log(array);

【讨论】：

您好，感谢您的帮助！这对我来说是最容易在我的代码中实现的 ;)

【解决方案3】：

只需在 .map 内进行解构

const data = [
  {
    "id": 111,
    "productName": "Chicken",
    "variant": 9,
    "variantName": "small",
    "extrasSelected": [],
    "price": 26,
    "qty": "1"
  },
  {
    "id": 112,
    "productName": "Fish",
    "variant": 25,
    "variantName": "small",
    "extrasSelected": [],
    "price": 26,
    "qty": "1"
  }
];

// 1
const result = data.map(({ id, variant, extrasSelected, qty }) => ({
  id,
  variant,
  extrasSelected,
  qty
}));

// Detailed explanation

// 2
// 2 is same as 1
const result2 = data.map((item => {
  const { id, variant, extrasSelected, qty } = item;
  return { id, variant, extrasSelected, qty };
}));

// 3
// 3 is same as 2
const result3 = data.map((item) => {
  const id = item.id;
  const variant = item.variant;
  const extrasSelected = item.extrasSelected;
  const qty = item.qty;

  return {
    id: id,
    variant: variant,
    extrasSelected: extrasSelected,
    qty: qty
  }
});

console.log(result);

/*

[
  { id: 111, variant: 9, extrasSelected: [], qty: '1' },
  { id: 112, variant: 25, extrasSelected: [], qty: '1' }
]

*/

【讨论】：

您好，谢谢您的详细解释！ :)

【解决方案4】：

上述解决方案的变化。使用Array.Map 和其他参数。

const data = [{
    "id": 111,
    "productName": "Chicken",
    "variant": 9,
    "variantName": "small",
    "extrasSelected": [],
    "price": 26,
    "qty": "1"
  },
  {
    "id": 112,
    "productName": "Fish",
    "variant": 25,
    "variantName": "small",
    "extrasSelected": [],
    "price": 26,
    "qty": "1"
  }
]

const result = data.map(({
  productName,
  variantName,
  ...rest
}) => rest);

console.log(JSON.stringify(result, null, 4));

【讨论】：

您好，感谢您的帮助！增加了新知识：D
不用担心。一切顺利。