Параметр rest будет собирать отдельные параметры в массив, когда вы используете точки в определении параметра функции, в то время как оператор распространения расширяет массив на отдельные параметры при использовании точек в function call.
Когда вы когда-нибудь захотите собрать отдельные параметры в массив, вы должны использовать оператор rest в определении параметра функции.
let sum = (...numbers) => {
let result = 0;
numbers.forEach(function(n){
result += n;
});
return result;
};
console.log(sum(1,2,3));
Работа с объектом arguments внутри вложенной функции становится действительно сложной, давайте рассмотрим ситуацию ниже, когда нашей внутренней функции требуется доступ к переданному объекту arguments.
Если нашему inner function filterNumbers требуется доступ к аргументам, он должен быть сохранен выше в variable, прежде чем передавать его дальше, поскольку каждая функция имеет свой собственный объект arguments, который представляет собой массив, подобный объекту.
function sumOnlyNumbers() {
var args = arguments;
var numbers = filterNumbers();
return numbers.reduce((sum, element) => sum + element);
function filterNumbers() {
return Array.prototype.filter.call(args,
element => typeof element === 'number'
);
}
}
sumOnlyNumbers(1, 'Hello', 5, false);
Подход работает, но слишком многословен. var args = arguments можно опустить, а Array.prototype.filter.call(args) можно преобразовать в args.filter() с помощью параметра rest.
function sumOnlyNumbers(...args) {
var numbers = filterNumbers();
return numbers.reduce((sum, element) => sum + element);
function filterNumbers() {
return args.filter(element => typeof element === 'number');
}
}
sumOnlyNumbers(1, 'Hello', 5, false); // => 6
Когда вы когда-нибудь захотите расширить массив на отдельные параметры, вы должны использовать оператор распространения в вызове функции.
let sum = (a,b,c) => {
return a + b + c;
};
console.log(sum(...[1,2,3]));
В приведенном выше коде оператор распространения будет “spread” массивом из трех значений parameters a, b, and c. Оператор spread также может расширять массив для создания отдельных элементов в литерале array.
var a = [4, 5, 6];
var b = [1, 2, 3, ...a, 7, 8, 9]
console.log(b);
Улучшенный вызов функций в ES6
ES5 предоставляет .apply() метод для объекта функции для решения этой проблемы. К сожалению, у этого метода есть 3 проблемы:
- Необходимо указать вручную контекст вызова функции
- Невозможно использовать в вызове конструктора
- Более короткое решение предпочтительнее
Кажется неуместным указывать во второй раз .apply() страны контекста, делая его более подробным.
let countries = ['India', 'USA'];
let otherCountries = ['China', 'Japan'];
countries.push.apply(countries, otherCountries);
console.log(countries); // => ['India', 'USA', 'China', 'Japan']
Оператор spread заполняет аргументы вызова function значениями из array. Давайте улучшим приведенный выше пример с помощью оператора распространения:
let countries = ['India', 'USA'];
let otherCountries = ['China', 'Japan'];
countries.push(...otherCountries);
console.log(countries); // => ['Moldova', 'Ukraine', 'USA', 'Japan']
Оператор Spread настраивает аргументы вызова конструктора из массива, что немного сложно и сложно напрямую при использовании .apply().
class Actor {
constructor(name, country) {
this.name = name;
this.country = country;
}
getDescription() {
return `${this.name} leads ${this.country}`;
}
}
var details = ['RajiniKanth the Great', 'India'];
var Alexander = new Actor(...details);
console.log(Alexander.getDescription()); // => 'RajiniKanth the Great leads India'
Более того, вы можете комбинировать несколько операторов spread и обычных аргументов в одном вызове. В следующем примере удаляются существующие элементы из массива, а затем добавляется другой массив и элемент:
var numbers = [1, 2];
var evenNumbers = [4, 8];
const zero = 0;
numbers.splice(0, 2, ...evenNumbers, zero);
console.log(numbers); // => [4, 8, 0]
Клонировать экземпляр массива:
var words = ['Hi', 'Hello', 'Good day'];
var otherWords = [...words];
console.log(otherWords); // => ['Hi', 'Hello', 'Good day']
console.log(otherWords === words); // => false
otherWords - это клонированная версия массива слов. Обратите внимание, что клонирование происходит только с самим массивом, но не с содержащимися в нем элементами (т.е. это не глубокий клон).
Ссылки: https://dmitripavlutin.com/how-three-dots-changed-javascript/
person
Thalaivar
schedule
15.10.2016
...в конце концов не оператор. - person hippietrail schedule 27.01.2016