Lassen Sie uns über den Spread-Operator in ES6 sprechen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, in dem hauptsächlich verwandte Themen zum Erweiterungsoperator vorgestellt werden. Der Erweiterungsoperator von S6 hat eine sehr einfache Syntax und verwendet drei Punkte zur Darstellung von „..“. Sie können ein Array in eine durch Kommas getrennte Parametersequenz umwandeln. Schauen wir uns das an. Ich hoffe, es wird für alle hilfreich sein.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Die Syntax des Spread-Operators von ES6 ist sehr einfach und verwendet drei Punkte zur Darstellung von „…“. Sie können ein Array in eine durch Kommas getrennte Folge von Parametern konvertieren.

Es erweitert das iterierbare Objekt in seine einzelnen Elemente. Das sogenannte iterierbare Objekt ist jedes Objekt, das mit der for of -Schleife durchlaufen werden kann, wie zum Beispiel: Array, String, Map -, <code>Set-, DOM-Knoten usw. for of 循环进行遍历的对象，例如：数组、字符串、Map、Set、DOM节点等。

基础语法

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

该运算符主要用于函数调用

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

        上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们都使用了扩展运算符。该运算符将一个数组，变为参数序列。 

扩展运算符后面还可以放置表达式

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

         如果扩展运算符后面是一个空数组，则不产生任何效果。

[...[], 1]
// [1]

扩展运算符还有许多用法...

一、 替代数组的 apply 方法

使用 Math.max() 函数来获取最大值的用法是：

const m = Math.max(1, 2, 3); //结果为3

使用 apply 方法结合 Math.max():

        但如果要计算数组里的最大值，显然数组是不能直接作为 Math.max() 的参数，我们需要把它展开。在ES6之前，我们也是需要结合apply来处理：

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}

console.log(max(arr));

ES6使用扩展运算符(...)就很简单就可以展开，上面的例子变为：

var arr = [2, 4, 8, 6, 0];
console.log(Math.max(...arr));  // 3

二、扩展运算符的应用 

1. 合并数组

        扩展运算符给了我们全新的合并数组的方法

// ES5 apply 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1   [0, 1, 2, 3, 4, 5]

        使用扩展运算符就可以很简单地把数组展开为参数列表

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

       上面代码中，a3和a4是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。

        注意：这两种方法都是浅拷贝，使用的时候需要注意。

2. 拷贝数组

        数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

        ES5 只能用变通方法来复制数组。

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

        上面代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响。 

        扩展运算符提供了复制数组的简便写法。

//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷贝数组
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

       记住：数组仍通过指针得到，所以我们并没有复制数组本身，我们复制的只是一个新的指针。

3. 将伪数组转换为数组

NodeList 对象是节点的集合，通常是由属性，如 Node.childNodes 和方法，如 document.querySelectorAll

Grundlegende Syntax

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

Dieser Operator wird hauptsächlich für Funktionsaufrufe verwendet

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

Im obigen Code sind die beiden Zeilen array.push(...items) und add(...numbers) beide Funktionsaufrufe. , sie alle verwenden den Spread-Operator. Dieser Operator wandelt ein Array in eine Folge von Parametern um. 🎜

Ausdrücke können auch nach dem Spread-Operator platziert werden

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest  // []
const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

🎜 Wenn auf den Spread-Operator ein leeres Array folgt, hat dies keine Auswirkung. 🎜

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

🎜Es gibt viele andere Verwendungsmöglichkeiten des Spread-Operators...🎜

1 Die Apply-Methode zum Ersetzen array

​​>

Die Verwendung der Funktion Math.max() zum Erhalten des Maximalwerts ist:

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Verwenden Sie die apply-Methode in Verbindung mit Math.max():

🎜 Wenn Sie jedoch den Maximalwert im Array berechnen möchten, kann das Array dies offensichtlich nicht direkt als Parameter von Math.max() verwendet werden. Wir müssen es erweitern. Vor ES6 mussten wir auch „Apply to Process“ kombinieren: 🎜

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

🎜ES6 kann einfach mit dem Spread-Operator (...) erweitert werden. Das obige Beispiel wird zu: 🎜

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

2. Anwendung von Spread-Operatoren

1. Arrays zusammenführen

🎜 Der Spread-Operator bietet uns eine neue Möglichkeit, Arrays zusammenzuführen🎜

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

🎜 Mit dem Spread-Operator können Sie Arrays ganz einfach zu einer Parameterliste erweitern 🎜 rrreee🎜 Im obigen Code sind a3 und a4 neue Arrays, die mit zwei verschiedenen Methoden zusammengeführt wurden, aber ihre Mitglieder sind alle mit den ursprünglichen Arrays identisch. Ein Verweis auf ein Mitglied ist eine oberflächliche Kopie. Wenn der Wert, auf den die Referenz zeigt, geändert wird, wird er synchron im neuen Array widergespiegelt.都 Hinweis: Bei diesen beiden Methoden handelt es sich um flache Kopien, bei deren Verwendung Vorsicht geboten ist. 🎜

2. Array kopieren

🎜 Array ist ein zusammengesetzter Datentyp. Wenn Sie es direkt kopieren, kopieren Sie nur den Zeiger auf die zugrunde liegende Datenstruktur, anstatt eine brandneue zu klonen Array. 🎜🎜 ES5 kann nur Workarounds zum Kopieren von Arrays verwenden. 🎜rrreee🎜 Im obigen Code gibt a1 einen Klon des ursprünglichen Arrays zurück. Das Ändern von a2 hat keine Auswirkungen auf a1. 🎜🎜 Der Spread-Operator bietet eine einfache Möglichkeit, ein Array zu kopieren. 🎜rrreee🎜 Denken Sie daran: Das Array wird immer noch über einen Zeiger erhalten, wir kopieren also nicht das Array selbst, sondern kopieren einfach einen neuen Zeiger. 🎜

3. Pseudo-Array in Array konvertieren h2 >

🎜NodeList-Objekt ist eine Sammlung von Knoten, die normalerweise aus Eigenschaften wie Node.childNodes und Methoden wie document.querySelectorAll besteht. code> zurückgegeben. 🎜

        像 NodeList 和 arguments 这种伪数组，类似于数组，但不是数组，没有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 来迭代

        可以通过扩展运算符将其转为数组，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

        注意：使用扩展运算符将伪数组转换为数组有局限性，这个类数组必须得有默认的迭代器且伪可遍历的

4.与解构赋值结合

        扩展运算符可以与解构赋值结合起来，用于生成数组

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子：

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest  // []
const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

        注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

5. 字符串

        ES6的扩展语法可以很简单的把一个字符串分割为单独字符的数组：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

6.Map 和 Set 结构，Generator 函数

        扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

        Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

        上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。

        如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错。

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonLassen Sie uns über den Spread-Operator in ES6 sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!