Javascript 从对象数组中删除未定义的元素

我有一个对象数组，其中一些对象具有带有值的属性“折扣”，而其中一些对象根本没有该属性。当我在数组中循环时，我想删除所有未定义的元素，因为这给了我一个错误。以下是一些图片，向您展示我的问题：

var数据=[
{
产品：“防尘连身衣”，
url:“”，
图像：“https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d0de4b0edc898c43a14/1443712276073/kimem-dusty-jumpsuit_0358.jpg?format=2500w",
altDesc：“衬衫”，
价格：$299.00，
折扣：$350.00
},
{
产品：“杰基裤”，
url:“”，
图像：“https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d2fe4b0edc898c43b3c/1443712308758/kimem-jacky-bicolor-waist-trousers-navy-black_0374+%28Michelle+Liv%27s+conflicted+copy+2015-08-31%29.jpg？格式=750w“，
altDesc:“裤子”，
价格：$228.00
},
{
产品：“丽莎衬衫”，
url:“”，
图像：“https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d67e4b094d8b81ba47a/1443712364244/kimem-lisa-oversized-shirt-navy_0363.jpg?format=750w",
altDesc：“衬衫”，
价格：$253.00
},
{
产品：“简裙”，
url:“”，
图像：“https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d8fe4b0f1182e35da9a/1443712404868/kimem-long-pleated-skirt-black_0354.jpg?format=750w",
altDesc：“衬衫”，
价格：“$150.00”，
折扣：$263.00
},
];
功能clothingView（项目、索引）{
返回(`
`)
};
var$productContainer=$（'.products'）；
对于（变量i=0；i

*{
保证金：0；
填充：0；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
html{
框大小：边框框；
字体大小：40%；
-webkit字体平滑：亚像素抗锯齿；
}
身体{
字体系列：“卡拉”，无衬线；
字体大小：400；
线高：1.6；
颜色：#222；
}
.产品{
宽度：100%；
显示器：flex；
柔性包装：包装；
}
.商店物品{
宽度：计算值（100%/5）；
保证金：1rem；
位置：相对位置；
显示器：flex；
证明内容：中心；
}
.shop-item\uuu img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.quickview{
宽度：100%；
身高：100%；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐内容：居中对齐；
垫底：2rem；
颜色：#222；
字母间距：0.15雷姆；
文本转换：大写；
不透明度：0；
过渡：全部缓进缓出250ms；
}
.quickview:悬停{
不透明度：1；
}
.quickview\u图标{
字号：1rem；
背景色：rgba（204、204、204、0.9）；
填充：0.7雷姆1雷姆；
自对准：居中；
}
.quickview\u信息{
字号：1.2rem；
自对准：居中；
文本对齐：居中；
}
.quickview\u信息-价格{
字号：1rem；
颜色：rgba（61,61,61,0.6）；
}
.成衣指数{
显示：无；
}
.quickview\u价格-折扣{
左边缘：.5rem；
文字装饰：线条贯通；
}

---

更改模板文字，以便在没有

折扣

属性的情况下，HTML字符串中不包括

quickview\u价格--折扣

span

：

function clothingView(item, index) {
  return (`
    <a href="${item.url}" class="shop-item">
      <img src=${item.image} alt="${item.altDesc}" class="shop-item__img">
      <div class="quickview">
        <span class="quickview__icon">Quick View</span>
        <span class="quickview__info">${item.product}
          <br>
          <span class="quickview__price">${item.price}
          ${ item.discount
             ? `<span class="quickview__price--discount">${item.discount}<span>`
             : '' }
          </span>
        </span>
        <span class="clothing-index">${index}</span>
      </div>
    </a>`)
};

---

更改模板文字，以便在没有

折扣

属性的情况下，HTML字符串中不包括

quickview\u价格--折扣

span

：

function clothingView(item, index) {
  return (`
    <a href="${item.url}" class="shop-item">
      <img src=${item.image} alt="${item.altDesc}" class="shop-item__img">
      <div class="quickview">
        <span class="quickview__icon">Quick View</span>
        <span class="quickview__info">${item.product}
          <br>
          <span class="quickview__price">${item.price}
          ${ item.discount
             ? `<span class="quickview__price--discount">${item.discount}<span>`
             : '' }
          </span>
        </span>
        <span class="clothing-index">${index}</span>
      </div>
    </a>`)
};

但是您的代码正在删除所有“衣服项目”，我只想从没有折扣属性的对象中删除未定义的项目，因此当我悬停时，我不会在我的项目上看到未定义的项目。请参见编辑，您必须更改模板文字-如果对象具有

折扣

属性，包括

quickview\u价格-折扣，否则不要包括它谢谢你，这是完美的，正是我们想要的。顺便说一句，你能提供我从你的原始答案的代码，我认为这将是有用的，我为这个应用程序的另一个功能。稍后，我想将这些对象分成几个部分（底部、附件等）。您可以单击“编辑”元素查看过去的修订。太好了，非常感谢您的帮助，非常感谢！但是您的代码正在完全删除“衣服项目”，我只想从没有折扣属性的对象中删除未定义的，因此当我悬停时，我不会在我的项目上看到未定义的。请参见编辑，您必须更改模板文字-如果对象具有
折扣
属性，包括
quickview\u价格-折扣，否则不要包括它谢谢你，这是完美的，正是我们想要的。顺便说一句，你能提供我从你的原始答案的代码，我认为这将是有用的，我为这个应用程序的另一个功能。稍后，我想将这些对象分成几个部分（底部、附件等）。您可以单击“编辑”元素查看过去的修订。太好了，非常感谢您的帮助，非常感谢！