So verwenden Sie den Spread-Operator in es6

Verwendung des es6-Spread-Operators: 1. Array kopieren, Syntax „[...array]“; 2. Arrays zusammenführen, Syntax „[...array1,...array2]“; , die Syntax lautet „[...array, ‚element value‘]“; 4. Verwenden Sie es mit dem Math-Objekt, um den Maximalwert, den Minimalwert oder die Summe zu berechnen. 5. Übergeben Sie unendliche Parameter an die Funktion, die Syntax lautet „; const myFunc=( ...args)=>{};"; 6. Konvertieren Sie die Zeichenfolge in ein Zeichenarray. Die Syntax lautet „[...string]“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Einführung in den Spread-Operator in es6

Der Spread-Operator ... wird in ES6 eingeführt, der das iterierbare Objekt in seine einzelnen Elemente erweitert. Das sogenannte iterierbare Objekt ist jedes iterierbare Objekt, das durchlaufen werden kann Verwenden einer for-of-Schleife. Objekte wie: Array (allgemeine Methoden für Arrays), Strings, Map (Map verstehen), Set (wie verwendet man Set?), DOM-Knoten usw.

Es ist wie die umgekehrte Operation des Restparameters, bei der ein Array in eine Folge von durch Kommas getrennten Parametern umgewandelt wird. Der Spread-Operator kann in Verbindung mit normalen Funktionsparametern verwendet werden und es kann auch ein Ausdruck dahinter platziert werden. Wenn ihm jedoch ein leeres Array folgt, hat dies keine Auswirkung.

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

Bedeutung

Ersetzen Sie die Apply-Methode der Funktion

Da der Spread-Operator das Array erweitern kann, ist die Apply-Methode nicht mehr erforderlich, um das Array in einen Parameter der Funktion umzuwandeln.

10+ Möglichkeiten, den Spread-Operator zu verwenden (...) ...）的10+种用法

1、复制数组

我们可以使用展开操作符复制数组，不过要注意的是这是一个浅拷贝。

const arr1 = [1,2,3];
const arr2 = [...arr1];
console.log(arr2);
// [ 1, 2, 3 ]

这样我们就可以复制一个基本的数组，注意，它不适用于多级数组或带有日期或函数的数组。

2、合并数组

假设我们有两个数组想合并为一个，早期间我们可以使用concat方法，但现在可以使用展开操作符：

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

我们还可以通过不同的排列方式来说明哪个应该先出现。

const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];

此外，展开运算符号还适用多个数组的合并：

const output = [...arr1, ...arr2, ...arr3, ...arr4];

3、向数组中添加元素

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

4、向对象添加属性

假设你有一个user 的对象，但它缺少一个age属性。

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};

要向这个user对象添加age，我们可以再次利用展开操作符。

const output = {...user, age: 31};

5、使用 Math() 函数

假设我们有一个数字数组，我们想要获得这些数字中的最大值、最小值或者总和。

const arr1 = [1, -1, 0, 5, 3];

为了获得最小值，我们可以使用展开操作符和 Math.min 方法。

const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1

同样，要获得最大值，可以这么做：

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);
console.log(max);
// 5

如大家所见，最大值5，如果我们删除5，它将返回3。

你可能会好奇，如果我们不使用展开操作符会发生什么？

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN

这会返回NaN，因为JavaScript不知道数组的最大值是什么。

6、rest 参数

假设我们有一个函数，它有三个参数。

const myFunc(x1, x2, x3) => {
    console.log(x1);
    console.log(x2);
    console.log(x3);
}

我们可以按以下方式调用这个函数:

myFunc(1, 2, 3);

但是，如果我们要传递一个数组会发生什么。

const arr1 = [1, 2, 3];

我们可以使用展开操作符将这个数组扩展到我们的函数中。

myFunc(...arr1);
// 1
// 2
// 3

这里，我们将数组分为三个单独的参数，然后传递给函数。

const myFunc = (x1, x2, x3) => {
  console.log(x1);
  console.log(x2);
  console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3

7、向函数传递无限参数

假设我们有一个函数，它接受无限个参数，如下所示：

const myFunc = (...args) => {
  console.log(args);
};

如果我们现在调用这个带有多个参数的函数，会看到下面的情况:

myFunc(1, 'a', new Date());

返回：

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

然后，我们就可以动态地循环遍历参数。

8、将 nodeList 转换为数组

假设我们使用了展开运算符来获取页面上的所有p：

const el = [...document.querySelectorAll('p')];
console.log(el);
// (3) [p, p, p]

在这里可以看到我们从dom中获得了3个p。

现在，我们可以轻松地遍历这些元素，因为它们是数组了。

const el = [...document.querySelectorAll('p')];
el.forEach(item => {
  console.log(item);
});
// <p></p>
// <p></p>
// <p></p>

9、解构变量

解构对象

假设我们有一个对象user:

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

现在，我们可以使用展开运算符将其分解为单个变量。

const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }

这里，我们解构了user对象，并将firstname解构为firstname变量，将对象的其余部分解构为rest

🎜🎜🎜🎜1. Ein Array kopieren 🎜🎜🎜🎜 Wir können den Spread-Operator verwenden, um ein Array zu kopieren, Aber seien Sie vorsichtig. Die Sache ist, dass es sich um eine 🎜flache Kopie🎜 handelt. 🎜

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

🎜 Auf diese Weise können wir ein einfaches Array kopieren. Beachten Sie, dass dies nicht mit mehrstufigen Arrays oder Arrays mit Datumsangaben oder Funktionen funktioniert. 🎜🎜🎜🎜2. Arrays zusammenführen 🎜🎜🎜🎜 Angenommen, wir haben zwei Arrays, die wir zu einem zusammenführen möchten. Früher konnten wir die Methode concat verwenden, aber jetzt können wir die verwenden Spread-Operator: 🎜

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

🎜Wir Es gibt auch verschiedene Vereinbarungen, um anzugeben, was zuerst kommen soll. 🎜

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

🎜Darüber hinaus eignet sich das Erweiterungsoperatorsymbol auch zum Zusammenführen mehrerer Arrays: 🎜

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

🎜🎜🎜3. Elemente zu einem Array hinzufügen🎜🎜🎜

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

🎜🎜🎜4. Attribute zu einem Objekt hinzufügen🎜🎜🎜🎜 Angenommen, Sie haben ein user, aber es fehlt eine age-Eigenschaft. 🎜rrreee🎜Um age zu diesem user-Objekt hinzuzufügen, können wir erneut den Spread-Operator verwenden. 🎜rrreee🎜🎜🎜5. Verwenden Sie die Math()-Funktion🎜🎜🎜🎜Angenommen, wir haben ein Array von Zahlen und möchten das Maximum, Minimum oder die Summe dieser Zahlen erhalten. 🎜rrreee🎜Um den Mindestwert zu erhalten, können wir den Spread-Operator und die Methode Math.min verwenden. 🎜rrreee🎜Um den Maximalwert zu erhalten, können Sie auch Folgendes tun: 🎜rrreee🎜Wie Sie sehen können, ist der Maximalwert 5, und wenn wir 5 entfernen, es wird 3 zurückgegeben. 🎜🎜Sie fragen sich vielleicht, was passiert, wenn wir den Spread-Operator nicht verwenden? 🎜rrreee🎜Dies gibt 🎜NaN🎜 zurück, da JavaScript den Maximalwert des Arrays nicht kennt. 🎜🎜🎜🎜6. Restparameter 🎜🎜🎜🎜 Angenommen, wir haben eine Funktion mit drei Parametern. 🎜rrreee🎜 Wir können diese Funktion wie folgt aufrufen: 🎜rrreee🎜 Aber was passiert, wenn wir ein Array übergeben wollen? 🎜rrreee🎜Wir können dieses Array mit dem Spread-Operator in unsere Funktion erweitern. 🎜rrreee🎜Hier teilen wir das Array in drei separate Parameter auf und übergeben sie an die Funktion. 🎜rrreee🎜🎜🎜7. Übergeben Sie unbegrenzte Parameter an die Funktion 🎜🎜🎜🎜 Angenommen, wir haben eine Funktion, die unbegrenzte Parameter wie folgt akzeptiert: 🎜rrreee🎜Wenn wir diese Funktion nun mit mehreren Parametern aufrufen, sehen wir die folgende Situation: 🎜rrreee🎜 gibt Folgendes zurück: 🎜rrreee🎜 Dann können wir die Parameter dynamisch durchlaufen. 🎜🎜🎜🎜8. Konvertieren Sie nodeList in ein Array 🎜🎜🎜🎜 Angenommen, wir verwenden den Spread-Operator, um alle p auf der Seite abzurufen: 🎜rrreee🎜Hier können Sie sehen, was wir aus Dom 3 erhalten p. 🎜🎜Jetzt können wir diese Elemente problemlos durchlaufen, da es sich um Arrays handelt. 🎜rrreee🎜🎜🎜9. Destrukturieren von Variablen 🎜🎜🎜🎜🎜 Destrukturieren von Objekten 🎜🎜🎜 Angenommen, wir haben ein Objekt user: 🎜rrreee🎜 Jetzt können wir es mit dem Spread-Operator in einzelne Variablen zerlegen . 🎜rrreee🎜Hier destrukturieren wir das Objekt user und destrukturieren firstname in die Variable firstname und den Rest des Objekts in restVariable. 🎜<p><strong>解构数组</strong></p><pre class="brush:php;toolbar:false">const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12]; console.log(currentMonth); // 7 console.log(others); // [ 8, 9, 10, 11, 12 ]</pre><p><span style="font-size: 18px;"><strong>10、展开字符串（字符串转字符数组）</strong></span></p> <p>String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：</p> <pre class="brush:php;toolbar:false">const title = &quot;china&quot;; const charts = [...title]; console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]</pre> <p>进而可以简单进行字符串截取，如下：</p> <pre class="brush:php;toolbar:false">const title = &quot;china&quot;; const short = [...title]; short.length = 2; console.log(short.join(&quot;&quot;)); // ch</pre> <p><span style="font-size: 18px;"><strong>11、数组去重</strong></span></p> <p>与 Set 一起使用消除数组的重复项，如下：</p><pre class="brush:php;toolbar:false">const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5]; console.log(arrayNumbers); const newNumbers = [...new Set(arrayNumbers)]; console.log(newNumbers); // [ 1, 5, 9, 3, 7, 10, 4, 2 ]</pre><p><img src="https://img.php.cn/upload/image/299/731/678/1665481190710066.png" title="1665481190710066.png" alt="So verwenden Sie den Spread-Operator in es6"></p> <p><strong><span style="font-size: 18px;">12、打印日志</span></strong></p> <p>在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：</p><pre class="brush:php;toolbar:false">const years = [2018, 2019, 2020, 2021]; console.log(...years); // 2018 2019 2020 2021</pre><p>【相关推荐：<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端开发">web前端开发</a>】</p>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Spread-Operator in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!