Was ist die neue Array-Methode in es6?

Neue Array-Methoden: 1. from(), die ein Array-ähnliches oder iterierbares Objekt in ein echtes Array umwandeln kann 2. of(), das eine Reihe von Werten in ein Array umwandeln kann, das das Array ergänzt Konstruktor Array() Insuffizienz; 3. find() und findIndex(), geben das erste Array-Element zurück, das die Bedingungen erfüllt 4. fill() und so weiter;

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

es6 neue Array-Methode

1. Array.from()

Array.from-Methode wird verwendet, um zwei Arten von Objekten in echte Arrays umzuwandeln:

• Array-ähnliche Objekte (Array - wie Objekt)

• Iterierbare Objekte (einschließlich der neuen Datenstrukturen Set und Map von ES6)

bedeutet, dass Array.from sie konvertieren kann, solange die Datenstruktur der Iterator-Schnittstelle bereitgestellt wird. In Array konvertieren

In In der tatsächlichen Entwicklung kann es im Allgemeinen verwendet werden, um die von der DOM-Operation zurückgegebene NodeList-Sammlung und das Argumentobjekt innerhalb der Funktion zu konvertieren Re

const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...也可实现相同的效果
console.log([...new Set(arr)]) //[1,2,3,5]

• Für Browser, die diese Methode nicht bereitstellen, können Sie stattdessen die Array.prototype.slice-Methode verwenden

  cosnt toArray = (() => {
      Array.from ? Array.from : obj => [].slice.call(obj)
  })()

  
  Sie können auch den zweiten Parameter empfangen und den zweiten Parameter an eine Funktion übergeben, um etwas zu implementieren Ähnlich wie bei der Map-Methode. Verarbeiten Sie jedes Element und geben Sie das verarbeitete Array zurück. weil es korrekt verarbeitet werden kann Verschiedene Unicode-Zeichen, wodurch der JS-eigene Fehler vermieden wird, Unicode-Zeichen größer als /uFFFF als 2 Zeichen zu zählen

  Array.from([1,2,3] , item => item *2)    //[2,4,6]

2, Array.of()

Array.of-Methode wird zum Konvertieren verwendet eine Reihe von Werten, in Array konvertieren. Machen Sie die Mängel des Array-Konstruktors Array() wett. Da die Anzahl der Parameter unterschiedlich ist, ist das Verhalten von Array() unterschiedlich Erfüllt die Bedingungen Das Array-Mitglied, sein Parameter ist eine Rückruffunktion. Alle Array-Mitglieder führen diese Funktion nacheinander aus, bis das erste Mitglied gefunden wird, das die Bedingung erfüllt, und geben dann dieses Mitglied zurück. Wenn kein Mitglied vorhanden ist, das die Bedingung erfüllt, wird es zurückgegeben Gibt undefiniert zurück. Diese Methode. Die Rückruffunktion empfängt drei Parameter: aktueller Wert, aktuelle Position, ursprüngliches Array ()-Methode, mit der Ausnahme, dass sie die erste zurückgibt. Die Position eines Array-Mitglieds, das die Bedingungen erfüllt. Wenn keine vorhanden ist, wird -1 zurückgegeben. Füllen Sie ein Array aus

• Die Füllmethode kann auch den zweiten und dritten Parameter akzeptieren, der zur Angabe verwendet wird Die Startposition und die Endposition des Füllens

function countLength(string) {
    return Array.from(string).length
}

Beide Methoden können NaN im Array finden, und in ES5 kann indexOf() NaN nicht finden

5 Die drei Methoden Einträge(), Schlüssel() und Werte( )

von Array-Instanzen werden alle zum Durchlaufen des Arrays verwendet und alle geben ein Traverser-Objekt zurück, das verwendet werden kann. Der Unterschied zwischen for...of Loop Traversal

ist:

keys() ist für Durchlaufen von Schlüsselnamen

values() dient zum Durchlaufen von Schlüsselwerten

entries() ist für Schlüssel-Wert-Paare vorgesehen. Traverse

//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]

// Array.of方法可以用下面的代码模拟实现。

function ArrayOf() {
  return [].slice.call(arguments);
}

6. Die Methode Includes() gibt einen booleschen Wert zurück

Diese Methode gibt einen booleschen Wert zurück, der angibt, ob ein Array einen bestimmten Wert enthält

[1,12,4,0,5].find(（item,index , arr） => return item < 1)   // 0

und kann auch einen zweiten Parameter empfangen, der die Startposition der Suche angibt, der Standardwert ist 0. Wenn der zweite Parameter eine negative Zahl ist, gibt er die Position der Zahl an. Wenn der zweite Parameter größer als die Länge des Arrays ist, beginnt er bei Index 0. Die Methode „includes“ gleicht die Mängel der Methode „indexOf“ aus, die nicht semantisch genug ist und NaN falsch einschätzt. Kompatible Methoden:

// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支持这种复杂的查找
var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.find(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }

7. Array-Instanz flat(), flatMap()

flat() wird verwendet, um verschachtelte Arrays in eindimensionale Arrays zu „flachen“. Diese Methode gibt ein neues Array zurück und hat keine Auswirkungen auf die Originaldaten. Der übergebene Parameter gibt an, wie viele Ebenen reduziert werden sollen. Die Standardeinstellung ist, dass flatMap() nur eine Ebene des Arrays erweitern kann. Die Methode führt eine Funktion für jedes Mitglied des ursprünglichen Arrays aus (entspricht der Ausführung von Array.prototype.map()) und führt dann die flat()-Methode für das Array aus, das aus dem Rückgabewert besteht. Diese Methode gibt ein neues Array zurück, ohne das ursprüngliche Array zu ändern

[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10)   //3

• 8. Das copywithin() der Array-Instanz

kopiert die Mitglieder an der angegebenen Position an andere Positionen innerhalb des aktuellen Arrays und gibt dann das zurück aktuelles Array, das sich ändern wird. Das ursprüngliche Array

erhält drei Parameter: 1, Ziel (erforderlich) Ersetzen Sie die Daten ab dieser Position

2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数

3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数

三个参数都应该是数字，如果不是，会自动转为数值

[1,2,3,4,5].copywithin(0,3);  //[4,5,3,4,5]  表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2

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

Das obige ist der detaillierte Inhalt vonWas ist die neue Array-Methode in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!