js 两个数组中的指定参数(id)相同,为某个对象设置disabled属性

在JavaScript中,如果想要比较两个数组并根据它们的id属性来设置某个对象的disabled属性为true,你可以使用几种不同的方法。这里我将介绍几种常用的方法:

方法1:使用循环和条件判断

const array1 = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
];
 
const array2 = [
    { id: 2, name: 'Item 2' },
    { id: 4, name: 'Item 4' }
];
 
// 遍历array1,检查id是否存在于array2中
array1.forEach(item1 => {
    const found = array2.some(item2 => item2.id === item1.id);
    if (found) {
        item1.disabled = true;
    }
});
 
console.log(array1);

方法2:使用Map或Set提高效率

如果需要多次进行这样的比较,使用Map或Set可以提高效率。

const array1 = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
];
 
const array2 = [
    { id: 2, name: 'Item 2' },
    { id: 4, name: 'Item 4' }
];
 
// 将array2的id存储到Set中,以便快速查找
const idsSet = new Set(array2.map(item => item.id));
 
array1.forEach(item => {
    if (idsSet.has(item.id)) {
        item.disabled = true;
    }
});
 
console.log(array1);

方法3:使用findIndex提高可读性 

如果想要一个更简洁的解决方案,可以使用findIndex,虽然它在性能上可能不如someSet,但在某些情况下代码更易读。

const array1 = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
];
 
const array2 = [
    { id: 2, name: 'Item 2' },
    { id: 4, name: 'Item 4' }
];
 
array1.forEach(item => {
    if (array2.findIndex(item2 => item2.id === item.id) !== -1) {
        item.disabled = true;
    }
});
 
console.log(array1);

方法4:使用filter和map组合(如果只需要标记)

如果只是想标记哪些对象存在于另一个数组中,而不直接修改原数组,可以使用filtermap

const array1 = [...array1]; // 复制原数组以避免修改原数组,除非你愿意这样做。
const markedArray = array1.map(item => {
    if (array2.some(item2 => item2.id === item.id)) {
        return { ...item, disabled: true }; // 使用扩展运算符创建新对象以避免直接修改原对象。
    } else {
        return item; // 不修改原对象。
    }
});
console.log(markedArray); // 这将显示带有disabled属性的新数组。

选择哪种方法取决于具体业务需求和性能考虑。对于大多数实际应用场景,使用SetMap的方法通常是最快和最清晰的。特此记录一下~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aotman_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值