Что такое оператор трех точек в JS/React JS?

Оператор «три точки» в JavaScript — одно из значительных обновлений, которое появилось в ES6.

Этот оператор (...) помогает достичь многих целей, для которых ранее требовалось много строк кода, незнакомый синтаксис и многое другое.

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

Оператор три точки имеет два разных значения в JavaScript. Синтаксис очень похож, но вы используете каждый из них в разных контекстах. Эти два разных использования ... — операторы расширения и остатка.

Как использовать оператор спреда в JavaScript

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

Этот получатель может быть чем угодно, например объектом, массивом и так далее. Итерируемым объектом может быть все, что мы можем пройти в цикле, включая строку, массив, объект и так далее.

Синтаксис оператора распространения:

const newArray = ['firstItem', ...oldArray];

Давайте теперь посмотрим на различные случаи, в которых мы можем использовать оператор распространения.

Как скопировать массив с помощью оператора Spread

Когда мы хотим скопировать элементы определенного массива в новый массив, не затрагивая исходный массив, мы можем использовать оператор расширения.

Вот пример:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [...studentNames];
console.log(names); // ["Daniel","Jane","Joe"]

Это экономит нам время, которое мы потратили бы на написание оператора цикла:

let studentNames = ["Daniel", "Jane", "Joe"];
let names = [];
studentNames.map((name) => {
    names.push(name);
});
console.log(names); // ["Daniel","Jane","Joe"]

Как скопировать объект с помощью оператора Spread

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

let user = { name: "John Doe", age: 10 };
let copiedUser = { ...user };
console.log(copiedUser); // { name: "John Doe", age: 10 }

Принимая во внимание, что старый способ сделать это заключался бы в использовании метода Object.assign() следующим образом:

let user = { name: "John Doe", age: 10 };
let copiedUser = Object.assign({}, user);
console.log(copiedUser); // { name: "John Doe", age: 10 }

Как объединить или объединить массивы с помощью оператора Spread

Когда у нас есть два или более массива, которые мы хотим объединить в новый массив, мы можем легко сделать это с помощью оператора распространения. Это позволяет нам копировать элементы из массива:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let allNames = [...femaleNames, ...maleNames];
console.log(allNames); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]

Также важно знать, что мы можем использовать один и тот же подход для любого количества массивов, которые у нас есть. Мы также можем добавить отдельные элементы в массив:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let moreNames = [...otherNames, ...femaleNames, ...maleNames];
let names = [...moreNames, "Ben", "Fred"];

Это избавляет нас от необходимости использовать сложный синтаксис, такой как метод concat():

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let allNames = femaleNames.concat(maleNames);
let moreNames = femaleNames.concat(maleNames, otherNames);

Как объединить или объединить объекты с помощью оператора Spread

Мы также можем объединять объекты аналогично тому, как мы делали массивы с оператором расширения:

let userName = { name: "John Doe" };
let userSex = { sex: "Female" };
let user = { ...userName, ...userSex };
console.log(user); // { name: "John Doe", age: 10 }

Примечание. В ситуации, когда у одного ключа есть другое свойство, последнее свойство переопределяет первый экземпляр:

let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };
let user = { ...userName, ...userSex }; // { name: "Jane Doe", age: 10 }

Как получить уникальные элементы с помощью метода Set

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

Например, предположим, что у нас есть массив фруктов, в котором мы повторяли некоторые фрукты, и мы хотим вытащить эти фрукты в новый массив и избежать повторения. Мы можем использовать метод set() вместе с оператором распространения, чтобы перечислить их в новом массиве:

let fruits = ["Mango", "Apple", "Mango", "Banana", "Mango"];
let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["Mango","Apple","Banana"]

Как передавать элементы массива в вызовы функций с помощью оператора Spread

Когда у вас есть функция, которая принимает число, и у вас есть эти числа как элементы массива:

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};

Вы можете использовать оператор расширения для передачи этих элементов в вызов функции в качестве аргументов с помощью оператора расширения:

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll(...scores); // 51

Старый способ сделать это заключался бы в использовании метода apply():

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll.apply(null, scores); // 51

Как разбить строку на символы с помощью оператора расширения

Предположим, у нас есть строка. Мы можем использовать оператор распространения, чтобы разделить его на символы:

let myString = "freeCodeCamp";
const splitString = [...myString];
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Это похоже на метод split():

let myString = "freeCodeCamp";
const splitString = myString.split('');
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Как использовать оператор Rest в JavaScript

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

Синтаксис оператора rest

const func = (first, ...rest) => {};

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

const multiplyArgs = (multiplier, ...otherArgs) => {
    return otherArgs.map((number) => {
    return number * multiplier;
    });
};
let multipiedArray = multiplyArgs(6, 5, 7, 9);
console.log(multipiedArray); // [30,42,54]

Вот хорошее представление оператора rest и его значения:

const multiplyArgs = (multiplier, ...otherArgs) => {
    console.log(multiplier); // 6
    console.log(otherArgs); // [5,7,9]
};
multiplyArgs(6, 5, 7, 9);

Примечание. Параметр Rest должен быть последним формальным параметром.

const multiplyArgs = (multiplier, ...otherArgs, lastNumber) => {
    console.log(lastNumber); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};
multiplyArgs(6, 5, 7, 9);

Разница между операторами распространения и отдыха в JavaScript

На данный момент вы можете быть сбиты с толку, поскольку оба метода кажутся очень похожими. Но команда JS отлично справилась с именованием, так как оно определяет, что делает каждое использование ....

Мы используем оператор распространения для распространения значений массива или итераций, возможно, в массив или объект.

Пока мы используем оператор Rest, чтобы собрать оставшиеся элементы, переданные в функцию, в виде массива.

const myFunction = (name1, ...rest) => { // used rest operator here
    console.log(name1);
    console.log(rest);
};
let names = ["John", "Jane", "John", "Joe", "Joel"];
myFunction(...names); // used spread operator here

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