Методы массивов JavaScript

Оглавление

    Показать оглавление

Методы перечислены в том порядке, в котором они появляются на этой странице руководства.

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

Длина массива JavaScript

Свойство length возвращает длину (размер) массива:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Массив JavaScript toString()

Метод JavaScript toString() преобразует массив в строка значений массива (разделенных запятыми).

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Результат :

Banana,Orange,Apple,Mango

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Метод join() также объединяет все элементы массива в строку.

Он ведет себя так же, как toString(), но дополнительно вы можете указать разделитель:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Результат :

Banana * Orange * Apple * Mango

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

Поппинг и толкание

Когда вы работаете с массивами, легко удалять элементы и добавлять новые элементы.

Вот что такое постукивание и толкание:

Извлечение элементов из из массива или перемещение элементы в массив.

Массив JavaScript pop()

Метод pop() удаляет последний элемент из массива:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Метод pop() возвращает значение, которое «выскочило наружу»:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Массив JavaScript push()

Метод push() добавляет новый элемент в массив (в конце):

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Метод push() возвращает новую длину массива:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Смещение элементов

Сдвиг эквивалентен выталкиванию, но работает с первым элементом, а не с последний.

Массив JavaScript shift()

Метод shift() удаляет первый элемент массива и "сдвигает" все другие элементы к более низкому индексу.

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Метод shift() возвращает значение, которое было "сдвинуто":

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Массив JavaScript unshift()

Метод unshift() добавляет новый элемент в массив (в начале) и "отменяет сдвиг" старые элементы:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Метод unshift() возвращает новую длину массива:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Изменение элементов

Доступ к элементам массива осуществляется по их индексному номеру:

индексы массива начинаются с 0:

[0] — первый элемент массива
[1] — второй
[2] — третий...

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Длина массива JavaScript

Свойство length предоставляет простой способ добавить новый элемент в массив:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Массив JavaScript delete()

Предупреждение !

Элементы массива можно удалить с помощью оператора JavaScript delete.

Использование delete оставляет неопределенные дыры в множество.

Вместо этого используйте pop() или Shift().

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Объединение (конкатенация) массивов

Метод concat() создает новый массив путем слияния (конкатенации) существующие массивы:

Пример (объединение двух массивов)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Метод concat() не изменяет существующие массивы. Он всегда возвращает новый массив.

Метод concat() может принимать любое количество аргументов массива:

Пример (объединение трех массивов)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Метод concat() также может принимать строки в качестве аргументов:

Пример (объединение массива со значениями)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Сглаживание массива

Сглаживание массива — это процесс уменьшения размерности массива.

Метод Flat() создает новый массив с элементами подмассива, объединенными до указанной глубины.

Пример

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Поддержка браузера

JavaScript Array flat() поддерживается во всех современных браузерах с января 2020 года:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Сращивание и нарезка массивов

Метод splice() добавляет новые элементы в массив.

Метод slice() вырезает часть массива.

Массив JavaScript splice()

Метод splice() можно использовать для добавления новых элементов в массив:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Первый параметр (2) определяет позицию, где должны располагаться новые элементы. добавлен (вставлен).

Второй параметр (0) определяет, сколько элементов должно быть. удален.

Остальные параметры («Лимон», «Киви») определяют новые элементы, которые будут добавлен.

Метод splice() возвращает массив с удаленными элементами:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

Использование splice() для удаления элементов

Благодаря умной настройке параметров вы можете использовать splice() для удаления элементов, не выходя из него. «дырки» в массиве:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Первый параметр (0) определяет позицию, в которой должны располагаться новые элементы. добавлен (вставлен).

Второй параметр (1) определяет, сколько элементов должно быть. удален.

Остальные параметры опускаются. Новые элементы добавляться не будут.

JavaScript-массив slice()

Метод slice() вырезает часть массива в новый множество.

В этом примере вырезается часть массива, начиная с элемента массива 1. ("Апельсин"):

Пример

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Примечание

Метод slice() создает новый массив.

Метод slice() не удаляет элементы из исходного массива.

В этом примере вырезается часть массива, начиная с элемента массива 3. ("Яблоко"):

Пример

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Метод slice() может принимать два аргумента, например slice(1, 3).

Затем метод выбирает элементы из начального аргумента и до (но не в том числе) конечный аргумент.

Пример

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Если конечный аргумент опущен, как в первых примерах, slice() Метод вырезает остальную часть массива.

Пример

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Автоматический toString()

JavaScript автоматически преобразует массив в строку, разделенную запятыми, когда ожидается примитивное значение.

Это всегда так, когда вы пытаетесь вывести массив.

Эти два примера дадут один и тот же результат:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>

</body>
</html>

Примечание

Все объекты JavaScript имеют метод toString().

Поиск максимальных и минимальных значений в массиве

Встроенных функций для поиска наивысшего значения нет. или наименьшее значение в массиве JavaScript.

О том, как решить эту проблему, вы узнаете в следующем главу этого руководства.

Сортировка массивов

Сортировка массивов рассматривается в следующей главе этого руководства.

Полная ссылка на массив

Для получения полной информации о массивах перейдите по ссылке:

Полное руководство по массивам JavaScript.

Справочник содержит описания и примеры всех Array. свойства и методы.