Что такое массив JavaScript
Массив JavaScript:
массивы используются для хранения группы значений одного типа данных в одной переменной.
Массивы могут хранить
strings
,
numbers
,
objects
,
functions
, и даже другие массивы (многомерные массивы), тем самым делая возможным создавать более сложные структуры данных, такие как массив объектов или массив массивов.
Массивы JavaScript можно использовать, когда есть пул данных одного и того же типа, который имеет общую ссылку.
Например: Имя учеников класса.
Все ученики принадлежат к одному классу, поэтому мы можем создать массив, предположим
Class_5
, и сохранить в нем имена всех учеников класса 5.
Это идеальный способ организовать вместе данные одного типа.
Есть два способа создавать массивы в JavaScript:
- Используя литерал массива JavaScript.
-
Используя
new
ключевое слово.
Мы разберемся с каждым методом на соответствующих примерах, но сначала рассмотрим базовый синтаксис создания массива:
ИЛИ
var myArray = новый массив (element0, element1, ..., elementN);
Литерал массива JavaScript
Литерал массива - это метод создания массива путем определения простого списка значений, разделенных запятыми (,) и заключенных в квадратные скобки ([]). Использование литерала массива - самый простой способ создать массив JavaScript.
Вы можете записать в массив столько значений, сколько необходимо. Каждое значение будет храниться в непрерывной ячейке памяти. Доступ к этим значениям можно получить с помощью порядковых номеров, начинающихся с нуля. К первому значению можно получить доступ по индексу 0, ко второму - по индексу 1 и так далее.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array </title>
</head>
<body>
<script>
var Smartphones=["Samsung","OnePlus","Google"];
for (i=0;i<Smartphones.length;i++){
document.write(Smartphones[i] + "<br/>");
}
</script>
</body>
</html>
Выход
OnePlus
Новое ключевое слово в массиве JavaScript
В JavaScript есть конструктор,
array()
который создает массивы.
Чтобы получить доступ к этому конструктору, мы должны сначала создать объект.
Итак,
new
ключевое слово, за которым следует имя конструктора, создает объект, который мы можем использовать для ввода значений массива.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array New Keyword </title>
</head>
<body>
<script>
var i;
var Smartphones = new Array();
Smartphones[0] = "Samsung";
Smartphones[1] = "OnePlus";
Smartphones[2] = "Google";
for (i=0;i<Smartphones.length;i++){
document.write(Smartphones[i] + "<br>");
}
</script>
</body>
</html>
Выход
OnePlus
Добавление новых элементов в массив
Чтобы добавить новый элемент в конец массива, используйте
push()
метод.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Push New Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus ", " Samsung ", " Google Pixel "];
Smartphone.push("Sony");
document.write(Smartphone + "<br>"); // Prints: OnePlus, Samsung, Google Pixel, Sony
document.write("String Length : " + Smartphone.length);
</script>
</body>
</html>
Выход
Длина строки: 4
Добавление новых элементов с помощью unshift ()
Чтобы добавить новый элемент в начало массива, мы можем использовать
unshift()
метод.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Unshift Element </title>
</head>
<body>
<script>
var Smartphone = [" OnePlus ", " Google Pixel ", " Sony "];
Smartphone.unshift("Samsung ");
document.write(Smartphone + "<br>"); // Prints: Samsung,OnePlus,Google Pixel,Sony
document.write("String Length : " + Smartphone.length); // Prints: 4
</script>
</body>
</html>
Выход
Длина строки: 4
Удаление элементов из массива
Чтобы удалить последний элемент из массива, вы можете использовать
pop()
метод.
Этот метод возвращает значение, которое выскочило.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array POP Method Remove Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus", "Samsung", "Google Pixel"];
var last = Smartphone.pop();
document.write(last + "<br>"); // Prints: Google Pixel
document.write("String Length : " + Smartphone.length); // Prints: 2
</script>
</body>
</html>
Выход
Длина строки Google Pixel : 2
Удаление элементов с помощью shift ()
Чтобы удалить первый элемент из массива, вы можете использовать
shift()
метод.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Shift Remove Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus", "Google Pixel", "Samsung"];
var first = Smartphone.shift();
document.write(first + "<br>"); // Prints: OnePlus
document.write("String Length : " + Smartphone.length); // Prints: 2
</script>
</body>
</html>
Выход
Длина строки OnePlus : 2
Объединение двух или более массивов
concat()
Метод используется для объединения двух или более массивов.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Concat Method </title>
</head>
<body>
<script>
var Smartphones = [" OnePlus ", " Google Pixel ", " Samsung "];
var Laptops = [" Dell ", " HP ", " Microsoft Surface "];
// Creating new array by combining Smartphones and Laptops arrays
var Gedgets = Smartphones.concat(Laptops);
document.write(Gedgets); // Prints: OnePlus , Google Pixel , Samsung , Dell , HP , Microsoft Surface
</script>
</body>
</html>
Выход
Поиск по массиву
Если вы хотите найти в массиве определенное значение, вы можете просто использовать
indexOf()
и
lastIndexOf()
.
Если значение найдено, оба метода возвращают значение индекса, представляющее элемент массива.
Если значение не найдено, возвращается -1.
В
indexOf()
метод возвращает первый из найденных, в
то время как
lastIndexOf()
возвращает последний найдено.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Search Method </title>
</head>
<body>
<script>
var Smartphone = ["Google Pixel", "OnePlus", "Motorola", "Xiaomi", "Asus"];
document.write(Smartphone.indexOf("Google Pixel") + "<br>"); // Prints: 0
document.write(Smartphone.indexOf("OnePlus") + "<br>"); // Prints: 1
document.write(Smartphone.indexOf("Apple")); // Prints: -1
</script>
</body>
</html>
Выход
1
-1