В этом руководстве вы узнаете об операторе распространения JavaScript с помощью примеров.
Оператор распространения - это новое дополнение к функциям, доступным в версии JavaScript ES6 .
Оператор распространения
Оператор распространения … используется для расширения итерации или массива. Например,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
В этом случае код:
console.log(… arrValue)
эквивалентно:
console.log('My', 'name', 'is', 'Jack');
Копировать массив с помощью оператора распространения
Вы также можете использовать синтаксис распространения, … чтобы скопировать элементы в один массив. Например,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Клонировать массив с помощью оператора распространения
В JavaScript объекты назначаются по ссылке, а не по значениям. Например,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Здесь обе переменные arr1 и arr2 относятся к одному и тому же массиву. Следовательно, изменение одной переменной приводит к изменению обеих переменных.
Однако, если вы хотите скопировать массивы, чтобы они не ссылались на один и тот же массив, вы можете использовать оператор распространения. Таким образом, изменение одного массива не отражается на другом. Например,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Оператор распространения с объектом
Вы также можете использовать оператор распространения с объектными литералами. Например,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Здесь, как obj1и obj2свойства добавляются с obj3помощью оператора распространения.
Остаточный параметр
Когда оператор распространения используется в качестве параметра, он известен как параметр отдыха.
Вы также можете принять несколько аргументов в вызове функции, используя параметр rest. Например,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Вот,
- Когда
func()функции передается один аргумент , остальной параметр принимает только один параметр. - Когда передаются три аргумента, остальной параметр принимает все три параметра.
Примечание . При использовании параметра rest аргументы будут передаваться как элементы массива.
Вы также можете передать несколько аргументов функции с помощью оператора распространения. Например,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Если вы передаете несколько аргументов с помощью оператора распространения, функция принимает необходимые аргументы и игнорирует остальные.
Примечание : оператор распространения был введен в ES6 . Некоторые браузеры могут не поддерживать использование синтаксиса распространения. Посетите службу поддержки JavaScript Spread Operator, чтобы узнать больше.
