web-dev-qa-db-fra.com

Syntaxe de propagation vs paramètre de repos dans ES2015 / ES6

Je suis confus au sujet de la syntaxe étendue et du paramètre de repos dans ES2015. Quelqu'un peut-il expliquer la différence entre eux avec des exemples appropriés?

javascriptecmascript-6variadic-functionsspread-syntax
53
Nur Rony

Lorsque vous utilisez spread, vous développez une seule variable en plusieurs:

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

Lorsque vous utilisez des arguments rest, vous réduisez tous les arguments restants d'une fonction dans un tableau:

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;
110
TbWill4321

ES6 a une nouvelle fonctionnalité trois points ...

Voici comment utiliser ces points:

En tant que repos/collecteur/rassemblement

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

Ici ...m est un collecteur, il collecte le reste des paramètres. En interne lorsque nous écrivons:

var [c, ...m] = [1,2,3,4,5]; JavaScript ne suit

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

Comme propagation

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

Ici, ...params se propage de manière à associer tous ses éléments à other

En interne, JavaScript suit

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

J'espère que cela t'aides.

59
Manishz90

Sommaire:

En javascript, le ... est surchargé. Il effectue différentes opérations en fonction de l'endroit où l'opérateur est utilisé:

  1. Lorsqu'il est utilisé dans les arguments de fonction d'une fonction déclaration/expression il convertira les arguments restants en un tableau. Cette variante est appelée la syntaxe Paramètres de repos.
  2. Dans d'autres cas, il répartira les valeurs d'un itérable aux endroits où zéro ou plusieurs arguments (appels de fonction) ou éléments (littéraux de tableau) sont attendus. Cette variante est appelée la syntaxe Spread.

Exemple:

Reste la syntaxe des paramètres:

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);

Syntaxe de propagation:

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);
9
Willem van der Veen

Lorsque nous voyons "..." dans le code, il s'agit soit des paramètres de repos, soit de l'opérateur d'étalement.

Il existe un moyen simple de les distinguer:

Lorsque ... est à la fin des paramètres de fonction, il s'agit de "paramètres de repos" et rassemble le reste de la liste dans le tableau. Lorsque ... se produit dans un appel de fonction ou similaire, il est appelé un "opérateur d'étalement" et étend un tableau dans la liste. Utilisez des modèles:

Les paramètres de repos sont utilisés pour créer des fonctions qui acceptent n'importe quel nombre d'arguments. L'opérateur spread est utilisé pour passer un tableau à des fonctions qui nécessitent normalement une liste de nombreux arguments. Ensemble, ils facilitent le déplacement entre une liste et un tableau de paramètres. Pour plus d'informations à ce sujet cliquez ici

5
jack

Ajouté dans ES6, ces trois points ... Ont deux significations, opérateur Spread et paramètre Rest

Opérateur d'étalement: vous utilisez les trois points pour développer iterables, par iterables je veux dire arrays, string, etc. comme arguments. Par exemple, la fonction Math.max() attend un nombre indéterminé d'arguments afin que vous puissiez utiliser l'opérateur Spread pour développer des éléments comme arguments sur la fonction Math.max(). Voici un exemple de mdn

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

Un autre cas d'utilisation consiste à ajouter, par exemple avoir ce tableau

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

Vous pouvez l'ajouter à un autre tableau

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

Alors favoritesVideoGames la valeur est

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

À propos du paramètre Rest, voici la définition MDN

La syntaxe des paramètres rest nous permet de représenter un nombre indéfini d'arguments sous forme de tableau.

Cela signifie que vous pouvez regrouper de nombreux éléments en un seul élément

Voici un exemple de 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

Je suis généralement confus avec ces trois points, ce illustration par @ stephaniecodes m'aide à me souvenir de sa logique. Je mentionne que je me suis inspiré de cette illustration pour répondre à cette question.

J'espère que cela est utile.

3
user615274

Fondamentalement, comme en Python:

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

Javascript trois points (...) operator peut être utilisé de deux manières différentes:

  1. paramètre Rest: collecte tous les éléments restants dans un tableau.
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"]
  1. Opérateur d'étalement: permet d'étendre les itérables (tableaux/objets/chaînes) en arguments/éléments uniques.
var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Notez que l'opérateur d'étalement peut être le premier élément, mais le paramètre de repos doit être le dernier pour collecter les éléments de repos.

2
Warasint