Автор оригинала: Shadab Ansari.
Вступление
В этом руководстве мы рассмотрим одну из мощных особенностей спецификации ES6 JavaScript – оператора распространения. Хотя синтаксис прост, иногда реализация запутана, если вы не понимаете его должным образом. В этом руководстве мы демистифицируем эти три точки ... JavaScript, который делает удивительные вещи с повторными платами.
Использование оператора распространения
Существуют разные употребления оператора распространения и каждой цели использования для решения различного утверждения о проблеме.
Расширение массивов
Мы можем использовать оператор SPRECT на ем.
Для примера:
let greet = ['Hello', 'World']; console.log(greet); // Without spread operator console.log(...greet); // Using spread operator
Если мы запустим этот код, мы увидим следующее:
['Hello', 'World'] Hello World
Вы, должно быть, заметили, что во втором случае (с оператором распространения) содержимое приветствовать Список был расширен и выброшен из массива.
Иногда мы можем почувствовать необходимость преобразовать Строка в список персонажей. Мы можем использовать оператор Spread для этого использования:
let greetings = "hello"; let chars = [...greetings]; console.log(chars);
Если мы запустим этот код, мы будем приветствовать:
[ 'h', 'e', 'l', 'l', 'o' ]
Эти примеры могут не убедить вас от полезности, которые предлагает этот оператор. В этом имени давайте возьмем некоторые реальные проблемы, которые могут быть решены с операторами распространения.
Сочетание массивов
Давайте воспользуемся тем фактом, что теперь мы можем расширить массив с использованием оператора распространения. Допустим, у нас есть списки подписчиков из двух разных источников, и мы хотим объединить оба этих источника, так и сделать один список подписчиков:
let blog1Subscribers = ['[email protected]', '[email protected]']; let blog2Subscribers = ['[email protected]', '[email protected]', '[email protected]']; let subscribers = [...blog1Subscribers, ...blog2Subscribers]; console.log(subscribers);
Если мы запустим вышеуказанный код, мы получим один список повторных документов. Это было возможно, как и как ... blog1subscribers и ... blog2subscribers были распространены и [] Выступил в качестве «приемника», который эффективно объединил элементы распространения в один список предметов.
Примечание: Оператор распространения нужен приемник, чтобы поставить расширенное значение в. Если вы опускаете приемник, это бросит ошибку.
Мы также можем использовать оператор распространения внутри Array.push () Способ нажимать содержимое одного массива в другое:
let arr1 = ['John', 'Sofia', 'Bob']; let arr2 = ['Julia', 'Sean', 'Anthony']; arr1.push(...arr2); console.log(arr1);
Если мы запустим этот код, мы увидим следующий вывод:
[ 'John', 'Sofia', 'Bob', 'Julia', 'Sean', 'Anthony' ]
Копирование массивов и объектов
В JavaScript каждая не примитивная сущность является Объект , что означает, что массивы также являются объектами. Вы можете знать, что объекты копируются как ссылочный тип:
let arr1 = ['John', 'Sofia', 'Bob'];
let arr2 = arr1;
console.log(arr2);
arr1.push('Sally'); // Change arr1
console.log(arr2);
[ 'John', 'Sofia', 'Bob' ] [ 'John', 'Sofia', 'Bob', 'Sally' ]
Как и ожидалось, значения элементов в массиве не были скопированы, только ссылка на них. Мы можем легко решить эту проблему с оператором распространения:
let arr1 = ['John', 'Sofia', 'Bob'];
let arr2 = [...arr1];
console.log(arr2);
arr1.push('Sally'); // Change arr1
console.log(arr2);
Запуск этого кода дает следующее:
[ 'John', 'Sofia', 'Bob' ] [ 'John', 'Sofia', 'Bob' ]
Как мы можем видеть, Arr2 не было передано ссылку как раньше, а скорее она была заполнена Значения Arr1 как целый новый объект. Так что даже когда Arr1 изменения, Arr2 остается такой же.
Мы также можем использовать оператор SPRECT, чтобы создать копию массива и Добавьте новые элементы в нее одновременно:
let arr1 = ['John', 'Sofia', 'Bob']; let arr2 = [...arr1, 'Anthony', 'Sean']; console.log(arr2);
['John', 'Sofia', 'Bob', 'Anthony', 'Sean']
Примечание: Оператор по распространению работает со всеми имиталками, включая объекты.
Ранее это сделало бы дополнительную линию кода для добавления новых элементов в новый массив.
Точно так же мы можем скопировать объекты, используя оператор по распространению:
let o1 = { a: 1, b: 2 };
let o2 = { c: 3, d: 4, ...o1 };
console.log(o2);
{ c: 3, d: 4, a: 1, b: 2 }
Как мы видим, мы успешно скопировали объект O1 в O2 Отказ
Эта особенность имеет много реальных случаев использования. Например, будем говорить, что мы сохранили информацию о регистрации пользователя в объект. Мы можем сделать неглубокую копию этого объекта и добавить еще несколько информации в скопированный объект:
let user = { name: 'John', email: '[email protected]' };
let _user = { ...user, ...getSession(user) };
console.log(_user);
{ name: 'John', email: '[email protected]', 'token': 'abc123', 'expiresAt': 1565630480671 }
Мы также можем понадобиться слияние Биллинг и информация о доставке в одну:
const billing = { billingContact: '0987654321', billingAddress: 'street no 123, xyz city' };
const shipping = { shippingContact: '123456789', shippingAddress: 'street no 999, abc city' };
const custInfo = { ...billing, ...shipping };
console.log(custInfo);
Если мы запустим этот код, нам следует встретить:
{
billingContact: '0987654321',
billingAddress: 'street no 123, xyz city',
shippingContact: '123456789',
shippingAddress: 'street no 999, abc city'
}
Можно поднять один вопрос здесь. Что если оба объекта имеют некоторые из тех же свойств.
В случае схватывающих свойств свойство последнего объекта выигрывает. Давайте посмотрим это в примере:
const o1 = { a: 1, b: 2 };
const o2 = { b: 3, c: 4, ...o1};
console.log(o2);
Если вы запустите этот код, вы должны увидеть следующее:
{ b: 2, c: 4, a: 1 }
Как мы можем видеть свойства второго объекта O2 выигрывает. Однако, если мы сначала помещаем оператор распространения:
const o1 = { a: 1, b: 2 };
const o2 = { ...o1, b: 3, c: 4};
console.log(o2);
{ a: 1, b: 3, c: 4 }
Мы видим, что недвижимость от O1 выигрывает, что имеет смысл с O2 это последний объект.
Одним из употреблений этой функции может быть создание заданий по умолчанию:
const userProvided = {
name: 'Bil Smith',
email: '[email protected]',
};
const defaultValues = {
name: 'Unknown',
address: 'Alien',
phone: null,
email: null
};
const userInfo = { ...defaultValues, ...userProvided };
Альтернатива вызывающим функциям с Apply ()
Позвольте нам сказать, что функция берет аргумент – список отметок лучших 5 студентов в классе. У нас также есть список, исходящий из внешнего источника. Конечно, мы можем избежать прохождения отдельных предметов и вместо этого пройти весь список, используя Применить () Метод:
myFun(m1, m2, m3, m4, m5) {
// Do something
}
let marks = [10, 23, 83, -1, 92];
myFun.apply(undefined, arr);
Мы можем избавиться от запутанного undefined Аргумент и сделайте очиститель кода, вызывая функцию непосредственно с оператором SPRECT:
myFun(m1, m2, m3, m4, m5) {
// Do something
}
let marks = [10, 23, 83, -1, 92];
myFun(...marks);
Использование с математическими функциями
JavaScript имеет Математика Объект, который содержит несколько методов для работы с набором данных, то есть. Список данных.
Позвольте нам сказать, что мы хотим получить максимальное значение из первых трех чисел списка:
let mylist = [10, 23, 83, -1, 92, -33, 76, 29, 76, 100, 644, -633]; Math.max(mylist[0], mylist[1], mylist[2]);
Что, если мы хотим получить максимум всех номеров в списке? Что если список имеет n Количество элементов? Наверняка мы не хотим MyList [0], MyList [1] ... MyList [1000] Отказ
Оператор распространения обеспечивает очистительное решение:
let mylist = [10, 23, 83, -1, 92, -33, 76, 29, 76, 100, 644, -633]; Math.max(...mylist);
Примечание: Учитывая, что оператор по распространению работает как с массивами, так и объектами, вы иногда могут быть соблазнены смешивать и совпадать с ними. Не делай этого! Например, следующее действие приведет к ошибке:
let user = {name:'John', age:28, email:'[email protected]'};
let items = [...user];
TypeError: user is not iterable
Распределительный оператор VS Parameter
Оба Распространение оператора и Параметр отдыха Поделитесь тем же синтаксисом I.e. Три волшебные точки ... Отказ Но они ведут себя точно противоположно друг другу. Как новичок, иногда это может быть запутано. Нижняя линия для понимания поведения – понять контекст, в котором он используется.
Как мы узнали, оператор Spread расширяет содержимое потенциала. Напротив, Оператор остальных наносит все остальные элементы в массив.
function doSum(...items) {
let sum = 0;
for (let item of items){
sum += item;
}
return sum;
}
doSum(1);
doSum(1,2);
doSum(1, 2, 3, 4);
Если мы запустим вышеуказанный код, мы будем встретить следующее:
1 3 6 10
Как мы видим, каждый раз, когда остальные элементы были собраны Параметр отдыха Отказ
Мы также можем предоставлять различные переменные для некоторых элементов и сделать параметр покоя покоя остальные элементы. Единственное условие состоит в том, что параметр покоя всегда должен быть последним параметром функции:
function doSum(times, ...items) {
let sum = 0;
for (let item of items){
sum += item*times;
}
return sum;
}
doSum(1, 1);
doSum(2, 1, 2);
doSum(3, 1, 2, 3);
Если мы запустим вышеуказанный код, мы увидим следующее:
1 6 18
Заключение
Как мы можем видеть оператор распространения ... является действительно мощной особенностью спецификации ES6 JavaScript. Мы можем легко решить множество реальных проблем, используя этот оператор. Как мы узнали из различных примеров, обсуждаемых в этой статье, она позволяет нам написать меньше кода и сделать больше.
В этой статье мы рассмотрели общие употребления в Распространение оператора Отказ Мы также обсудили аналогичные, но разные, Параметр отдыха Отказ Помните, что могут быть десятки других случаев использования в зависимости от проблемы.