JavaScript
arrayer

Syntax

• array = [ värde , värde , ... ]
• array = new Array ( värde , värde , ... )
• array = Array.of ( värde , värde , ... )
• array = Array.from ( arrayLike )

Anmärkningar

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

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

Initiering av standardmatris

Det finns många sätt att skapa matriser. De vanligaste är att använda array-bokstäver, eller Array-konstruktören:

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

Om Array-konstruktören används utan några argument skapas en tom matris.

var arr3 = new Array();

resulterar i:

[]

Observera att om det används med exakt ett argument och att argumentet är ett number , skapas en matris med den längden med alla undefined värden istället:

var arr4 = new Array(4);

resulterar i:

[undefined, undefined, undefined, undefined]

Det gäller inte om det enda argumentet är icke-numeriskt:

var arr5 = new Array("foo");

resulterar i:

["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 spridning / vila

Sprid operatören

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]

Kartlägga värden

Det är ofta nödvändigt att generera en ny matris baserad på värdena på en befintlig matris.

Till exempel för att generera en rad stränglängder från en rad strängar:

['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]

I det här exemplet tillhandahålls en anonym funktion till map() och kartfunktionen anropar den för varje element i arrayen, med följande parametrar, i denna ordning:

• Själva elementet
• Elementets index (0, 1 ...)
• Hela matrisen

Dessutom ger map() en valfri andra parameter för att ställa in värdet på this i mappningsfunktionen. Beroende på exekveringsmiljön kan standardvärdet för this variera:

I en webbläsare är standardvärdet för this alltid window :

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

Du kan ändra det till alla anpassade objekt som detta:

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

Filtrera värden

Metoden filter() skapar en matris fylld med alla arrayelement som klarar ett test som tillhandahålls som en funktion.

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

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

Resultat i en ny grupp:

[3, 4, 5]

Filtrera falska värden

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

Eftersom Boolean är en inbyggd javascript-funktion / konstruktör som tar [en valfri parameter] och filtermetoden också tar en funktion och skickar den nuvarande array-posten som parameter, kan du läsa den på följande sätt:

1. Boolean(0) returnerar falskt
2. Boolean(undefined) returnerar falsk
3. Boolean({}) returnerar true vilket betyder att trycka den till den returnerade matrisen
4. Boolean(null) returnerar falsk
5. Boolean('') returnerar falskt
6. Boolean(true) returnerar true vilket betyder att trycka det till den returnerade matrisen
7. Boolean(5) returnerar true vilket betyder att trycka den till den returnerade matrisen

så den övergripande processen kommer att resultera

[ {}, true, 5 ]

Ett annat enkelt exempel

I det här exemplet används samma begrepp att passera en funktion som tar ett argument

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

En traditionell for loop

En traditionell for slinga har tre komponenter:

1. Initieringen: körs innan lookblocket körs första gången
2. Villkoret: kontrollerar ett villkor varje gång innan slingblocket körs och avslutar slingan om den är falsk
3. Eftertanken: utförs varje gång efter att loopblocket har utförts

Dessa tre komponenter är separerade från varandra med a ; symbol. Innehållet för var och en av dessa tre komponenter är valfritt, vilket innebär att följande är det mest minimala for slingan som möjligt:

for (;;) {
    // Do stuff
}

Naturligtvis måste du inkludera ett if(condition === true) { break; } eller en if(condition === true) { return; } någonstans inne i den for -loop för att få den att sluta springa.

Men vanligtvis används initialiseringen för att deklarera ett index, villkoret används för att jämföra det indexet med ett minimi- eller maximivärde, och eftertanken används för att öka indexet:

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

Använda en traditionell for loop för att slinga genom en matris

Det traditionella sättet att gå igenom en matris är detta:

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

Eller, om du föredrar att slinga bakåt, gör du det här:

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

Det finns emellertid många variationer möjliga, till exempel den här:

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

... eller den här ...

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

... eller den här:

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

Det som fungerar bäst är till stor del en fråga om både personlig smak och det specifika användningsfallet du implementerar.

Observera att var och en av dessa varianter stöds av alla webbläsare, inklusive mycket väldigt gamla!

En while slinga

Ett alternativ till en for loop är en while loop. För att gå igenom en matris kan du göra detta:

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

Som traditionella for slingor, while slingor stöds av även den äldsta av webbläsare.

Observera också att loopen varje gång kan skrivas om som en for loop. Till exempel while beter loop härovan på exakt samma sätt som det for -loop:

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

for...in

I JavaScript kan du också göra detta:

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

Detta bör dock användas med försiktighet eftersom det inte uppträder på samma sätt som en traditionell for loop i alla fall, och det finns potentiella biverkningar som måste beaktas. Se Varför är "då ... in" med arteritering en dålig idé? för mer detaljer.

for...of

I ES 6 är for-of loopen det rekommenderade sättet att iterera över värdena för en matris:

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

Följande exempel visar skillnaden mellan en for...of loop och en for...in loop:

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

Array.prototype.keys() kan användas för att iterera över index som denna:

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

.forEach(...) är ett alternativ i ES 5 och högre. Det stöds av alla moderna webbläsare, såväl som Internet Explorer 9 och senare.

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

Jämfört med den traditionella for loopen, kan vi inte hoppa ut ur slingan i. .forEach() . I det här fallet använder du for loopen eller använd partiell iteration som presenteras nedan.

I alla versioner av JavaScript är det möjligt att iterera genom index för en matris med en traditionell C-stil for loop.

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

Det är också möjligt att använda while loop:

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

Array.prototype.every

Eftersom ES5, om du vill iterera över en del av en matris, kan du använda Array.prototype.every , som iterates tills vi returnerar false :

// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

Motsvarande i alla JavaScript-versioner:

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 iterates tills vi återvänder true :

// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

Motsvarande i alla JavaScript-versioner:

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

bibliotek

Slutligen har många verktygsbibliotek också sina egna foreach . Tre av de mest populära är dessa:

jQuery.each() , i jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , i Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , i Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Se även följande fråga om SO, där mycket av denna information ursprungligen publicerades:

• Gå igenom en matris i JavaScript

Filtrera objektuppsättningar

Metoden filter() accepterar en testfunktion och returnerar en ny matris som endast innehåller elementen i den ursprungliga arrayen som klarar det levererade testet.

// 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 skulle innehålla följande matris: [5, 43] .

Det fungerar också på en rad objekt:

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 skulle innehålla följande array:

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

Du kan söka i hela matrisen efter ett värde som detta:

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

Detta returnerar:

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

Förena arrayelement i en sträng

För att sammanfoga alla arrayelement i en sträng kan du använda join :

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

Som du ser på den andra raden konverteras objekt som inte är strängar först.

Konvertera Array-liknande objekt till Arrays

Vad är array-liknande objekt?

JavaScript har "Array-liknande objekt", som är objektrepresentationer av Arrays med en längdegenskap. Till exempel:

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

Vanliga exempel på Array-liknande objekt är arguments i funktioner och HTMLCollection eller NodeList objekt som returneras från metoder som document.getElementsByTagName eller document.querySelectorAll .

En viktig skillnad mellan Arrays och Array-liknande objekt är dock att Array-liknande objekt ärver från Object.prototype istället för Array.prototype . Detta innebär att Array-liknande objekt inte kan komma åt vanliga Array-prototypmetoder som forEach() , push() , map() , filter() och 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]

Konvertera Array-liknande objekt till Arrays i 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. Sprid operatör:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

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

Konvertera Array-liknande objekt till Arrays i ≤ ES5

Använd Array.prototype.slice så:

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

Du kan också använda Function.prototype.call att ringa Array.prototype metoder på Array-liknande objekt direkt utan att konvertera dem:

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

Du kan också använda [].method.bind( arrayLikeObject ) att låna matrismetoder och glömma dem till ditt objekt:

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

Ändra objekt under konvertering

I ES6 kan vi, medan vi använder Array.from , ange en kartfunktion som returnerar ett mappat värde för den nya arrayen som skapas.

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

Se Arrays are Objects för en detaljerad analys.

Minska värden

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

Alla ovanstående exempel för Flatten Array resulterar i:

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

Logisk värdekoppling

[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

Concatenating Arrays

Två matriser

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

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

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

Resultat i en ny Array :

[1, 2, 3, 4, 5]

Flera matriser

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]

Resultat i en ny Array :

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

Utan att kopiera den första matrisen

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

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

Värdet på longArray är nu:

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

Observera att om den andra matrisen är för lång (> 100 000 poster), kan du få ett stackoverflödesfel (på grund av hur apply fungerar). För att vara säker kan du istället iterera:

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

Array- och icke-array-värden

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

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

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

Resultat i en ny Array :

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

Du kan också blanda matriser med icke-matriser

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

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

Resultat i en ny Array :

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

Lägg till / förbered artiklar i Array

unshift

Använd .unshift att lägga till ett eller flera objekt i början av en matris.

Till exempel:

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

matris resulterar i:

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

Skjuta på

Ytterligare .push används för att lägga till artiklar efter den senaste existerande artikeln.

Till exempel:

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

matris resulterar i:

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

Båda metoderna returnerar den nya matrislängden.

Objektnycklar och värden som ska array

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

Nu är matrisen

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

Sortera flerdimensionell matris

Med tanke på följande matris

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

Du kan sortera den sortera efter nummer (andra index)

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

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

Detta kommer att matas ut

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

Var medveten om att sorteringsmetoden fungerar på matrisen på plats . Det ändrar matrisen. De flesta andra matrismetoder returnerar en ny matris, vilket gör att den ursprungliga är intakt. Detta är särskilt viktigt att notera om du använder en funktionell programmeringsstil och förväntar dig att funktioner inte ska ha biverkningar.

Ta bort objekt från en matris

Flytta

Använd .shift att ta bort det första objektet i en matris.

Till exempel:

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

matris resulterar i:

[2, 3, 4]

Pop

Ytterligare .pop används för att ta bort det sista objektet från en matris.

Till exempel:

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

matris resulterar i:

[1, 2]

Båda metoderna returnerar det borttagna objektet.

Splitsa

Använd .splice() att ta bort en serie element från en matris. .splice() accepterar två parametrar, startindex och ett valfritt antal element att radera. Om den andra parametern är utelämnad tar bort .splice() alla element från startindexet till slutet av matrisen.

Till exempel:

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

array innehåller:

[1, 4]

Return of array.splice() är en ny matris som innehåller de borttagna elementen. För exemplet ovan skulle avkastningen vara:

[2, 3]

Således utelämnar den andra parametern effektivt matrisen i två arrayer, med originalet slutar innan det angivna indexet:

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

... lämnar array innehåller [1, 2] och returnerar [3, 4] .

Radera

Använd delete att ta bort objekt från arrayen utan att ändra längden på array:

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

Tilldelning av värde till arrayens length ändrar längden till givet värde. Om det nya värdet är mindre än array-längden tas artiklar bort från slutet av värdet.

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

Omvända matriser

.reverse används för att vända ordning på föremål i en matris.

Exempel för .reverse :

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

Resulterar i:

[4, 3, 2, 1]

Obs : Observera att .reverse ( Array.prototype.reverse ) kommer att vända arrayen på plats . I stället för att returnera en omvänd kopia kommer den att returnera samma matris, omvänd.

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

Du kan också vända ett array "djupt" genom att:

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

Exempel för deepReverse:

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

deepReverse(arr);

Resulterar i:

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

Ta bort värde från matrisen

När du behöver ta bort ett specifikt värde från en matris kan du använda följande fodral för att skapa en kopieringsmatris utan det angivna värdet:

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

Eller om du vill ändra själva matrisen utan att skapa en kopia (till exempel om du skriver en funktion som får en array som en funktion och manipulerar den) kan du använda detta utdrag:

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

Och om du behöver ta bort bara det första värdet som hittades tar du bort loopen:

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

Kontrollera om ett objekt är en array

Array.isArray(obj) returnerar true om objektet är en Array , annars false .

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

I de flesta fall kan du instanceof kontrollera om ett objekt är en Array .

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

Array.isArray har en fördel gentemot att använda en instanceof checka in att det fortfarande kommer att återvända true även om prototypen för arrayen har ändrats och kommer att återvända false om en icke-arrayer prototyp ändrades till Array prototyp.

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

Sortera matriser

.sort() sorterar elementen i en matris. Standardmetoden sorterar matrisen enligt sträng Unicode-kodpunkter. För att sortera en matris numeriskt .sort() metoden .sort() ha en compareFunction överförd till den.

Obs .sort() Metoden .sort() är oren. .sort() kommer att sortera matrisen på plats , dvs istället för att skapa en sorterad kopia av den ursprungliga matrisen, kommer den att ordna den nya arrayen och returnera den.

Standard sortering

Sorterar matrisen i UNICODE-ordning.

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

Resulterar i:

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

Obs: De stora bokstäverna har flyttats över gemener. Arrayen är inte i alfabetisk ordning och siffror är inte i numerisk ordning.

Alfabetisk sortering

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

Resulterar i:

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

Obs: Ovanstående sortering kommer att kasta ett fel om några arrayobjekt inte är en sträng. Om du vet att matrisen kan innehålla objekt som inte är strängar använder du den säkra versionen nedan.

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

Strängsortering efter längd (längst först)

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

Resulterar i

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

Strängsortering efter längd (kortast först)

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

Resulterar i

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

Numerisk sortering (stigande)

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

Resulterar i:

[1, 10, 100, 1000, 10000]

Numerisk sortering (fallande)

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

Resulterar i:

[10000, 1000, 100, 10, 1]

Sortera matris efter jämna och udda siffror

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

Resulterar i:

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

Datum sortering (fallande)

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

Resulterar i:

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

Grunt kloning en matris

Ibland måste du arbeta med en matris och samtidigt se till att du inte ändrar originalet. I stället för en clone har matriser en slice som låter dig utföra en ytlig kopia av någon del av en matris. Tänk på att detta bara klonerar den första nivån. Detta fungerar bra med primitiva typer, som nummer och strängar, men inte föremål.

För att grunt klona en matris (dvs. ha en ny matrisinstans men med samma element) kan du använda följande enfodring:

var clone = arrayToClone.slice();

Detta kallar den inbyggda metoden JavaScript Array.prototype.slice . Om du skickar argument till slice kan du få mer komplicerade beteenden som skapar grunt kloner av endast en del av en matris, men för våra ändamål kommer bara att ringa slice() att skapa en ytlig kopia av hela matrisen.

Alla metoder som används för att konvertera array som objekt till array är tillämpliga för att klona en array:

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

Söker efter en matris

Det rekommenderade sättet (Eftersom ES5) är att använda 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";
});

I vilken version av JavaScript som helst kan en standard for loop också användas:

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

FindIndex

Metoden findIndex () returnerar ett index i arrayen, om ett element i arrayen uppfyller den medföljande testfunktionen. Annars returneras -1.

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

Ta bort / lägga till element med skiva ()

Metoden splice() kan användas för att ta bort element från en matris. I det här exemplet tar vi bort de första 3 från matrisen.

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]

Metoden splice() kan också användas för att lägga till element i en matris. I det här exemplet sätter vi in siffrorna 6, 7 och 8 i slutet av matrisen.

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]

Det första argumentet med splice() -metoden är indexet för att ta bort / infoga element. Det andra argumentet är antalet element som ska tas bort. Det tredje argumentet och framåt är värdena att infoga i matrisen.

Array jämförelse

För enkel matrisjämförelse kan du använda JSON stringify och jämföra outputsträngarna:

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

Observera: att detta bara fungerar om båda objekten är JSON seriellt och inte innehåller cykliska referenser. Det kan kasta TypeError: Converting circular structure to JSON

Du kan använda en rekursiv funktion för att jämföra matriser.

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
}

VARNING: Med ovanstående funktion är farligt och bör vara insvept i ett try catch Om du misstänker att det finns en chans arrayen har cykliska referenser (en referens till en array som innehåller en referens till sig själv)

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

Obs: Funktionen använder operatören strikt jämlikhet === att jämföra icke-array-objekt {a: 0} === {a: 0} är false

Att förstöra en matris

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

Ta bort duplicerade element

Från ES5.1 och framåt kan du använda den ursprungliga metoden Array.prototype.filter att gå igenom en matris och bara lämna poster som passerar en given återuppringningsfunktion.

I följande exempel kontrollerar vår återuppringning om det angivna värdet förekommer i matrisen. Om det gör det är det en duplikat och kopieras inte till den resulterande matrisen.

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

Om din miljö stöder ES6 kan du också använda Set- objektet. Detta objekt låter dig lagra unika värden av vilken typ som helst, oavsett om primitiva värden eller objektreferenser:

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

Se även följande anwsers på SO:

• Relaterat SO-svar
• Relaterat svar med ES6

Ta bort alla element

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

Metod 1

Skapar en ny matris och skriver över den befintliga matrisreferensen med en ny.

arr = [];

Var försiktig eftersom det inte tar bort några objekt från den ursprungliga matrisen. Arrayen kan ha stängts över när den skickades till en funktion. Matrisen kommer att förbli i minnet hela funktionens liv, men du kanske inte är medveten om detta. Detta är en vanlig källa till minnesläckor.

Exempel på en minnesläcka till följd av dålig array-clearing:

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

För att förhindra risken för ett minnesläckage, använd någon av följande två metoder för att tömma matrisen i exemplet medan medan slingan.

Metod 2

Om du ställer in längdegenskapen raderas alla arrayelement från den nya array-längden till den gamla array-längden. Det är det mest effektiva sättet att ta bort och ta bort alla objekt i matrisen. Håller referensen till den ursprungliga matrisen

arr.length = 0;

Metod 3

Liknar metod 2 men returnerar en ny matris som innehåller de borttagna artiklarna. Om du inte behöver artiklarna är den här metoden ineffektiv eftersom den nya matrisen fortfarande skapas bara för att omedelbart avskaffas.

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

Relaterad fråga .

Använda kartan för att omformatera objekt i en matris

Array.prototype.map() : Returnerar en ny matris med resultaten av att anropa en tillhandahållen funktion på varje element i den ursprungliga arrayen.

Följande kodexempel tar en matris med personer och skapar en ny matris som innehåller personer med en "fullName" -egenskap

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

Vi kan nu ringa reformatPersons(personsArray) och fått en ny grupp med bara fullständiga namn på varje person.

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

personsArray och dess innehåll förblir oförändrat.

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

Slå samman två array som nyckelvärdespar

När vi har två separata arrayer och vi vill skapa nyckelvärdespar från den två arrayen, kan vi använda arrayens reduceringsfunktion som nedan:

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

Produktion:

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

Konvertera en sträng till en matris

.split() delar upp en sträng i en rad underlag. Som standard kommer .split() att bryta strängen i underlag på mellanslag ( " " ), vilket motsvarar att ringa .split(" ") .

Parametern som skickas till .split() anger tecknet eller det reguljära uttrycket som ska användas för att dela strängen.

För att dela en sträng i ett array-samtal .split med en tom sträng ( "" ). Viktig anmärkning: Det här fungerar bara om alla dina tecken passar in Unicode-tecken för lägre intervall, som täcker de flesta engelska och de flesta europeiska språk. För språk som kräver 3 och 4 byte unicode-tecken kommer slice("") att separera dem.

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

Testa alla arrayobjekt för jämlikhet

Metoden .every testar om alla arrayelement klarar ett tillhandahållet predikatstest.

För att testa alla objekt för jämlikhet kan du använda följande kodavsnitt.

[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

Följande kodavsnitt testar för jämställdhet

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

Kopiera en del av en matris

Metoden skiva () returnerar en kopia av en del av en matris.

Det tar två parametrar, arr.slice([begin[, end]]) :

Börja

Nollbaserat index som är början på extraktionen.

slutet

Nollbaserat index som är slutet på extraktionen, skär upp till detta index men det ingår inte.

Om slutet är ett negativt tal, end = arr.length + end .

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

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

Hitta minimi- eller maxelementet

Om ditt array eller array-liknande objekt är numeriskt , det vill säga, om alla dess element är nummer, kan du använda Math.min.apply eller Math.max.apply genom att Math.max.apply null som det första argumentet, och din array som den andra .

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

Följande exempel använder en for loop:

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

Flatening Arrays

2 dimensionella matriser

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]

Matriser med högre dimension

Med tanke på en djupt kapslad matris som så

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

Det kan plattas med denna magi

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

Eller

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

Båda ovanstående metoder fungerar endast när matrisen uteslutande består av siffror. En flerdimensionell grupp av objekt kan inte plattas med denna metod.

Sätt in ett objekt i en matris vid ett specifikt index

Enkel införande av objekt kan göras med Array.prototype.splice metoden:

arr.splice(index, 0, item);

Mer avancerad variant med flera argument och kedjestöd:

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

Och med array-typ argumenter stöd för sammanslagning och kedja:

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

Metoden för poster ()

Metoden entry entries() returnerar ett nytt Array Iterator-objekt som innehåller nyckel- / värdepar för varje index i arrayen.

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

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

resultat

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

Obs! Den här metoden stöds inte i Internet Explorer.

Delar av detta innehåll från Array.prototype.entries av Mozilla-bidragsgivare licensierade enligt CC-by-SA 2.5