Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Массивы JavaScript

Массив — это специальная переменная, которая может содержать более одного значения:

const cars = ["Saab", "Volvo", "BMW"];

Зачем использовать массив?

Если у вас есть список элементов (например, список названий автомобилей), хранение автомобилей в отдельных переменных может выглядеть следующим образом:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Однако что, если вы хотите перебрать все машины и найти конкретную? А если бы у вас было не 3 машины, а 300?

Решение представляет собой массив!

Массив может содержать множество значений под одним именем, и вы можете получить доступ к значениям, обратившись к номеру индекса.


Создание массива

Использование литерала массива — это самый простой способ создать массив JavaScript.

Синтаксис:

const array_name = [item1, item2, ...];      

Общепринятой практикой является объявление массивов с помощью ключевого слова const .

Узнайте больше о const с массивами в главе: JS Array Const .

Пример

const cars = ["Saab", "Volvo", "BMW"];

Пробелы и переносы строк не важны. Объявление может занимать несколько строк:

Пример

const cars = [
  "Saab",
  "Volvo",
  "BMW"
];

Вы также можете создать массив, а затем предоставить элементы:

Пример

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Использование ключевого слова JavaScript new

В следующем примере также создается массив и присваиваются ему значения:

Пример

const cars = new Array("Saab", "Volvo", "BMW");

Два приведенных выше примера делают то же самое.

Нет необходимости использовать new Array().

Для простоты, удобочитаемости и скорости выполнения используйте литеральный метод массива.



Доступ к элементам массива

Вы получаете доступ к элементу массива, обращаясь к номеру индекса :

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Примечание. Индексы массива начинаются с 0.

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


Изменение элемента массива

Этот оператор изменяет значение первого элемента в cars:

cars[0] = "Opel";

Пример

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Доступ к полному массиву

С помощью JavaScript доступ к полному массиву можно получить, обратившись к имени массива:

Пример

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Массивы — это объекты

Массивы — это особый тип объектов. Оператор typeofв JavaScript возвращает «объект» для массивов.

Но массивы JavaScript лучше всего описывать как массивы.

Массивы используют числа для доступа к своим «элементам». В этом примере person[0] возвращает John:

Множество:

const person = ["John", "Doe", 46];

Объекты используют имена для доступа к своим «членам». В этом примере person.firstName возвращает John:

Объект:

const person = {firstName:"John", lastName:"Doe", age:46};

Элементы массива могут быть объектами

Переменные JavaScript могут быть объектами. Массивы — это особые виды объектов.

Из-за этого вы можете иметь переменные разных типов в одном и том же массиве.

Вы можете иметь объекты в массиве. Вы можете иметь функции в массиве. Вы можете иметь массивы в массиве:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Свойства и методы массива

Настоящей силой массивов JavaScript являются встроенные свойства и методы массива:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Методы массива рассматриваются в следующих главах.


Свойство длины

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

Пример

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

Свойство lengthвсегда на единицу больше, чем самый высокий индекс массива.


Доступ к первому элементу массива

Пример

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

Доступ к последнему элементу массива

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Зацикливание элементов массива

Один из способов перебрать массив — использовать forцикл:

Пример

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

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Вы также можете использовать Array.forEach()функцию:

Пример

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

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

Самый простой способ добавить новый элемент в массив — использовать push()метод:

Пример

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Новый элемент также можно добавить в массив с помощью lengthсвойства:

Пример

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

ПРЕДУПРЕЖДЕНИЕ !

Добавление элементов с высокими индексами может создать неопределенные «дыры» в массиве:

Пример

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Ассоциативные массивы

Многие языки программирования поддерживают массивы с именованными индексами.

Массивы с именованными индексами называются ассоциативными массивами (или хэшами).

JavaScript не поддерживает массивы с именованными индексами.

В JavaScript массивы всегда используют нумерованные индексы .  

Пример

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

ПРЕДУПРЕЖДЕНИЕ !!
Если вы используете именованные индексы, JavaScript переопределит массив в объект.

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

 Пример:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Разница между массивами и объектами

В JavaScript массивы используют нумерованные индексы .  

В JavaScript объекты используют именованные индексы .

Массивы — это особый вид объектов с пронумерованными индексами.


Когда использовать массивы. Когда использовать объекты.

  • JavaScript не поддерживает ассоциативные массивы.
  • Вы должны использовать объекты , когда хотите, чтобы имена элементов были строками (текстом) .
  • Вы должны использовать массивы , когда хотите, чтобы имена элементов были числами .

Новый массив JavaScript()

JavaScript имеет встроенный конструктор массивов new Array().

Но вы можете смело использовать []вместо него.

Эти два разных оператора создают новый пустой массив с именем points:

const points = new Array();
const points = [];

Эти два разных оператора создают новый массив, содержащий 6 чисел:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Ключевое newслово может привести к неожиданным результатам:

// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);  

Распространенная ошибка

const points = [40];

не то же самое, что:

const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);  

Как распознать массив

Распространенный вопрос: как узнать, является ли переменная массивом?

The problem is that the JavaScript operator typeof returns "object":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():

Array.isArray(fruits);

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

const fruits = ["Banana", "Orange", "Apple"];

fruits instanceof Array;

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Get the value "Volvo" from the cars array.

const cars = ["Saab", "Volvo", "BMW"];
let x = ;