JavaScript
Tablice

Składnia

• array = [ wartość , wartość , ... ]
• array = new Array ( wartość , wartość , ... )
• array = Array.of ( wartość , wartość , ... )
• array = Array.from ( arrayLike )

Uwagi

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

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

Standardowa inicjalizacja tablicy

Istnieje wiele sposobów tworzenia tablic. Najczęściej są używane literały tablicowe lub konstruktor Array:

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

Jeśli konstruktor tablicy zostanie użyty bez argumentów, tworzona jest pusta tablica.

var arr3 = new Array();

prowadzi do:

[]

Zauważ, że jeśli zostanie użyty z dokładnie jednym argumentem, a argument ten jest number , zostanie utworzona tablica o tej długości ze wszystkimi undefined wartościami:

var arr4 = new Array(4);

prowadzi do:

[undefined, undefined, undefined, undefined]

Nie dotyczy to sytuacji, gdy pojedynczy argument jest nienumeryczny:

var arr5 = new Array("foo");

prowadzi do:

["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 / rest

Operator rozrzutu

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]

Wartości mapowania

Często konieczne jest wygenerowanie nowej tablicy na podstawie wartości istniejącej tablicy.

Na przykład, aby wygenerować tablicę długości łańcuchów z tablicy łańcuchów:

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

W tym przykładzie funkcja anonimowa została udostępniona funkcji map() , a funkcja map wywoła ją dla każdego elementu w tablicy, podając następujące parametry w następującej kolejności:

• Sam element
• Indeks elementu (0, 1 ...)
• Cała tablica

Dodatkowo map() udostępnia opcjonalny drugi parametr w celu ustawienia wartości this w funkcji mapowania. W zależności od środowiska wykonawczego, wartość domyślna this może się różnić:

W przeglądarce domyślną wartością this jest zawsze window :

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

Możesz go zmienić na dowolny obiekt niestandardowy, taki jak ten:

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

Filtrowanie wartości

Metoda filter() tworzy tablicę wypełnioną wszystkimi elementami tablicy, które przejdą test podany jako funkcja.

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

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

Wyniki w nowej tablicy:

[3, 4, 5]

Filtruj wartości fałszowania

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

Ponieważ Boolean jest rodzimą funkcją / konstruktorem javascript, która pobiera [jeden parametr opcjonalny], a metoda filtru również przyjmuje funkcję i przekazuje jej bieżący element tablicy jako parametr, można go odczytać w następujący sposób:

1. Boolean(0) zwraca false
2. Boolean(undefined) zwraca wartość false
3. Boolean({}) zwraca true, co oznacza wypychanie go do zwróconej tablicy
4. Boolean(null) zwraca false
5. Boolean('') zwraca false
6. Boolean(true) zwraca true, co oznacza wypychanie go do zwróconej tablicy
7. Boolean(5) zwraca true, co oznacza wypychanie go do zwróconej tablicy

spowoduje to ogólny proces

[ {}, true, 5 ]

Kolejny prosty przykład

W tym przykładzie użyto tej samej koncepcji przekazywania funkcji, która przyjmuje jeden 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"]

Iteracja

Tradycyjny for pętli

Tradycyjna pętla for ma trzy elementy:

1. Inicjalizacja: wykonywana przed pierwszym uruchomieniem bloku look
2. Warunek: sprawdza warunek za każdym razem przed wykonaniem bloku pętli i kończy pętlę, jeśli jest fałszem
3. Myśl następująca: wykonywana za każdym razem po wykonaniu bloku pętli

Te trzy składniki są oddzielone od siebie za pomocą ; symbol. Treść każdego z tych trzech składników jest opcjonalna, co oznacza, że for minimalnej możliwej liczby pętli:

for (;;) {
    // Do stuff
}

Oczywiście będziesz musiał dołączyć if(condition === true) { break; } lub if(condition === true) { return; } Gdzieś w środku, że for -loop zmusić go do przerwania biegu.

Zwykle jednak inicjacja służy do deklarowania indeksu, warunek służy do porównania tego indeksu z wartością minimalną lub maksymalną, a przemyślenie służy do zwiększenia indeksu:

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

Używanie tradycyjnej pętli for do zapętlania tablicy

Tradycyjny sposób przechodzenia przez tablicę jest następujący:

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

Lub, jeśli wolisz zapętlać wstecz, wykonaj następujące czynności:

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

Istnieje jednak wiele odmian, na przykład ta:

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

... albo ten ...

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

... albo ten:

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

To, co działa najlepiej, zależy w dużej mierze zarówno od osobistego gustu, jak i konkretnego przypadku zastosowania, który wdrażasz.

Pamiętaj, że każda z tych odmian jest obsługiwana przez wszystkie przeglądarki, w tym bardzo bardzo stare!

while pętla

Alternatywę dla for pętli jest while pętla. Aby przejść przez tablicę, możesz to zrobić:

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

Jak tradycyjny for pętli, while pętle są obsługiwane nawet przez najstarszą przeglądarkę.

Zauważ też, że pętla while może być przepisana jako pętla for . Na przykład, while pętla tu powyżej zachowuje się w ten sam sposób jak ten for -loop:

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

for...in

W JavaScript możesz także to zrobić:

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

Należy to jednak stosować ostrożnie, ponieważ we wszystkich przypadkach nie zachowuje się tak samo, jak tradycyjna pętla for , i należy wziąć pod uwagę potencjalne skutki uboczne. Zobacz: Dlaczego używanie „dla ... w” z iteracją tablicy jest złym pomysłem? po więcej szczegółów.

for...of

W ES 6 pętla for-of jest zalecanym sposobem iteracji po wartościach tablicy:

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

Poniższy przykład pokazuje, że różnica między for...of pętli oraz for...in pętli:

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() można użyć do iteracji indeksów takich jak to:

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

Metoda .forEach(...) jest opcją w ES 5 i nowszych. Jest obsługiwany przez wszystkie nowoczesne przeglądarki, a także Internet Explorer 9 i nowsze wersje.

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

W porównaniu z tradycyjną pętlą for , nie możemy wyskoczyć z pętli w .forEach() . W takim przypadku użyj pętli for lub częściowej iteracji przedstawionej poniżej.

We wszystkich wersjach JavaScript możliwe jest iterowanie przez indeksy tablicy przy użyciu tradycyjnego pętli for -style for stylu C.

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

Możliwe jest również użycie while pętli:

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

Array.prototype.every

Od wersji ES5, jeśli chcesz iterować po części tablicy, możesz używać Array.prototype.every , który iteruje do momentu zwrócenia 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
}); 

Odpowiednik w dowolnej wersji JavaScript:

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 iteruje, dopóki nie zwrócimy wartości 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
}); 

Odpowiednik w dowolnej wersji JavaScript:

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

Biblioteki

Wreszcie, wiele bibliotek narzędzi ma również własne warianty foreach . Trzy najbardziej popularne to:

jQuery.each() , w jQuery :

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

_.each() , w Underscore.js :

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

_.forEach() , w Lodash.js :

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

Zobacz także następujące pytanie na temat SO, w którym pierwotnie opublikowano wiele z tych informacji:

• Pętlę przez tablicę w JavaScript

Filtrowanie tablic obiektów

Metoda filter() przyjmuje funkcję testową i zwraca nową tablicę zawierającą tylko elementy oryginalnej tablicy, które przeszły podany test.

// 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 zawierałaby następującą tablicę: [5, 43] .

Działa również na szeregu obiektów:

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 zawierałby następującą tablicę:

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

Możesz wyszukać w całej tablicy dla wartości takiej jak ta:

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

Zwraca to:

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

Łączenie elementów tablicy w ciągu

Aby połączyć wszystkie elementy tablicy w ciąg, możesz użyć metody join :

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

Jak widać w drugim wierszu, elementy, które nie są łańcuchami, zostaną najpierw przekonwertowane.

Konwertowanie obiektów podobnych do tablicy na tablice

Co to są obiekty podobne do tablicy?

JavaScript ma „obiekty podobne do tablicy”, które są obiektowymi reprezentacjami tablic z właściwością length. Na przykład:

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

Typowymi przykładami obiektów podobnych do tablicy są obiekty arguments w funkcjach i obiekty HTMLCollection lub NodeList zwracane z metod takich jak document.getElementsByTagName lub document.querySelectorAll .

Jednak jedną kluczową różnicą między tablicami a obiektami podobnymi do macierzy jest to, że obiekty podobne do macierzy dziedziczą po Object.prototype zamiast Array.prototype . Oznacza to, że obiekty podobne do macierzy nie mają dostępu do typowych metod prototypowych macierzy, takich jak forEach() , push() , map() , filter() i 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]

Konwertuj obiekty podobne do macierzy na tablice w 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. Operator rozrzutu:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

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

Konwertuj obiekty podobne do tablic na tablice w ≤ ES5

Użyj Array.prototype.slice taki sposób:

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

Możesz także użyć Function.prototype.call do bezpośredniego Array.prototype metod Array.prototype na obiektach podobnych do Array, bez ich konwersji:

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

Możesz także użyć [].method.bind( arrayLikeObject ) do pożyczenia metod tablicowych i glomowania ich na obiekcie:

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

Modyfikowanie przedmiotów podczas konwersji

W ES6, korzystając z Array.from , możemy określić funkcję odwzorowania, która zwraca wartość odwzorowania dla tworzonej nowej tablicy.

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

Szczegółowa analiza patrz Tablice są obiektami .

Zmniejszenie wartości

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

Wszystkie powyższe przykłady spłaszczania macierzy skutkują:

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

Logiczne połączenie wartości

[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

Tablice konkatenujące

Dwie tablice

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

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

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

Wyniki w nowej Array :

[1, 2, 3, 4, 5]

Wiele tablic

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]

Wyniki w nowej Array :

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

Bez kopiowania pierwszej tablicy

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

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

Wartość longArray wynosi teraz:

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

Zauważ, że jeśli druga tablica jest zbyt długa (> 100 000 wpisów), może pojawić się błąd przepełnienia stosu (z powodu sposobu działania apply ). Aby być bezpiecznym, możesz zamiast tego iterować:

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

Wartości tablicowe i inne niż tablicowe

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

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

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

Wyniki w nowej Array :

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

Możesz także mieszać tablice z nie-tablicami

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

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

Wyniki w nowej Array :

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

Dołącz / dodaj elementy do tablicy

Cofnij

Użyj .unshift aby dodać jeden lub więcej elementów na początku tablicy.

Na przykład:

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

wyniki tablic w:

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

Pchać

Dalej .push służy do dodawania przedmiotów po ostatnim aktualnie istniejącym elemencie.

Na przykład:

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

wyniki tablic w:

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

Obie metody zwracają nową długość tablicy.

Klucze obiektów i wartości do tablicy

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

Teraz tablica jest

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

Sortowanie tablicy wielowymiarowej

Biorąc pod uwagę następującą tablicę

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

Możesz to posortować posortować według numeru (drugi indeks)

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

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

To wyjdzie

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

Należy pamiętać, że metoda sortowania działa na macierzy w miejscu . Zmienia tablicę. Większość innych metod tablic zwraca nową tablicę, pozostawiając oryginalną nietkniętą. Jest to szczególnie ważne, jeśli używasz funkcjonalnego stylu programowania i oczekujesz, że funkcje nie będą miały skutków ubocznych.

Usuwanie elementów z tablicy

Zmiana

Użyj .shift aby usunąć pierwszy element tablicy.

Na przykład:

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

wyniki tablic w:

[2, 3, 4]

Muzyka pop

Dalej .pop służy do usunięcia ostatniego elementu z tablicy.

Na przykład:

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

wyniki tablic w:

[1, 2]

Obie metody zwracają usunięty element;

Splatać

Użyj .splice() aby usunąć serię elementów z tablicy. .splice() akceptuje dwa parametry, indeks początkowy i opcjonalną liczbę elementów do usunięcia. Jeśli pozostanie drugi parametr, .splice() usunie wszystkie elementy z indeksu początkowego do końca tablicy.

Na przykład:

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

pozostawia array zawierającą:

[1, 4]

array.splice() przez array.splice() jest nowa tablica zawierająca usunięte elementy. W powyższym przykładzie zwracany byłby:

[2, 3]

W ten sposób pominięcie drugiego parametru skutecznie dzieli tablicę na dwie tablice, z oryginalnym zakończeniem przed określonym indeksem:

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

... pozostawia array zawierającą [1, 2] i zwraca [3, 4] .

Usunąć

Użyj delete aby usunąć element z tablicy bez zmiany długości tablicy:

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

Przypisanie wartości do length tablicy zmienia długość na podaną wartość. Jeśli nowa wartość jest mniejsza niż długość tablicy, elementy zostaną usunięte z końca wartości.

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

Tablice cofania

.reverse służy do odwrócenia kolejności elementów wewnątrz tablicy.

Przykład dla .reverse :

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

Prowadzi do:

[4, 3, 2, 1]

Uwaga : Należy pamiętać, że .reverse ( Array.prototype.reverse ) odwróci tablicę na swoim miejscu . Zamiast zwracać odwróconą kopię, zwróci tę samą tablicę, odwróconą.

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

Możesz także odwrócić tablicę „głęboko” poprzez:

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

Przykład dla deepReverse:

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

deepReverse(arr);

Prowadzi do:

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

Usuń wartość z tablicy

Gdy chcesz usunąć określoną wartość z tablicy, możesz użyć następującego linijki, aby utworzyć tablicę kopii bez podanej wartości:

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

Lub jeśli chcesz zmienić samą tablicę bez tworzenia kopii (na przykład, jeśli napiszesz funkcję, która pobiera tablicę jako funkcję i manipuluje nią), możesz użyć tego fragmentu:

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

A jeśli chcesz usunąć tylko pierwszą znalezioną wartość, usuń pętlę while:

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

Sprawdzanie, czy obiekt jest tablicą

Array.isArray(obj) zwraca true jeśli obiekt jest Array , w przeciwnym razie false .

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

W większości przypadków możesz za pomocą instanceof sprawdzić, czy obiekt jest Array .

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

Array.isArray ma tę przewagę, że używa sprawdzania instanceof , ponieważ nadal zwraca wartość true nawet jeśli prototyp tablicy został zmieniony, i zwraca wartość false jeśli prototyp niebędący tablicami został zmieniony na prototyp Array .

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

Sortowanie tablic

Metoda .sort() sortuje elementy tablicy. Domyślna metoda posortuje tablicę według ciągów znaków kodu Unicode. Aby posortować tablicę numerycznie, metoda .sort() musi mieć do compareFunction funkcję compareFunction .

Uwaga: Metoda .sort() jest nieczysta. .sort() posortuje tablicę w miejscu , tzn. zamiast tworzyć posortowaną kopię oryginalnej tablicy, ponownie uporządkuje oryginalną tablicę i zwróci ją.

Domyślne sortowanie

Sortuje tablicę w kolejności UNICODE.

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

Prowadzi do:

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

Uwaga: wielkie litery zostały przeniesione powyżej małych liter. Tablica nie jest uporządkowana alfabetycznie, a liczby nie są uporządkowane liczbowo.

Sortowanie alfabetyczne

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

Prowadzi do:

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

Uwaga: powyższe sortowanie spowoduje zgłoszenie błędu, jeśli jakiekolwiek elementy tablicy nie są ciągiem. Jeśli wiesz, że tablica może zawierać elementy, które nie są łańcuchami, skorzystaj z bezpiecznej wersji poniżej.

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

Sortowanie ciągów według długości (od najdłuższego)

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

Prowadzi do

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

Sortowanie ciągów według długości (od najkrótszej)

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

Prowadzi do

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

Sortowanie numeryczne (rosnąco)

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

Prowadzi do:

[1, 10, 100, 1000, 10000]

Sortowanie numeryczne (malejąco)

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

Prowadzi do:

[10000, 1000, 100, 10, 1]

Sortowanie tablicy według liczb parzystych i nieparzystych

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

Prowadzi do:

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

Sortowanie według daty (malejąco)

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

Prowadzi do:

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

Płytkie klonowanie tablicy

Czasami musisz pracować z tablicą, upewniając się, że nie modyfikujesz oryginału. Zamiast metody clone tablice mają metodę slice , która pozwala wykonać płytką kopię dowolnej części tablicy. Pamiętaj, że klonuje to tylko pierwszy poziom. Działa to dobrze z typami prymitywnymi, takimi jak liczby i łańcuchy, ale nie z obiektami.

Aby płytko sklonować tablicę (tj. Mieć nową instancję tablicy, ale z tymi samymi elementami), możesz użyć następującego jednowierszowego:

var clone = arrayToClone.slice();

To wywołuje wbudowaną metodę JavaScript Array.prototype.slice . Jeśli przekażesz argumenty do slice , możesz uzyskać bardziej skomplikowane zachowania, które tworzą płytkie klony tylko części tablicy, ale dla naszych celów samo wywołanie slice() utworzy płytką kopię całej tablicy.

Wszystkie metody użyte do konwersji tablic podobnych obiektów na tablice mają zastosowanie do klonowania tablicy:

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

Wyszukiwanie w tablicy

Zalecanym sposobem (od ES5) jest użycie 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";
});

W każdej wersji JavaScript, standardowy for pętli mogą być wykorzystywane także:

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

FindIndex

Metoda findIndex () zwraca indeks w tablicy, jeśli element w tablicy spełnia podaną funkcję testową. W przeciwnym razie zwracane jest -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

Usuwanie / dodawanie elementów za pomocą splice ()

Do usunięcia elementów z tablicy można użyć metody splice() . W tym przykładzie usuwamy pierwsze 3 z tablicy.

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]

Metodę splice() można także wykorzystać do dodania elementów do tablicy. W tym przykładzie wstawimy liczby 6, 7 i 8 na końcu tablicy.

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]

Pierwszym argumentem metody splice() jest indeks usuwania / wstawiania elementów. Drugi argument to liczba elementów do usunięcia. Trzeci argument i kolejne to wartości, które należy wstawić do tablicy.

Porównanie tablic

Dla prostego porównania tablic możesz użyć JSON stringify i porównać ciągi wyjściowe:

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

Uwaga: zadziała to tylko wtedy, gdy oba obiekty są serializowane przez JSON i nie zawierają cyklicznych odwołań. Może wyrzucić TypeError: Converting circular structure to JSON

Możesz użyć funkcji rekurencyjnej, aby porównać tablice.

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
}

OSTRZEŻENIE: Korzystanie z powyższej funkcji jest niebezpieczne i powinno być zapakowane w try catch jeśli podejrzewasz, że istnieje prawdopodobieństwo, że tablica ma cykliczne odwołania (odwołanie do tablicy zawierającej odwołanie do siebie)

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

Uwaga: Funkcja używa operatora ścisłej równości === do porównywania elementów niebędących tablicami {a: 0} === {a: 0} jest false

Niszczenie tablicy

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

Usuwanie zduplikowanych elementów

Począwszy od wersji ES5.1, można użyć rodzimej metody Array.prototype.filter aby przejść przez tablicę i pozostawić tylko wpisy, które przechodzą daną funkcję wywołania zwrotnego.

W poniższym przykładzie nasze wywołanie zwrotne sprawdza, czy podana wartość występuje w tablicy. Jeśli tak, jest to duplikat i nie zostanie skopiowany do wynikowej tablicy.

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

Jeśli twoje środowisko obsługuje ES6, możesz również użyć obiektu Set . Ten obiekt pozwala przechowywać unikalne wartości dowolnego typu, zarówno pierwotne, jak i referencje do obiektów:

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

Zobacz także następujące odpowiedzi na SO:

• Powiązana odpowiedź SO
• Powiązana odpowiedź z ES6

Usuwanie wszystkich elementów

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

Metoda 1

Tworzy nową tablicę i zastępuje istniejące odwołanie do tablicy nową.

arr = [];

Należy zachować ostrożność, ponieważ nie usuwa to żadnych elementów z oryginalnej tablicy. Tablica mogła zostać zamknięta po przekazaniu do funkcji. Tablica pozostanie w pamięci do końca życia funkcji, chociaż możesz nie być tego świadomy. Jest to częste źródło wycieków pamięci.

Przykład wycieku pamięci wynikającego z nieprawidłowego czyszczenia tablicy:

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

Aby zapobiec ryzyku wycieku pamięci, użyj jednej z następujących 2 metod, aby opróżnić tablicę w pętli while powyższego przykładu.

Metoda 2

Ustawienie właściwości length usuwa wszystkie elementy tablicy z nowej długości tablicy do starej długości tablicy. Jest to najbardziej skuteczny sposób na usunięcie i usunięcie wszystkich elementów w tablicy. Zachowuje odniesienie do oryginalnej tablicy

arr.length = 0;

Metoda 3

Podobne do metody 2, ale zwraca nową tablicę zawierającą usunięte elementy. Jeśli nie potrzebujesz tych elementów, ta metoda jest nieefektywna, ponieważ nowa tablica jest nadal tworzona tylko po to, aby natychmiast ją wyrejestrować.

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

Powiązane pytanie

Używanie mapy do formatowania obiektów w tablicy

Array.prototype.map() : Zwraca nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu w oryginalnej tablicy.

Poniższy przykład kodu pobiera tablicę osób i tworzy nową tablicę zawierającą osoby z właściwością „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;
  });
};

Możemy teraz wywoływać reformatPersons(personsArray) i otrzymaliśmy nowy zestaw tylko pełnych nazwisk każdej osoby.

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

personsArray i jego zawartość pozostają niezmienione.

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

Scal dwie tablice jako parę klucz-wartość

Kiedy mamy dwie oddzielne tablice i chcemy utworzyć parę klucz-wartość z tej dwóch tablic, możemy użyć funkcji redukcji tablic, jak poniżej:

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

Wynik:

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

Konwertuj ciąg znaków na tablicę

Metoda .split() dzieli ciąg na tablicę podciągów. Domyślnie .split() podzieli ciąg na podciągi na spacje ( " " ), co jest równoważne z wywołaniem .split(" ") .

Parametr przekazany do .split() określa znak lub wyrażenie regularne, które ma być użyte do podziału łańcucha.

Aby podzielić ciąg na tablicę, wywołaj .split z pustym ciągiem ( "" ). Ważna uwaga: Działa to tylko wtedy, gdy wszystkie twoje postacie pasują do znaków dolnego zakresu Unicode, które obejmują większość języków angielskich i europejskich. W przypadku języków wymagających 3- i 4-bajtowych znaków Unicode slice("") je rozdzieli.

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

Przetestuj wszystkie elementy tablicy pod kątem równości

Metoda .every sprawdza, czy wszystkie elementy tablicy przechodzą podany test predykatu.

Aby przetestować wszystkie obiekty pod kątem równości, możesz użyć następujących fragmentów kodu.

[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

Poniższe fragmenty kodu sprawdzają równość właściwości

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

Skopiuj część tablicy

Metoda slice () zwraca kopię części tablicy.

Wymaga dwóch parametrów, arr.slice([begin[, end]]) :

zaczynać

Indeks zerowy, który jest początkiem ekstrakcji.

koniec

Indeks zerowy, który jest końcem ekstrakcji, kroi do tego indeksu, ale nie jest uwzględniony.

Jeśli koniec jest liczbą ujemną, end = arr.length + end .

Przykład 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"]

Przykład 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...]

Znalezienie minimalnego lub maksymalnego elementu

Jeśli tablica lub tablica podobnego obiektu jest numeryczne, to znaczy wtedy, gdy wszystkie jego elementy są numery, a następnie można użyć Math.min.apply lub Math.max.apply przekazując null jako pierwszy argument, a tablica jako drugi .

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

W poniższym przykładzie użyto pętli for :

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

Tablice spłaszczające

2 tablice wymiarowe

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]

Tablice o wyższych wymiarach

Biorąc pod uwagę tak głęboko zagnieżdżoną tablicę

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

Można go spłaszczyć za pomocą tej magii

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

Lub

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

Obie powyższe metody działają tylko wtedy, gdy tablica składa się wyłącznie z liczb. Metodą wielowymiarową tablicę obiektów nie można spłaszczyć.

Wstaw element do tablicy o określonym indeksie

Proste wstawianie elementów można wykonać za Array.prototype.splice metody Array.prototype.splice :

arr.splice(index, 0, item);

Bardziej zaawansowany wariant z wieloma argumentami i łańcuchem:

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

A z argumentami typu tablicowego łączącymi i łączącymi łańcuchy:

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

Metoda entry ()

Metoda entries() zwraca nowy obiekt Array Iterator, który zawiera pary klucz / wartość dla każdego indeksu w tablicy.

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

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

wynik

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

Uwaga : Ta metoda nie jest obsługiwana w przeglądarce Internet Explorer.

Części tej zawartości z Array.prototype.entries autorstwa Mozilla Contributors na licencji CC-by-SA 2.5