JavaScript中如何处理数组内对象：筛选属性并交换字段

需求说明 #

需要对包含对象的数组执行以下操作：

• 交换两个对象的vendor_pkt_name属性值
• 修改第二个对象的djpw_kcu_induk属性为"432"
• 删除所有对象中不需要的属性：operational_hour_start、city、djpw_provinsi、djpw_latitude

原始数据 #

const data = [{
    "id_pemasangan_mesin": 0.2879244882244172,
    "wsid": "3Y9W",
    "location_2nd": "Bekasi Timur barat",
    "branch": "0998-SLA. JAKARTA",
    "vendor_pkt_name": "PT NCR INDONESIA",
    "djpw_kcu_induk": "244 - Kalimalang",
    "lokasi_pengambilan_kartu": "0393 - KARTASURA",
    "operational_hour_start": null,
    "city": "Kotamadya Bekasi",
    "djpw_provinsi": "Jawa Barat",
    "djpw_latitude": "-6.248329"
},
{
    "id_pemasangan_mesin": 0.9599194420299093,
    "wsid": "0XPR",
    "location_2nd": "Bekasi Timur barat",
    "branch": "0998-SLA. JAKARTA",
    "vendor_pkt_name": "PT Wakwaw INDONESIA",
    "djpw_kcu_induk": "333",
    "lokasi_pengambilan_kartu": "7735 - THE PARK",
    "operational_hour_start": null,
    "city": "Kotamadya Bekasi",
    "djpw_provinsi": "Jawa Barat",
    "djpw_latitude": "-6.248329"
}];

期望结果 #

[{
    "id_pemasangan_mesin": 0.2879244882244172,
    "wsid": "3Y9W",
    "location_2nd": "Bekasi Timur barat",
    "branch": "0998-SLA. JAKARTA",
    "vendor_pkt_name": "PT Wakwaw INDONESIA",
    "djpw_kcu_induk": "244 - Kalimalang",
    "lokasi_pengambilan_kartu": "0393 - KARTASURA"
},
{
    "id_pemasangan_mesin": 0.9599194420299093,
    "wsid": "0XPR",
    "location_2nd": "Bekasi Timur barat",
    "branch": "0998-SLA. JAKARTA",
    "vendor_pkt_name": "PT NCR INDONESIA",
    "djpw_kcu_induk": "432",
    "lokasi_pengambilan_kartu": "7735 - THE PARK"
}]

实现方案 #

方案1：创建新数组（推荐，不修改原数据） #

使用Array.prototype.map()遍历数组，通过解构赋值保留需要的属性，同时修改目标属性值。这种方式不会改变原始数据，避免副作用。

// 提取两个对象的vendor_pkt_name用于交换
const [firstVendor, secondVendor] = [data[0].vendor_pkt_name, data[1].vendor_pkt_name];

// 处理数组生成新结果
const processedData = data.map((item, index) => {
    // 解构跳过不需要的属性，保留其余属性
    const {
        operational_hour_start,
        city,
        djpw_provinsi,
        djpw_latitude,
        ...restProps
    } = item;

    // 根据索引修改对应属性
    if (index === 0) {
        return { ...restProps, vendor_pkt_name: secondVendor };
    } else if (index === 1) {
        return { ...restProps, vendor_pkt_name: firstVendor, djpw_kcu_induk: "432" };
    }
    return restProps; // 处理更多元素的兜底逻辑
});

console.log(processedData);

方案2：直接修改原数组 #

如果允许修改原始数据，可以直接操作对象属性，配合delete关键字删除不需要的属性：

// 交换两个对象的vendor_pkt_name
const tempVendor = data[0].vendor_pkt_name;
data[0].vendor_pkt_name = data[1].vendor_pkt_name;
data[1].vendor_pkt_name = tempVendor;

// 修改第二个对象的djpw_kcu_induk
data[1].djpw_kcu_induk = "432";

// 定义需要删除的属性列表
const keysToRemove = ['operational_hour_start', 'city', 'djpw_provinsi', 'djpw_latitude'];

// 遍历数组删除每个对象的指定属性
data.forEach(item => {
    keysToRemove.forEach(key => delete item[key]);
});

console.log(data);

内容的提问来源于stack exchange，提问作者Ragil Pratama