Suche…
Syntax
- array = [ Wert , Wert , ... ]
- array = new Array ( Wert , Wert , ... )
- array = Array.of ( Wert , Wert , ... )
- array = Array.from ( arrayLike )
Bemerkungen
Zusammenfassung: Arrays in JavaScript sind ganz einfach modifizierte Object
mit einem fortgeschrittenen Prototyp, die eine Vielzahl von Aufgaben ausführen können, die sich auf Listen beziehen. Sie wurden in ECMAScript 1st Edition hinzugefügt, und andere Prototypmethoden kamen in ECMAScript 5.1 Edition.
Warnung: Wenn im new Array()
ein numerischer Parameter mit dem Namen n angegeben wird, wird ein Array mit einer Anzahl n von Elementen deklariert, nicht ein Array mit einem Element mit dem Wert n !
console.log(new Array(53)); // This array has 53 'undefined' elements!
Davon abgesehen, sollten Sie immer []
wenn Sie ein Array deklarieren:
console.log([53]); // Much better!
Standard-Array-Initialisierung
Es gibt viele Möglichkeiten, Arrays zu erstellen. Am häufigsten werden Array-Literale oder der Array-Konstruktor verwendet:
var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);
Wenn der Array-Konstruktor ohne Argumente verwendet wird, wird ein leeres Array erstellt.
var arr3 = new Array();
Ergebnisse in:
[]
Wenn es mit genau einem Argument verwendet wird und dieses Argument eine number
, wird stattdessen ein Array dieser Länge mit allen undefined
Werten erstellt:
var arr4 = new Array(4);
Ergebnisse in:
[undefined, undefined, undefined, undefined]
Dies gilt nicht, wenn das einzelne Argument nicht numerisch ist:
var arr5 = new Array("foo");
Ergebnisse in:
["foo"]
Ähnlich wie bei einem Array-Literal kann Array.of
mit einer Reihe von Argumenten zum Erstellen einer neuen Array
Instanz verwendet werden:
Array.of(21, "Hello", "World");
Ergebnisse in:
[21, "Hello", "World"]
Im Gegensatz zum Array-Konstruktor wird beim Erstellen eines Arrays mit einer einzelnen Nummer wie Array.of(23)
ein neues Array [23]
und nicht ein Array mit der Länge 23 erstellt.
Die andere Möglichkeit, ein Array zu erstellen und zu initialisieren, wäre Array.from
var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));
wird resultieren:
[0, 1, 16, 81, 256]
Array Spread / Rest
Spread-Operator
Mit ES6 können Sie Spreads verwenden, um einzelne Elemente in eine durch Kommas getrennte Syntax zu unterteilen:
let arr = [1, 2, 3, ...[4, 5, 6]]; // [1, 2, 3, 4, 5, 6]
// in ES < 6, the operations above are equivalent to
arr = [1, 2, 3];
arr.push(4, 5, 6);
Der Spread-Operator wirkt auch auf Zeichenfolgen und trennt jedes einzelne Zeichen in ein neues Zeichenfolgenelement. Wenn Sie eine Array-Funktion verwenden, um diese in Ganzzahlen zu konvertieren, entspricht das oben erstellte Array dem folgenden:
let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]
Bei Verwendung einer einzelnen Zeichenfolge kann dies vereinfacht werden:
let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]
Wenn das Mapping nicht durchgeführt wird, gilt Folgendes:
let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]
Der Spread-Operator kann auch verwendet werden, um Argumente in eine Funktion zu verbreiten :
function myFunction(a, b, c) { }
let args = [0, 1, 2];
myFunction(...args);
// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);
Restbediener
Der Restoperator tut das Gegenteil des Spread-Operators, indem er mehrere Elemente zu einem einzigen Element zusammenführt
[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]
Argumente einer Funktion sammeln:
function myFunction(a, b, ...rest) { console.log(rest); }
myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]
Werte zuordnen
Es ist häufig erforderlich, ein neues Array basierend auf den Werten eines vorhandenen Arrays zu generieren.
So generieren Sie beispielsweise ein Array mit Stringlängen aus einem Array von Strings:
['one', 'two', 'three', 'four'].map(function(value, index, arr) {
return value.length;
});
// → [3, 3, 5, 4]
['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]
In diesem Beispiel wird der map()
Funktion eine anonyme Funktion bereitgestellt. Die map-Funktion ruft sie für jedes Element im Array auf und stellt die folgenden Parameter in dieser Reihenfolge bereit:
- Das Element selbst
- Der Index des Elements (0, 1 ...)
- Das gesamte Array
Zusätzlich map()
stellt einen optionalen zweiten Parameter , um den Wert zu setzen this
in der Abbildungsfunktion. Je nach Ausführungsumgebung kann der Standardwert this
variieren:
In einem Browser, der Standardwert this
ist immer window
:
['one', 'two'].map(function(value, index, arr) {
console.log(this); // window (the default value in browsers)
return value.length;
});
Sie können es wie folgt in jedes benutzerdefinierte Objekt ändern:
['one', 'two'].map(function(value, index, arr) {
console.log(this); // Object { documentation: "randomObject" }
return value.length;
}, {
documentation: 'randomObject'
});
Werte filtern
Die filter()
-Methode erstellt ein Array, das mit allen Arrayelementen gefüllt ist, die einen als Funktion bereitgestellten Test bestehen.
[1, 2, 3, 4, 5].filter(function(value, index, arr) {
return value > 2;
});
[1, 2, 3, 4, 5].filter(value => value > 2);
Ergebnisse in einem neuen Array:
[3, 4, 5]
Falsche Werte filtern
var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);
Da Boolean eine native JavaScript-Funktion / -Konstruktor ist , die [einen optionalen Parameter] verwendet und die Filtermethode auch eine Funktion übernimmt und das aktuelle Array-Element als Parameter übergibt, können Sie es folgendermaßen lesen:
-
Boolean(0)
gibt false zurück -
Boolean(undefined)
gibt false zurück -
Boolean({})
gibt " true" zurück , dh es wird an das zurückgegebene Array gesendet -
Boolean(null)
gibt false zurück -
Boolean('')
gibt false zurück -
Boolean(true)
gibt true zurück , dh es wird in das zurückgegebene Array geschrieben -
Boolean(5)
gibt " true" zurück , dh es wird in das zurückgegebene Array geschrieben
so wird der Gesamtprozess resultieren
[ {}, true, 5 ]
Ein weiteres einfaches Beispiel
In diesem Beispiel wird dasselbe Konzept verwendet, eine Funktion zu übergeben, die ein Argument akzeptiert
function startsWithLetterA(str) {
if(str && str[0].toLowerCase() == 'a') {
return true
}
return false;
}
var str = 'Since Boolean is a native javascript function/constructor that takes [one optional paramater] and the filter method also takes a function and passes it the current array item as a parameter, you could read it like the following';
var strArray = str.split(" ");
var wordsStartsWithA = strArray.filter(startsWithLetterA);
//["a", "and", "also", "a", "and", "array", "as"]
Iteration
Ein traditioneller for
-loop
Eine traditionelle for
Schleife besteht aus drei Komponenten:
- Die Initialisierung: wird ausgeführt, bevor der Look-Block zum ersten Mal ausgeführt wird
- Die Bedingung: prüft eine Bedingung vor jeder Ausführung des Schleifenblocks und beendet die Schleife, wenn sie falsch ist
- Der Nachgedanke: Wird jedes Mal ausgeführt, nachdem der Loop-Block ausgeführt wurde
Diese drei Komponenten sind durch a voneinander getrennt ;
Symbol. Der Inhalt für jede dieser drei Komponenten ist optional. Dies bedeutet, dass die folgende minimale for
Schleife möglich ist:
for (;;) {
// Do stuff
}
Natürlich müssen Sie eine if(condition === true) { break; }
oder ein if(condition === true) { return; }
irgendwo in dem for
-loop, damit er nicht mehr läuft.
Normalerweise wird die Initialisierung jedoch zur Deklaration eines Indexes verwendet, die Bedingung wird verwendet, um diesen Index mit einem Minimal- oder Maximalwert zu vergleichen, und der Index wird nachträglich verwendet, um den Index zu erhöhen:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
Verwenden einer traditionellen for
Schleife zum Durchlaufen eines Arrays
Die traditionelle Methode zum Durchlaufen eines Arrays lautet wie folgt:
for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}
Oder, wenn Sie es vorziehen, rückwärts zu laufen, machen Sie Folgendes:
for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}
Es sind jedoch viele Variationen möglich, wie zum Beispiel diese:
for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}
... oder dieses ...
var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}
... oder dieses:
var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}
Was am besten funktioniert, hängt hauptsächlich vom persönlichen Geschmack und vom konkreten Anwendungsfall ab, den Sie implementieren.
Beachten Sie, dass jede dieser Varianten von allen Browsern unterstützt wird, einschließlich sehr alter Browser!
Eine while
Schleife
Eine Alternative zu einer for
Schleife ist eine while
Schleife. Um ein Array zu durchlaufen, können Sie Folgendes tun:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
Wie traditionelle for
Loops, while
Loops sogar von den ältesten Browsern unterstützt werden.
Beachten Sie auch, dass jede while-Schleife als for
Schleife überschrieben werden kann. Zum Beispiel verhält sich die while
Schleife genau wie for
-loop:
for(var key = 0; value = myArray[key++];){
console.log(value);
}
for...in
In JavaScript können Sie auch Folgendes tun:
for (i in myArray) {
console.log(myArray[i]);
}
Dies sollte jedoch mit Vorsicht erfolgen, da es sich nicht in allen Fällen wie eine herkömmliche for
Schleife verhält und potenzielle Nebenwirkungen in Betracht gezogen werden müssen. Siehe Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee? für mehr Details.
for...of
In ES 6 wird die for-of
Schleife empfohlen, um die Werte eines Arrays zu durchlaufen:
let myArray = [1, 2, 3, 4];
for (let value of myArray) {
let twoValue = value * 2;
console.log("2 * value is: %d", twoValue);
}
Das folgende Beispiel zeigt den Unterschied zwischen einer for...of
Schleife und einer for...in
Schleife:
let myArray = [3, 5, 7];
myArray.foo = "hello";
for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}
for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
Array.prototype.keys()
Die Array.prototype.keys()
-Methode kann verwendet werden, um Indizes wie Array.prototype.keys()
:
let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
let twoValue = myArray[i] * 2;
console.log("2 * value is: %d", twoValue);
}
Array.prototype.forEach()
Die .forEach(...)
-Methode ist eine Option in ES 5 und höher. Es wird von allen modernen Browsern sowie Internet Explorer 9 und höher unterstützt.
[1, 2, 3, 4].forEach(function(value, index, arr) {
var twoValue = value * 2;
console.log("2 * value is: %d", twoValue);
});
Verglichen mit der traditionellen for
Schleife können wir in .forEach()
nicht aus der Schleife .forEach()
. Verwenden Sie in diesem Fall die for
Schleife oder verwenden Sie die unten dargestellte partielle Iteration.
In allen Versionen von JavaScript ist es möglich, die Indizes eines Arrays unter Verwendung einer traditionellen C-Schleife for
Schleife zu durchlaufen.
var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
var twoValue = myArray[i] * 2;
console.log("2 * value is: %d", twoValue);
}
Es ist auch möglich, while
Schleife zu verwenden:
var myArray = [1, 2, 3, 4],
i = 0, sum = 0;
while(i++ < myArray.length) {
sum += i;
}
console.log(sum);
Array.prototype.every
Wenn Sie seit ES5 einen Teil eines Arrays Array.prototype.every
, können Sie Array.prototype.every
, das so lange wiederholt wird, bis wir false
:
// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
console.log(value);
return value % 2 === 0; // iterate until an odd number is found
});
Entspricht in jeder JavaScript-Version:
var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
console.log(arr[i]);
}
Array.prototype.some
Array.prototype.some
iteriert, bis wir true
:
// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
console.log(value);
return value === 7; // iterate until we find value 7
});
Entspricht in jeder JavaScript-Version:
var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
console.log(arr[i]);
}
Bibliotheken
Schließlich haben viele Utility-Bibliotheken auch ihre eigene foreach
Variante. Drei der beliebtesten sind diese:
jQuery.each()
, in jQuery :
$.each(myArray, function(key, value) {
console.log(value);
});
_.each()
in Underscore.js :
_.each(myArray, function(value, key, myArray) {
console.log(value);
});
_.forEach()
, in Lodash.js :
_.forEach(myArray, function(value, key) {
console.log(value);
});
Siehe auch die folgende Frage zu SO, wo viele dieser Informationen ursprünglich gepostet wurden:
Filtern von Objekt-Arrays
Die filter()
-Methode akzeptiert eine Testfunktion und gibt ein neues Array zurück, das nur die Elemente des ursprünglichen Arrays enthält, die den bereitgestellten Test bestehen.
// Suppose we want to get all odd number in an array:
var numbers = [5, 32, 43, 4];
var odd = numbers.filter(function(n) {
return n % 2 !== 0;
});
let odd = numbers.filter(n => n % 2 !== 0); // can be shortened to (n => n % 2)
odd
würde folgendes Array enthalten: [5, 43]
.
Es funktioniert auch für ein Array von Objekten:
var people = [{
id: 1,
name: "John",
age: 28
}, {
id: 2,
name: "Jane",
age: 31
}, {
id: 3,
name: "Peter",
age: 55
}];
var young = people.filter(function(person) {
return person.age < 35;
});
let young = people.filter(person => person.age < 35);
young
würde das folgende Array enthalten:
[{
id: 1,
name: "John",
age: 28
}, {
id: 2,
name: "Jane",
age: 31
}]
Sie können im gesamten Array nach einem Wert wie diesem suchen:
var young = people.filter((obj) => {
var flag = false;
Object.values(obj).forEach((val) => {
if(String(val).indexOf("J") > -1) {
flag = true;
return;
}
});
if(flag) return obj;
});
Dies gibt zurück:
[{
id: 1,
name: "John",
age: 28
},{
id: 2,
name: "Jane",
age: 31
}]
Array-Elemente in einer Zeichenfolge verbinden
Um alle Elemente eines Arrays zu einer Zeichenfolge zu verknüpfen, können Sie die join
Methode verwenden:
console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"
Wie Sie in der zweiten Zeile sehen können, werden Elemente, die keine Zeichenfolgen sind, zuerst konvertiert.
Array-ähnliche Objekte in Arrays konvertieren
Was sind Array-ähnliche Objekte?
JavaScript hat "Array-like Objects", also Objektdarstellungen von Arrays mit einer length-Eigenschaft. Zum Beispiel:
var realArray = ['a', 'b', 'c'];
var arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
Übliche Beispiele für Array-ähnliche Objekte sind die arguments
in Funktionen und HTMLCollection
oder NodeList
Objekten, die von Methoden wie document.getElementsByTagName
oder document.querySelectorAll
.
Ein Hauptunterschied zwischen Arrays und Array-ähnlichen Objekten besteht jedoch darin, dass Array-ähnliche Objekte von Object.prototype
anstelle von Array.prototype
erben. Das bedeutet, dass Array-ähnliche Objekte nicht auf gängige Array-Prototypmethoden wie forEach()
, push()
, map()
, filter()
und slice()
zugreifen können:
var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;
domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() {
arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.
function func() {
console.log(arguments);
}
func(1, 2, 3); // → [1, 2, 3]
Konvertieren Sie in ES6 Array-ähnliche Objekte in Arrays
-
Array.from
:
const arrayLike = {
0: 'Value 0',
1: 'Value 1',
length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works
-
for...of
:
var realArray = [];
for(const element of arrayLike) {
realArray.append(element);
}
- Spread-Operator:
[...arrayLike]
-
Object.values
:
var realArray = Object.values(arrayLike);
-
Object.keys
:
var realArray = Object
.keys(arrayLike)
.map((key) => arrayLike[key]);
Konvertieren Sie Array-ähnliche Objekte in Arrays in ≤ ES5
Verwenden Sie Array.prototype.slice
wie Array.prototype.slice
:
var arrayLike = {
0: 'Value 0',
1: 'Value 1',
length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version
realArray.indexOf('Value 1'); // Wow! this works
Sie können Function.prototype.call
auch verwenden, um Array.prototype
Methoden für Array-ähnliche Objekte direkt Array.prototype
, ohne sie zu konvertieren:
var domList = document.querySelectorAll('#myDropdown option');
domList.forEach(function() {
// Do stuff
}); // Error! forEach is not defined.
Array.prototype.forEach.call(domList, function() {
// Do stuff
}); // Wow! this works
Sie können auch [].method.bind( arrayLikeObject )
, um Array-Methoden auszuleihen und sie Ihrem Objekt [].method.bind( arrayLikeObject )
:
var arrayLike = {
0: 'Value 0',
1: 'Value 1',
length: 2
};
arrayLike.forEach(function() {
// Do stuff
}); // Error! forEach is not defined.
[].forEach.bind(arrayLike)(function(val){
// Do stuff with val
}); // Wow! this works
Elemente während der Konvertierung ändern
In ES6 können Sie bei Verwendung von Array.from
eine Map-Funktion angeben, die einen zugeordneten Wert für das neue Array zurückgibt.
Array.from(domList, element => element.tagName); // Creates an array of tagName's
Eine detaillierte Analyse finden Sie unter Arrays sind Objekte .
Werte reduzieren
Die Methode " reduce()
" wendet eine Funktion auf einen Akkumulator und jeden Wert des Arrays (von links nach rechts) an, um ihn auf einen einzelnen Wert zu reduzieren.
Array-Summe
Diese Methode kann verwendet werden, um alle Werte eines Arrays zu einem einzigen Wert zusammenzufassen:
[1, 2, 3, 4].reduce(function(a, b) {
return a + b;
});
// → 10
Optional kann ein zweiter Parameter an reduce()
. Sein Wert wird als erstes Argument (als a
) für den ersten Aufruf des Callbacks (als function(a, b)
) verwendet.
[2].reduce(function(a, b) {
console.log(a, b); // prints: 1 2
return a + b;
}, 1);
// → 3
Flaches Array von Objekten
Das folgende Beispiel zeigt, wie Sie ein Array von Objekten auf ein einzelnes Objekt reduzieren.
var array = [{
key: 'one',
value: 1
}, {
key: 'two',
value: 2
}, {
key: 'three',
value: 3
}];
array.reduce(function(obj, current) {
obj[current.key] = current.value;
return obj;
}, {});
array.reduce((obj, current) => Object.assign(obj, {
[current.key]: current.value
}), {});
array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});
Beachten Sie, dass die Rest / Spread-Eigenschaften nicht in der Liste der fertigen Vorschläge von ES2016 enthalten sind . Es wird nicht von ES2016 unterstützt. Wir können jedoch das Babel-Plugin Babel-Plugin-Transformation-Objekt-Rest-Spread verwenden , um es zu unterstützen.
Alle obigen Beispiele für Flatten Array führen zu:
{
one: 1,
two: 2,
three: 3
}
Karte mit Reduzieren
Als weiteres Beispiel für die Verwendung des Parameters für den Anfangswert sollten Sie die Aufgabe betrachten, eine Funktion für ein Array von Elementen aufzurufen und die Ergebnisse in einem neuen Array zurückzugeben. Da Arrays gewöhnliche Werte sind und die Verkettung von Listen eine normale Funktion ist, können Sie mit reduce
eine Liste zusammenstellen, wie das folgende Beispiel zeigt:
function map(list, fn) {
return list.reduce(function(newList, item) {
return newList.concat(fn(item));
}, []);
}
// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]
Beachten Sie, dass dies nur zur Veranschaulichung (des Anfangswertparameters) dient. Verwenden Sie die native map
für das Arbeiten mit Listentransformationen (Details finden Sie unter Zuordnen von Werten ).
Min- oder Max-Wert suchen
Wir können den Akkumulator auch dazu verwenden, ein Array-Element zu verfolgen. Hier ein Beispiel, um den minimalen Wert zu ermitteln:
var arr = [4, 2, 1, -10, 9]
arr.reduce(function(a, b) {
return a < b ? a : b
}, Infinity);
// → -10
Finden Sie eindeutige Werte
Hier ist ein Beispiel, bei dem die eindeutigen Zahlen mithilfe eines Reduzierens in ein Array zurückgegeben werden. Ein leeres Array wird als zweites Argument übergeben und von prev
referenziert.
var arr = [1, 2, 1, 5, 9, 5];
arr.reduce((prev, number) => {
if(prev.indexOf(number) === -1) {
prev.push(number);
}
return prev;
}, []);
// → [1, 2, 5, 9]
Logische Verbindung von Werten
.some
und .every
erlauben eine logische Verknüpfung von Array-Werten.
Während .some
die Rückgabewerte mit kombiniert OR
, .every
kombiniert sie mit AND
.
Beispiele für .some
[false, false].some(function(value) {
return value;
});
// Result: false
[false, true].some(function(value) {
return value;
});
// Result: true
[true, true].some(function(value) {
return value;
});
// Result: true
Und Beispiele für .every
[false, false].every(function(value) {
return value;
});
// Result: false
[false, true].every(function(value) {
return value;
});
// Result: false
[true, true].every(function(value) {
return value;
});
// Result: true
Verketten von Arrays
Zwei Arrays
var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = array1.concat(array2); // returns a new array
var array3 = [...array1, ...array2]
Ergebnisse in einem neuen Array
:
[1, 2, 3, 4, 5]
Mehrere Arrays
var array1 = ["a", "b"],
array2 = ["c", "d"],
array3 = ["e", "f"],
array4 = ["g", "h"];
Weitere Array-Argumente für array.concat()
var arrConc = array1.concat(array2, array3, array4);
Weitere Argumente für []
bereitstellen
var arrConc = [...array1, ...array2, ...array3, ...array4]
Ergebnisse in einem neuen Array
:
["a", "b", "c", "d", "e", "f", "g", "h"]
Ohne das erste Array zu kopieren
var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
shortArray = [9, 10];
Geben Sie die Elemente von shortArray
als Parameter an, die mit Function.prototype.apply
shortArray
werden sollen
longArray.push.apply(longArray, shortArray);
Verwenden der Ausbreitung Bediener die Elemente passieren shortArray
als getrennte Argumente push
longArray.push(...shortArray)
Der Wert von longArray
ist jetzt:
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Wenn das zweite Array zu lang ist (> 100.000 Einträge), erhalten Sie möglicherweise einen Stapelüberlauffehler (aufgrund der Funktionsweise von apply
). Um sicher zu gehen, können Sie stattdessen iterieren:
shortArray.forEach(function (elem) {
longArray.push(elem);
});
Array- und Nicht-Array-Werte
var array = ["a", "b"];
var arrConc = array.concat("c", "d");
var arrConc = [...array, "c", "d"]
Ergebnisse in einem neuen Array
:
["a", "b", "c", "d"]
Sie können auch Arrays mit Nicht-Arrays kombinieren
var arr1 = ["a","b"];
var arr2 = ["e", "f"];
var arrConc = arr1.concat("c", "d", arr2);
Ergebnisse in einem neuen Array
:
["a", "b", "c", "d", "e", "f"]
Elemente an Array anhängen
Verschiebung
Verwenden Sie .unshift
, um ein oder mehrere Elemente am Anfang eines Arrays hinzuzufügen.
Zum Beispiel:
var array = [3, 4, 5, 6];
array.unshift(1, 2);
Array-Ergebnisse in:
[1, 2, 3, 4, 5, 6]
drücken
Weiteres .push
wird verwendet, um Elemente nach dem zuletzt vorhandenen Element hinzuzufügen.
Zum Beispiel:
var array = [1, 2, 3];
array.push(4, 5, 6);
Array-Ergebnisse in:
[1, 2, 3, 4, 5, 6]
Beide Methoden geben die neue Arraylänge zurück.
Objektschlüssel und Werte in Array
var object = {
key1: 10,
key2: 3,
key3: 40,
key4: 20
};
var array = [];
for(var people in object) {
array.push([people, object[people]]);
}
Jetzt ist Array
[
["key1", 10],
["key2", 3],
["key3", 40],
["key4", 20]
]
Mehrdimensionales Array sortieren
Gegeben das folgende Array
var array = [
["key1", 10],
["key2", 3],
["key3", 40],
["key4", 20]
];
Sie können es nach Nummer sortieren (zweiter Index)
array.sort(function(a, b) {
return a[1] - b[1];
})
array.sort((a,b) => a[1] - b[1]);
Dies wird ausgegeben
[
["key2", 3],
["key1", 10],
["key4", 20],
["key3", 40]
]
Beachten Sie, dass die Sortiermethode auf dem Array an Ort und Stelle tätig ist . Es ändert das Array. Die meisten anderen Array-Methoden geben ein neues Array zurück, wobei das ursprüngliche Array erhalten bleibt. Dies ist besonders wichtig, wenn Sie einen funktionalen Programmierstil verwenden und erwarten, dass Funktionen keine Nebenwirkungen haben.
Elemente aus einem Array entfernen
Verschiebung
Verwenden Sie .shift
, um das erste Element eines Arrays zu entfernen.
Zum Beispiel:
var array = [1, 2, 3, 4];
array.shift();
Array-Ergebnisse in:
[2, 3, 4]
Pop
Mit .pop
wird das letzte Element aus einem Array entfernt.
Zum Beispiel:
var array = [1, 2, 3];
array.pop();
Array-Ergebnisse in:
[1, 2]
Beide Methoden geben das entfernte Element zurück.
Spleißen
Verwenden Sie .splice()
, um eine Reihe von Elementen aus einem Array zu entfernen. .splice()
akzeptiert zwei Parameter, den .splice()
und eine optionale Anzahl von zu .splice()
Elementen. Wenn der zweite Parameter ausgelassen wird, entfernt .splice()
alle Elemente vom .splice()
bis zum Ende des Arrays.
Zum Beispiel:
var array = [1, 2, 3, 4];
array.splice(1, 2);
Blätter array
enthält:
[1, 4]
Die Rückgabe von array.splice()
ist ein neues Array, das die entfernten Elemente enthält. Für das obige Beispiel wäre die Rückgabe:
[2, 3]
Wenn Sie den zweiten Parameter weglassen, wird das Array effektiv in zwei Arrays aufgeteilt, wobei das ursprüngliche Ende vor dem angegebenen Index endet:
var array = [1, 2, 3, 4];
array.splice(2);
... verlässt das array
das [1, 2]
und gibt [3, 4]
.
Löschen
Verwenden Sie delete
, um ein Element aus dem Array zu entfernen, ohne die Länge des Arrays zu ändern:
var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
delete array[2];
console.log(array); // [1, 2, undefined, 4, 5]
console.log(array.length); // 5
Array.prototype.length
Wenn Sie der length
des Arrays einen Wert zuweisen, wird die Länge in den angegebenen Wert geändert. Wenn der neue Wert kleiner als die Feldlänge ist, werden Elemente am Ende des Werts entfernt.
array = [1, 2, 3, 4, 5];
array.length = 2;
console.log(array); // [1, 2]
Arrays umkehren
.reverse
wird verwendet, um die Reihenfolge der Elemente in einem Array umzukehren.
Beispiel für .reverse
:
[1, 2, 3, 4].reverse();
Ergebnisse in:
[4, 3, 2, 1]
Hinweis : Bitte beachten Sie, dass
.reverse
(Array.prototype.reverse
) das Array an Ort und StelleArray.prototype.reverse
. Anstatt eine umgekehrte Kopie zurückzugeben, wird dasselbe Array zurückgegeben.var arr1 = [11, 22, 33]; var arr2 = arr1.reverse(); console.log(arr2); // [33, 22, 11] console.log(arr1); // [33, 22, 11]
Sie können ein Array auch "tief" umkehren, indem Sie:
function deepReverse(arr) {
arr.reverse().forEach(elem => {
if(Array.isArray(elem)) {
deepReverse(elem);
}
});
return arr;
}
Beispiel für deepReverse:
var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];
deepReverse(arr);
Ergebnisse in:
arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]
Wert aus Array entfernen
Wenn Sie einen bestimmten Wert aus einem Array entfernen müssen, können Sie mit dem folgenden Einzeiler ein Kopierarray ohne den angegebenen Wert erstellen:
array.filter(function(val) { return val !== to_remove; });
Oder wenn Sie das Array selbst ändern möchten, ohne eine Kopie zu erstellen (wenn Sie zum Beispiel eine Funktion schreiben, die ein Array als Funktion abruft und diese bearbeitet), können Sie diesen Ausschnitt verwenden:
while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }
Und wenn Sie nur den ersten gefundenen Wert entfernen müssen, entfernen Sie die while-Schleife:
var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }
Prüfen, ob ein Objekt ein Array ist
Array.isArray(obj)
gibt true
zurück true
wenn das Objekt ein Array
, andernfalls false
.
Array.isArray([]) // true
Array.isArray([1, 2, 3]) // true
Array.isArray({}) // false
Array.isArray(1) // false
In den meisten Fällen können Sie anhand von instanceof
, ob ein Objekt ein Array
.
[] instanceof Array; // true
{} instanceof Array; // false
Array.isArray
hat gegenüber der Verwendung einer instanceof
check den Vorteil, dass es auch dann true
Array.isArray
, wenn der Prototyp des Arrays geändert wurde, und false
Array.isArray
wenn ein Nicht-Array-Prototyp in den Array
Prototyp geändert wurde.
var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr); // true
arr instanceof Array; // false
Arrays sortieren
Die .sort()
-Methode sortiert die Elemente eines Arrays. Die Standardmethode sortiert das Array nach Unicode-Codepunkten. Um ein Array numerisch zu sortieren, muss an die .sort()
Methode eine compareFunction
übergeben werden.
Hinweis: Die
.sort()
-Methode ist unrein..sort()
sortiert das Array an Ort und Stelle , dh, anstatt eine sortierte Kopie des ursprünglichen Arrays zu erstellen, wird das ursprüngliche Array neu sortiert und zurückgegeben.
Standardsortierung
Sortiert das Array in der UNICODE-Reihenfolge.
['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();
Ergebnisse in:
[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']
Hinweis: Die Großbuchstaben wurden über Kleinbuchstaben verschoben. Das Array ist nicht in alphabetischer Reihenfolge und Zahlen sind nicht in numerischer Reihenfolge.
Alphabetische Sortierung
['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
return a.localeCompare(b);
});
Ergebnisse in:
['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']
Hinweis: Die obige Sortierung gibt einen Fehler aus, wenn Arrayelemente keine Zeichenfolge sind. Wenn Sie wissen, dass das Array Elemente enthalten kann, die keine Zeichenfolgen sind, verwenden Sie die sichere Version unten.
['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
return a.toString().localeCompare(b);
});
Zeichenfolgensortierung nach Länge (längste zuerst)
["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
return b.length - a.length;
});
Ergebnisse in
["elephants", "penguins", "zebras", "dogs"];
Zeichenfolgensortierung nach Länge (kürzeste zuerst)
["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
return a.length - b.length;
});
Ergebnisse in
["dogs", "zebras", "penguins", "elephants"];
Numerische Sortierung (aufsteigend)
[100, 1000, 10, 10000, 1].sort(function(a, b) {
return a - b;
});
Ergebnisse in:
[1, 10, 100, 1000, 10000]
Numerische Sortierung (absteigend)
[100, 1000, 10, 10000, 1].sort(function(a, b) {
return b - a;
});
Ergebnisse in:
[10000, 1000, 100, 10, 1]
Array nach geraden und ungeraden Zahlen sortieren
[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
return (a & 1) - (b & 1) || a - b;
});
Ergebnisse in:
[0, 4, 10, 12, 7, 15, 21, 99]
Datum sortieren (absteigend)
var dates = [
new Date(2007, 11, 10),
new Date(2014, 2, 21),
new Date(2009, 6, 11),
new Date(2016, 7, 23)
];
dates.sort(function(a, b) {
if (a > b) return -1;
if (a < b) return 1;
return 0;
});
// the date objects can also sort by its difference
// the same way that numbers array is sorting
dates.sort(function(a, b) {
return b-a;
});
Ergebnisse in:
[
"Tue Aug 23 2016 00:00:00 GMT-0600 (MDT)",
"Fri Mar 21 2014 00:00:00 GMT-0600 (MDT)",
"Sat Jul 11 2009 00:00:00 GMT-0600 (MDT)",
"Mon Dec 10 2007 00:00:00 GMT-0700 (MST)"
]
Flaches Klonen eines Arrays
Manchmal müssen Sie mit einem Array arbeiten, während Sie sicherstellen, dass Sie das Original nicht ändern. Anstelle eines clone
- Methode haben Arrays eine slice
Methode , die Sie ausführen eine flache Kopie irgendeines Teils eines Arrays können. Denken Sie daran, dass dies nur die erste Ebene klont. Dies funktioniert gut mit primitiven Typen wie Zahlen und Strings, aber nicht mit Objekten.
Um ein Array flach zu klonen (dh eine neue Array-Instanz mit den gleichen Elementen zu haben), können Sie den folgenden Einzeiler verwenden:
var clone = arrayToClone.slice();
Dies ruft die integrierte JavaScript Array.prototype.slice
Methode auf. Wenn Sie Argumente an slice
, können Sie kompliziertere Verhaltensweisen erhalten, die flache Klone nur eines Teils eines Arrays erstellen. Für unsere Zwecke wird jedoch beim Aufruf von slice()
eine flache Kopie des gesamten Arrays erstellt.
Alle zum Konvertieren von arrayähnlichen Objekten in Array verwendeten Methoden sind für das Klonen eines Arrays anwendbar:
arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way
arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.prototype.slice.call(arrayToClone);
clone2 = [].slice.call(arrayToClone);
Array durchsuchen
Die empfohlene Methode (Since ES5) ist die Verwendung von Array.prototype.find :
let people = [
{ name: "bob" },
{ name: "john" }
];
let bob = people.find(person => person.name === "bob");
// Or, more verbose
let bob = people.find(function(person) {
return person.name === "bob";
});
In jeder Version von JavaScript kann auch ein Standard for
Schleife verwendet werden:
for (var i = 0; i < people.length; i++) {
if (people[i].name === "bob") {
break; // we found bob
}
}
FindIndex
Die findIndex () -Methode gibt einen Index im Array zurück, wenn ein Element im Array die bereitgestellte Testfunktion erfüllt. Andernfalls wird -1 zurückgegeben.
array = [
{ value: 1 },
{ value: 2 },
{ value: 3 },
{ value: 4 },
{ value: 5 }
];
var index = array.findIndex(item => item.value === 3); // 2
var index = array.findIndex(item => item.value === 12); // -1
Elemente mit Spleiß entfernen ()
Die splice()
-Methode kann verwendet werden, um Elemente aus einem Array zu entfernen. In diesem Beispiel entfernen wir die ersten 3
aus dem Array.
var values = [1, 2, 3, 4, 5, 3];
var i = values.indexOf(3);
if (i >= 0) {
values.splice(i, 1);
}
// [1, 2, 4, 5, 3]
Die splice()
-Methode kann auch verwendet werden, um einem Array Elemente hinzuzufügen. In diesem Beispiel werden die Zahlen 6, 7 und 8 am Ende des Arrays eingefügt.
var values = [1, 2, 4, 5, 3];
var i = values.length + 1;
values.splice(i, 0, 6, 7, 8);
//[1, 2, 4, 5, 3, 6, 7, 8]
Das erste Argument der Methode splice()
ist der Index, an dem Elemente entfernt / eingefügt werden sollen. Das zweite Argument ist die Anzahl der zu entfernenden Elemente. Das dritte Argument und mehr sind die Werte, die in das Array eingefügt werden sollen.
Array-Vergleich
Für den einfachen Vergleich von Arrays können Sie JSON stringify verwenden und die Ausgabestrings vergleichen:
JSON.stringify(array1) === JSON.stringify(array2)
Hinweis: Dies funktioniert nur, wenn beide Objekte JSON-serialisierbar sind und keine zyklischen Verweise enthalten. Möglicherweise wird
TypeError: Converting circular structure to JSON
Sie können eine rekursive Funktion verwenden, um Arrays zu vergleichen.
function compareArrays(array1, array2) {
var i, isA1, isA2;
isA1 = Array.isArray(array1);
isA2 = Array.isArray(array2);
if (isA1 !== isA2) { // is one an array and the other not?
return false; // yes then can not be the same
}
if (! (isA1 && isA2)) { // Are both not arrays
return array1 === array2; // return strict equality
}
if (array1.length !== array2.length) { // if lengths differ then can not be the same
return false;
}
// iterate arrays and compare them
for (i = 0; i < array1.length; i += 1) {
if (!compareArrays(array1[i], array2[i])) { // Do items compare recursively
return false;
}
}
return true; // must be equal
}
WARNUNG: Die Verwendung der obigen Funktion ist gefährlich und sollte in einen try
catch
wenn Sie vermuten, dass das Array zyklische Referenzen hat (eine Referenz auf ein Array, das eine Referenz auf sich selbst enthält).
a = [0] ;
a[1] = a;
b = [0, a];
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded
Anmerkung: Die Funktion verwendet den strengen Gleichheitsoperator
===
, um Nicht-Array-Elemente zu vergleichen.{a: 0} === {a: 0}
istfalse
Zerstörung eines Arrays
Ein Array kann zerstört werden, wenn es einer neuen Variablen zugewiesen wird.
const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;
length === 3; // → true
height === 4; // → true
hypotneuse === 5; // → true
Elemente können übersprungen werden
const [,b,,c] = [1, 2, 3, 4];
console.log(b, c); // → 2, 4
Restoperator kann auch verwendet werden
const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]
Ein Array kann auch zerstört werden, wenn es sich um eine Funktion handelt.
function area([length, height]) {
return (length * height) / 2;
}
const triangle = [3, 4, 5];
area(triangle); // → 6
Beachten Sie, dass das dritte Argument in der Funktion nicht benannt wird, da es nicht benötigt wird.
Doppelte Elemente entfernen
Ab ES5.1 können Sie die native Methode Array.prototype.filter
, um ein Array zu durchlaufen und nur Einträge zu Array.prototype.filter
, die eine bestimmte Callback-Funktion bestehen.
Im folgenden Beispiel überprüft unser Rückruf, ob der angegebene Wert im Array enthalten ist. Wenn dies der Fall ist, handelt es sich um ein Duplikat, das nicht in das resultierende Array kopiert wird.
var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) {
return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']
Wenn Ihre Umgebung ES6 unterstützt, können Sie auch das Set- Objekt verwenden. Mit diesem Objekt können Sie eindeutige Werte eines beliebigen Typs speichern, egal ob Grundwerte oder Objektreferenzen:
var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];
Siehe auch die folgenden Antworten zu SO:
Alle Elemente entfernen
var arr = [1, 2, 3, 4];
Methode 1
Erstellt ein neues Array und überschreibt die vorhandene Arrayreferenz mit einem neuen.
arr = [];
Vorsicht ist geboten, da dadurch keine Elemente aus dem ursprünglichen Array entfernt werden. Das Array wurde bei der Übergabe an eine Funktion möglicherweise geschlossen. Das Array bleibt für die Dauer der Funktion im Speicher, auch wenn Sie sich dessen möglicherweise nicht bewusst sind. Dies ist eine häufige Quelle für Speicherlecks.
Beispiel für einen Speicherverlust infolge einer fehlerhaften Array-Löschung:
var count = 0;
function addListener(arr) { // arr is closed over
var b = document.body.querySelector("#foo" + (count++));
b.addEventListener("click", function(e) { // this functions reference keeps
// the closure current while the
// event is active
// do something but does not need arr
});
}
arr = ["big data"];
var i = 100;
while (i > 0) {
addListener(arr); // the array is passed to the function
arr = []; // only removes the reference, the original array remains
array.push("some large data"); // more memory allocated
i--;
}
// there are now 100 arrays closed over, each referencing a different array
// no a single item has been deleted
Um das Risiko eines Speicherverlustes zu vermeiden, verwenden Sie eine der beiden folgenden Methoden, um das Array in der While-Schleife des obigen Beispiels zu leeren.
Methode 2
Durch Festlegen der length-Eigenschaft werden alle Array-Elemente von der neuen Array-Länge bis zur alten Array-Länge gelöscht. Dies ist die effizienteste Methode, um alle Elemente im Array zu entfernen und dereferenzieren. Behält den Verweis auf das ursprüngliche Array bei
arr.length = 0;
Methode 3
Ähnlich wie Methode 2, gibt jedoch ein neues Array zurück, das die entfernten Elemente enthält. Wenn Sie die Elemente nicht benötigen, ist diese Methode ineffizient, da das neue Array immer noch nur erstellt wird, um sofort dereferenziert zu werden.
arr.splice(0); // should not use if you don't want the removed items
// only use this method if you do the following
var keepArr = arr.splice(0); // empties the array and creates a new array containing the
// removed items
Verwenden von map zum Umformatieren von Objekten in einem Array
Array.prototype.map()
: Gibt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im ursprünglichen Array zurück.
Im folgenden Codebeispiel wird ein Array von Personen verwendet und ein neues Array erstellt, das Personen mit der Eigenschaft 'fullName' enthält
var personsArray = [
{
id: 1,
firstName: "Malcom",
lastName: "Reynolds"
}, {
id: 2,
firstName: "Kaylee",
lastName: "Frye"
}, {
id: 3,
firstName: "Jayne",
lastName: "Cobb"
}
];
// Returns a new array of objects made up of full names.
var reformatPersons = function(persons) {
return persons.map(function(person) {
// create a new object to store full name.
var newObj = {};
newObj["fullName"] = person.firstName + " " + person.lastName;
// return our new object.
return newObj;
});
};
Wir können jetzt reformatPersons(personsArray)
anrufen und erhalten ein neues Array mit nur den vollständigen Namen jeder Person.
var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
{ fullName: "Malcom Reynolds" },
{ fullName: "Kaylee Frye" },
{ fullName: "Jayne Cobb" }
]
personsArray
und sein Inhalt bleibt unverändert.
console.log(personsArray);
/// Output
[
{
firstName: "Malcom",
id: 1,
lastName: "Reynolds"
}, {
firstName: "Kaylee",
id: 2,
lastName: "Frye"
}, {
firstName: "Jayne",
id: 3,
lastName: "Cobb"
}
]
Fügen Sie zwei Felder als Schlüsselwertpaar zusammen
Wenn wir zwei separate Arrays haben und aus diesen beiden Arrays ein Schlüsselwertpaar erstellen möchten, können Sie die reduzierte Funktion von Arrays wie folgt verwenden:
var columns = ["Date", "Number", "Size", "Location", "Age"];
var rows = ["2001", "5", "Big", "Sydney", "25"];
var result = rows.reduce(function(result, field, index) {
result[columns[index]] = field;
return result;
}, {})
console.log(result);
Ausgabe:
{
Date: "2001",
Number: "5",
Size: "Big",
Location: "Sydney",
Age: "25"
}
Konvertieren Sie einen String in ein Array
Die .split()
-Methode teilt einen String in ein Array von Teilstrings auf. Standardmäßig .split()
die Zeichenfolge in Teilzeichenfolgen für Leerzeichen ( " "
) auf, was dem Aufruf von .split(" ")
.
Der an .split()
Parameter gibt das Zeichen oder den regulären Ausdruck an, der zum Aufteilen der Zeichenfolge verwendet werden soll.
So teilen Sie eine Zeichenfolge in einen Array-Aufruf .split
mit einer leeren Zeichenfolge ( ""
). Wichtiger Hinweis: Dies funktioniert nur, wenn alle Ihre Zeichen in die unteren Unicode-Zeichen passen, die die meisten englischen und europäischen Sprachen abdecken. Bei Sprachen, die 3 und 4 Byte Unicode-Zeichen erfordern, werden sie durch slice("")
getrennt.
var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]
Verwenden Sie den Spread-Operator ( ...
), um eine string
in ein array
zu konvertieren.
var strArray = [..."sky is blue"];
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]
Testen Sie alle Array-Elemente auf Gleichheit
Die .every
Methode prüft, ob alle Array-Elemente einen bereitgestellten .every
.
Um alle Objekte auf Gleichheit zu testen, können Sie die folgenden Codeausschnitte verwenden.
[1, 2, 1].every(function(item, i, list) { return item === list[0]; }); // false
[1, 1, 1].every(function(item, i, list) { return item === list[0]; }); // true
[1, 1, 1].every((item, i, list) => item === list[0]); // true
Die folgenden Codeausschnitte testen die Eigenschaftsgleichheit
let data = [
{ name: "alice", id: 111 },
{ name: "alice", id: 222 }
];
data.every(function(item, i, list) { return item === list[0]; }); // false
data.every(function(item, i, list) { return item.name === list[0].name; }); // true
data.every((item, i, list) => item.name === list[0].name); // true
Kopieren Sie einen Teil eines Arrays
Die slice () -Methode gibt eine Kopie eines Teils eines Arrays zurück.
Es benötigt zwei Parameter, arr.slice([begin[, end]])
:
Start
Nullbasierter Index, der den Beginn der Extraktion darstellt.
Ende
Nullbasierter Index, der das Ende der Extraktion darstellt, der bis zu diesem Index aufschneidet, aber nicht eingeschlossen ist.
Wenn das Ende eine negative Zahl ist, end = arr.length + end
.
Beispiel 1
// Let's say we have this Array of Alphabets
var arr = ["a", "b", "c", "d"...];
// I want an Array of the first two Alphabets
var newArr = arr.slice(0, 2); // newArr === ["a", "b"]
Beispiel 2
// Let's say we have this Array of Numbers
// and I don't know it's end
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9...];
// I want to slice this Array starting from
// number 5 to its end
var newArr = arr.slice(4); // newArr === [5, 6, 7, 8, 9...]
Finden des minimalen oder maximalen Elements
Wenn Ihr Array oder Array-ähnliches Objekt numerisch ist , das heißt, wenn alle Elemente aus Zahlen bestehen, können Sie Math.min.apply
oder Math.max.apply
indem Sie als erstes das Argument null
und das zweite als das Array übergeben .
var myArray = [1, 2, 3, 4];
Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4
In ES6 können Sie den Operator ...
, um ein Array zu verteilen und das minimale oder maximale Element zu übernehmen.
var myArray = [1, 2, 3, 4, 99, 20];
var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1
Das folgende Beispiel verwendet eine for
Schleife:
var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
var currentValue = myArray[i];
if(currentValue > maxValue) {
maxValue = currentValue;
}
}
Im folgenden Beispiel wird mit Array.prototype.reduce()
das Minimum oder Maximum ermittelt:
var myArray = [1, 2, 3, 4];
myArray.reduce(function(a, b) {
return Math.min(a, b);
}); // 1
myArray.reduce(function(a, b) {
return Math.max(a, b);
}); // 4
oder mit Pfeilfunktionen:
myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4
Um die reduce
Version zu verallgemeinern reduce
wir einen Anfangswert übergeben , um den leeren Listenfall abzudecken:
function myMax(array) {
return array.reduce(function(maxSoFar, element) {
return Math.max(maxSoFar, element);
}, -Infinity);
}
myMax([3, 5]); // 5
myMax([]); // -Infinity
Math.max.apply(null, []); // -Infinity
Weitere Informationen zur ordnungsgemäßen Verwendung von reduce
Sie unter Reduzieren von Werten .
Abflachen von Arrays
2 dimensionale Arrays
In ES6 können wir das Array durch den Spread-Operator abflachen ...
:
function flattenES6(arr) {
return [].concat(...arr);
}
var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]
In ES5 können wir dies durch .apply () erreichen :
function flatten(arr) {
return [].concat.apply([], arr);
}
var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]
Arrays mit höherer Dimension
Gegeben ein tief verschachteltes Array so
var deeplyNested = [4,[5,6,[7,8],9]];
Es kann mit dieser Magie abgeflacht werden
console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]
Oder
const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]
Beide oben genannten Methoden funktionieren nur, wenn das Array ausschließlich aus Zahlen besteht. Ein mehrdimensionales Array von Objekten kann mit dieser Methode nicht abgeflacht werden.
Einfügen eines Elements in ein Array an einem bestimmten Index
Einfaches Einfügen von Array.prototype.splice
kann mit der Array.prototype.splice
Methode erfolgen:
arr.splice(index, 0, item);
Fortgeschrittenere Variante mit mehreren Argumenten und Verkettungsunterstützung:
/* Syntax:
array.insert(index, value1, value2, ..., valueN) */
Array.prototype.insert = function(index) {
this.splice.apply(this, [index, 0].concat(
Array.prototype.slice.call(arguments, 1)));
return this;
};
["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6); // ["b", "X", "Y", "Z", "c"]
Und mit Array-Argumenten, die Unterstützung zusammenführen und verketten:
/* Syntax:
array.insert(index, value1, value2, ..., valueN) */
Array.prototype.insert = function(index) {
index = Math.min(index, this.length);
arguments.length > 1
&& this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
&& this.insert.apply(this, arguments);
return this;
};
["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-"); // "a-b-V-W-X-Y-Z-c-d"
Die Methode entries ()
Die Methode entries()
gibt ein neues Array-Iterator-Objekt zurück, das die Schlüssel / Wert-Paare für jeden Index im Array enthält.
var letters = ['a','b','c'];
for(const[index,element] of letters.entries()){
console.log(index,element);
}
Ergebnis
0 "a"
1 "b"
2 "c"
Hinweis : Diese Methode wird in Internet Explorer nicht unterstützt.
Teile dieses Inhalts aus Array.prototype.entries
von Mozilla Contributors, lizenziert unter CC-by-SA 2.5