МАССИВ дополнительные методы

Ассоциативный массив как объект

Ранее мы разбирали индексные массивы, пришло время познакомиться с ассоциативным массивом на примере то во же автомобиля. Но для начала вспоминаем, как объявляется индексный массив, а далее рассмотрим в чем их отличие.

Пишем ключевое слово var, затем название массива car, далее равно, открываем квадратные скобки, где перечисляем через запятую свойства, которыми обладает автомобиль.

• - Марка нашего авто. «Nissan», 
• - тип «Легковой», 
• - год выпуска «2015», 
• - цвет «Черный», 
• - пробег «30000», 
• - ремонтировался «false». 

Таким способом мы создаем простой индексный массив и давайте отобразим его в консоли для детального разбора.

var car = [ "Nissan","Легковой",2015,"Черный",30000,false ];
console.log(car);

Открыв такой массив видим индексы и значения, мало кто догадается,  для чего вы создали элемент «false», или что означает «30000», ведь индексы от нуля до пяти дают простую нумерацию, которая вам мало что скажет.

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

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

Ассоциативный массив объявляется также как и обычный. Пишем словом var, далее прописываем его имя, знак равно, затем, обратите внимание, в место квадратных пишем фигурные скобки.

В фигурных скобках располагаем элементы, которые состоят из ключа и значения.

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

var car_2 = {};

Как и с простым массивом, мы можем описывать его содержимое сразу в фигурных скобках или описать содержимое после объявление массива. Как говорил выше каждый элемент массива состоит из двух вещей это ключ (обязательно строковое) через двоеточие указываем его значение. Это является элементом, между собой они разделяются запятыми. Само двоеточие напоминает знак «равно», поскольку значение, стоящие справа, присваивается ключам, стоящим слева, по такому же подобию как создаем переменные.

Все пары «ключ-значение» должны быть разделены запятыми, как в обычном массиве, последнею запятую не ставим.

car_2 = {"brand": "Nissan", "type": "Легковой", "year": 2015, "color": "Черный", "mileage": 30000, "repaired": false };
console.log(car_2);

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

Запомните, самое основное отличие простого индексного массива от ассоциативного в том, что в обычном значения хранятся под номерами называемые индексом, а в ассоциативном под именем называемые ключами.

Синтаксис и тонкости ассоциативных массивов

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

var car = [ 
    "Nissan",
    "Легковой",
    2015,
    "Черный",
    30000,
    false 
];

var car_2 = {
    "brand": "Nissan", 
    "type": "Легковой", 
    "year": 2015, 
    "color": "Черный", 
    "mileage": 30000, 
    "repaired": false 
};

В таком формате описывают json, и рекомендую приучайте себя сразу заключать ключи в кавычки. Хотя в JS синтаксис позволяет у ключей кавычки не прописывать и весь массив можно представить в таком виде.

var car_2 = {
    brand: "Nissan",
    type: "Легковой",
    year: 2015,
    color: "Черный",
    mileage: 30000,
    repaired: false
};

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

var car_2 = {
    0: "Nissan",
    1: "Легковой",
    2: 2015,
    3: "Черный",
    4: 30000,
    5: false
};

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

Как видим, в консоли такой массив практически схож с обычным массивом, за исключением некоторых фактов, в нем нет свойства length, при помощи, которого мы узнавали количество элемента в обычном массиве.

Если к ассоциативному массиву применить свойство length JS выведет undefined (такого свойства нет). В тоже время, применив length к обычному массиву, он покажет нам шесть. То есть индекс последнего элемента плюс один.

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

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

Есть один из методов в JS который позволяет вытащить все ключи у объекта, называется он Objeck.keys(), который возвращает массив, содержащий  все ключи с его индексами.

console.log(Object.keys(car_2));

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

Следующий момент, на который стоит обратите внимание, это __proto__  у простого массива он стоит Array, у ассоциативного массива видим Object, это значит, что прототип данных объектов реализован от разных классов. Соответственно отсюда вытекает разные методы и свойства работы с данными объектами. 

Более подробно о классах, прототипах это будет в других уроках тут пока база где рассматриваем сам фундамент JS.

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

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

Обратится можно двумя способами, первый способ вы знаете, мы с вами разбирали его в предыдущих уроках, где задействовали квадратные скобки [  ].

Пишем имя массива, ставим скобки, у простых массивов мы прописывали индекс, в ассоциативных, в кавычках прописываем ключ.

Второй способ, можем обратиться через точечную нотацию, то есть также как к любому свойству объекта.

console.log(car_2.year);

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

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

console.log(car_2["type ty"]);

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

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

car_2.year = 2020;

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

Допустим, машина рассчитана на четыре человека.

car_2.passengers = 4;

Подведем итоги пройденного материала

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

Понятие сортировка тут не применима, мы не можем выстроить элементы по ключу, так как они могут быть как числовые так и строковые.

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

Тоже самое и с сортировкой, только мы определяем по какому принципу она будет проходить.

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

В общем, основное понятие мы разобрали и переходим к домашнему заданию.

Практическая задача по javascript

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

Есть многоуровневый ассоциативный массив, в котором содержатся различная информация.

var myObject = {
    "name": "Поздравление",
    "month": ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август"],
    "random array": [5, true, { year: 2018, number: 8 }, 12, 25.4],
    "year array": [2017, 2018]
};

Ваша задача, добавить в массив «myObject» фразу «С праздником », заменить значение «Март» на « Марта!».

Вывести в консоли, одной инструкцией, использую данные только с массива, следующую фразу «С праздником 8 Марта!».

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

Урок подготовил: Горелов Денис

Оставить комментарий: