Question

我有一个javascript函数来填充单个表格行的下拉列表，例如：

$scope.possibleOptions = getUniqueValues($scope.yypeOptions, 'yypeOption')
    .map(function(id) {
            return {
                id: id,
                name: id
            });

function getUniqueValues(array, prop) {
    return [...new Set(array.map(item => item[prop]))];
}

其中$scope.yypeOptions是：

$scope.yypeOptions = [{
    yypeOption: "option1"
}, {
    yypeOption: "option2"
}];

我现在必须使其与IE兼容。我必须替换spread和=>运算符。

通过this和this链接进入。但是我对如何在数组功能内部替换Set一无所知。

Answer 1

这是可以在IE上运行的简单方法

data =[{name:"a"}, {name:"a"},{name:"x"}]

function getUniqueValues(array, prop) {
    return array.map(function(item) { return item[prop]; })
    .filter(function (item, index, self){ return self.indexOf(item) === index; }); // distinct
}

console.log(getUniqueValues(data, "name"))

Answer 2

那里的getUniqueValues为您执行两件事；删除重复的元素，并克隆数组。但是，映射已经是该数组的副本，因此您只需要删除重复项即可；您可以使用以下内容：

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

function getUniqueValues(array, prop) {
    function mapper(item) {
        return item[prop];
    }
    return array.map(mapper).filter(onlyUnique);
}

我建议您看一下webpack和babel之类的东西，以便使用最新的JS并通过使用transpiler和polyfills生成兼容的代码来在IE上工作；）

PS。我现在没有IE来测试过滤器是否有效，但是我很确定它可以。否则，您可以手工删除旧的重复项。

Answer 3

您要询问的两种语法是arrow functions和spread operator的粗箭头。您可以使用标准函数表达式替换前者，而使用forEach将元素添加到数组的迭代替换后者。另外，您还需要替换Set构造函数，该构造函数从迭代器中对其进行初始化。相反，您需要一个一个地添加元素。

您可以这样编写函数。首先，将所有值添加到集合中，然后从列表中获取值并返回到新数组：

function getUniqueValues(array, prop) {
    // create set
    var set = new Set();
    array.forEach(function (item) {
        set.add(item[prop]);
    });

    // convert set to array
    var result = [];
    set.forEach(function (item) {
        result.push(item);
    });
    return result;
}

由于Internet Explorer 11对Set（包括forEach）具有基本支持，因此您可以在不使用polyfill的情况下使用它。

以下是在Internet Explorer 11中运行良好的示例：

var options = [
    { yypeOption: "option1" },
    { yypeOption: "option2" },
    { yypeOption: "option1" },
    { yypeOption: "option1" },
    { yypeOption: "option3" },
];

function getUniqueValues(array, prop) {
    var set = new Set();
    array.forEach(function (item) {
        set.add(item[prop]);
    });
    var result = [];
    set.forEach(function (item) {
        result.push(item);
    });
    return result;
}

console.log(getUniqueValues(options, 'yypeOption'));

Answer 4

如果您以IE11为目标，则由于它不支持ES6功能（例如“ =>”），因此有2个选项：

1）包含类似babeljs的polyfill，以便ES6代码可在IE11中工作

我以前没有做过，但我读到这是polyfills的作用

OR

2）用等效的ES5代码替换您的ES6代码

https://babeljs.io/repl-在这里您可以获得等效于ES6代码的ES5。

Answer 5

我认为问题与“地图”无关，
实际上，您不应在IE11中使用扩展运算符（...）。您可以在这里检查： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

IE中的等价传播算子-Javascript

5 个答案: