在 IE 中等效的扩展运算符 - Javascript

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 链接。但我无法理解如何在 Array 功能中替换 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 并在 IE 上工作，通过使用 transpiler 和 polyfills 生成兼容的代码;)

附言。我现在没有 IE 来测试过滤器是否有效，但我很确定它可以；否则，您可以使用普通的旧 for 手动删除重复项。

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 功能，您有两种选择：

1) 包含一个类似 babeljs 的 polyfill，以便 ES6 代码在 IE11 中工作

• 我以前没有这样做过，但我读到这就是 polyfill 的作用

或

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