如何基于动态列表从对象数组中批量删列（兼容IE11）

我需要从对象数组里批量删除动态指定的列。已知删除单个列的写法，但不知道怎么处理列名列表的情况，同时还要兼容IE11，尝试修改后出现了colToRemove.has is not a function报错，求解决。

示例数组 #

list = [ 
{ 
  "THEDATE": "12/11/2022",
  "E38": 247, 
  "E40": 212, 
  "N45": 139, 
  "N48": 10 
}, 
{ 
  "THEDATE": "12/10/2022",
  "E38": 47, 
  "E40": 22, 
  "N45": 19, 
  "N48": 66 
}, 
{ 
  "THEDATE": "12/12/2022",
  "E38": 24, 
  "E40": 21, 
  "N45": 39, 
  "N48": 34 
}
]

单个列删除的示例代码 #

let new_list = list.map(function (obj) {
    return {
        "THEDATE": obj.THEDATE,
        "E38": obj.E38,
        "E40": obj.E40,
        "N48": obj.N48
    }
});

问题 #

如果有列名列表（比如var colToRemove = ["N45", "E38"];），该怎么修改代码实现批量删除？

兼容IE11的尝试与报错 #

尝试将箭头函数改为普通函数适配IE11，但出现colToRemove.has is not a function报错，代码如下：

var colToRemove = $(allErrCodes).not(selErrCodes).get();

const altered = list.map(
    function (item) {
        blah = Object.keys(item).reduce(function (acc, key) {
            if (!colToRemove.has(key)) acc[key] = item[key]; return acc;
        }, {})
    }
);

解决方案 #

1. 现代浏览器版本（无需兼容IE11） #

用Array.includes()判断键是否在待删除列表，结合map+reduce实现批量过滤：

var colToRemove = ["N45", "E38"];
let new_list = list.map(function(obj) {
  return Object.keys(obj).reduce(function(acc, key) {
    if (!colToRemove.includes(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
});

2. 兼容IE11的版本 #

IE11不支持Array.includes()，且数组没有has()方法（has是Set的方法），所以换成Array.indexOf()判断，同时修正代码里的其他问题：

var colToRemove = $(allErrCodes).not(selErrCodes).get();

var altered = list.map(function(item) {
  var processedItem = Object.keys(item).reduce(function(acc, key) {
    // indexOf返回-1表示当前键不在待删除列表，保留该键值对
    if (colToRemove.indexOf(key) === -1) {
      acc[key] = item[key];
    }
    return acc;
  }, {});
  // 必须返回处理后的对象，否则map会生成全是undefined的数组
  return processedItem;
});

关键修正点：

• 用colToRemove.indexOf(key) === -1替代colToRemove.has(key)，因为数组没有has方法
• 声明processedItem变量，避免全局变量污染
• map回调必须返回处理后的对象，否则结果数组会全部是undefined

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