JavaScript: массивы

Массив ("array" по-английски) — это список каких-то значений. Значения пишутся в квадратных скобках.

Пример массива:

JavaScript

let x = [3, 5, 10];

Здесь x — это массив из трех элементов.

Индексация

Элементы в массивах пронумерованы с нуля.

Номер элемента в массиве называется индексом.

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

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

JavaScript

x[0] = 999;

Задание:

  1. Заведите массив x с тремя нулями:

    JavaScript

    let x = [0, 0, 0];

  2. Функция setInterval бесконечно повторяет любую функцию, которую ей дашь.

    Пример ниже все время выводит массив x на страницу. Перепечатайте пример, не удаляя прошлый код. На странице должно появиться "0,0,0".

    HTML

    <div id="text"></div>

    JavaScript

    setInterval(() => {
    document.getElementById("text").innerText = x;
    });

  3. Добавьте три кнопки, которые будут увеличивать на единицу соответственно первый, второй, и третий элементы массива. Код из прошлых двух пунктов все еще удалять не нужно.

    HTML

    <button onclick="f1()">1</button>
    <button onclick="f2()">2</button>
    <button onclick="f3()">3</button>

    JavaScript

    function f1() { }
    function f2() { }
    function f3() { }

    Придумайте сами, что напечатать внутри функций, чтобы они работали.

Задание:

  1. Задание со звездочкой.

    Добавьте еще три кнопки:

    • Первая кнопка — должна менять местами 1-й и 2-й элементы массива.
    • Вторая кнопка — должна менять местами 2-й и 3-й элементы массива.
    • Третья кнопка — должна менять местами 3-й и 1-й элементы массива.

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

Чтобы добавлять элементы в массив, мы будем использовать три точки (..., "spread operator").

Например, чтобы добавить в конец массива x число 100:

JavaScript

x = [...x, 100];

Задание:

  1. Возьмите пример из прошлого раздела.

    Добавьте еще две кнопки. Одна кнопка должна добавлять 100 в начало массива, а другая — в конец.

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

Длина массива — это сколько в нем элементов. Чтобы получить длину массива, надо напечатать название массива и потом .length.

Слово "length" так и переводится — длина.

Задание:

  1. Заведите массив array и выдайте его длину:

    JavaScript

    let array = [0, 0, 0];
    alert(array.length);

Длина массива всегда на 1 больше, чем индекс последнего элемента массива. То есть, если в массиве x 5 элементов, то последний — это x[4].

Это значит, что последний элемент вообще любого массива можно получить вот так:

JavaScript

x[x.length - 1]

Задание:

  1. Возьмите пример из прошлого раздела.

    Добавьте еще одну кнопку, которая будет делать дубликат последнего элемента массива.

    То есть, если массив был [3, 5, 10], после нажатия кнопки он должен стать [3, 5, 10, 10].