ES6 in Aktion: Neuarray.* Und Array.Prototype.* Methoden

In diesem Artikel werden mehrere neue ES6 -Methoden untersucht, die die Array -Manipulation verbessern, die als Array.* (Klassenmethoden) und Array.prototype.* (Instanzmethoden) kategorisiert sind. Wir werden ihre Verwendung mit Beispielen untersuchen und Polyfills auf breitere Kompatibilität diskutieren. es6-shim von Paul Miller bietet eine umfassende Lösung für das Polyendieren dieser Methoden.

Schlüsselkonzepte:

• ES6 führt zahlreiche Array -Methoden ein, darunter Array.from(), Array.prototype.find(), Array.prototype.findIndex(), Array.prototype.keys(), Array.prototype.values() und Array.prototype.fill().
• Array.from() konstruiert ein neues Array aus Array-ähnlichen oder iterbaren Objekten, wodurch gemeinsame Herausforderungen mit Array-ähnlichen Strukturen effektiv behandelt werden. Es wird weithin unterstützt, außer im Internet Explorer.
• Array.prototype.find() und Array.prototype.findIndex() Suchen Sie das erste Array -Element, das eine bestimmte Testfunktion erfüllt. find() Gibt das Element selbst zurück; findIndex() Gibt seinen Index zurück. Beide haben gute Unterstützung ohne Internet -Explorer.
• Array.prototype.keys() und Array.prototype.values() Array -Iteratoren erzeugen, die Array -Tasten bzw. Werte bereitstellen. Array.prototype.fill() bevölkert ein Array mit einem angegebenen Wert innerhalb eines bestimmten Bereichs. Diese Methoden unterstützen umfassende Unterstützung, ohne den Internet -Explorer.

Array.from()

Array.from() erstellt ein Array aus Array-ähnlichen oder iterbaren Quellen. Dies befasst sich mit der traditionellen Problemumgehung: [].slice.call(arrayLike).

syntax:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameter:

• arrayLike: Array-ähnliches oder iterierbares Objekt.
• mapFn: Funktion an jedes Element angewendet.
• thisArg: Kontext (this) für mapFn.

Beispiel: Verdoppelungsfunktionsargumente:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Support: weithin unterstützt, außer im Internet Explorer. Polyfills sind auf MDN und von Mathias Bynens erhältlich.

Array.prototype.find()

Array.prototype.find() Gibt das erste Element zurück, das eine bereitgestellte Testfunktion erfüllt.

syntax:

Array.prototype.find(callback[, thisArg])

Rückrufparameter:

• element: aktuelles Element.
• index: Index des aktuellen Elements.
• array: Das Array.

Beispiel: Finden Sie das erste Element größer als 2:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Support: weithin unterstützt, außer im Internet Explorer. Eine Polyfill ist auf mdn.

erhältlich

Array.prototype.findIndex()

Ähnlich wie find(), gibt jedoch den Index des ersten passenden Elements zurück oder -1, wenn keine gefunden wird.

Beispiel: Finden des Index des ersten Elements größer als 2:

Array.from(arrayLike[, mapFn[, thisArg]])

Support: weithin unterstützt, außer im Internet Explorer. Eine Polyfill ist auf mdn.

erhältlich

Array.prototype.keys() und Array.prototype.values()

Diese Methoden geben Array -Iteratoren für Schlüssel bzw. Werte zurück.

Beispiele:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Support: keys() hat gute Unterstützung außer Internet Explorer. values() kann eine Transpilation erfordern (z. B. Babel).

Array.prototype.fill()

Array.prototype.fill() füllt ein Array mit einem angegebenen Wert.

syntax:

Array.prototype.find(callback[, thisArg])

Beispiel:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Support: weithin unterstützt, außer im Internet Explorer. Polyfills sind auf MDN und von Addy Osmani erhältlich.

Schlussfolgerung:

Die Array -Methoden von

ES6 verbessern die Array -Manipulationsfunktionen von JavaScript erheblich. Während die meisten weit verbreitete Unterstützung genießen, sollten Sie Polyfills für ältere Browser in Betracht ziehen.

häufig gestellte Fragen (um Klarheit und Zuversicht neu formatiert):

Der bereitgestellte FAQ -Abschnitt ist bereits ziemlich umfassend. Um es zu verbessern, würde ich vorschlagen:

1. Konsolidierung: Kombinieren ähnliche Fragen (z. B. diejenigen zur Browserkompatibilität).
2. SUCISSION: Verkaufen Sie Antworten, während wesentliche Informationen beibehalten.
3. Code -Beispiele: Fügen Sie mehr prägnantere, veranschaulichende Code -Snippets für jede Methode ein.

Hier ist ein Beispiel für die Umstrukturierung einiger Fragen und Antworten:

F: Was sind die wichtigsten neuen ES6 -Array -Methoden und wie funktionieren sie?

a: es6 führt mehrere leistungsstarke Array -Methoden ein:

• find(): Gibt das erste Element zurück, das eine bereitgestellte Testfunktion erfüllt. arr.find(x => x > 5)
• findIndex(): Gibt den Index des ersten Matching -Elements zurück. arr.findIndex(x => x > 5)
• fill(): Ersetzt Array -Elemente durch einen statischen Wert innerhalb eines bestimmten Bereichs. arr.fill(0, 2, 4)
• copyWithin(): Kopiert eine Abfolge von Array -Elementen in eine andere Position im selben Array. arr.copyWithin(0, 3, 4)
• keys(): Gibt einen Iterator für Arrayschlüssel zurück.
• values(): Gibt einen Iterator für Array -Werte zurück.
• from(): Erstellt ein neues Array aus einem Array-ähnlichen oder iterbaren Objekt.

F: Browserkompatibilität und Polyfills?

a: Die meisten modernen Browser unterstützen diese Methoden. Für ältere Browser (insbesondere im Internet Explorer) benötigen Sie jedoch Polyfills (z. B. es6-shim). MDN liefert Polyfills für viele dieser Methoden.

Durch die Umstrukturierung der FAQ auf diese Weise können Sie es effizienter und einfacher zu verstehen. Denken Sie daran, ähnliche Prinzipien auf die verbleibenden Fragen und Antworten anzuwenden.

Das obige ist der detaillierte Inhalt vonES6 in Aktion: Neuarray.* Und Array.Prototype.* Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!