Работа с массивами и объектами JavaScript

 

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

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

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

В данной статье рассмотрим основные операции с массивами и объектами JavaScript.

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

Создание пустого массива

var someArray = [];

someArray — имя массива

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

var tovar = ['Туалетная бумага', 'Полотенце', 'Бумажные салфетки', 'Верёвка'];

В массивах JavaScript с объектами работает также, как и с обычными значениями массива, поэтому большинство методов будут работать аналогично. Индексы (порядковые номера значений) объектов также будут нумероваться, начиная с нуля.

Создание объектов

Объекты можно создать методом наполнения, то есть сначала объект создаётся пустым, а затем наполняется ключами и значениями

var item1 = {};
item1.id = '1';
item1.name = 'Туалетная бумага';
item1.price = '17.00';
item1.quantity = 3;
item1.hq = true;

var item2 = {};
item2.id = '2';
item2.name = 'Полотенце';
item2.price = '85.50';
item2.quantity = 1;
item2.dopinfo = [{'color': 'белый', 'type': 'мягкий'}, {'size': '100 x 50'}];
item2.hq = false;

var item3 = {};
item3.id = '3';
item3.name = 'Бумажные салфетки';
item3.price = '23.66';
item3.quantity = 2;
item3.hq = false;

Ещё один способ создания объектов — сразу задавать ему ключи со значениями

var item4 = {
    'id': '4',
    'name': 'Верёвка',
    'price': '7.00',
    'quantity': 1,
    'hq': true,
};

Аналогично можно создать и массив, сначала пустой:

var purchase = [];

а затем наполнить его объектами методом push

purchase.push(item1, item2, item3);

Также, методом push можно добавить объект в уже наполненный массив:

purchase.push(item4);

Это будет аналогично

purchase.push(item1, item2, item3, item4);

Метод push отправляет данные или объекты в конец массива.

Свойства объектов также могут содержать в себе массивы, и объекты в них. Как, например, в объекте item2 — свойство item2.dopinfo

С помощью метода unshift можно добавить данные или объекты в начало массива:

purchase.unshift({id: "5", name: "Носки", price: "28.00", quantity: 7, 'hq': true});

Эта строчка добавить данные по носкам в начало массива

Для извлечения объекта с начала или с конца массива используются методы shift и pop соответственно.

Сортировка объектов в массивах

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

по id товаров в порядке возрастания

purchase.sort((a, b) => a.id - b.id);

по id товаров в порядке убывания

purchase.sort((a, b) => b.id - a.id);

по цене (price) в порядке возрастания

purchase.sort((a, b) => a.price - b.price);

по цене (price) в порядке убывания

purchase.sort((a, b) => b.price - a.price);

по количеству (quantity) в порядке возрастания

purchase.sort((a, b) => a.quantity - b.quantity);

по количеству (quantity) в порядке убывания

purchase.sort((a, b) => b.quantity - a.quantity);

по наименованию товара (алфавит) в порядке возрастания

purchase.sort((a, b) => a.name > b.name ? 1 : -1);

по наименованию товара (алфавит) в порядке убывания

purchase.sort((a, b) => a.name < b.name ? 1 : -1);

обратный порядок объектов (элементов)

purchase.reverse();

Сериализация и десериализация

Перевод в формат JSON

var serializedPurchase = JSON.stringify(purchase);

Перевод из формата JSON

 

var unserializedPurchase = JSON.parse(serializedPurchase);

Склеивание ключей и значений из разных массивов в объект

Если ключи находятся в одном массиве, а значения — в другом, это всё можно «склеить» в один объект с помощью функции

var arrayOpt = ['id', 'name', 'gender', 'country'];
var arrayVal = ['1', 'Boris Johnson', 'male', 'united kingdom'];

function data_combine(opt, val) {
    if(opt.length != val.length) return false;
    var combined = {};
    for (i=0; i<opt.length; i++) {
        combined[opt[i]] = val[i];
    }
    return combined;
}

var resultObject = data_combine(arrayOpt, arrayVal);

Полученный объект можно завернуть в массив:

var resultArray = Array(data_combine(arrayOpt, arrayVal));

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

var a = ['name', 'options', 'address', 'options', 'gender', 'options'];
var b = ['johnny homeboy', 'a', 'uk - england', 'b', 'male', 'c'];
var r = a.reduce((o,c,i) => {o[c] = o[c] ? o[c] + ", " + b[i]:b[i]; return o;}, {})

В данном примере в объекте массива r ключ options будет иметь одно значение a, b, c.

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

var arrayN = ['a','b','c'];
var objN = arrayN.reduce(function(acc, cur, i) {
    acc[i] = cur;
    return acc;
}, {});

Объединение нескольких массивов методом concat

var bigArray = array1.concat(array2);

Такой метод создаёт новый массив, состоящий из двух или более массивов. Если необходимо объединить больше двух массивов, то в скобках перечисляют эти массивы через запятую по порядку:

var bigArray = array1.concat(array2, array3);

Смешанные массивы

Массивы могут состоять не только из одних объектов или одних значений:

var tb = Array('discount', {'name': 'Туалетная бумага', 'price': '17.00'}, 123, {'id': '1', 'quantity': 3}, true);

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

Измерить длину массива по количеству элементов можно методом length

tb.length;

Использование методов slice и splice

array.slice(2);

выведет элементы 2, 3, 4… до конца

array.slice(2,6);

выведет элементы 2, 3, 4, 5

array.slice(-1);

выведет только последний элемент

array.slice(-2);

выведет только предпоследний и последний элементы

array.splice(3,5);

удалит из массива 5 элементов, начиная с порядкового номера 3

Выборка из массива

var orders = [{
    "name" : "Туалетная бумага", 
    "description" : "Большая упаковка качественной туалетной бумаги", 
    "status": "shipped"
}, 
{
    "name": "Полотенце", 
    "description" : "Белое мягкое полотенце", 
    "status": "shipped"
}, 
{
    "name": "Бумажные салфетки", 
    "description" : "Рулон мягких салфеток", 
    "status": "delivered"
},
{
    "name": "Верёвка", 
    "description" : "Качественная верёвка в ассортименте", 
    "status": "delivered"
}];
 
var orderInfo = orders.map( function(order) {
 if( order.status === "delivered"){
     var info = { 
         "orderName": order.name,
         "orderDescription": order.description
        }
     return info;
    }
});

С помощью данного скрипта получим массив доставленных товаров (то есть со статусом delivered).

Перебор массива методом forEach

  purchase.forEach(function(item) {
     console.log(item['name'], ':', item['price']);
  });

С помощью данного скрипта можно вывести наименования товаров с ценами на них.

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

  purchase.forEach(function(item) {

    var keys = Object.keys(item);
    keys.forEach((key) => {
      console.log(key, ':', item[key]);
    });
  });

Данные из этих объектов к тому же станут значениями обычного массива.

MAP-массивы

Создание MAP-массива с данными

var mapArray = new Map([
    ['name', 'Полотенце'],
    ['price', '85.50'],
    ['id', '2'],
    ['quantity', 1]
]);

Несколько операций, которые можно использовать в MAP-массиве

Добавление нового ключа и значения, либо изменение имеющегося значения ключа в массиве

mapArray.set('availability', true);

Удаление ключа и значения

mapArray.delete('quantity');

Полная очистка массива

mapArray.clear();

Проверка наличия ключа в массиве

mapArray.has('id');

если такой ключ есть, вернёт true

Список ключей в массиве

mapArray.keys();

Список значений в массиве

mapArray.values();

Показать значение ключа

mapArray.get('name');

Показать число элементов в массиве

mapArray.size;

Список ключей и элементов массива

mapArray.entries();

На этом пока всё. 🙂

Поделиться ссылкой:

 

Читайте также