JavaScript-массивы

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

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

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"];

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

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

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

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

</body>
</html>

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

Пример

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

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

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

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

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

</body>
</html>

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

Пример

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

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

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

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

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

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

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

Пример

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

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

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

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

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

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

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

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

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

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

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

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

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

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

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

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

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

cars[0] = "Opel";

Пример

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

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

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Преобразование массива в строку

Метод 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>

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

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

Пример

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

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

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

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

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

</body>
</html>

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

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

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

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

Множество :

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

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

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

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

Объект :

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

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

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

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

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

Переменные 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;

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

<!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>

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

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

Пример

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

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

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

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

Пример

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

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

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

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

Один из способов пройтись по массиву — использовать цикл 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>";

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

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

<script>
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>";

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

</body>
</html>

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

Пример

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

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

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

<p>Call a function for each array element:</p>

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

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

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

document.getElementById("demo").innerHTML = text;

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

</body>
</html>

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

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

Пример

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

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

<!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>

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Новый элемент также можно добавить в массив, используя свойство length:

Пример

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

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

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

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

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

ВНИМАНИЕ!
<p>Добавление элементов с высокими индексами может создать неопределенные «дыры» в массиве:

Пример

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

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

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

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

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

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

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

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

</body>
</html>

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

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

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

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

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

Пример

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

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

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

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

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

ВНИМАНИЕ!
Если вы используете именованные индексы, JavaScript переопределит массив в объект.

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

Пример:

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

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

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

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

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

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

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

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

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

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

Когда использовать массивы. Когда использовать Objects.

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

Новый массив 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];

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

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

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

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

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with two elements:
const points = new Array(40, 100);

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

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

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with one element ???
const points = new Array(40);

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

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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

const points = [40];

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

const points = new Array(40);

// Create an array with one element:
const points = [40];

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

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

<p>Create an Array with one element.</p>

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

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

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

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

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

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

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

Проблема в том, что оператор JavaScript typeof возвращает "объект":

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

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

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

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

</body>
</html>

Оператор typeof возвращает объект, поскольку массив JavaScript является объект.

Решение 1:

Чтобы решить эту проблему, в ECMAScript 5 (JavaScript 2009) определен новый метод Array.isArray():

Array.isArray(fruits);

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

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

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

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

</body>
</html>

Решение 2:

Оператор instanceof возвращает значение true, если объект создан. заданным конструктором:

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

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

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

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

</body>
</html>

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

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

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

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

JavaScript-массивы

Оглавление

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

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

Пример

Пример

Пример

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

Пример

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

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

Пример

Преобразование массива в строку

Пример

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

Пример

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

Множество :

Объект :

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

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

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

Пример

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

Пример

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

Пример

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

Пример

Пример

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

Пример

Пример

Пример

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

Пример

Пример:

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

Когда использовать массивы. Когда использовать Objects.

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

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

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

Решение 1:

Решение 2:

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