Синтаксис распространения против параметра покоя в ES2015 / ES6

Question

Меня смущает синтаксис распространения и параметр отдыха в ES2015. Кто-нибудь может объяснить разницу между ними на правильных примерах?

Answer 1

При использовании распространения вы расширяете одну переменную в более:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

Используя аргументы rest, вы объединяете все оставшиеся аргументы функции в один массив:

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

Answer 2

ES6 имеет новую функцию трех точек ...

Вот как мы можем использовать эти точки:

Как Отдых / Коллекционер / Сбор

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Вот ...m это коллектор, он собирает остальные параметры. Внутренне, когда мы пишем:

var [c, ...m] = [1,2,3,4,5];JavaScript выполняет следующее

var c = 1,
    m = [2, 3, 4, 5];

Как распространение

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Вот, ...params распространяется так, чтобы все его элементы other

Внутренне javaScript делает следующее

var other = [1, 2].concat(params);

Надеюсь это поможет.

Answer 3

Резюме:

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

1. При использовании в аргументах функции объявления / выражения функции она преобразует оставшиеся аргументы в массив. Этот вариант называется синтаксисом параметров отдыха.
2. В других случаях он распространит значения итерируемого в местах, где ожидается ноль или более аргументов (вызовы функций) или элементов (литералы массива). Этот вариант называется синтаксисом распространения.

Пример:

Синтаксис параметра Rest:

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

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

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// the numbers array will be spread over the 
// x y z parameters in the sum function
console.log(sum(...numbers));


// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);

Answer 4

Три точки Javascript (...) можно использовать двумя способами:

1. Параметр rest: собирает все оставшиеся элементы в массив.

var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]

2. Оператор распространения: позволяет развернуть итерируемые объекты (массивы / объекты / строки) в отдельные аргументы / элементы.

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Обратите внимание, что оператор распространения может быть первым элементом, но параметр rest должен быть последним для сбора остальных элементов.

Answer 5

Когда мы видим "..." в коде, это либо остальные параметры, либо оператор распространения.

Есть простой способ различить их:

Когда... находится в конце параметров функции, это "остальные параметры" и собирает остальную часть списка в массив. Когда... происходит в вызове функции или тому подобном, это называется "оператором распространения" и расширяет массив в список. Используйте шаблоны:

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

Answer 6

Добавил в ES6 эти три точки ... имеет два значения: оператор Spread и параметр Rest

Оператор спреда: вы используете три точки для расширения iterables, от iterables Я имею в виду arrays, stringи т. д. В качестве аргументов. Например Math.max() Функция ожидает неопределенное количество аргументов, поэтому вы можете использовать оператор Spread для расширения элементов в качестве аргументов на Math.max() функция. Вот пример из МДН

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

Другой вариант использования - добавить, например, этот массив

const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];

Вы можете добавить его в другой массив

const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];

затем favoritesVideoGames значение

[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]

О параметре Rest, здесь определение MDN

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

Это означает, что вы можете упаковать много элементов в один элемент

Вот пример из МДН

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Я обычно путаюсь с этими тремя моментами, эта иллюстрация @stephaniecodes помогает мне вспомнить ее логику. Я упоминаю, что черпал вдохновение из этой иллюстрации, чтобы ответить на этот вопрос.

Я надеюсь, что это полезно.

Answer 7

В основном как в Python:

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']

Answer 8

Просто запомнить ............

если тройные точки (...) находятся слева, его параметр Rest, если тройные точки находятся справа, его параметр Spread.

      const [a,b,...c] = [1,2,3,4,5]     // (left) rest

const [d,e] = [1, ...c]             // (right) spread

Answer 9

В связи с этим я не могу понять, как мы передаем функцию и возвращаем аргументы в javascript.

Функция - это набор инструкций, который принимает некоторые входные данные, обрабатывает их и возвращает результат.

здесь у нас есть массив [1, 2, 3, 4, 5, 6], и функция фильтра выполняет итерацию по каждому элементу и передает каждый элемент положительным функциям, которые возвращают число, если оно четное, иначе пропускает его.

след:

1 => Filter(1) => positive(1) => skips 1,
2 => Filter(2) => positive(2) => returns 2,
3 => Filter(3) => positive(3) => skips 3,
...
6 => Filter(6) => positive(6) => returns 6

отсюда результат [2, 4, 6]

Answer 10

Источник: Вед Антани, Стоян Стефанов Книга "Объектно-ориентированный JavaScript - третье издание".

Остальные параметры

ES6 вводит параметры отдыха. Остальные параметры позволяют нам отправлять произвольное количество параметров в функцию в виде массива. Параметр отдыха может быть только последним в списке параметров, и может быть только один параметр отдыха. Помещение оператора отдыха (...) перед последним формальным параметром указывает, что параметр является параметром отдыха. В следующем примере показано добавление оператора rest перед последним формальным параметром:

function sayThings(tone, ...quotes){ 
  console.log(Array.isArray(quotes)); //true 
  console.log(`In ${tone} voice, I say ${quotes}`) 
} 
sayThings("Morgan Freeman","Something serious"," 
 Imploding Universe"," Amen"); 
//In Morgan Freeman voice, I say Something serious,
 Imploding Universe,Amen 

Первый параметр, переданный в функцию, принимается в тоне, а остальные параметры принимаются в виде массива. Переменные аргументы (var-args) были частью нескольких других языков и долгожданным выпуском ES6. Остальные параметры могут заменить несколько спорную переменную arguments. Основное различие между остальными параметрами и переменной arguments заключается в том, что остальные параметры являются реальными массивами. Для остальных параметров доступны все методы массива.

Операторы распространения

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

function sumAll(a,b,c){ 
  return a+b+c 
} 
var numbers = [6,7,8] 
//ES5 way of passing array as an argument of a function 
console.log(sumAll.apply(null,numbers)); //21 
//ES6 Spread operator 
console.log(sumAll(...numbers))//21 

Answer 11

Учитывая 3 сценария

1] без использования оператора

function add(x, y) {
  return x + y;
}

add(1, 2, 3, 4, 5) // returns 3  (function will takes first 2 arg only)

2] с оператором rest

function add(...args) {
  let result = 0;

  for (let arg of args) result += arg;

  return result
}

add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15

- мы можем собрать любое количество аргументов в массив

3] с оператором распространения

const arr = ["Joy", "Wangari", "Warugu"];
const newArr = ["joykare", ...arr];

The value of newArr will be [ 'joykare', 'Joy', 'Wangari', 'Warugu' ]

Еще один

function add(a, b, c) {
  return a + b + c ;
}
const args = [1, 2, 3];

add(...args);

-We have been using arrays to demonstrate the spread operator, 
but any iterable also works. So, if we had a 
string const str = 'joykare', [...str] translates to [ 'j', 'o', 'y', 'k', 'a', 'r', 'e' ]