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

Александр Мальцев
Александр Мальцев
178K
39
Содержание:
  1. Что такое ассоциативный массив?
  2. Способы создания ассоциативных массивов
  3. Коллекция Map
  4. Объект как ассоциативный массив
  5. Комментарии

Статья, в которой рассмотрим какие в JavaScript имеются способы создания ассоциативных массивов, а также основные приёмы работы с ними.

Что такое ассоциативный массив?

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

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

Таким образом представить ассоциативный массив можно как набор пар «ключ-значение». При этом каждое значение связано с определённым ключом.

Ассоциативный массив в JavaScript

Для того чтобы получить значение необходимо знать ключ.

Способы создания ассоциативных массивов

В JavaScript имеются обычные массивы. В них в качества ключа используется порядковый номер (индекс) элемента, а создаются они с использованием квадратных скобок или Array(). Эти массивы не могут использоваться в качестве ассоциативных.

Создание ассоциативных массивов в JavaScript можно выполнить двумя разными способами:

  • с помощью объекта Map (появился в языке, начиная с версии ECMAScript 2015);
  • посредством объектов.

Коллекция Map

Map – это коллекция «ключ-значение», которую можно использовать для создания ассоциативных массивов.

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

Создание пустой коллекции:

// создание пустого ассоциативного массива
const arr = new Map();

Создании коллекции с инициализацией начальных значений:

// создание ассоциативного массива и помещения в него трех пар «ключ-значение»
const arr = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

В этом примере строки «key1», «key2» и «key3» являются ключами, а «value1», «value2» и «value3» соответственно их значениями.

Узнать количество элементов в массиве можно осуществить с помощью свойства size:

arr.size; // 3

Добавление элемента в массив (в экземпляр объекта Map) осуществляется с помощью метода set:

// добавить в массив одну пару "ключ-значение"
arr.set('key4','value4');

// добавить в массив несколько пар "ключ-значение"
arr.set('key5','value5');
arr.set('key6','value6');
// или так
arr
  .set('key5','value5')
  .set('key6','value6');

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

arr.set('key1','new value');

Получить значение по ключу выполняется с помощью метода get:

// получить значение, ассоциированное с ключом 'key4'
arr.get('key4'); // 'value4'

Проверить есть ли ключ в массиве можно посредством метода has:

// есть ли в массиве arr ключ key2
arr.has('key2'); // true

Удалить из ассоциативного массива (экземпляра объекта Map) элемент по имени ключа можно с помощью метода delete:

arr.delete('key1'); // true

Данный метод возвращает true, если данный ключ существовал в массиве, в противном случае он возвращает false.

if (arr.delete('key1')) {
  console.log('Запись с ключом "key1" удалена из массива!');
} else {
  console.log('Запись с ключом "key1" не найдена в массиве!');
}

Очистить массив (удалить все элементы) можно выполнить с помощью метода clear.

arr.clear(); // очистим массив arr
arr.size; // 0 (количество элементов)

Перебор ассоциативного массива (объекта Map) обычно осуществляется с помощью цикла for...of. При этом итерацию можно организовать по ключам, значениям и записям ([key, values]).

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

for (let key of arr.keys()) {
  console.log(key);
}

Для перебора значений можно воспользоваться итерируемым объектом MapIterator, возвращаемым посредством методом values:

for (let value of arr.values()) {
  console.log(value);
}

Перебор записей ассоциативного массива с использованием метода entries:

for (let pair of arr.entries()) {
  // pair - это массив [key, values]
  console.log(pair[0]); // ключ
  console.log(pair[1]); // значение
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Данный метод используется по умолчанию в for...of, поэтому его можно опустить:

for (let pair of arr) {
  console.log(`Ключ = ${pair[0]}, значение = ${pair[1]}`);
}

Кроме этого перебрать ассоциативный массив можно с помощью метода forEach.

arr.forEach(function(value,key) {
  console.log('key = ' + key +', value = ' + value);
});

Преобразовать ассоциативный массив (объект Map) в JSON и обратно можно так:

let arr = new Map([
  ['question', 'Текст вопроса...'],
  ['answer1', 'Ответ 1...'],
  ['answer2', 'Ответ 2...'],
]);
// в JSON
jsonStr = JSON.stringify([...arr]);
// из JSON в Map
mapArr = new Map(JSON.parse(jsonStr));

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

В качестве ассоциативного массива можно использовать обычный объект.

Создание пустого ассоциативного массива через объект:

// посредством литерала объекта
const arr1 = {};
// с использованием стандартной функции-конструктора Object
const arr2 = new Object();
// через Object.create
const arr3 = new Object.create(null);

Заполнение ассоциативный массив значениями на этапе его создания:

const myArray = {
  'key1': 'value1',
  'key2': 'value2',
  ...
}

Добавление нового элемента (пары «ключ-значение»):

// добавим строку «текстовое значение» с ключом «key1»
arr['key1'] = 'текстовое значение';
// добавить число 22 с ключом «key2»
arr['key2'] = 22;

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

В качестве значения можно использовать не только примитивные типы данных, но и ссылочные.

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

arr.key1 = 'текстовое значение';
arr.key2 = 22;

Получение значения ключа:

console.log( myArray['key1'] );
console.log( myArray['key2'] );
console.log( myArray.key1 );
console.log( myArray.key2 );

Получить количество ключей (длину) можно так:

const myArray = {'key1': 'value1', 'key12: 'value2', 'key3': 'value3'};
// Используем keys, чтобы получить массив ключей. А затем с помощью length их длину
Object.keys(myArray).length; // 3

Удаление ключа выполняется с помощью оператора delete:

delete myArray['key1'];

Выполнить проверку (наличия) ключа можно так:

const myArray = {'key1': 'value1', 'key2': 'value2'};
// 1 способ - c использованием hasOwnProperty
if (myArray.hasOwnProperty('key1')) {
  console.log( 'Ключ key1 существует!' );
} else {
  console.log( 'Ключ key1 не существует!' );
}

// 2 способ - с использованием in
if ('key1' in myArray) {
  console.log( 'Ключ key1 есть в массиве!' );
} else {
  console.log( 'Ключ key1 нет в массиве!' );
}

Перебор ключей с помощью цикла for...in:

// myArray - объект как ассоциативный массив
for(key in myArray) {
  console.log( `${key} = ${myArray[key]}` );
}

Преобразовать объект, используем в качестве ассоциативного массива, в JSON и обратно можно так:

// ассоциативный массив
const arr = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

// arr в JSON
const str = JSON.stringify(arr);
// str в объект (ассоциативный массив)
const newArr = JSON.parse(str);

Комментарии: 39

  1. ElenaArapova
    ElenaArapova
    2022-06-14 15:58:30
    Здравствуйте, Александр! Спасибо за статью. И вообще весь материал на сайте так хорошо написан. Всегда все понятно становится. Это лучший сайт для новичков и не только.
    У меня такой вопрос: можно ли получить (записать в переменную) имя ключа из ассоциативного массива?
    Мне нужно переделать ассоциативный массив [ [ «key1», «value1» ], [ «key2», «value2» ] ] в единый объект вида { key1: «value1», key2: «value2» }
  1. ElenaArapova
    ElenaArapova
    2022-06-14 17:46:17
    )) нашла, как сделать (через Object.fromEntries())
  • barmalej
    barmalej
    2021-01-31 15:47:38
    Приветствую!
    const test1 = new Map([
        ['t1', 'content1'],
        ['t2', 'content2'],
        ['t3', 'content3'],
        ['t4', 'content4'],
        ['t5', 'content5']
    ]);
    
    А как можно вытащить content3, зная что это значение у третьего элемента?
    1. Александр Мальцев
      Александр Мальцев
      2021-01-31 16:05:58
      Привет!
      Получить значение элемента по ключу можно так:
      const value = test1.get('t3');
      
    2. barmalej
      barmalej
      2021-01-31 16:15:59
      Да, но я не знаю значение ключа.
      Я знаю, что это третий элемент (по порядку).
    3. Александр Мальцев
      Александр Мальцев
      2021-01-31 16:38:00
      Тогда нужно преобразовать объект Map в массив:
      // создаём массив из Map
      const array = Array.from(test1, ([name, value]) => ({ name, value }));
      // получаем значение по индексу
      const value = array[2].value;
      
    4. barmalej
      barmalej
      2021-01-31 16:57:05
      Да, наверно это лучшее решение. Спасибо!
  • Rostislav
    Rostislav
    2021-01-03 01:13:14
    Доброго времени суток!) Александр, подскажите пожалуйста, как сравнить свойства объекта? Мне нужно вывести овощи в отдельном списке, вот код заранее спасибо!!!
    let products = {     
      "1": {"category": "fruit"},
      "2": {"category": "fruit"},
      "3": {"category": "fruit"},
      "4": {"category": "vegetable"},
      "5": {"category": "vegetable"},
      "6": {"category": "vegetable"}
    }
    let producList = "";
    for (var key in products) {
      producList += '<div class="product-thumb">'
      producList += products[key].category + '<br>';
      producList += '</div>';
    }
    document.getElementById('product-list').innerHTML = producList;
    1. Александр Мальцев
      Александр Мальцев
      2021-01-03 16:14:01
      Привет!
      Например, так (в этом случае у вас отобразятся только овощи):
      for (let key in products) {
        // если products[key]['category'] не равно 'vegetable', то тогда переходим к следующей итерации
        if (products[key]['category'] !== 'vegetable') {
          continue;
        }
        ...
      }
      
  • oleksii
    oleksii
    2020-11-03 17:20:05
    отличная статья, для чайников, как я не хватает инфы (добыта эксперементальным путем):
    — при попытке добавления в массив пары ключ=>значения, при совпадении ключа — новый элемент не добавляется, ошибки нет
    1. Александр Мальцев
      Александр Мальцев
      2020-11-04 06:42:21
      Спасибо! В статье этот момент описан, может, конечно, не так явно. А именно: если данный ключ уже имеется в ассоциативном массиве, то этот код просто изменит значение существующего ключа.

      Таким образом, когда вы пытаетесь добавить в ассоциативный массив (объект) ключ, который уже имеется в нём, то он конечно в него ещё раз не будет добавлен. В этом случае просто произойдёт операция присвоения этому ключу нового значения. Если это значение такое же, то всё равно оно будет перезаписано новым значением, хоть оно и точно такое же.
      const person = {
        name: 'Иван',
        age: 23
      }
      
      // установим ключу name новое значение 'Иван'
      person['name'] = 'Иван';
      
  • Andrey
    Andrey
    2020-07-19 21:41:33
    Добрый день Александр, как можно с Вами связаться.Мне нужно написать небольшой скрипт на js(За деньги), для сайта, если Вы сможете и у Вас есть время, то свяжитесь со мной или напишите, что нет.
    1. Александр Мальцев
      Александр Мальцев
      2020-07-20 13:03:24
      Привет! Email для связи расположен в конце страницы.
  • Влад Волинчук
    Влад Волинчук
    2020-07-01 12:55:36
    Раз уж все тут задают вопросы, попробую и я)
    Почему {0:5}[0] выдаёт ошибку, а +{0:5}[0] нет? Понятно, что операция "+" может пытаться превратить обьект в число, но в таком случае было бы NaN[0]. Со строками такой проблемы нет, т.е. {a:5}[a] работает нормально, и ({0:5})[0] тоже
    1. Александр Мальцев
      Александр Мальцев
      2020-07-01 16:55:03
      Эти случаи JavaScript рассматривает по-разному.
      Эту запись {0:5}[0] он не может понять и, следовательно, возникает ошибка «Uncaught SyntaxError: Unexpected token ':'». Если вы хотите её вычислить, то оберните в круглые скобки: ({0:5}[0]).В этом случае он поймёт, что вы хотите получить значение ключа «0».
      Эта запись {a:5}[a] тоже не должна работать, скорее всего у вас где-то объявлена переменная «a».
      Запись +{0:5}[0] не приводит к ошибке потому что здесь JavaScript понимает что ему нужно делать. Т.е. вычислить выражение, расположенное до «унарного плюса», а затем привести его к числу. Результат вычисления {0:5}[0] будет 5. Далее он 5 приводит к 5. Операнд «+» здесь выполняется самым последним, т.к. он имеет более низкий приоритет чем «[]».
      Когда вы записываете так ({0:5})[0] вы тем самым расставляете приоритеты и JavaScript понимает что вы хотите. Т.к. операнд «()» имеет более высокий приоритет чем «[]».
  • Maksim
    Maksim
    2020-06-22 10:21:01
    Здравствуйте. Подскажите пожалуйста, как справиться с задачей, в статье не нашёл.
    Полный текст задачи:
    При нажатии b-11 выполняете функцию f11. Функция должна получить ключ из i-11 и удалить запись из массива a11 с таким ключом. После этого вывести массив в out-11.
    Мои попытки написать это тщетны.
    let out11 = '';
    function f11(a11, out11) {
      let I11 = document.querySelector('.i-11').value;
      for (let key in a11) {
        if (key == I11) {
          delete a11.key;
        } 
        out11 += `${key} : ${a11[key]} <br>`;
      }
      document.querySelector('.out-11').innerHTML = out11;
    }
    document.querySelector('.b-11').onclick = () => {
      let a11 = {
        "b": 17,
        "e": 22,
        "j": 17,
        "k": 22,
        "d": 54
      };
      f11(a11, out11);
    }
    
    1. Александр Мальцев
      Александр Мальцев
      2020-06-22 14:00:18
      Здравствуйте! Для доступа к свойству используйте []:
      function f11(a11, out11) {
        let I11 = document.querySelector('.i-11').value;
        for (let key in a11) {
          if (key == I11) {
            delete a11[key];
            continue;
          }
          out11 += `${key} : ${a11[key]}`;
        }
        document.querySelector('.out-11').innerHTML = out11;
      }
      
  • Алеша
    Алеша
    2020-05-01 02:56:54
    Александр, доброго времени суток, подскажите, если не затруднит...., третий день «бьюсь» не могу дать толку…
    есть данные:
     monthsWorked:{
    	January: {
             	 hour: 180,
             	 prize: 10,
             	 salary: 45000
            },
    	February: {
             	 hour: 140,
             	 prize: 5,
             	 salary: 35000
            },
    	March: {
             	 hour: 160,
             	 prize: 15,
             	 salary: 40000
            }}
    
    хочу получить что-то такое при переборе объекта циклом for in:
    <table style="width:100%">
      <tr>
        <th>january</th><th>february</th><th>march</th>//данные поля хочу с итерировать на js
      </tr>
      <tr>
        <td>hour: 180</td><td>hour: 160</td><td>hour: 180</td>//данные поля хочу с итерировать на js
      </tr>
      <tr>
        <td>prize: 10</td><td>prize: 5</td><td>prize: 10</td>//данные поля хочу с итерировать на js
      </tr>
      <tr>
        <td>salary: 45000</td><td>salary: 31000</td><td>salary: 45000</td>//данные поля хочу с итерировать на js
      </tr>
    </table>
    
    Благодарю…
    1. Александр Мальцев
      Александр Мальцев
      2020-05-01 12:44:03
      Привет! Для этого данные необходимо преобразовать данные в удобный для вывода вид.
      Например:
      var data = {
        monthsWorked: {
          January: {
            hour: 180,
            prize: 10,
            salary: 45000
          },
          February: {
            hour: 140,
            prize: 5,
            salary: 35000
          },
          March: {
            hour: 160,
            prize: 15,
            salary: 40000
          }
        }
      }
      
      var result = {
        months: '',
        hour: '',
        prize: '',
        salary: ''
      };
      
      for (var key1 in data['monthsWorked']) {
        result['months'] += '<th>' + key1 + '</th>';
        for (var key2 in data['monthsWorked'][key1]) {
          result[key2] += '<td>' + key2 + ': ' + data['monthsWorked'][key1][key2] + '</td>';
        }
      }
      
      Затем сформировать нужный HTML код:
      var output = '<table style="width:100%"><tr>{{months}}</tr><tr>{{hour}}</tr><tr>{{prize}}</tr><tr>{{salary}}</tr></table>';
      output = output.replace('{{months}}', result.months);
      output = output.replace('{{hour}}', result.hour);
      output = output.replace('{{prize}}', result.prize);
      output = output.replace('{{salary}}', result.salary);
      
      После этого вставить его, например, с помощью innerHTML в нужный элемент страницы.
    2. Алеша
      Алеша
      2020-05-01 14:18:10
      Спасибо большое!!!
      Указали правильный путь!!!
      Я совсем и забыл про replace!!!.. а то получал массив из 12 элементов и не знал как его дальше преобразовать.
      Ещё раз СПАСИБО!!!
  • Aliaksandr Zhuk
    Aliaksandr Zhuk
    2020-02-09 11:14:43
    Добрый день.
    Подскажите, как из такой разметки получить данные (название — data_name, цена — price-item, количество — значение input name=«input_val») и записать в строку «название — цена — количество»
    <div class="item-mycart" data-id-elem="98" data_name="Московский кирпич">
      <div class="row-price_input">
        <div class="price-item">7777 <span>руб</span></div>
        <div class="input-count">
          <span class="icont-count minus" data-oper="minus">-</span>
          <input name="input_val" type="text" title="Количество" value="1">
          <span class="icont-count plus" data-oper="minus">+</span>
        </div>
        <div class="sum">
          <span>=</span><span class="sum_price">7777</span><span>руб</span>
        </div>
    ...
    <div class="item-mycart" data-id-elem="97" data_name="Амстердам">
      <div class="row-price_input">
        <div class="price-item">50,55 <span>руб</span></div>
        <div class="input-count">
          <span class="icont-count minus" data-oper="minus">-</span>
          <input name="input_val" type="text" title="Количество" value="1">
          <span class="icont-count plus" data-oper="minus">+</span>
        </div>
        <div class="sum">
          <span>=</span><span class="sum_price">150</span><span>руб</span>
        </div>
    
    Попытался сделать таким образом, но как записать в строку не понимаю. Подскажите, пожалуйста, как сделать перебор и записать нужные данные в строку.
    let 
      order_name = [],
      order_count = [],
      order_cost = [];
    $(".item-mycart").each(function () {
      order_name.push($(this).attr('data_name'));
    });
    $('input[name="input_val"]').each(function () {
      order_count.push($(this).val());
    });
    $('.sum_price').each(function () {
      order_cost.push($(this).text());
    });
    
    1. Александр Мальцев
      Александр Мальцев
      2020-02-09 16:22:13
      Вам нужно создать массив, в котором каждый его элемент будет являться объектом и состоять из 3 свойств: name, count и cost.
      let orders = [];
      $('.item-mycart').each(function () {
        let
          name = $(this).attr('data_name'),
          count = $(this).find('input[name="input_val"]').val();
          cost = $(this).find('.sum_price').text();
        orders.push({
          'name': name,
          'count': count,
          'cost': cost
        })
      });
      
      // потом, если нужно вывести, например, в консоль
      for (var i = 0, length = orders.length; i < length; i++) {
        console.log('name = ' + orders[i]['name'] + ', count = ' + orders[i]['name'] + ', cost = ' + orders[i]['cost']);
      }
      
    2. Aliaksandr Zhuk
      Aliaksandr Zhuk
      2020-02-10 11:53:17
      Большое спасибо, Александр!
  • Andrei Krivisheev
    Andrei Krivisheev
    2019-12-11 18:38:54
    Прошу прощения за тупой вопрос)) но как можно добавить ключ выводимый из input?? ))
    1. Александр Мальцев
      Александр Мальцев
      2019-12-12 14:46:13
      Расскажите подробнее, что вы хотите сделать? HTML элемент input имеет только атрибуты. Что вы подразумеваете под ключом и куда его нужно добавить?
    2. Andrei Krivisheev
      Andrei Krivisheev
      2019-12-12 14:58:15
      есть два input в html, значение введенное в первый input, должно создавать новый ключ в ассоциативном массиве, а значение из второго input, записывать значение этого ключа.
    3. Александр Мальцев
      Александр Мальцев
      2019-12-12 15:30:13
      Это можно выполнить так (например, при нажатии на кнопку получаем значение этих input м создаем на основе их значений ассоциативный массив):
      <input type="text" id="key" value="">
      <input type="text" id="value" value="">
      <button type="button" id="action">Создать ассоциативный массив</button>
      
      <script>
      var arr;
      // при нажатию на кнопку
      document.querySelector('#action').addEventListener('click', function () {
        var
          // получаем значение 1 input
          key = document.querySelector('#key').value,
          // получаем значение 2 input        
          value = document.querySelector('#value').value;
          
        // присваиваем переменной пустой объект
        arr = {};
        // добавляем в объект ключ с соответствующим значением
        arr[key] = value;
        // выводи объект (ассоциативный массив) в консоль
        console.log(arr);
      });
      </script>
  • multidem
    multidem
    2019-11-30 07:50:58
    Здравствуйте, я не понял простой вещи, как перебрать в цикле объекты в массиве с разными именами? Подскажите пож.
    Чтобы вывести на экран 3 картинки со всеми свойствами. Если имя объектов совпадает, например просто «pic», то вопросов нет —
    <body>
    <p id="myim"></p>
            
    <script>
      slideShow('.slider', {
        isAutoplay: true
      });
      s = ''
      arrObj = [
        { pic: { f: '1.jpg', w: 500, h: 500 } },
        { pic: { f: '2.jpg', w: 700, h: 700 } },
        { pic: { f: '3.jpg', w: 900, h: 900 } }
      ]
      for (i = 0; i < 3; i++) {
        f = arrObj[i].pic.f
        w = arrObj[i].pic.w
        h = arrObj[i].pic.h
        s += "<img src='images/" + arrObj[i].pic.f + "' width='" + arrObj[i].pic.w + "' height='" + arrObj[i].pic.h + "'>"
      }
      myim.innerHTML = s
    </script>
    </body>
    
    Но когда имена разные «pic1», «pic2», «pic3» не понимаю какой синтаксис должен быть в цикле? Спасибо.
    arrObj = [
      { pic1: { f: '1.jpg', w: 500, h: 500 } },
      { pic2: { f: '2.jpg', w: 700, h: 700 } },
      { pic3: { f: '3.jpg', w: 900, h: 900 } }
    ]
    
    1. Александр Мальцев
      Александр Мальцев
      2019-12-01 08:56:45
      Привет!
      Это, например, можно выполнить с помощью цикла for..in:
      var s = ''
      arrObj = [
        { pic1: { f: '1.jpg', w: 500, h: 500 } },
        { pic2: { f: '2.jpg', w: 700, h: 700 } },
        { pic3: { f: '3.jpg', w: 900, h: 900 } }
      ]
      for (i = 0; i < arrObj.length; i++) {
        for (key in arrObj[i]) {
          f = arrObj[i][key].f
          w = arrObj[i][key].w
          h = arrObj[i][key].h
          s += "<img src='images/" + f + "' width='" + w + "' height='" + h + "'>"
        }
      }
      myim.innerHTML = s
      
    2. multidem
      multidem
      2019-12-01 18:54:01
      Спасибо, Александр! Трудно было бы догадаться самостоятельно о такой конструкции. Хотя я уже понял, что имя объектов можно вообще выбросить ):

      let s=''
                
                arrObj = [
                { f:'1.jpg', w:500, h:500 },
                { f:'2.jpg', w:700, h:700 },
                { f:'3.jpg', w:900, h:900 }
                ]
                
                
                        for (i=0; i<3; i++) {
                        
                        f = arrObj[i].f
                        w = arrObj[i].w
                        h = arrObj[i].h 
                        
                        s += "<img src='images/"+f+"' width='"+w+"' height='"+h+"'>"
                        }  
                        
                        myim.innerHTML = s
      
    3. Александр Мальцев
      Александр Мальцев
      2019-12-03 14:28:50
      Да, если они не нужны, то их конечно можно не использовать.
  • Александр
    Александр
    2019-10-03 13:11:22
    Александр, отличная статья.
    Подскажите, а как можно достучаться до массивов вложенных в ассоциативный.

    Допустим есть асс. массив:
    let a = {
      b: [['Иван', 0], 'Татьяна', 'Ирина'],
      c: ['Сергей', 'Карп', ['Тамара', 1]],
      d: [['Петр', 1], 'Иван', ['Николай', 0]]
    }
    
    Как из него получить имена, у которых вторым значением идет 0?
    1. Александр Мальцев
      Александр Мальцев
      2019-10-03 13:48:47
      Спасибо.
      Это можно решить таким скриптиком:
      // переменная, для хранения результата
      let result = [];
      
      // перебираем ассоциативный массив
      for (key in a) {
        // если элемент ассоциативного массива является массивом
        if (Array.isArray(a[key])) {
          // перебираем массив
          a[key].forEach(function (item) {
            // если элемент массива является массивом, то продолжаем
            if (Array.isArray(item)) {
              // если его длина 2, то продолжаем
              if (item.length === 2) {
                // если значение второго элемента является 0, то продолжаем
                if (item[1] === 0) {
                  // помещаем найденное значение в результат
                  result.push(item[0]);
                }
              }
            }
          });
        }
      };
      
      // выводим результат в консоль
      console.log(result.join(', '));
      
    2. Александр
      Александр
      2019-10-03 16:02:20
      Спасибо огромное. А как быть с объектом в объекте? Как его можно вывести на экран? Получается надо дважды перебрать for in или обратиться как-то с рекурсией?

      let countryInform = {
      Thailand: {

      'population':'68 6158 58',
      'capital': 'Bangkok'
      },
      China: {

      'population': '1 404 328 611',
      'capital':'Pekin'
      },
      India: {

      'population':'1 349 857 000',
      'capital': 'Deli'
      },

      }
    3. Александр Мальцев
      Александр Мальцев
      2019-10-04 01:39:41
      Зачем? Просто нужно обратиться к значениям по ключам (именам свойств) объекта.
      Это можно выполнить с помощью одного цикла for..in:
      for (key in countryInform) {
        // выводим название страны
        console.log('Страна = ' + key);
        // выводим население страны
        console.log('Население = ' + countryInform[key]['population']);
        // выводим столицу страны
        console.log('Столица = ' + countryInform[key]['capital']);
        console.log('===');
      }
      
    4. Александр
      Александр
      2019-10-04 01:53:11
      Спасибо.
    5. Петр
      Петр
      2020-01-26 20:11:44
      Александр, будьте добры, подскажите как реализовать.
      Вывожу данные на html страницу из json'а.
      $('document').ready(function(){
          loadGoods();
      });
      function loadGoods() {
          $.getJSON('zkprods.json', function (data) {
              var out = '';
              for (var key in data){
                  out+='<div class="product-card-wrap">';
                  out+='<div class="product-card">';
                  out+='<img src="'+data[key].image+'">';
                  out+='<p class="product-name">'+data[key]['name']+'</p>';
                  out+='<hr>';
                  out+='<p class="product-description">'+data[key]['des']+'</p>';
                  out+='<p class="product-description">'+data[key]['des2']+'</p>';
                  out+='</div>';
                  out+='<div class="bottom-part-weight">';
                  out+='<img src="ves.png">'
                  out+='<p class="product-weight">'+data[key]['weight']+'</p>';
                  out+='</div>';
                  out+='</div>';
              }
              $('#prodzk').html(out);
          })
      }
      Json примерно такой

      {
      	"mr7" : {
      		"image" : "1.png",
      		"name" : "2",
      		"des" : "3",
      		"des2" : "4",
      		"weight" : "5 г"
      	},
      	"mr7" : {
      		"image" : "1.png",
      		"name" : "2",
      		"des" : "3",
      		"des2" : "4",
      		"weight" : "5 г"
      	},
      	"zk5" : {
      		"image" : "1.png",
      		"name" : "2",
      		"des" : "3",
      		"des2" : "4",
      		"weight" : "5 г"
      	},
      	"zk6" : {
      		"image" : "1.png",
      		"name" : "2",
      		"des" : "3",
      		"des2" : "4",
      		"weight" : "5 г"
      	},
      	"zk7" : {
      		"image" : "1.png",
      		"name" : "2",
      		"des" : "3",
      		"des2" : "4",
      		"weight" : "5 г"
      	}
      }
      Как организовать вывод по определенным ключам? Например выводить только «mr» или только «zk».
      Или для каждого дива свой json и скрипт создавать? Правильно ли так?
    6. Александр Мальцев
      Александр Мальцев
      2020-01-27 14:17:02
      Можно так:
      function loadGoods() {
        $.getJSON('zkprods.json', function (data) {
          var out = '';
          var q = 'mr';
          for (var key in data) {
            if (key.indexOf(q) !== 0) {
              continue;
            }
            out += '<div class="product-card-wrap">';
            ...
      
      q — это переменная, в которой находится ключ.
      Далее проверяем, если в key нет этого ключа, то переходим к следующей итерации.
    7. Петр
      Петр
      2020-01-27 15:12:34
      Спасибо за ответ, учту если пригодится :) А так, пока ответа ждал решил просто массивы выводить и json не нужен уже, информации не так много для вывода :)