Массивы javascript объект array

Массивы (объект Array)

Массивы JavaScript используются для хранения множества значений в одной переменной.

Что такое массив?

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

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

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

Все вроде бы нормально, но что если вам нужно пройтись в цикле по маркам автомобилей и найти какую-то конкретную марку? И при этом у вас есть не 3, а 300 автомобилей?

В этом случае вам поможет массив!

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

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

Самый простой способ создать массив в JavaScript это определить переменную-массив, присвоив ей нужные значения в виде константы-массива:

var имя_массива = [элемент1, элемент2, . ];

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

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

Внимание! Запятая после последнего элемента (например, «BMW»,) в разных браузерах работает по разному. Например, в IE 8 и более ранних версиях это приведет к ошибке.

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

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

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

Оба примера делают одно и то же. Обычно использовать конструкцию new Array() нет необходимости. Для простоты, читабельности и большей скорости исполнения скрипта лучше использовать первый способ создания массива (при помощи константы-массива).

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

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

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

В следующем выражении изменяется первый элемент массива cars:

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

Обратите внимание, что первый элемент массива имеет индекс [0], второй [1] и т.д. Индексация массивов всегда начинается с 0.

Кроме этого JavaScript допускает использование всего массива, обратившись к нему по его имени:

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

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

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

Однако JavaScript массивы лучше описывать как массивы.

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

 var person = ["Иван", "Петров", 46]; 

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

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

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

Благодаря этому, массивы могут хранить переменные разных типов.

Помимо примитивных значений в массивах могут храниться объекты, функции и другие массивы:

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

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

Реальная сила массивов JavaScript заключается в их встроенных свойствах и методах:

 var x = cars.length; // Свойство length возвращает кол-во элементов var y = cars.sort(); // Метод sort() сортирует массив 

О методах массивов будет рассказано в следующей главе этого учебника.

Свойство length

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

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; fruits.length; // длина массива fruits равна 4 

Внимание! Значение, возвращаемое свойством length, всегда на единицу больше, чем самый большой индекс в массиве.

Обращение к первому элементу массива

 fruits = ["Banana", "Orange", "Apple", "Mango"]; var first = fruits[0]; 

Обращение к последнему элементу массива

 fruits = ["Banana", "Orange", "Apple", "Mango"]; var last = fruits[fruits.length - 1]; 

Обход элементов массива

Лучший способ обойти все элементы массива, это воспользоваться оператором цикла for:

Также, можно воспользоваться функцией Array.forEach():

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

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

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; fruits.push("Лимон"); // добавим новый элемент в массив fruits 

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

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; fruits[fruits.length] = "Лимон"; // добавим новый элемент в массив fruits 

ВНИМАНИЕ! Добавление элементов с большими индексами может создать в массиве «дыры» со значением undefined.

В следующем примере в массиве fruits будут созданы «дыры» по индексам [4] и [5]:

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; fruits[6] = "Лимон"; // добавим новый элемент в массив fruits 

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

Во многих языках программирования существует особый тип массивов, в которых в качестве индексов используются имена. Такие массивы называются ассоциативными.

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

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

 var person = []; person[0] = "Иван"; person[1] = "Петров"; person[2] = 46; var x = person.length; // person.length вернет 3 var y = person[0]; // person[0] вернет "Иван" 

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

 var person = []; person["firstName"] = "Иван"; person["lastName"] = "Петров"; person["age"] = 46; var x = person.length; // person.length вернет 0 var y = person[0]; // person[0] вернет undefined 

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

В JavaScript массивы для доступа к элементам используют цифровые индексы. Объекты используют индексы-имена.

Таким образом, массивы — это особый тип объектов с цифровой индексацией элементов.

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

• JavaScript не поддерживает ассоциативные массивы.
• Если вам нужно, чтобы имена элементов были строками, то используйте объекты.
• Если вам нужно, чтобы имена элементов были цифрами, то используйте массивы.

Избегайте конструкции new Array()

Нет никакой необходимости для создания массива использовать встроенный JavaScript конструктор массивов new Array().

Вместо этого используйте оператор [].

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

 var points = new Array(); // Плохо var points = []; // Хорошо 

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

 var points = new Array(40, 100); // Создается массив с двумя элементами (40 и 100) 

Но что если из декларации убрать всего один элемент?

 var points = new Array(40); // Создается массив с 40 элементами типа undefined. 

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

Обычно возникает вопрос: Как я узнаю, что переменная является массивом?

Проблема состоит в том, что в JavaScript для массивов оператор typeof возвращает тип «object»:

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; typeof fruits; // вернет object 

Оператор typeof возвращает тип «object», потому что в JavaScript массив это объект. Как же тогда быть?

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

 Array.isArray(fruits); // вернет true 

Но здесь возникает другая проблема: ECMAScript 5 не поддерживается в старых браузерах.

Можно определить такую собственную функцию isArray():

Эта функция всегда возвращает true, если в ее параметре передан массив. Вернее, она возвращает true, если в прототипе объекта есть слово «Array».

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

 var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"]; fruits instanceof Array // вернет true 

Источник

Массивы

Для хранения набора данных в языке JavaScript предназначены массивы. Массивы в JavaScript представлены объектом Array . Объект Array предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом и его элементами.

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

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

const users = new Array(); const people = []; console.log(users); // Array[0] console.log(people); // Array[0]

Можно сразу же инициализировать массив некоторым количеством элементов:

const users = new Array("Tom", "Bill", "Alice"); const people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]

Еще один способ инициализации массивов представляет метод Array.of() — он принимает элементы и инициизирует ими массив:

const people = Array.of("Tom", "Bob", "Sam"); console.log(people); // ["Tom", "Bob", "Sam"]

Можно определить массив и по ходу определять в него новые элементы:

const users = []; users[1] = "Tom"; users[2] = "Kate"; console.log(users[1]); // "Tom" console.log(users[0]); // undefined

При этом не важно, что по умолчанию массив создается с нулевой длиной. С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.

Array.from

И еще один способ представляет функция Array.from() . Она имеет много вариантов, рассмотрим самые распространенные:

Array.from(arrayLike) Array.from(arrayLike, function mapFn(element) < . >) Array.from(arrayLike, function mapFn(element, index) < . >)

В качестве первого параметра — arrayLike функция принимает некий объект, который, условно говоря, «похож на массив», то есть может быть представлен в виде набора элементов. Это может быть и другой массив, это может быть и строка, которая по сути предоставляет набор символов. Вообщем какой-то набор элементов, который можно преобразовать в массив. Кроме того, это может и некий объект, в котором определено свойство length . Например:

const array = Array.from("Hello"); console.log(array); // ["H", "e", "l", "l", "o"]

В данном случае в функцию передается строка и возвращается массив, каждый элемент которого предоставляет один из символов этой строки.

В качестве второго параметра передается функция преобразования, которая через первый параметр получает текущий элемент набора и возвращает некоторый результат его трансформации. Например:

const numbers = [1, 2, 3, 4]; const array = Array.from(numbers, n => n * n); console.log(array); // [1, 4, 9, 16]

В данном случае в функцию Array.from() передается массив чисел. Второй параметр — функция (в данном случае в ее роли выступает лямбда-выражение) запускается для каждого числа из этого массива и получает это число через параметр n . В самом лямбда-выражении возвращаем квадрат этого числа. В итоге Array.from() возвратит новый массив, в котором будут квадраты чисел из массива numbers.

И еще одна версия функции Array.from() в качестве второго параметра принимает функцию преобразования, в которую кроме элемента из перебираемого набора передается и индекс этого элемента: Array.from(arrayLike, function mapFn(element, index) < . >) . Используем эту версию и передадим в функцию объект со свойством length :

const array = Array.from(, (element, index) => < console.log(element); // undefined return index; >); console.log(array); // [0, 1, 2]

Здесь в функцию передается объект, у которого свойство length равно 3. Для функции Array.from это будет сигналом, в возвращаемом массиве должно быть три элемента. При этом неважно, что функция преобразования из второго параметра принимает элемент набора (параметр element ) — в данном случае он будет всегда undefined , тем не менее значение length:3 будет указателем, что возвращаемый массив будет иметь три элемента с соответственно индексами от 0 до 2. И через второй параметр функции преобразования — параметр index мы можем и получить текущий индекс элемента.

Тем не менее мы можем передать объект, где в качестве названий свойств применяются индексы. В этом случае объект превратится в массивоподобный объект, который можно перебрать:

const array = Array.from(, (element) => < console.log(element); return element; >); console.log(array); // ["Tom", "Sam", "Bob"]

length

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

const fruit = []; fruit[0] = "яблоки"; fruit[1] = "груши"; fruit[2] = "сливы"; console.log("В массиве fruit ", fruit.length, " элемента"); for(let i=0; i < fruit.length; i++) console.log(fruit[i]);

По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:

const users = []; // в массиве 0 элементов users[0] = "Tom"; users[1] = "Kate"; users[4] = "Sam"; for(let i=0; i
Tom Kate undefined undefined Sam
 
Несмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined .
 
Источник
 
Читайте также:  Store html in javascript