Ein Artikel, in dem die verschiedenen Möglichkeiten zur Verwendung des Spread-Operators in JavaScript ausführlich erläutert werden

Dieser Artikel führt Sie durch die verschiedenen Arten der Verwendung von Spread-Operatoren in JavaScript sowie durch die Hauptunterschiede zwischen Spread-Operatoren und Rest-Operatoren. Ich hoffe, er wird Ihnen hilfreich sein!

wird durch drei Punkte dargestellt ( ...). Der JavaScript-Spread-Operator wurde in ES6 eingeführt. Es kann verwendet werden, um Elemente in Sammlungen und Arrays in einzelne Einzelelemente zu erweitern. ...) 表示，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

Der Spread-Operator kann zum Erstellen und Klonen von Arrays und Objekten, zum Übergeben von Arrays als Funktionsargumente, zum Entfernen von Duplikaten aus Arrays und mehr verwendet werden.

Syntax

Der Spread-Operator kann nur für iterierbare Objekte verwendet werden. Es muss ohne Trennung vor dem iterierbaren Objekt verwendet werden. Zum Beispiel:

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

🎜Funktion und Parameter🎜🎜🎜Nehmen Sie die Methode Math.min() als Beispiel. Diese Methode akzeptiert mindestens eine Zahl als Argument und gibt die kleinste Zahl unter den übergebenen Argumenten zurück. 🎜🎜Wenn Sie ein Array von Zahlen haben und das Minimum unter diesen Zahlen ermitteln möchten, müssen Sie ohne Spread-Operator die Elemente einzeln mithilfe ihres Index übergeben oder die Methode apply() verwenden, um das Array als Parameter zu übergeben. Zum Beispiel: 🎜rrreee🎜Bitte beachten Sie, dass der erste Parameter null ist, da der erste Parameter verwendet wird, um den Wert von this in der aufrufenden Funktion zu ändern. 🎜🎜Der Spread-Operator ist eine bequemere und lesbarere Lösung zum Übergeben von Array-Elementen als Argumente an Funktionen. Zum Beispiel: 🎜rrreee

🎜Array erstellen 🎜🎜🎜Der Spread-Operator kann verwendet werden, um ein neues Array aus einem vorhandenen Array oder einem anderen iterierbaren Objekt zu erstellen, das die Methode Symbol.iterator() enthält . Hierbei handelt es sich um Objekte, die mithilfe einer for...of-Schleife iteriert werden können. 🎜🎜Zum Beispiel kann es zum Klonen eines Arrays verwendet werden. Wenn Sie einfach die Werte eines vorhandenen Arrays einem neuen Array zuweisen, wird durch Änderungen am neuen Array das vorhandene Array aktualisiert: 🎜rrreee🎜 Mithilfe des Spread-Operators können Sie ein vorhandenes Array in ein neues Array klonen, und Aktualisieren Sie das neue Array. Alle am Array vorgenommenen Änderungen wirken sich nicht auf das vorhandene Array aus: 🎜rrreee🎜 Es ​​ist zu beachten, dass dadurch nur ein eindimensionales Array geklont wird. Es funktioniert nicht mit mehrdimensionalen Arrays. 🎜🎜Der Spread-Operator kann auch verwendet werden, um mehrere Arrays zu einem zu verketten. Zum Beispiel: 🎜rrreee🎜 Sie können den Spread-Operator auch für eine Zeichenfolge verwenden, um ein Array zu erstellen, in dem jedes Element ein Zeichen in der Zeichenfolge ist: 🎜rrreee

🎜Objekte erstellen 🎜🎜🎜 Der Spread-Operator kann auf unterschiedliche Weise zum Erstellen von Objekten verwendet werden. 🎜🎜Es kann zum flachen Klonen eines anderen Objekts verwendet werden. Zum Beispiel: 🎜rrreee🎜 Es ​​kann auch verwendet werden, um mehrere Objekte zu einem zusammenzuführen. Beispiel: 🎜rrreee🎜 Beachten Sie, dass bei Objekten mit demselben Eigenschaftsnamen der Wert des zuletzt erweiterten Objekts verwendet wird. Zum Beispiel: 🎜rrreee🎜Der Spread-Operator kann verwendet werden, um ein Objekt aus einem Array zu erstellen, wobei der Index im Array zur Eigenschaft und der Wert an diesem Index zum Wert der Eigenschaft wird. Zum Beispiel: 🎜rrreee🎜 Es ​​kann auch verwendet werden, um ein Objekt aus einer Zeichenfolge zu erstellen, wobei der Index in der Zeichenfolge zu einer Eigenschaft wird und das Zeichen an diesem Index zum Wert der Eigenschaft wird. Zum Beispiel: 🎜rrreee

🎜NodeList in Array konvertieren🎜🎜🎜NodeList ist eine Sammlung von Knoten, die Elemente im Dokument sind. Auf Elemente wird im Gegensatz zu Arrays über Methoden in der Sammlung zugegriffen, z. B. item oder entries. 🎜🎜Sie können NodeList mithilfe des Spread-Operators in ein Array konvertieren. Zum Beispiel: 🎜rrreee

🎜Duplikate aus einem Array entfernen🎜🎜🎜Set-Objekt ist eine Sammlung, die nur eindeutige Werte speichert. Ähnlich wie bei NodeList kann ein Set mithilfe des Spread-Operators in ein Array umgewandelt werden. 🎜🎜Da Set nur eindeutige Werte speichert, können Sie es mit dem Spread-Operator koppeln, um Duplikate aus einem Array zu entfernen. Zum Beispiel: 🎜rrreee

🎜Expand-Operator und Rest-Operator🎜🎜🎜Der Rest-Operator ist ebenfalls ein Dreipunktoperator (...), aber Es wird für unterschiedliche Zwecke verwendet. Der Restoperator kann in der Argumentliste einer Funktion verwendet werden, um anzugeben, dass die Funktion eine undefinierte Anzahl von Argumenten akzeptiert. Diese Parameter können als Arrays behandelt werden. 🎜🎜Zum Beispiel: 🎜rrreee🎜In diesem Beispiel wird der Rest-Operator als Argument für die Funktion calculateSum verwendet. Anschließend durchlaufen Sie die Elemente im Array und addieren sie, um ihre Summe zu berechnen. 🎜🎜Sie können dann die Variablen einzeln als Argumente an die Funktion calculateSum übergeben oder die Elemente des Arrays als Argumente mit dem Spread-Operator übergeben: 🎜rrreee🎜🎜Schlussfolgerung🎜🎜🎜Der Spread-Operator ermöglicht es Ihnen, mit weniger Codezeilen mehr zu erreichen und gleichzeitig die Lesbarkeit Ihres Codes zu gewährleisten. Es kann mit Iterables verwendet werden, um Argumente an Funktionen zu übergeben oder um Arrays und Objekte aus anderen Iterables zu erstellen. 🎜

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Einfaches Programmiervideo】

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem die verschiedenen Möglichkeiten zur Verwendung des Spread-Operators in JavaScript ausführlich erläutert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!