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"]
6

Ä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

6

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:

5.1
['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]
6
['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.

5.1
[1, 2, 3, 4, 5].filter(function(value, index, arr) {
  return value > 2;
});
6
[1, 2, 3, 4, 5].filter(value => value > 2);

Ergebnisse in einem neuen Array:

[3, 4, 5]

Falsche Werte filtern

5.1
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:

  1. Boolean(0) gibt false zurück
  2. Boolean(undefined) gibt false zurück
  3. Boolean({}) gibt " true" zurück , dh es wird an das zurückgegebene Array gesendet
  4. Boolean(null) gibt false zurück
  5. Boolean('') gibt false zurück
  6. Boolean(true) gibt true zurück , dh es wird in das zurückgegebene Array geschrieben
  7. 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

5.1
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:

  1. Die Initialisierung: wird ausgeführt, bevor der Look-Block zum ersten Mal ausgeführt wird
  2. Die Bedingung: prüft eine Bedingung vor jeder Ausführung des Schleifenblocks und beendet die Schleife, wenn sie falsch ist
  3. 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:

6
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:

6
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() :

6
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.

5
[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 :

5
// [].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 :

5
// [].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];
5.1
var odd = numbers.filter(function(n) {
  return n % 2 !== 0;
});
6
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
}];
5.1
var young = people.filter(function(person) {
  return person.age < 35;
});
6
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

  1. Array.from :
6
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
  1. for...of :
6
var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}
  1. Spread-Operator:
6
[...arrayLike]
  1. Object.values :
7
var realArray = Object.values(arrayLike);
  1. Object.keys :
6
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:

5.1
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 ) :

5.1
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.

6
Array.from(domList, element => element.tagName); // Creates an array of tagName's

Eine detaillierte Analyse finden Sie unter Arrays sind Objekte .

Werte reduzieren

5.1

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

5.1

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
}];
5.1
array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});
6
array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});
7
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
}

5.1

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 ).


5.1

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
6

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

5.1

.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];
3
var array3 = array1.concat(array2);  // returns a new array
6
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"];
3

Weitere Array-Argumente für array.concat()

var arrConc = array1.concat(array2, array3, array4);
6

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];
3

Geben Sie die Elemente von shortArray als Parameter an, die mit Function.prototype.apply shortArray werden sollen

longArray.push.apply(longArray, shortArray);
6

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"];
3
var arrConc = array.concat("c", "d");
6
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];
})
6
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 Stelle Array.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:

6
arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way
5.1
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} ist false

Zerstörung eines Arrays

6

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.

Erfahren Sie mehr über die Destruktursyntax.

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.

5.1
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:

6
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

Verwandte Frage .

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"]
6

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
6
[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
6
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
6

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;
   }
}
5.1

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
6

oder mit Pfeilfunktionen:

myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4
5.1

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

6

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]
5

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.

6
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



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow