Массив в JavaScript — это упорядоченный набор данных (или значений), представленный одним именем переменной. В JavaScript массив — это, по сути, определяемый пользователем объект, представляющий собой коллекцию различных типов данных элементов.
Массив использует одно имя переменной для хранения более одного значения. Эти значения хранятся в индексированных местах внутри массива.
Мы используем массив, когда хотим сохранить группу или список связанных данных в одном, легко управляемом месте. Например, список имен, книг, любимых цветов, курсов или цен хранится в массиве.
Рассмотрим пример ниже, где массив JavaScript содержит несколько любимых цветов.
var colors = ['red', 'green', 'pink', 'yellow', 'black', 'white'];
Здесь все шесть цветов сгруппированы в массив и назначены переменной colors. Мы можем обрабатывать все цвета в группе, и мы можем получить доступ к отдельным цветам, когда нам это нужно.
- Как создавать массивы в JavaScript?
- Литерал массива JavaScript
- Элементы и индексы
- Пример программы на основе массива литералов
- Создание массива напрямую с использованием нового ключевого слова
- Создание массива с помощью конструктора объектов
- Доступ к элементам массива в JavaScript
- Обновление элемента массива
- Свойство длины массива
- Нулевой элемент в массивах JavaScript
- Типы массивов в JavaScript
- Вопросы по массивам JavaScript в Google Search
Как создавать массивы в JavaScript?
Создать массив в JavaScript можно тремя способами:
- По массиву литералов
- Создавая экземпляр массива напрямую (используя ключевое слово new)
- Использование конструктора массива (с использованием ключевого слова new)
Литерал массива JavaScript
Массив литерал — это самый распространенный и простой способ создания массива в JavaScript. Общий синтаксис для создания массива литерал следующий:
var arrayname = [value0, value1, value2, value3,..... valueN];
Or,
const arrayname = [element0, element1, element2,...... elementN];
В приведенном выше синтаксисе arrayname — это имя переменной, назначенное массиву, а значения содержатся внутри [ ] и разделяются запятой (,). Посмотрите на рисунок ниже, на котором мы создали массив, содержащий четыре вкуса мороженого в качестве элементов.
Значение, хранящееся в массиве, может иметь несколько типов данных. Массив с именем dataValues хранит числовое значение, текстовую строку, значение null и логическое значение:
let dataValues = [10, "Hello", null, true];
Возможность хранить значения разных типов в массиве отсутствует в других языках программирования, таких как Java. В языке Java все значения в массиве должны быть одного типа.
Мы также можем инициализировать массив без значений данных в скобках. Рассмотрим пример ниже.
dataValues = [ ];
Элементы и индексы
Когда мы создаем массив, каждое значение помещается в определенное место или индекс в массиве, как показано на рисунке ниже.
Каждое значение, хранящееся в массиве, называется элементом. Каждый элемент идентифицируется своим местоположением или индексом в массиве. Индексы всегда начинаются с цифры 0.
Первый элемент в любом массиве имеет индекс 0, второй элемент имеет индекс 1, третий элемент имеет индекс 2 и т. д. Как показано на рисунке выше, первый элемент «vanilla» имеет индекс 0, второй элемент «butterscotch» имеет индекс 1 и т. д.
Мы также можем задать конкретное значение массива по его индексу, используя следующий синтаксис.
array[index] = value;
Здесь index — это номер индекса элемента массива, а value — это элемент, хранящийся в этой позиции в массиве. Мы могли бы определить значения нескольких элементов в массиве flavors, используя следующие операторы:
flavors[0] = "vanilla";
flavors[1] = "butterscotch";
flavors[2] = "lavender";
flavors[3] = "chocolate";
Массивы в JavaScript являются динамическими. Это означает, что они могут автоматически расширять свой размер для хранения новых элементов. В следующем коде мы объявили массив flavors с четырьмя элементами.
Теперь установим значение элемента с индексом четыре, длина массива flavors увеличится до пяти.
let flavors = ["vanilla", "butterscotch", "lavender", "chocolate"];
flavors[4] = "cookie dough"; // vanilla, butterscotch, lavender, chocolate, cookie dough stored in the array.
Пример программы на основе массива литералов
Давайте возьмем очень простую программу, в которой мы возьмем пять элементов в массив и отобразим в веб-браузере.
Пример 1:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
let person = ["Deep", " Tripti", " Rashmi", " Amit", " Ivaan"];
document.write(person); // Accessing full array.
</script>
</head>
</html>
Output:
Deep, Tripti, Rashmi, Amit, Ivaan
Пробелы и переносы строк не важны в объявлении массива. Объявление массива может охватывать более одной строки.
Пример 2:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
let cities = [
"Dhanbad",
" New York",
" Sydney",
" Mumbai",
" Moscow"
];
document.write(cities);
</script>
</head>
</html>
Output:
Dhanbad, New York, Sydney, Mumbai, Moscow
Мы также можем создать массив, а затем вставить элементы следующим образом:
Пример 3:
<script>
let nums = [ ];
nums[0] = 10;
nums[1] = 20;
nums[2] = 30;
nums[3] = 40;
nums[4] = 50;
document.write(nums);
</script>
Output:
10,20,30,40,50
Для простоты, читабельности и скорости выполнения всегда следует использовать метод литерала массива.
Создание массива напрямую с использованием нового ключевого слова
Массивы в JavaScript — это простые объекты, поэтому другой способ создания массива в JavaScript — это прямое создание экземпляра объекта. Общий синтаксис создания массива напрямую выглядит следующим образом:
let arrayname = new Array();
Здесь мы использовали ключевое слово new для создания экземпляра массива. В JavaScript, когда вы создаете пустой массив с определенной длиной, например, let arr = new Array(5);, JavaScript создаст массив с 5 пустыми слотами.
Каждый слот просто «пустой (неинициализированный)» или «неопределенный», пока вы не присвоите им значения. Если вы попытаетесь получить доступ к любому из этих слотов, например, к arr[0], вы получите undefined, поскольку им еще не присвоены никакие значения.
Однако, даже если слоты не инициализированы (пустые), они все равно учитываются в длине массива. Например, arr.length вернет 5, даже если ни один из слотов не содержит значений или элементов. Давайте рассмотрим пример создания массива напрямую.
Пример 4:
<html>
<head>
<title>JavaScript Arrays</title>
<script>
// Creating an array using new keyword.
let nums = new Array();
nums[0] = 10;
nums[1] = "John";
nums[2] = 30;
nums[3] = 50;
nums[4] = true;
document.write(nums);
</script>
</head>
</html>
Output:
10,John,30,50,true
Создание массива с помощью конструктора объектов
Поскольку массивы являются объектами, мы можем объявить и инициализировать массив с помощью нового конструктора объектов Array(). Общий синтаксис для создания массива в JavaScript с помощью конструктора объектов выглядит следующим образом:
let arrayname = new Array(elements);
Здесь элементы — это список значений, разделенных запятыми, хранящихся в массиве. Мы можем объявить и инициализировать массив месяцев как объект массива, используя конструктор объектов следующим образом:
let months = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
Мы также можем определять массивы в JavaScript на основе количества элементов в массиве с помощью конструктора new Object(). Общий синтаксис создания массива с указанной длиной выглядит следующим образом:
let arrayname = new Array(arrayLength);
Здесь arrayLength — это количество отдельных элементов, хранящихся в массиве. Аргумент length необходимо ввести как целое число от 0 до 2^32 – 1. Следующий код создает массив monthName с 12 элементами:
let monthName = new Array(12);
Здесь мы не инициализировали массив. Интерпретатор JavaScript выделил память для массива длиной 12 для хранения 12 элементов.
Доступ к элементам массива в JavaScript
Каждый элемент массива имеет свой собственный индекс. Чтобы получить доступ к элементам массива, просто укажите после имени переменной массива индекс, заключенный в квадратные скобки. Общий синтаксис для доступа к элементам массива выглядит следующим образом:
let varname = arrayname[indexNumber];
Например, синтаксис для доступа ко второму элементу массива и присвоения его переменной выглядит следующим образом:
let flavorOfDay = flavors[1];
В приведенном выше примере 1 в скобках после flavorOfDay — это индексный номер для второго элемента массива. Индексный номер равен 1, поскольку массивы начинают отсчет с 0, а не с 1.
Таким образом, вам нужно быть осторожным, когда вы хотите получить доступ к правильному элементу массива с помощью индексного номера. Посмотрите на рисунок ниже, чтобы понять более ясно.
Давайте напишем код для доступа ко всем элементам массива flavors по одному.
Пример 5:
<html>
<head>
<title>Accessing Arrays Elements in JavaScript</title>
<script>
let flavors = ["vanilla", "butterscotch", "lavender", "chocolate"];
// Accessing array elements.
let flavorOfDay1 = flavors[0]; // accessing the first array element.
let flavorOfDay2 = flavors[1]; // accessing the second array element.
let flavorOfDay3 = flavors[2]; // accessing the third array element.
let flavorOfDay4 = flavors[3]; // accessing the last array element.
document.write(flavorOfDay1, "<br>");
document.write(flavorOfDay2, "<br>");
document.write(flavorOfDay3, "<br>");
document.write(flavorOfDay4);
</script>
</head>
</html>
Output:
vanilla
butterscotch
lavender
chocolate
Обновление элемента массива
Мы также можем использовать индекс массива для изменения или обновления элемента в массиве. Синтаксис такой:
// This sets the value of element at index 2 (previously "lavender") to a new value "chocobar".
flavors[2] = "chocobar";
Давайте создадим программу JavaScript, в которой мы обновим третий элемент массива.
Пример 6:
<html>
<head>
<title>Updating Array Elements in JavaScript</title>
<script>
let flavors = ["vanilla", " butterscotch", " lavender", " chocolate"];
document.write("Before: " +flavors, "<br>");
// Updating third element.
flavors[2] = " chocobar";
document.write("After updating: " +flavors);
</script>
</head>
</html>
Output:
Before: vanilla, butterscotch, lavender, chocolate
After updating: vanilla, butterscotch, chocobar, chocolate
Как вы можете видеть в выводе, третье значение элемента с индексом 2 изменилось.
Свойство длины массива
Каждый массив JavaScript имеет свойство length, которое содержит текущее количество элементов массива. Свойство length массива возвращает длину массива (текущий размер массива).
Длина массива всегда на единицу больше последнего индекса массива. Общий синтаксис для получения длины массива такой:
let length = arrayname.length;
Рассмотрим следующий пример программы.
Пример 7:
<html>
<head>
<title>Array Length Property</title>
<script>
let names = ["Tripti", "Deep", "Rashmi", "Ivaan", "John"];
// Getting the length of an array.
let length = names.length;
document.write("Length of array: " +length);
</script>
</head>
</html>
Output:
Length of array: 5
Как вы можете заметить в выводе, значение, возвращаемое свойством length, будет равно 5, но наибольший индексный номер — 4. Это связано с тем, что свойство length массива всегда на единицу больше наибольшего индексного номера в массиве.
Нулевой элемент в массивах JavaScript
Элемент null в JavaScript — это явный тип данных, представляющий «нет значения». Нуль — это определенное примитивное значение, представляющее отсутствие какого-либо объекта или значения. Он также занимает место в памяти компьютера, как и любое другое значение.
Когда элемент массива установлен в null (например, arr[0] = null), JavaScript сохраняет это значение null в памяти. Поскольку значение null считается определенным элементом в массиве, оно также добавляется к свойству length массива. Например, если массив имеет три элемента, один из которых равен null, длина массива будет равна 3, включая элемент null.
Рассмотрим следующий пример программы, в которой мы добавим нулевой элемент в массив и определим длину массива.
Пример 8:
<script>
let names = ["Tripti", "Deep", null, "Rashmi", "Ivaan", ];
document.write("Array elements: " +names, "<br>");
// Getting the length of an array.
let length = names.length;
document.write("Length of array: " +length);
</script>
Output:
Array elements: Tripti,Deep,,Rashmi,Ivaan
Length of array: 5
Как вы можете видеть в коде, мы добавили 5 элементов, включая null. Следовательно, длина массива равна 5, поскольку элемент null также учитывается в свойстве длины массива.
Пример 9:
<script>
// Creating an array of length 0.
let num = new Array(); // array of zero element.
// Assigning null value to element 99.
num[99] = null; // array of 100 elements.
let length = num.length;
document.write("Length of array: " +length);
</script>
Output:
Length of array: 100
В этом примере мы изначально создали массив длиной 0. Затем мы присвоили num[99] нулевое значение. Это создает массив длиной 100, в котором все слоты от num[0] до num[98] остаются неинициализированными или пустыми, а num[99] присвоено нулевое значение.
Пустые слоты (от num[0] до num[98]) не занимают места в памяти, так как не содержат никакого значения. Только элемент null, установленный в num[99], занимает память, так как null — это назначенное значение.
Типы массивов в JavaScript
Вы должны помнить, что JavaScript — это язык с нестрогой типизацией (или динамической типизацией). Это означает, что элементы массива могут быть разных типов. Вы можете хранить разные типы данных элементов в массиве, например:
- Числа
- Струны
- Булевы значения
- Функции
- Объекты
- Другие массивы (вложенные массивы)
Для простоты мы можем классифицировать массивы JavaScript на пять типов. Это:
- Массивы строк
- Числовые массивы
- Булевы массивы
- Массивы объектов (включая нулевые массивы, поскольку null — это объект)
- Смешанные массивы
Вопросы по массивам JavaScript в Google Search
1. Имеет ли значение порядок элементов в массиве JavaScript?
Ответ: В большинстве случаев, да, порядок элементов в массиве имеет значение, но это зависит от обстоятельств. Например, если мы создаем массив только для хранения списка случайно выбранных слов, то нам не нужно заботиться о порядке элементов.
Но если мы хотим хранить слова в алфавитном порядке, порядок будет иметь значение. Поэтому, это полностью зависит от вас, как вы используете массив.
2. Сколько элементов можно сохранить в массиве?
Ответ: Теоретически, сколько угодно. Но на практике количество зависит от памяти компьютера. Каждый элемент массива занимает немного места в памяти компьютера.
3. Может ли быть пустой массив?
Ответ: Да, у нас может быть пустой массив. Чтобы создать пустой массив, просто напишите следующий код:
let emptyArray = [ ];
Если вы создаете пустой массив, вы сможете поместить в него элементы позже.
4. Можно ли поместить в массив другие элементы, кроме строк и чисел?
Ответ: Да, можем. В массивах JavaScript мы можем размещать числа, строки, логические значения, другие массивы и даже объекты.
5. Необходимо ли помещать все значения одного типа в массив?
Ответ: Нет, необязательно, чтобы все значения в массиве имели один и тот же тип.
6. Можно ли получить последний элемент в массиве JavaScript?
Ответ: Мы можем использовать свойство length, чтобы получить последний элемент массива. Чтобы получить последний элемент в массиве, вы можете написать следующий код:
arrayname[arrayname.length - 1];
Давайте рассмотрим пример, в котором мы получим последний элемент массива.
Пример 10:
<script>
let fruits = ["Banana", "Apple", "Mango", "Guava", "Grapes", "Orange"];
let getLastElement = fruits[fruits.length - 1];
document.write("Last element of array: " +getLastElement);
</script>
Output:
Last element of array: Orange
В этом уроке вы изучили массивы в JavaScript с помощью различных примеров программ. Надеюсь, вы поняли основные концепции массивов JavaScript.
