如何修改基于Array.from的数组去重代码以兼容IE浏览器？

问题根源 #

这个SCRIPT438报错是因为IE浏览器完全不支持ES6新增的Set对象和Array.from()方法——IE的JS引擎只兼容到ES5标准，根本识别不了这些语法。

兼容IE的修改方案 #

我们可以用ES5原生语法实现数组去重，完全不需要依赖ES6特性，同时保证效率和原逻辑的一致性：

let emailsListArray = ['reece@gmail.com', 'someone@gmail.com', 'another@gmail.com', 'reece@gmail.com', 'person@gmail.com', 'another@gmail.com'];

Array.prototype.unique = function() {
    var result = [];
    var seen = {};
    // 遍历原数组，用对象记录已出现的元素
    for (var i = 0; i < this.length; i++) {
        var email = this[i];
        // 用hasOwnProperty确保只检查我们自己添加的键，避免和原型属性冲突
        if (!seen.hasOwnProperty(email)) {
            seen[email] = true;
            result.push(email);
        }
    }
    return result;
};

emailsListArray = emailsListArray.unique();
console.log(emailsListArray);

为什么这么改？ #

• 完全基于ES5语法，所有IE版本（IE8及以上）都能正常运行
• 用对象seen做哈希表，去重的时间复杂度是O(n)，效率很高
• 保留了原数组中元素的首次出现顺序，和你原来用Set实现的行为完全一致

可选：用jQuery简化实现 #

既然你已经引入了jQuery，也可以用它的工具方法来写更简洁的兼容代码：

Array.prototype.unique = function() {
    return $.grep(this, function(element, index) {
        // 只保留数组中首次出现的元素
        return $.inArray(element, this) === index;
    }, this);
};

小提醒 #

直接扩展Array.prototype虽然方便，但如果其他脚本也定义了unique方法，可能会产生冲突。更稳妥的方式是写成独立函数：

function uniqueArray(arr) {
    var result = [];
    var seen = {};
    for (var i = 0; i < arr.length; i++) {
        var email = arr[i];
        if (!seen.hasOwnProperty(email)) {
            seen[email] = true;
            result.push(email);
        }
    }
    return result;
}

// 使用时直接调用函数：
emailsListArray = uniqueArray(emailsListArray);

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