Conseil rapide: comment utiliser l'opérateur de diffusion en javascript

Ce tutoriel expliquera les différentes utilisations des opérateurs étendus en JavaScript, ainsi que les principales différences entre les opérateurs étendus et les opérateurs résiduels.

L'opérateur d'extension JavaScript est représenté par trois points (...) et est introduit dans ES6. Il peut étendre les éléments dans les collections et les tableaux en éléments uniques.

Les opérateurs étendus peuvent être utilisés pour créer et cloner des tableaux et objets, passer les tableaux en tant que paramètres de fonction, supprimer des doublons dans les tableaux, et plus encore.

Points clés

• L'opérateur d'extension JavaScript est représenté par trois points (...). Il peut être utilisé pour créer et cloner des tableaux et des objets, passer les tableaux en tant que paramètres de fonction, supprimer des doublons dans les tableaux, etc.
• L'opérateur d'extension peut être utilisé pour cloner les tableaux et objets, les tableaux de concaténe, convertir Nodelist en tableaux et supprimer des doublons dans les tableaux. Cependant, il est important de noter qu'il effectue uniquement des copies peu profondes, ce qui signifie qu'il copie uniquement les éléments ou attributs de niveau supérieur. Si un tableau ou un objet contient un autre tableau ou objet, ces tableaux ou objets sont copiés par référence, et non par des valeurs.
• L'opérateur d'extension est différent de l'opérateur restant, bien que les deux utilisent la même syntaxe que trois points (...). Les opérateurs restants peuvent être utilisés dans la liste des paramètres de la fonction, indiquant que la fonction accepte un nombre non défini de paramètres, qui peuvent être traités comme un tableau.

grammaire

Les opérateurs étendus ne peuvent être utilisés que pour les objets itéables. Ce doit être immédiatement avant l'objet itérable, sans aucune séparation. Par exemple:

<code class="language-javascript">console.log(...arr);</code>

Paramètres de fonction

Prendre la méthode math.min () comme exemple. Cette méthode prend au moins un nombre en tant que paramètre et renvoie le plus petit nombre des paramètres passés.

Si vous avez un tableau de nombres et que vous souhaitez trouver la valeur minimale de ces nombres, s'il n'y a pas d'opérateur d'extension, vous devez passer des éléments un par un avec l'index, ou utiliser la méthode Appliquer () pour passer des éléments du tableau comme arguments. Par exemple:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13</code>

Notez que le premier paramètre est nul, car le premier paramètre est utilisé pour modifier la valeur de cette fonction d'appel.

L'opérateur d'extension est une solution plus pratique et lisible pour passer des éléments d'un tableau sous forme de paramètres à une fonction. Par exemple:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13</code>

Vous pouvez voir dans cet exemple en ligne:

Affichez l'exemple sur Codepen

Créer un tableau

L'opérateur

étendu peut être utilisé pour créer de nouveaux tableaux à partir de tableaux existants ou d'autres objets itéables contenant la méthode symbole.iterator (). Ce sont des objets qui peuvent être itérés avec un pour ... de boucle.

Par exemple, il peut être utilisé pour cloner les tableaux. Si vous attribuez simplement la valeur du tableau existant à un nouveau tableau, apporter des modifications au nouveau tableau mettra à jour le tableau existant:

<code class="language-javascript">console.log(...arr);</code>

En utilisant l'opérateur d'extension, vous pouvez cloner un tableau existant dans un nouveau tableau, et toutes les modifications apportées au nouveau tableau n'affecteront pas le tableau existant:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13</code>

Il convient de noter que cela ne clonera qu'un réseau unidimensionnel. Il ne fonctionne pas avec des tableaux multidimensionnels.

L'opérateur d'extension peut également être utilisé pour concaténer plusieurs tableaux en un seul tableau. Par exemple:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13</code>

Vous pouvez également utiliser l'opérateur d'extension pour les chaînes pour créer un tableau où chaque élément est un caractère dans la chaîne:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]</code>

Créer un objet

Les opérateurs d'extension peuvent être utilisés pour créer des objets de différentes manières.

Il peut être utilisé pour cloner légèrement un autre objet. Par exemple:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]</code>

Il peut également être utilisé pour fusionner plusieurs objets en un seul objet. Par exemple:

<code class="language-javascript">const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]</code>

Il convient de noter que si l'objet partage le même nom de propriété, la valeur de propriété du dernier objet étendu sera utilisée. Par exemple:

<code class="language-javascript">const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']</code>

L'opérateur d'extension peut être utilisé pour créer des objets à partir d'un tableau où l'index dans le tableau devient l'attribut et la valeur à cet index devient la valeur de l'attribut. Par exemple:

<code class="language-javascript">const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}</code>

Il peut également être utilisé pour créer des objets à partir de chaînes, de même, l'index dans la chaîne devient l'attribut, et les caractères de cet index deviennent la valeur de l'attribut. Par exemple:

<code class="language-javascript">const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}</code>

Convertir Nodelist en un tableau

NodeList est une collection de nœuds qui sont des éléments du document. Contrairement aux tableaux, ces éléments sont accessibles via des méthodes d'une collection telles que des articles ou des entrées.

Vous pouvez utiliser l'opérateur d'extension pour convertir Nodelist en un tableau. Par exemple:

<code class="language-javascript">const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}</code>

Supprimer des doublons dans le tableau

Set Object est une collection qui stocke uniquement des valeurs uniques. Semblable à Nodelist, les ensembles peuvent être convertis en tableaux à l'aide de l'opérateur d'extension.

Étant donné que définir les valeurs uniques uniquement, il peut être associé à l'opérateur d'extension pour supprimer des doublons dans le tableau. Par exemple:

<code class="language-javascript">const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}</code>

Opérateur étendu et opérateur résiduel

L'opérateur restant est également un opérateur à trois points (...), mais il est utilisé à des fins différentes. Les opérateurs restants peuvent être utilisés dans la liste des paramètres de la fonction, indiquant que la fonction accepte un nombre non défini de paramètres. Ces paramètres peuvent être traités sous forme de tableaux.

Exemple:

<code class="language-javascript">const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}</code>

Dans cet exemple, les opérateurs restants sont utilisés comme paramètres pour calculer la fonction. Vous itérez ensuite sur les éléments du tableau et les ajoutez pour calculer leur somme.

Vous pouvez ensuite transmettre les variables une par une à la fonction CalculeSum comme paramètres, ou utiliser l'opérateur d'extension pour passer les éléments du tableau comme paramètres:

<code class="language-javascript">const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div></code>

Conclusion

Les opérateurs étendus vous permettent de faire plus avec moins de lignes de code tout en gardant le code lisible. Il peut être utilisé pour des objets itérables, en transmettant des paramètres aux fonctions ou en créant des tableaux et des objets à partir d'autres objets itéables.

lectures connexes:

• Méthode mathématique manquante en javascript
• Conseils rapides: comment trier le tableau d'objets en javascript
• Comment utiliser pour Loop dans JavaScript
• Astuce rapide: testez si la chaîne correspond à l'expression régulière dans javascript
• 《Javascript: du débutant à ninja》

FAQ de l'opérateur étendu JavaScript (FAQ)

(des questions fréquemment posées similaires au contenu FAQ d'origine, mais avec différentes formulations, il faut ajouter ici pour maintenir la cohérence du contenu et éviter de copier directement le texte d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!