Un article expliquant en détail les différentes manières d'utiliser l'opérateur spread en JavaScript

Cet article vous présentera les différentes manières d'utiliser les opérateurs de spread en JavaScript, ainsi que les principales différences entre les opérateurs de spread et les opérateurs de reste. J'espère qu'il vous sera utile !

est représenté par trois points ( ...). L'opérateur de propagation JavaScript a été introduit dans ES6. Il peut être utilisé pour développer des éléments de collections et de tableaux en éléments individuels uniques. ...) 表示，JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。

扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。

语法

扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：

console.log(...arr);

功能以及参数

以Math.min()方法为例。此方法接受至少一个数字作为参数，并返回传递的参数中最小的数字。

如果您有一个数字数组并且您想找到这些数字中的最小值，那么在没有展开运算符的情况下，您需要使用它们的索引一个一个地传递元素，或者使用apply()方法来传递数组作为参数。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

请注意，第一个参数是null，因为第一个参数用于更改this调用函数的值。

扩展运算符是将数组元素作为参数传递给函数的更方便和可读的解决方案。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

创建数组

扩展运算符可用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。

例如，它可用于克隆数组。如果您只是将现有数组的值分配给新数组，则对新数组进行更改将更新现有数组：

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]

通过使用扩展运算符，可以将现有数组克隆到一个新数组中，并且对新数组所做的任何更改都不会影响现有数组：

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]

应该注意的是，这只会克隆一维数组。它不适用于多维数组。

扩展运算符也可用于将多个数组连接为一个。例如：

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]

您还可以在字符串上使用扩展运算符来创建一个数组，其中每个项目都是字符串中的一个字符：

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

创建对象

扩展运算符可以以不同的方式用于创建对象。

它可用于浅克隆另一个对象。例如：

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

它还可以用于将多个对象合并为一个。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

需要注意的是，如果对象共享相同的属性名称，将使用最后一个对象展开的值。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

扩展运算符可用于从数组创建对象，其中数组中的索引成为属性，该索引处的值成为属性的值。例如：

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

它还可以用于从字符串创建对象，其中，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：

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: '!'}

将 NodeList 转换为数组

NodeList是节点的集合，它们是文档中的元素。元素通过集合中的方法访问，例如itemor entries，与数组不同。

您可以使用扩展运算符将 NodeList 转换为 Array。例如：

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

从数组中删除重复项

Set对象是一个仅存储唯一值的集合。与 NodeList 类似，可以使用扩展运算符将 Set 转换为数组。

由于 Set 仅存储唯一值，因此可以将其与扩展运算符配对以从数组中删除重复项。例如：

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

扩展运算符与休息运算符

rest 运算符也是一个三点运算符 ( ...)，但它用于不同的目的。rest 运算符可以在函数的参数列表中使用，表示该函数接受未定义数量的参数。这些参数可以作为数组处理。

例如：

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

在此示例中，rest 运算符用作calculateSum函数的参数。然后，您循环遍历数组中的项目并将它们相加以计算它们的总和。

然后，您可以将变量一个一个地calculateSum

L'opérateur spread peut être utilisé pour créer et cloner des tableaux et des objets, transmettre des tableaux comme arguments de fonction, supprimer les doublons des tableaux, et bien plus encore.

Syntaxe

L'opérateur spread ne peut être utilisé que sur des objets itérables. Il doit être utilisé avant l’objet itérable sans aucune séparation. Par exemple :

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

🎜Fonction et paramètres🎜🎜🎜Prenons la méthode Math.min() comme exemple. Cette méthode accepte au moins un nombre comme argument et renvoie le plus petit nombre parmi les arguments passés. 🎜🎜Si vous avez un tableau de nombres et que vous souhaitez trouver le minimum parmi ces nombres, alors sans opérateur de propagation, vous devez transmettre les éléments un par un en utilisant leur index ou utiliser la méthode apply() pour passer le tableau en paramètres. Par exemple : 🎜rrreee🎜Veuillez noter que le premier paramètre est null car le premier paramètre est utilisé pour modifier la valeur de this dans la fonction appelante. 🎜🎜L'opérateur spread est une solution plus pratique et plus lisible pour transmettre des éléments de tableau comme arguments aux fonctions. Par exemple : 🎜rrreee

🎜Create Array 🎜🎜🎜L'opérateur spread peut être utilisé pour créer un nouveau tableau à partir d'un tableau existant ou d'un autre objet itérable contenant la méthode Symbol.iterator() . Ce sont des objets qui peuvent être parcourus à l'aide d'une boucle for...of. 🎜🎜Par exemple, il peut être utilisé pour cloner un tableau. Si vous attribuez simplement les valeurs d'un tableau existant à un nouveau tableau, apporter des modifications au nouveau tableau mettra à jour le tableau existant : 🎜rrreee🎜 En utilisant l'opérateur spread, vous pouvez cloner un tableau existant dans un nouveau tableau, et mettre à jour le nouveau tableau Toute modification apportée au tableau n'affectera pas le tableau existant : 🎜rrreee🎜 Il convient de noter que cela ne clonera qu'un tableau unidimensionnel. Cela ne fonctionne pas avec les tableaux multidimensionnels. 🎜🎜L'opérateur spread peut également être utilisé pour concaténer plusieurs tableaux en un seul. Par exemple : 🎜rrreee🎜 Vous pouvez également utiliser l'opérateur spread sur une chaîne pour créer un tableau où chaque élément est un caractère dans la chaîne : 🎜rrreee

🎜Créer des objets 🎜🎜🎜 L'opérateur spread peut être utilisé de différentes manières pour créer des objets. 🎜🎜Il peut être utilisé pour cloner superficiellement un autre objet. Par exemple : 🎜rrreee🎜 Il peut également être utilisé pour fusionner plusieurs objets en un seul. Par exemple : 🎜rrreee🎜Il est important de noter que si les objets partagent le même nom de propriété, la valeur du dernier objet développé sera utilisée. Par exemple : 🎜rrreee🎜L'opérateur spread peut être utilisé pour créer un objet à partir d'un tableau, où l'index du tableau devient la propriété et la valeur de cet index devient la valeur de la propriété. Par exemple : 🎜rrreee🎜 Il peut également être utilisé pour créer un objet à partir d'une chaîne, où l'index de la chaîne devient une propriété et le caractère à cet index devient la valeur de la propriété. Par exemple : 🎜rrreee

🎜Convert NodeList en Array🎜🎜🎜NodeList est une collection de nœuds, qui sont des éléments du document. Les éléments sont accessibles via des méthodes de la collection, telles que item ou entries, contrairement aux tableaux. 🎜🎜Vous pouvez convertir NodeList en Array à l'aide de l'opérateur spread. Par exemple : 🎜rrreee

🎜Supprimer les doublons d'un tableau🎜🎜🎜L'objet Set est une collection qui stocke uniquement des valeurs uniques. Semblable à NodeList, un Set peut être converti en tableau à l'aide de l'opérateur spread. 🎜🎜Étant donné que Set ne stocke que des valeurs uniques, vous pouvez l'associer à l'opérateur spread pour supprimer les doublons d'un tableau. Par exemple : 🎜rrreee

🎜Opérateur d'expansion et opérateur de repos🎜🎜🎜L'opérateur de repos est également un opérateur à trois points (...), mais il est utilisé à des fins différentes. L'opérateur rest peut être utilisé dans la liste d'arguments d'une fonction pour indiquer que la fonction accepte un nombre indéfini d'arguments. Ces paramètres peuvent être gérés sous forme de tableaux. 🎜🎜Par exemple : 🎜rrreee🎜Dans cet exemple, l'opérateur rest est utilisé comme argument de la fonction calculateSum. Vous parcourez ensuite les éléments du tableau et les ajoutez pour calculer leur somme. 🎜🎜Vous pouvez ensuite passer les variables à la fonction une par une calculateSum en arguments, ou passer les éléments du tableau en arguments en utilisant l'opérateur spread : 🎜rrreee🎜🎜Conclusion🎜🎜🎜L'opérateur spread vous permet de faire plus avec moins de lignes de code tout en gardant votre code lisible. Il peut être utilisé avec des itérables pour transmettre des arguments à des fonctions ou pour créer des tableaux et des objets à partir d'autres itérables. 🎜

【Recommandations associées : Tutoriel vidéo javascript, Vidéo de programmation de base】

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!