Оператор распространения (…) в JavaScript

Краткое руководство по использованию оператора распространения в JavaScript.

Когда мы следуем коду JavaScript, мы можем видеть, что иногда есть 3 точки (…). Что это за три точки (…). Это оператор распространения в Java Script. В этой статье я собираюсь обсудить оператор распространения в JavaScript.

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

По данным MDN

Синтаксис Spread позволяет расширять итерацию, такую ​​как выражение массива или строка, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), или выражение объекта, которое должно быть расширено в местах, где ноль или более Ожидаются пары ключ-значение (для объектных литералов). "источник"

Что делает оператор спреда?

Можно распределить элементы в массиве или строке как отдельные аргументы или элементы и распределить пары ключ-значение в объектах. Давайте обсудим с примерами.

Где мы это используем?

Оператор распространения используется в

1. вызовы функций
2. литералы или строки массива
3. объектные литералы

1. вызов функций

Сначала мы пишем функцию, чтобы найти сумму двух чисел.

const numbers = [6,8];
function findSum(num1, num2){
  console.log(num1+num2);  //14
}
findSum(numbers[0], numbers[1]);

Результатом приведенного выше кода является 14 . теперь добавьте оператора распространения. Мы можем добавить оператор распространения для передачи чисел без использования чисел [0], чисел [1].

const numbers = [6,8];
function findSum(num1, num2){
 console.log(num1+num2);  //14
}
findSum(…numbers);

Выход,

14

… числа передает элементы массива в функцию. Здесь findSum () принимает только первый и второй элементы массива. давайте попробуем улучшить код.

const numbers = [6,8,3];
function findSum(...arg){
  console.log(arg);              //[ 6, 8, 3 ]               
  console.log(arg[0] + arg[1]);  //14
}
findSum(...numbers);

Выход,

[ 6, 8, 3 ]
14

Здесь к параметрам функции также добавлен оператор findSum ().

2. массивы литералов или строк

Здесь у меня есть четное и нечетное arrat. Я хочу добавить их в единый массив. Попытайся..

const odds = [1,3,5];
const even = [2,4,6];
const numbers = [odds, even]
console.log(numbers);  //[ [ 1, 3, 5 ], [ 2, 4, 6 ] ]

Выход,

[ [ 1, 3, 5 ], [ 2, 4, 6 ] ]

Но здесь я не мог получить ожидаемого результата, а здесь не было ни одного массива без вложенного массива. Однако используйте concatintor в Array.prototype.concat ()…

const odds = [1,3,5];
const even = [2,4,6];
const numbers = odds.concat(even)
console.log(numbers);     //[ 1, 3, 5, 2, 4, 6 ]

Выход,

[ 1, 3, 5, 2, 4, 6 ]

Теперь попробуйте добавить оператора спреда.

const odds = [1,3,5];
const even = [2,4,6];
const numbers = […odds, …even]
console.log(numbers);

Выход,

[ 1, 3, 5, 2, 4, 6 ]

Здесь у нас есть единый массив, который содержит все эти элементы, как нечетные, так и четные, вместе взятые. И concat (), и оператор распространения выполняются успешно.

Теперь сравните и сопоставьте push () и оператор распространения.

let odds = [1,3,5];
let updatedOdd = odds        
updatedOdd.push(7)
console.log(updatedOdd);        //[1,3,5,7]
console.log(odds);              //[1,3,5,7]
/* using spread syntax */
let even = [2,4,6];
let updatedEven = even
updatedEven = […even, 8];
console.log(updatedEven);       //[2,4,6]
console.log(even);              //[2,4,6,8]

Согласно приведенному выше коду, когда мы пытаемся добавить 7 к updatedOdd, исходный массив (odds) тоже изменено. Но оператор распространения не влияет на исходный массив (evens), когда мы пытаемся добавить 8 к updatedEven.

3. литералы объекта

В разделе Rest / Spread Properties для предложения ECMAScript (ES2018) добавлены свойства распространения для литералов объектов. Он копирует собственные перечислимые свойства из предоставленного объекта в новый объект. "источник"

Объектные литералы с оператором распространения используются для расширения существующих объектов новыми объектами.

studentBio={
 name: “Jenny”,
 age: “20”
}
studentCollege={
 collegeName: “x”,
 collegeLevel: 4
}
const studentDetails = {…studentBio, …studentCollege};
console.log(studentDetails)

Выход,

{ name: ‘Jenny’, age: ‘20’, collegeName: ‘x’, collegeLevel: 4 }

Здесь все перечисляемые детали копируются в объединенный объект. studentDetails является копией studentBio и studentCollege. .

Заключение

В этой статье рассматривается основная тема оператора распространения в JavaScript. Здесь обсуждали, что такое оператор распространения, где он используется. Затем обсудите поведение оператора распространения с фрагментами кода реализации.