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

Создание нового HTML элемента из JavaScript

 

1) Создание HTML элемента

Чтобы создать новый HTML элемент из JavaScript существует команда

var element = document.createElement([имя тэга]);

- element – это будет объект-элемент, который вы создадите.

- [имя тэга] – это строка, с помощью которой мы указываем, какого типа элемент мы будем создавать.

2) Добавление созданного элемента в DOM

Элемент недостаточно просто создать – его нужно еще добавить куда-то в документ. Существует функция для добавления элемента в конец списка дочерних элементов указанного элемента-родителя. Эта функция может принять и добавить в список дочерних в том числе и элемент, уже существующий в документе. Если этот элемент уже существует, он будет удален из своего текущего родительского элемента, а затем добавлен внутрь нового родителя.

element.appendChild(child);

- element – это новый родительский элемент.

- child – это элемент, который мы добавляем внутрь element.

Массивы в JavaScript – более детально

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

var frukti = [“Абрикос”,“Яблочко”,”Апельсинка”];

console.log(frukti.length);

//мы увидим длину массива – 3 элемента

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

var perviy = frukti[0];

//”Абрикос” – первый элемент в массиве с индексом 0, который мы записываем в переменную perviy

var posledniy = frukti[frukti.length-1];

//”Апельсинка” – последний элемент в массиве, с индексом на один меньше, чем длинна массива

Перебор массива

frukti.foreach(function (frukt, nomer) {

console.log(frukt+” “+nomer);

});

// функция внутри foreach сработает на каждом элементе. Ее первым атрибутом будет значение текущего элемента, а вторым – его индекс в массиве

//в консоли мы получим “Абрикос 0 Яблочко 1 Апельсинка 2”

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

frukti.push(“Персик”);

//Теперь наш массив выглядит так: [“Абрикос”, “Яблочко”, ”Апельсинка”, ”Персик”];

Удалить последний элемент в массиве

var posledniy = frukti.pop(); //убираем персик из массива

//Теперь наш массив снова выглядит так: [“Абрикос”, “Яблочко”, “Апельсинка”];

//Персик сохранился в переменной posledniy

Удалить первый элемент в массиве

var perviy = frukti.shift(); //убираем абрикос из массива

//Теперь наш массив выглядит так: [“Яблочко”, “Апельсинка”];

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

frukti.unshift(“Ананас”); //добавляем ананас в начало

//Теперь наш массив выглядит так: [“Ананас”, “Яблочко”, “Апельсинка”];

Найти по какому индексу в массиве находится какой-то элемент

frukti.push(“Груша”);

//Теперь наш массив выглядит так: [“Ананас”, “Яблочко”, “Апельсинка”, “Груша”];

var nomer = frukti.indexOf(“Апельсинка”);

//В переменной nomer будет 2 – индекс элемента “Апельсинка”

Убрать элемент с определенным индексом

var lishniyFrukt = frukti.splice(nomer,1); //мы удалили 1 объект из массива и записали его в переменную lishniyFrukt

//Теперь наш массив выглядит так: [“Ананас”, “Яблочко”, “Груша”]

Скопировать массив

var copy = frukti.slice(); //мы скопировали массив frukti в новый массив copy

//Теперь в copy тоже будет [“Ананас”, “Яблочко”, “Груша”]

 

Описание

Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт undefined. В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.

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

Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный 0, а индекс последнего элемента равен значению свойства массива length минус 1.

var arr = ['первый элемент', 'второй элемент'];console.log(arr[0]); // напечатает 'первый элемент'console.log(arr[1]); // напечатает 'второй элемент'console.log(arr[arr.length - 1]); // напечатает 'второй элемент'

Элементы массива являются свойствами, точно такими же, как, например, свойство toString, однако попытка получить элемент массива по имени его свойства вывалится с синтаксической ошибкой, поскольку имя свойства не является допустимым именем JavaScript:

console.log(arr.0); // синтаксическая ошибка

Это не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным '3d', вы сможете обратиться к нему только посредством скобочной нотации. Примеры:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];console.log(years.0); // синтаксическая ошибкаconsole.log(years[0]); // работает как положено