JavaScript
arrays

Syntaxis

• array = [ waarde , waarde , ... ]
• array = new Array ( waarde , waarde , ... )
• array = Array.of ( waarde , waarde , ... )
• array = Array.from ( arrayLike )

Opmerkingen

console.log(new Array(53)); // This array has 53 'undefined' elements!

console.log([53]); // Much better!

Standaard array-initialisatie

Er zijn veel manieren om arrays te maken. De meest voorkomende zijn het gebruik van matrixliteralen of de constructor Array:

var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);

Als de array-constructor zonder argumenten wordt gebruikt, wordt een lege array gemaakt.

var arr3 = new Array();

resulteert in:

[]

Merk op dat als het wordt gebruikt met precies één argument en dat argument een number , in plaats daarvan een array van die lengte met alle undefined waarden wordt gemaakt:

var arr4 = new Array(4);

resulteert in:

[undefined, undefined, undefined, undefined]

Dat is niet van toepassing als het enige argument niet-numeriek is:

var arr5 = new Array("foo");

resulteert in:

["foo"]

Array.of(21, "Hello", "World");

[21, "Hello", "World"]

var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));

[0, 1, 16, 81, 256]

Array spread / rust

Spreid operator

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

let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]

function myFunction(a, b, c) { }
let args = [0, 1, 2];

myFunction(...args);

// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);

[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]

function myFunction(a, b, ...rest) { console.log(rest); }

myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]

Waarden in kaart brengen

Het is vaak nodig om een nieuwe array te genereren op basis van de waarden van een bestaande array.

Om bijvoorbeeld een reeks tekenreekslengten te genereren uit een reeks tekenreeksen:

['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 dit voorbeeld wordt een anonieme functie geboden aan de map() -functie, en de map-functie roept deze aan voor elk element in de array, met de volgende parameters, in deze volgorde:

• Het element zelf
• De index van het element (0, 1 ...)
• De hele reeks

Bovendien biedt map() een optionele tweede parameter om de waarde this in te stellen in de toewijzingsfunctie. Afhankelijk van de uitvoeringsomgeving kan de standaardwaarde this variëren:

In een browser is de standaardwaarde this altijd window :

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

U kunt het in elk aangepast object als volgt wijzigen:

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, {
  documentation: 'randomObject'
});

Waarden filteren

De methode filter() maakt een array gevuld met alle arrayelementen die slagen voor een test die als functie wordt aangeboden.

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

[1, 2, 3, 4, 5].filter(value => value > 2);

Resultaten in een nieuwe array:

[3, 4, 5]

Filter valse waarden

var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);

Aangezien Boolean een native JavaScript-functie / constructor is die [een optionele parameter] gebruikt en de filtermethode ook een functie neemt en deze het huidige arrayitem doorgeeft als parameter, zou u het als volgt kunnen lezen:

1. Boolean(0) retourneert false
2. Boolean(undefined) retourneert false
3. Boolean({}) geeft true terug , wat betekent dat het naar de geretourneerde array moet worden verzonden
4. Boolean(null) retourneert false
5. Boolean('') retourneert false
6. Boolean(true) retourneert true, wat betekent dat het naar de geretourneerde array moet worden verzonden
7. Boolean(5) retourneert true, wat betekent dat het naar de geretourneerde array moet worden verzonden

dus het totale proces zal resulteren

[ {}, true, 5 ]

Nog een eenvoudig voorbeeld

In dit voorbeeld wordt hetzelfde concept gebruikt voor het doorgeven van een functie waarvoor één argument nodig is

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

herhaling

Een traditioneel for -loop

Een traditionele for lus bestaat uit drie componenten:

1. De initialisatie: uitgevoerd voordat het lookblok de eerste keer wordt uitgevoerd
2. De voorwaarde: controleert elke keer voordat het lusblok wordt uitgevoerd een voorwaarde en sluit de lus als deze onwaar is
3. De bijzaak: elke keer uitgevoerd nadat het lusblok is uitgevoerd

Deze drie componenten zijn van elkaar gescheiden door een ; symbool. Inhoud voor elk van deze drie componenten is optioneel, wat betekent dat het volgende zo min mogelijk is for lus:

for (;;) {
    // Do stuff
}

Natuurlijk moet u een if(condition === true) { break; } of een if(condition === true) { return; } ergens in die for -loop om het te laten stoppen met rennen.

Meestal wordt de initialisatie echter gebruikt om een index aan te geven, de voorwaarde wordt gebruikt om die index te vergelijken met een minimum- of maximumwaarde, en de bijzaak wordt gebruikt om de index te verhogen:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Een traditionele for lus gebruiken om door een array te bladeren

De traditionele manier om een array te doorlopen, is deze:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Of, als u liever achteruit loopt, doet u dit:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Er zijn echter veel variaties mogelijk, zoals bijvoorbeeld deze:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... of deze ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... of deze:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Wat het beste werkt, is grotendeels een kwestie van zowel persoonlijke smaak als de specifieke use case die u implementeert.

Merk op dat elk van deze variaties wordt ondersteund door alle browsers, inclusief heel erg oude!

Een while lus

Een alternatief voor een for lus is een while lus. Om een array te doorlopen, zou je dit kunnen doen:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Zoals traditioneel for lussen, while lussen worden ondersteund door zelfs de oudste van browsers.

Merk ook op dat elke while-lus kan worden herschreven als een for lus. De while lus hierboven gedraagt zich bijvoorbeeld exact hetzelfde als deze for -loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

In JavaScript kunt u dit ook doen:

for (i in myArray) {
    console.log(myArray[i]);
}

Dit moet zorgvuldig worden gebruikt, echter, omdat het niet hetzelfde als een traditionele gedraagt for lus in alle gevallen, en er zijn mogelijke bijwerkingen die moeten worden overwogen. Zie Waarom is het gebruiken van "voor ... in" met array-iteratie een slecht idee? voor meer details.

for...of

In ES 6 is de for-of lus de aanbevolen manier om de waarden van een array te doorlopen:

let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

Het volgende voorbeeld toont het verschil tussen een for...of lus en een for...in lus:

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

De methode Array.prototype.keys() kan worden gebruikt om indices als deze te herhalen:

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

De .forEach(...) -methode is een optie in ES 5 en hoger. Het wordt ondersteund door alle moderne browsers, evenals Internet Explorer 9 en hoger.

[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

In vergelijking met de traditionele for lus kunnen we niet uit de lus springen in .forEach() . Gebruik in dit geval de for lus of gebruik gedeeltelijke iteratie die hieronder wordt weergegeven.

In alle versies van JavaScript is het mogelijk om de indices van een array te doorlopen met behulp van een traditionele C-stijl for lus.

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

Het is ook mogelijk om while loop te gebruiken:

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

Sinds ES5, als je een deel van een array wilt herhalen, kun je Array.prototype.every , die herhaalt totdat we false retourneren:

// [].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
}); 

Equivalent in elke JavaScript-versie:

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 herhaalt zich totdat we true terugkomen:

// [].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
}); 

Equivalent in elke JavaScript-versie:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

bibliotheken

Ten slotte hebben veel hulpprogramma-bibliotheken ook hun eigen foreach variatie. Drie van de meest populaire zijn deze:

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

Zie ook de volgende vraag over SO, waar veel van deze informatie oorspronkelijk werd gepost:

• Doorloop een array in JavaScript

Arrays filteren

De methode filter() accepteert een testfunctie en retourneert een nieuwe array met alleen de elementen van de oorspronkelijke array die de verstrekte test doorstaan.

// 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 zou de volgende array bevatten: [5, 43] .

Het werkt ook op een reeks objecten:

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 zou de volgende array bevatten:

[{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}]

U kunt in de hele array naar een waarde als deze zoeken:

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

Dit retourneert:

[{
  id: 1,
  name: "John",
  age: 28
},{
  id: 2,
  name: "Jane",
  age: 31
}]

Array-elementen samenvoegen in een string

Om alle elementen van een array in een string samen te voegen, kunt u de join methode gebruiken:

console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"

Zoals u op de tweede regel kunt zien, worden items die geen tekenreeksen zijn eerst geconverteerd.

Matrixachtige objecten converteren naar arrays

Wat zijn matrixachtige objecten?

JavaScript heeft "Array-achtige objecten", die Objectrepresentaties zijn van Arrays met een eigenschap length. Bijvoorbeeld:

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Veelvoorkomende voorbeelden van NodeList objecten zijn het arguments in functies en HTMLCollection of NodeList objecten die worden geretourneerd door methoden zoals document.getElementsByTagName of document.querySelectorAll .

Een belangrijk verschil tussen Arrays en Array-achtige objecten is echter dat Array-achtige objecten erven van Object.prototype plaats van Array.prototype . Dit betekent dat Array-achtige objecten geen toegang hebben tot veelgebruikte Array-prototypemethoden zoals forEach() , push() , map() , filter() en slice() :

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]

Converteer array-achtige objecten naar arrays in ES6

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

2. for...of :

var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}

3. Spread-operator:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

Converteer array-achtige objecten naar arrays in ≤ ES5

Gebruik Array.prototype.slice als volgt:

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

U kunt ook Function.prototype.call gebruiken om Array.prototype methoden rechtstreeks op Array-achtige objecten aan te roepen, zonder ze te converteren:

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

U kunt ook [].method.bind( arrayLikeObject ) gebruiken om array-methoden te lenen en deze op uw object te plaatsen:

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

Items wijzigen tijdens conversie

In ES6 kunnen we, terwijl we Array.from gebruiken, een Array.from opgeven die een toegewezen waarde retourneert voor de nieuwe array die wordt gemaakt.

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

Zie Arrays zijn objecten voor een gedetailleerde analyse.

Waarden verminderen

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

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}), {});

Alle bovenstaande voorbeelden voor Flatten Array resulteren in:

{
  one: 1,
  two: 2,
  three: 3
}

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]

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

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]

Logisch verbindend van waarden

[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

[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

Arrays samenvoegen

Twee reeksen

var array1 = [1, 2];
var array2 = [3, 4, 5];

var array3 = array1.concat(array2);  // returns a new array

var array3 = [...array1, ...array2]

Resultaten in een nieuwe Array :

[1, 2, 3, 4, 5]

Meerdere arrays

var array1 = ["a", "b"],
    array2 = ["c", "d"],
    array3 = ["e", "f"],
    array4 = ["g", "h"];

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

var arrConc = [...array1, ...array2, ...array3, ...array4]

Resultaten in een nieuwe Array :

["a", "b", "c", "d", "e", "f", "g", "h"]

Zonder de eerste array te kopiëren

var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
    shortArray = [9, 10];

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

De waarde van longArray is nu:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Merk op dat als de tweede array te lang is (> 100.000 ingangen), u mogelijk een stapeloverloopfout krijgt (vanwege de manier waarop apply werkt). Om veilig te zijn, kunt u in plaats daarvan herhalen:

shortArray.forEach(function (elem) {
    longArray.push(elem);
});

Matrix- en niet-matrixwaarden

var array = ["a", "b"];

var arrConc = array.concat("c", "d");

var arrConc = [...array, "c", "d"]

Resultaten in een nieuwe Array :

["a", "b", "c", "d"]

U kunt ook arrays combineren met niet-arrays

var arr1 = ["a","b"];
var arr2 = ["e", "f"];

var arrConc = arr1.concat("c", "d", arr2);

Resultaten in een nieuwe Array :

["a", "b", "c", "d", "e", "f"]

Items toevoegen / voorafgaan aan array

unshift

Gebruik .unshift om een of meer items aan het begin van een array toe te voegen.

Bijvoorbeeld:

var array = [3, 4, 5, 6];
array.unshift(1, 2);

array resulteert in:

[1, 2, 3, 4, 5, 6]

Duwen

Verder wordt .push gebruikt om items toe te voegen na het laatst bestaande item.

Bijvoorbeeld:

var array = [1, 2, 3];
array.push(4, 5, 6);

array resulteert in:

[1, 2, 3, 4, 5, 6]

Beide methoden retourneren de nieuwe arraylengte.

Objectsleutels en waarden naar array

var object = {
    key1: 10,
    key2: 3,
    key3: 40,
    key4: 20
};
 
var array = [];
for(var people in object) {
  array.push([people, object[people]]);
}

Nu is array

[
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
]

Multidimensionale array sorteren

Gegeven de volgende array

var array = [
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
];

U kunt het sorteren sorteer het op nummer (tweede index)

array.sort(function(a, b) {
  return a[1] - b[1];
})

array.sort((a,b) => a[1] - b[1]);

Dit wordt uitgevoerd

[
  ["key2", 3],
  ["key1", 10],
  ["key4", 20],
  ["key3", 40]
]

Wees ervan bewust dat het soort methode werkt op de array op zijn plaats. Het verandert de array. De meeste andere array-methoden retourneren een nieuwe array, waardoor de oorspronkelijke intact blijft. Dit is vooral belangrijk om op te merken als u een functionele programmeerstijl gebruikt en verwacht dat functies geen bijwerkingen hebben.

Items verwijderen uit een array

Verschuiving

Gebruik .shift om het eerste item van een array te verwijderen.

Bijvoorbeeld:

var array = [1, 2, 3, 4];
array.shift();

array resulteert in:

[2, 3, 4]

Knal

Verder wordt .pop gebruikt om het laatste item uit een array te verwijderen.

Bijvoorbeeld:

var array = [1, 2, 3];
array.pop();

array resulteert in:

[1, 2]

Beide methoden retourneren het verwijderde item;

verbinding

Gebruik .splice() om een reeks elementen uit een array te verwijderen. .splice() accepteert twee parameters, de .splice() en een optioneel aantal elementen om te verwijderen. Als de tweede parameter wordt weggelaten, verwijdert .splice() alle elementen uit de .splice() tot het einde van de array.

Bijvoorbeeld:

var array = [1, 2, 3, 4];
array.splice(1, 2);

verlaat array met:

[1, 4]

De terugkeer van array.splice() is een nieuwe array met de verwijderde elementen. Voor het bovenstaande voorbeeld zou het rendement zijn:

[2, 3]

Het weglaten van de tweede parameter splitst de array dus effectief in twee arrays, met het oorspronkelijke einde voor de opgegeven index:

var array = [1, 2, 3, 4];
array.splice(2);

... verlaat de array met [1, 2] en retourneert [3, 4] .

Delete

Gebruik delete om het item uit de array te verwijderen zonder de lengte van de array te wijzigen:

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

Door waarde toe te wijzen aan length van array wordt de lengte gewijzigd naar de opgegeven waarde. Als de nieuwe waarde kleiner is dan de lengte van de array, worden items aan het einde van de waarde verwijderd.

array = [1, 2, 3, 4, 5];
array.length = 2;
console.log(array); // [1, 2]

Achteruitrij-arrays

.reverse wordt gebruikt om de volgorde van items binnen een array om te keren.

Voorbeeld voor .reverse :

[1, 2, 3, 4].reverse();

Resulteert in:

[4, 3, 2, 1]

Opmerking : .reverse rekening mee dat .reverse ( Array.prototype.reverse ) de array op zijn plaats omkeert. In plaats van een omgekeerde kopie terug te sturen, retourneert deze dezelfde array, omgekeerd.

var arr1 = [11, 22, 33];
var arr2 = arr1.reverse();
console.log(arr2); // [33, 22, 11]
console.log(arr1); // [33, 22, 11]

Je kunt een array ook 'diep' omkeren door:

function deepReverse(arr) {
  arr.reverse().forEach(elem => {
    if(Array.isArray(elem)) {
      deepReverse(elem);
    }
  });
  return arr;
}

Voorbeeld voor deepReverse:

var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];

deepReverse(arr);

Resulteert in:

arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]

Verwijder waarde uit array

Wanneer u een specifieke waarde uit een array moet verwijderen, kunt u de volgende one-liner gebruiken om een kopie-array te maken zonder de opgegeven waarde:

array.filter(function(val) { return val !== to_remove; });

Of als u de array zelf wilt wijzigen zonder een kopie te maken (bijvoorbeeld als u een functie schrijft die een array als een functie krijgt en deze manipuleert), kunt u dit fragment gebruiken:

while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }

En als u alleen de eerste gevonden waarde moet verwijderen, verwijdert u de while-lus:

var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }

Controleren of een object een array is

Array.isArray(obj) retourneert true als het object een Array , anders false .

Array.isArray([])           // true
Array.isArray([1, 2, 3])    // true
Array.isArray({})           // false
Array.isArray(1)            // false

In de meeste gevallen kunt u instanceof controleren of een object een Array .

[] instanceof Array; // true
{} instanceof Array; // false

Array.isArray heeft het voordeel boven het gebruik van een instanceof controle dat het nog steeds true retourneert true zelfs als het prototype van de array is gewijzigd en false retourneert als een niet-arrays-prototype is gewijzigd in het prototype Array .

var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr);   // true
arr instanceof Array; // false

Sorteermatrices

De methode .sort() sorteert de elementen van een array. De standaardmethode sorteert de array volgens tekenreeks Unicode-codepunten. Om een array numeriek te sorteren, moet aan de methode .sort() een compareFunction doorgegeven.

Opmerking: de methode .sort() is onzuiver. .sort() sorteert de array ter plaatse , dwz dat in plaats van een gesorteerde kopie van de oorspronkelijke array te maken, de oorspronkelijke array opnieuw wordt gerangschikt en wordt geretourneerd.

Standaard sortering

Sorteert de array in UNICODE-volgorde.

['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();

Resulteert in:

[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']

Opmerking: de hoofdletters zijn boven kleine letters geplaatst. De array staat niet in alfabetische volgorde en getallen staan niet in numerieke volgorde.

Alfabetisch sorteren

['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
  return a.localeCompare(b);        
});

Resulteert in:

['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']

Opmerking: De bovenstaande sortering geeft een foutmelding als een arrayitem geen string is. Als u weet dat de array items kan bevatten die geen tekenreeksen zijn, gebruikt u de onderstaande veilige versie.

['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
  return a.toString().localeCompare(b);      
});

String sorteren op lengte (langste eerst)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return b.length - a.length;
});

Resulteert in

["elephants", "penguins", "zebras", "dogs"];

String sorteren op lengte (kortste eerst)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return a.length - b.length;
});

Resulteert in

["dogs", "zebras", "penguins", "elephants"];

Numerieke sortering (oplopend)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return a - b;
});

Resulteert in:

[1, 10, 100, 1000, 10000]

Numerieke sortering (aflopend)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return b - a;
});

Resulteert in:

[10000, 1000, 100, 10, 1]

Sorteermatrix op even en oneven getallen

[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
    return (a & 1) - (b & 1) || a - b;
});

Resulteert in:

[0, 4, 10, 12, 7, 15, 21, 99]

Datumsortering (aflopend)

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

Resulteert 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)"
]

Ondiep klonen van een array

Soms moet u met een array werken en ervoor zorgen dat u het origineel niet wijzigt. In plaats van een clone methode, arrays hebben een slice methode waarmee u een ondiepe kopie van een onderdeel van een array uit te voeren. Houd er rekening mee dat dit alleen het eerste niveau klonen. Dit werkt goed met primitieve typen, zoals getallen en tekenreeksen, maar niet met objecten.

Om een array oppervlakkig te klonen (dwz een nieuwe arrayinstantie te hebben, maar met dezelfde elementen), kunt u de volgende one-liner gebruiken:

var clone = arrayToClone.slice();

Dit roept de ingebouwde JavaScript Array.prototype.slice methode aan. Als u argumenten doorgeeft om te slice , kunt u meer gecompliceerd gedrag krijgen dat ondiepe klonen van slechts een deel van een array maakt, maar voor onze doeleinden zal alleen het aanroepen van slice() een ondiepe kopie van de hele array maken.

Alle methoden die worden gebruikt om array-achtige objecten naar array te converteren, zijn van toepassing om een array te klonen:

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

Een array zoeken

De aanbevolen manier (sinds ES5) is om Array.prototype.find te gebruiken:

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 elke versie van JavaScript kan ook een standaard for lus worden gebruikt:

for (var i = 0; i < people.length; i++) {
  if (people[i].name === "bob") {
    break; // we found bob
  }
}

FindIndex

De methode findIndex () retourneert een index in de array als een element in de array voldoet aan de aangeboden testfunctie . Anders wordt -1 geretourneerd.

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

Elementen verwijderen / toevoegen met splice ()

De methode splice() kan worden gebruikt om elementen uit een array te verwijderen. In dit voorbeeld verwijderen we de eerste 3 uit de 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]

De methode splice() kan ook worden gebruikt om elementen aan een array toe te voegen. In dit voorbeeld voegen we de cijfers 6, 7 en 8 toe aan het einde van de array.

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]

Het eerste argument van de methode splice() is de index waarmee elementen worden verwijderd / ingevoegd. Het tweede argument is het aantal elementen dat moet worden verwijderd. Het derde argument en verder zijn de waarden die in de array moeten worden ingevoegd.

Array vergelijking

Voor eenvoudige matrixvergelijking kunt u JSON stringify gebruiken en de output-strings vergelijken:

JSON.stringify(array1) === JSON.stringify(array2)

Opmerking: dit werkt alleen als beide objecten JSON-serialiseerbaar zijn en geen cyclische verwijzingen bevatten. Dit kan TypeError: Converting circular structure to JSON

U kunt een recursieve functie gebruiken om arrays te vergelijken.

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
}

WAARSCHUWING: Het gebruik van de bovenstaande functie is gevaarlijk en moet worden ingepakt in een try catch als u vermoedt dat er een kans bestaat dat de array cyclische verwijzingen heeft (een verwijzing naar een array die een verwijzing naar zichzelf bevat)

a = [0] ;
a[1] = a;
b = [0, a]; 
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded

Opmerking: de functie gebruikt de operator voor strikte gelijkheid === om niet- === te vergelijken {a: 0} === {a: 0} is false

Een array vernietigen

const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;

length === 3;     // → true
height === 4;     // → true
hypotneuse === 5; // → true

const [,b,,c] = [1, 2, 3, 4];

console.log(b, c); // → 2, 4

const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]

function area([length, height]) {
  return (length * height) / 2;
}

const triangle = [3, 4, 5];

area(triangle); // → 6

Dubbele elementen verwijderen

Vanaf ES5.1 kunt u de native methode Array.prototype.filter om een array te doorlopen en alleen items achter te laten die een bepaalde callback-functie doorgeven.

In het volgende voorbeeld controleert onze callback of de gegeven waarde voorkomt in de array. Als dit het geval is, is het een duplicaat en wordt het niet naar de resulterende array gekopieerd.

var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) { 
  return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']

Als uw omgeving ES6 ondersteunt, kunt u ook het object Set gebruiken . Met dit object kunt u unieke waarden van elk type opslaan, of het nu primitieve waarden of objectverwijzingen zijn:

var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];

Zie ook de volgende antwoorden op SO:

• Gerelateerd dus antwoord
• Verwant antwoord met ES6

Alle elementen verwijderen

var arr = [1, 2, 3, 4];

Methode 1

Maakt een nieuwe array en overschrijft de bestaande arrayreferentie door een nieuwe.

arr = [];

Voorzichtigheid is geboden omdat hierdoor geen items uit de oorspronkelijke array worden verwijderd. De array is mogelijk gesloten als deze wordt doorgegeven aan een functie. De array blijft gedurende de levensduur van de functie in het geheugen, hoewel u zich hiervan misschien niet bewust bent. Dit is een veel voorkomende bron van geheugenlekken.

Voorbeeld van een geheugenlek als gevolg van het wissen van een slechte array:

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

Om het risico van geheugenlekken te voorkomen, gebruikt u een van de volgende 2 methoden om de array in de while-lus van het bovenstaande voorbeeld te legen.

Methode 2

Als u de eigenschap length instelt, wordt alle arrayelementen verwijderd van de nieuwe arraylengte naar de oude arraylengte. Het is de meest efficiënte manier om alle items in de array te verwijderen en dereferentie te geven. Houdt de verwijzing naar de oorspronkelijke array

arr.length = 0;

Methode 3

Gelijk aan methode 2, maar retourneert een nieuwe array met de verwijderde items. Als u de items niet nodig hebt, is deze methode inefficiënt, omdat de nieuwe array nog steeds wordt gemaakt om onmiddellijk te worden verwijderd.

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

Gerelateerde vraag .

Kaart gebruiken om objecten in een array opnieuw te formatteren

Array.prototype.map() : Retourneert een nieuwe array met de resultaten van het aanroepen van een aangeboden functie op elk element in de oorspronkelijke array.

Het volgende codevoorbeeld neemt een array van personen en maakt een nieuwe array met personen met de eigenschap 'fullName'

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

We kunnen nu reformatPersons(personsArray) en een nieuwe reeks met alleen de volledige namen van elke persoon ontvangen.

var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
  { fullName: "Malcom Reynolds" }, 
  { fullName: "Kaylee Frye" },
  { fullName: "Jayne Cobb" }
]

personsArray en de inhoud ervan blijft ongewijzigd.

console.log(personsArray);
/// Output
[
  {
    firstName: "Malcom",
    id: 1,
    lastName: "Reynolds"
  }, {
    firstName: "Kaylee",
    id: 2,
    lastName: "Frye"
  }, {
    firstName: "Jayne",
    id: 3,
    lastName: "Cobb"
  }
]

Twee array samenvoegen als sleutelwaardepaar

Wanneer we twee afzonderlijke array hebben en we een sleutel / waarde-paar van die twee array willen maken, kunnen we de functie verkleinen van de array gebruiken zoals hieronder:

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

Output:

{
  Date: "2001",
  Number: "5",
  Size: "Big",
  Location: "Sydney",
  Age: "25"
}

Converteer een string naar een array

De methode .split() splitst een string in een reeks substrings. Standaard .split() de string in substrings op spaties ( " " ), wat overeenkomt met het aanroepen van .split(" ") .

De parameter die wordt doorgegeven aan .split() geeft het teken of de reguliere expressie aan dat moet worden gebruikt voor het splitsen van de tekenreeks.

Om een string te splitsen in een array-aanroep .split met een lege string ( "" ). Belangrijke opmerking: dit werkt alleen als al uw tekens in de Unicode-tekens uit het lagere bereik passen, die de meeste Engelse en de meeste Europese talen omvatten. Voor talen waarvoor 3 en 4 byte Unicode-tekens vereist zijn, worden ze gescheiden door slice("") .

var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]

var strArray = [..."sky is blue"];        
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]

Test alle array-items op gelijkheid

De .every methode test of alle arrayelementen een gegeven predikaattest doorstaan.

Om alle objecten op gelijkheid te testen, kunt u de volgende codefragmenten gebruiken.

[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

De volgende codefragmenten testen op gelijkheid van eigenschappen

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

Kopieer een deel van een array

De methode slice () retourneert een kopie van een gedeelte van een array.

Er zijn twee parameters nodig, arr.slice([begin[, end]]) :

beginnen

Op nul gebaseerde index die het begin van de extractie is.

einde

Op nul gebaseerde index, wat het einde van de extractie is, tot deze index gesneden maar deze is niet inbegrepen.

Als het einde een negatief getal is, is end = arr.length + end .

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

Voorbeeld 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...]

Het minimale of maximale element vinden

Als uw array of array-achtig object numeriek is , dat wil zeggen, als alle elementen getallen zijn, kunt u Math.min.apply of Math.max.apply door null als eerste argument door te geven en uw array als tweede .

var myArray = [1, 2, 3, 4];

Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4

var myArray = [1, 2, 3, 4, 99, 20];

var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1

In het volgende voorbeeld wordt een for lus gebruikt:

var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
   var currentValue = myArray[i];
   if(currentValue > maxValue) {
      maxValue = currentValue;
   }
}

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

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

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

Arrays afvlakken

2 dimensionale arrays

function flattenES6(arr) {
  return [].concat(...arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]

function flatten(arr) {
  return [].concat.apply([], arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]

Arrays met hogere dimensies

Gegeven een diep geneste reeks zoals deze

var deeplyNested = [4,[5,6,[7,8],9]];

Het kan worden afgeplat met deze magie

console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]

Of

const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]

Beide bovenstaande methoden werken alleen wanneer de array uitsluitend uit getallen bestaat. Een multidimensionale reeks objecten kan met deze methode niet worden afgevlakt.

Voeg een item in een array in op een specifieke index

Eenvoudig items invoegen kan met de methode Array.prototype.splice :

arr.splice(index, 0, item);

Meer geavanceerde variant met meerdere argumenten en kettingondersteuning:

/* 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"]

En met ondersteuning voor array-type samenvoegen en chaining:

/* 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"

De methode entries ()

De methode entries() retourneert een nieuw Array Iterator-object dat de sleutel / waarde-paren bevat voor elke index in de array.

var letters = ['a','b','c'];

for(const[index,element] of letters.entries()){
  console.log(index,element);
}

resultaat

0 "a"
1 "b"
2 "c"

Opmerking : deze methode wordt niet ondersteund in Internet Explorer.

Gedeelten van deze inhoud van Array.prototype.entries door Mozilla Medewerkers onder licentie CC-by-SA 2.5