Массив в JavaScript это [] или класс Array

Компьютер, программы

→

JavaScript - язык программирования для HTML

Массив в JavaScript | стандарт ES5

посмотрели 6656 раз

обновлено: 1 августа 2020

Для работы с массивом в JavaScript используется [] или класс Array

Создаем пустой массив

Способ 1

var Имя = [];

Способ 2

var Имя = Array();

Способ 3

var Имя = new Array();

Html Пример

<html>
<body>

<script>

// создаем пустой массив
var arr = [];

</script>

</body>
</html>

Создаем заполненный массив

Html Пример

<html>
<body>

<script>
     // массив
     var arr = ["Hello", "World"];

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
</script>

</body>
</html>

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

Свойство length это длина массива (количество элементов).

Html Пример

<html>
<body>

<script>
     // массив
     var arr = ["Hello", "World"];

     // узнать длину массива
     var len = arr.length;
     // len = 2
</script>

</body>
</html>

Установить значение по индексу

arr[номер индекса с нуля] = значение;

Если мы устанавливаем значение в массиве по индексу, а индексы не все заполнены, то это означает что массив не полностью заполнен (по другому можно сказать что есть дырки в массиве)

Html Пример

<html>
<body>

<script>
     // пустой массив
     var arr = [];

     // добавим элементы
     arr[5] = "Hello";
     arr[8] = "World";

     // узнать длину массива
     var len = arr.length;
     // len = 9

     // значения
     // arr[0] = undefined; дырка в массиве
     // arr[1] = undefined; дырка в массиве
     // arr[3] = undefined; дырка в массиве
     // arr[4] = undefined; дырка в массиве
     // arr[5] = "Hello";
     // arr[6] = undefined; дырка в массиве
     // arr[7] = undefined; дырка в массиве
     // arr[8] = "World";
</script>

</body>
</html>

Добавление нового элемента в конец массива

Добавить новый элемент в конец (чтобы не было дырок)

Способ 1

arr[arr.length] = value;

Способ 2

arr.push(value);

Html Пример 1

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr[arr.length] = "Hello";
     arr[arr.length] = "World";

     // узнать длину массива
     var len = arr.length;
     // len = 2

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
</script>

</body>
</html>

Html Пример 2

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");

     // узнать длину массива
     var len = arr.length;
     // len = 2

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
</script>

</body>
</html>

Выбираем (перечисляем) существующие элементы в массиве. Пропускаем пустые элементы.

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr[5] = "Hello";
     arr[8] = "World";

     // узнать длину массива
     var len = arr.length;
     // len = 9

     // Выбираем (перечисляем) только существующие элементы
     for (var index in arr)
     {
          // получаем значение по индексу
          value = arr[index];
     }

     // цикл из 2-ух итераций (прохождений):

     // итерация 1
     // index = 5
     // value = "Hello"

     // итерация 2
     // index = 8
     // value = "World"
</script>

</body>
</html>

Выбираем (перечисляем) все элементы в массиве. Выбираем (перечисляем) и пустые элементы.

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");

     // узнать длину массива
     var len = arr.length;
     // len = 2

     // Выбираем (перечисляем) элементы массива
     for (var i=0; i<arr.length; i++)
     {
          // получаем значение по индексу
          value = arr[i];
     }

     // цикл из 2-ух итераций (прохождений):

     // итерация 1
     // index = 0
     // value = "Hello"

     // итерация 2
     // index = 1
     // value = "World"
</script>

</body>
</html>

Функция pop (взять значение с конца массива и удалить)

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");
     arr.push("House");
     arr.push("Computer");
     arr.push("Book");

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
     // arr[4] = "Book";

     // узнать длину массива
     var len = arr.length;
     // len = 5

     // взять значение с конца массива и удалить
     var value = arr.pop();

     // узнать длину массива
     var len = arr.length;
     // len = 4

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
</script>

</body>
</html>

Функция shift (взять значение с начала массива и удалить)

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");
     arr.push("House");
     arr.push("Computer");
     arr.push("Book");

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
     // arr[4] = "Book";

     // узнать длину массива
     var len = arr.length;
     // len = 5

     // взять значение с начала массива и удалить
     var value = arr.shift();

     // узнать длину массива
     var len = arr.length;
     // len = 4

     // значения
     // arr[0] = "World";
     // arr[1] = "House";
     // arr[2] = "Computer";
     // arr[3] = "Book";
</script>

</body>
</html>

Функция slice(index1, index2) (возвращает под-массив с индекса index1 до index2)

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");
     arr.push("House");
     arr.push("Computer");
     arr.push("Book");

     // значения
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
     // arr[4] = "Book";

     // взять значение с конца массива и удалить
     var arr1 = arr.slice(1,3); // возьмем индексы 1 и 2. Индекс 3 не возьмем

     // значения arr
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
     // arr[4] = "Book";

     // значения
     // arr1[0] = "World";
     // arr1[1] = "House";
</script>

</body>
</html>

Функция splice(index, count, addValue1, addValue2, ...)

Функция splice(index, count, addValue1, addValue2, ...)
удаляет элементы с индекса index количество элементов для удаления count
добавляет новые элементы addValue1, addValue2 ... начиная с индекса index

Html Пример

<html>
<body>

<script>
     // массив
     var arr = [];

     // добавим элементы
     arr.push("Hello");
     arr.push("World");
     arr.push("House");
     arr.push("Computer");
     arr.push("Book");

     // значения arr
     // arr[0] = "Hello";
     // arr[1] = "World";
     // arr[2] = "House";
     // arr[3] = "Computer";
     // arr[4] = "Book";

     // взять значение и добавить значения в массив
     var arr1 = arr.splice(2, 1, "Good", "Morning", "Day");
     // удалить 1 элемент со 2-ого индекса и добавить "Good", "Morning", "Day"

     // значения arr
     // arr[0] = "Hello"
     // arr[1] = "World"
     // arr[2] = "Good"
     // arr[3] = "Morning"
     // arr[4] = "Day"
     // arr[5] = "Computer"
     // arr[6] = "Book"

     // значения arr1
     // arr1[0] = "House";
</script>

</body>
</html>

Все функции Array

msdn.microsoft.com

← Предыдущая тема
Дата и время (год, месяц, число, часы, минуты, секунды) в JavaScript. Класс Date | стандарт ES5

Следующая тема →
Что значит 3 точки ...items | Пример 1: Math.max(...prices) | Пример 2: books.push(...items) | JavaScript, стандарт ES5