Эквивалент оператора распространения в 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 и => я должен заменить.

Прошел через эту и эту ссылку.Но я не мог понять, как заменить Set внутри функции Array.

Answer 1

Если вы ориентируетесь на IE11, так как он не поддерживает функции ES6, такие как "=>", у вас есть 2 варианта:

1) включить polyfill, например babeljs, чтобы код ES6 работал в IE11

• Я не делал этого ранее, но я читал, что это то, что делают полифиллы

ИЛИ

2) замените ваш код ES6 на эквивалентный код ES5

• https://babeljs.io/repl - здесь вы можете получить ES5-эквивалент вашего кода ES6.

Answer 2

Вот простой способ, который может работать на 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 3

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, используя транспилер и полифилы длягенерировать совместимый код;)

PS.У меня нет IE, чтобы проверить, работает ли фильтр, но я уверен, что он работает;в противном случае вы можете удалить дубликаты вручную с помощью простого старого для.

Answer 4

Ваши два синтаксиса, о которых вы спрашиваете, это жирная стрелка для функций стрелок и оператор распространения .Первый можно заменить стандартным выражением функции, а второй - итерацией, используя 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;
}

Поскольку существует базовая поддержка Set, включаяforEach, в Internet Explorer 11 вы можете использовать это без полизаполнения.

Вот пример, который отлично работает в 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 5

Я думаю, что проблема не связана с 'map',
на самом деле вы не должны использовать оператор распространения (...) в IE11.Вы можете проверить это здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax