【问题标题】:Remove or push if an Array of values exists in another array of objects in ES6, Javascript如果值数组存在于 ES6、Javascript 中的另一个对象数组中,则删除或推送
【发布时间】:2020-04-14 12:57:06
【问题描述】:

我有一系列带有某些食物细节的对象:

let food = [
    {id: 1, name: 'Peas', comments: ''},
    {id: 2, name: 'Oranges', comments: ''},
    {id: 3, name: 'Bananas', comments: ''},
    {id: 4, name: 'Grapefruits', comments: ''},
    {id: 5, name: 'Apples', comments: ''}
];

第二个数组包含用户可以在多选下拉菜单中选择的所有选定食物 ID:

let selectedFood = [1, 5];

第三个数组是我想根据 selectedFood ID 添加/删除项目的地方 - 现在它应该包括 ID 15

let newFood = [
   {id: 1, name: 'Peas'},
   {id: 5, name: 'Apples'}
]

如果我们选择一种新食物,比如香蕉,那么selectedFood 数组应该如下所示:

let selectedFood = [1, 5, 3];

... 和 newFood 数组:

let newFood = [
   {id: 1, name: 'Peas'},
   {id: 5, name: 'Apples'},
   {id: 3, name: 'Bananas'}
]

如果我们想删除一个项目,假设Peas 从选定的食物中删除它应该从selectedFoodnewFood 数组中删除:

let selectedFood = [5, 3];

let newFood = [
   {id: 5, name: 'Apples'},
   {id: 3, name: 'Bananas'}
]

有什么快速简便的方法吗?我知道我可以在 selectedFood 上执行 forEach 并在 newFood 上查找/过滤,然后根据结果推送/拼接。但是有没有一种简单的 ES6 方法来实现这一点?

更新 #1:

我忘记提到的一件事是,我想保留当前数组而不是创建一个新数组。这样做的原因是,我可能会在删除/添加项目之前更改/添加一些其他值。

【问题讨论】:

    标签: javascript arrays ecmascript-6 javascript-objects


    【解决方案1】:

    使用.filter().includes()

    let food = [
        {id: 1, name: 'Peas', comments: ''},
        {id: 2, name: 'Oranges', comments: ''},
        {id: 3, name: 'Bananas', comments: ''},
        {id: 4, name: 'Grapefruits', comments: ''},
        {id: 5, name: 'Apples', comments: ''}
    ];
    
    let selectedFood = [1, 5, 3];
    
    const result = food.filter(e => selectedFood.includes(e.id));
    
    console.log(result);

    如果您只需要idname 字段,那么最后您可以使用.map()

    我希望这会有所帮助!

    【讨论】:

    • 重要的是像filtermap这样的函数总是创建新的数组。所以不需要修改现有的数组。
    • 谢谢。这实际上是一个很好的方法,对我来说几乎是好事。我忘记提到的一件事是理想情况下我想保留当前数组而不是创建一个新数组。原因是我可能会在删除/添加项目之前更改/添加一些其他值。我已经用这个更新了原来的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-14
    • 1970-01-01
    • 1970-01-01
    • 2019-09-15
    相关资源
    最近更新 更多