JavaScript, Программирование, ES6, Rest vs Spread Operator

Использование оператора ... — это функция, представленная в ES6 JavaScript. Оператор ... используется как для операторов расширения, так и для операторов остатка в JavaScript, но это не одно и то же.

Что такое спред и что такое оператор Rest в JavaScript? Есть ли разница между этими двумя операторами? В этом руководстве объясняется все, что вам нужно знать об операторе спреда и остатка в JavaScript.

Давайте начнем!

Оператор спреда

оператор расширения расширяет итерируемый объект на отдельные элементы. Он используется для разделения групп значений на отдельные значения. Примеры групп значений включают строки, массивы и объекты.

При использовании со строками и массивами оператор расширения возвращает массив, но возвращает объект при использовании с объектом.

Оператор ... — это синтаксис, используемый для оператора распространения. Увидеть это в работе.

let randomString = 'Akande Olalekan Toheeb' 
let arrayOfStrings = [...randomString]; 

console.log(arrayOfStrings);

Использование оператора спреда

Оператор Spread используется в четырех контекстах: выражения массива, выражения строки, выражения объекта и выражения функции.

Вот разбивка того, для чего используется оператор распространения в вышеупомянутых контекстах.

• Конкатенация: оператор распространения объединяет строки, массивы и объекты. Можно добавить два массива вместе, можно добавить две строки и можно добавить два объекта. Кроме того, вы можете добавить к объекту массив или строку; результатом будет объект.
  Оператор распространения может заменить метод .push() для добавления новых значений в массивы. Оператор распространения также заменяет метод .concat(), используемый для объединения массивов в JavaScript. Ниже приведены некоторые примеры:

// Addition of two Strings
let progLang = 'JavaScript';
let qualifier  = ' is fun.'

let newStr = [...progLang, ...qualifier];

console.log(newStr); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't', ' ', 'i', 's', ' ', 'f', 'u', 'n', '.']

// Addition of two arrays
let arr1 = ['JavaScript'];
let arr2 = ['is fun.'];

let newArr = [...arr1, ...arr2];

console.log(mySpread); // ['JavaScript', 'is fun.']

// Addition of two objects
const flying = { wings: 2 }
const car = { wheels: 4 }
const flyingCar = {...flying, ...car}
console.log(flyingCar) // {wings: 2, wheels: 4}

// An Array and An Object
let progLang = ['JavaScript'];
let fullName = {
  fname: 'akande',
  lname: 'toheeb'
};

let profile = {...progLang, ...fullName};

console.log(profile); // {0: 'JavaScript', fname: 'akande', lname: 'toheeb'}

// Add new members to arrays without using the push() method
let veggies = ['onion', 'parsley'];
veggies = [...veggies, 'carrot', 'beetroot'];
console.log(veggies); // ['onion', 'parsley', 'carrot', 'beetroot']

• Преобразование строки в массив. Оператор расширения позволяет преобразовать строку в массив. Оператор распространения намного лучше подходит для преобразования строки в массив, чем метод .split() JavaScript. Например,

//Using the spread operator
const progLang = "JavaScript";
const arrayOfChars = [...greeting];
console.log(arrayOfChars); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

// Using .split()
const progLang = "JavaScript";
const arrayOfChar =progLang.split(' ');
console.log(arrayOfChar); // ['JavaScript']

Первая часть фрагмента кода использует оператор расширения для преобразования строки в массив. Результат более удовлетворительный по сравнению со второй частью, в которой используется метод .split() JavaScript.

• Копировать массив или объект в отдельный. Копирование массива или объекта легко выполняется с помощью оператора распространения. Вот как это сделать:

// Copy an object into a separate one
const car1 = {
    speed: 200,
    color: 'yellow'
}
const car 2 = {...car1}

car1.speed = 201

console.log(car1.speed, car2.speed)

• Замените метод JavaScript .apply(). Оператор распространения может заменить метод .apply() в JavaScript. .apply() используется в большинстве случаев, когда элементы массива должны использоваться в качестве аргументов функции. Он копирует элементы массива и далее используется как аргумент функции. Демонстрировать,

function myFunction(x, y, z) {
  let result = x + y+ z;
  console.log(result);
}
const args = [0, 1, 2];
myFunction.apply(null, args); // 3

С оператором спреда вышеприведенное можно записать как:

function myFunction(x, y, z) {
  let result = x + y+ z;
  console.log(result);
}
const args = [0, 1, 2];
myFunction(...args); // 3

Есть еще много трюков, которые вы можете выполнить с оператором распространения. Некоторые из них удобны при работе с такой библиотекой, как React.

Оператор отдыха

Оператор rest, как следует из названия, используется для получения всех оставшихся значений определенной группы значений в массив. По сравнению с оператором спреда, который распространяет значения, оператор остатка противоположен. Оператор rest сжимает значения.

Оператор rest используется в основном в функциях с неопределенностью количества передаваемых аргументов. Самое главное, функция JavaScript должна иметь только один оператор rest.

Оператор rest использует тот же синтаксис, что и оператор расширения, оператор ....

Использование оператора Rest

Оператор rest имеет только одно применение: поместить остальные или оставшиеся значения определенной группы значений в массив.

Пример оператора rest за работой:

function devData(fname, lname, email, level, ...otherInfo){
  console.log(otherInfo);
}

devData('Akande', 'Olalekan', '[email protected]', 'intermediate', 'Technical writer', 'Codecada', 23); // ['Technical writer', 'Codecada', 23]

Вышеупомянутая функция имеет четыре параметра, три из которых являются стандартными параметрами, а последний — с оператором rest. Существует неопределенность в отношении требуемой информации, поэтому необходимо использовать оператор rest.

otherInfo будет массивом оставшихся значений после того, как три других параметра примут свои значения. В этом примере это ['Technical writer', 'Codecada', 23].

›Использование use strict внутри функции, содержащей оператор rest, запрещено. Использование «use strict» напрямую будет учитывать только невообразимые ошибки. По этой причине «использовать строгое» можно косвенно использовать вне функции, если важно использовать его во фрагменте кода.

Подводить итоги

Операторы спреда и остальных упрощают работу со строками, массивами и объектами. Оператор распространения распространяет значения, в то время как оставшийся оператор сжимает их. Оператор расширения можно использовать много раз в функции, обратной оператору остатка; оператор rest может использоваться только один раз в функции.

Что еще?

Ничего, это руководство охватило все.

Удачного кодирования 🥳!

Первоначально опубликовано на https://muhtoyyib.hashnode.dev.