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

Александр Мальцев
Александр Мальцев
141K
37
Содержание:
  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);

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

  1. barmalej
    barmalej
    31.01.2021, 15:47
    Приветствую!
    const test1 = new Map([
        ['t1', 'content1'],
        ['t2', 'content2'],
        ['t3', 'content3'],
        ['t4', 'content4'],
        ['t5', 'content5']
    ]);
    
    А как можно вытащить content3, зная что это значение у третьего элемента?
    1. Александр Мальцев
      Александр Мальцев
      31.01.2021, 16:05
      Привет!
      Получить значение элемента по ключу можно так:
      const value = test1.get('t3');
      
      1. barmalej
        barmalej
        31.01.2021, 16:15
        Да, но я не знаю значение ключа.
        Я знаю, что это третий элемент (по порядку).
        1. Александр Мальцев
          Александр Мальцев
          31.01.2021, 16:38
          Тогда нужно преобразовать объект Map в массив:
          // создаём массив из Map
          const array = Array.from(test1, ([name, value]) => ({ name, value }));
          // получаем значение по индексу
          const value = array[2].value;
          
          1. barmalej
            barmalej
            31.01.2021, 16:57
            Да, наверно это лучшее решение. Спасибо!
    2. Rostislav
      Rostislav
      03.01.2021, 01:13
      Доброго времени суток!) Александр, подскажите пожалуйста, как сравнить свойства объекта? Мне нужно вывести овощи в отдельном списке, вот код заранее спасибо!!!
      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. Александр Мальцев
        Александр Мальцев
        03.01.2021, 16:14
        Привет!
        Например, так (в этом случае у вас отобразятся только овощи):
        for (let key in products) {
          // если products[key]['category'] не равно 'vegetable', то тогда переходим к следующей итерации
          if (products[key]['category'] !== 'vegetable') {
            continue;
          }
          ...
        }
        
      2. oleksii
        oleksii
        03.11.2020, 17:20
        отличная статья, для чайников, как я не хватает инфы (добыта эксперементальным путем):
        — при попытке добавления в массив пары ключ=>значения, при совпадении ключа — новый элемент не добавляется, ошибки нет
        1. Александр Мальцев
          Александр Мальцев
          04.11.2020, 06:42
          Спасибо! В статье этот момент описан, может, конечно, не так явно. А именно: если данный ключ уже имеется в ассоциативном массиве, то этот код просто изменит значение существующего ключа.

          Таким образом, когда вы пытаетесь добавить в ассоциативный массив (объект) ключ, который уже имеется в нём, то он конечно в него ещё раз не будет добавлен. В этом случае просто произойдёт операция присвоения этому ключу нового значения. Если это значение такое же, то всё равно оно будет перезаписано новым значением, хоть оно и точно такое же.
          const person = {
            name: 'Иван',
            age: 23
          }
          
          // установим ключу name новое значение 'Иван'
          person['name'] = 'Иван';
          
        2. Andrey
          Andrey
          19.07.2020, 21:41
          Добрый день Александр, как можно с Вами связаться.Мне нужно написать небольшой скрипт на js(За деньги), для сайта, если Вы сможете и у Вас есть время, то свяжитесь со мной или напишите, что нет.
          1. Александр Мальцев
            Александр Мальцев
            20.07.2020, 13:03
            Привет! Email для связи расположен в конце страницы.
          2. Влад Волинчук
            Влад Волинчук
            01.07.2020, 12:55
            Раз уж все тут задают вопросы, попробую и я)
            Почему {0:5}[0] выдаёт ошибку, а +{0:5}[0] нет? Понятно, что операция "+" может пытаться превратить обьект в число, но в таком случае было бы NaN[0]. Со строками такой проблемы нет, т.е. {a:5}[a] работает нормально, и ({0:5})[0] тоже
            1. Александр Мальцев
              Александр Мальцев
              01.07.2020, 16:55
              Эти случаи 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 понимает что вы хотите. Т.к. операнд «()» имеет более высокий приоритет чем «[]».
            2. Maksim
              Maksim
              22.06.2020, 10:21
              Здравствуйте. Подскажите пожалуйста, как справиться с задачей, в статье не нашёл.
              Полный текст задачи:
              При нажатии 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. Александр Мальцев
                Александр Мальцев
                22.06.2020, 14:00
                Здравствуйте! Для доступа к свойству используйте []:
                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;
                }
                
              2. Алеша
                Алеша
                01.05.2020, 02:56
                Александр, доброго времени суток, подскажите, если не затруднит...., третий день «бьюсь» не могу дать толку…
                есть данные:
                 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. Александр Мальцев
                  Александр Мальцев
                  01.05.2020, 12:44
                  Привет! Для этого данные необходимо преобразовать данные в удобный для вывода вид.
                  Например:
                  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 в нужный элемент страницы.
                  1. Алеша
                    Алеша
                    01.05.2020, 14:18
                    Спасибо большое!!!
                    Указали правильный путь!!!
                    Я совсем и забыл про replace!!!.. а то получал массив из 12 элементов и не знал как его дальше преобразовать.
                    Ещё раз СПАСИБО!!!
                2. Aliaksandr Zhuk
                  Aliaksandr Zhuk
                  09.02.2020, 11:14
                  Добрый день.
                  Подскажите, как из такой разметки получить данные (название — 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. Александр Мальцев
                    Александр Мальцев
                    09.02.2020, 16:22
                    Вам нужно создать массив, в котором каждый его элемент будет являться объектом и состоять из 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']);
                    }
                    
                    1. Aliaksandr Zhuk
                      Aliaksandr Zhuk
                      10.02.2020, 11:53
                      Большое спасибо, Александр!
                  2. Andrei Krivisheev
                    Andrei Krivisheev
                    11.12.2019, 18:38
                    Прошу прощения за тупой вопрос)) но как можно добавить ключ выводимый из input?? ))
                    1. Александр Мальцев
                      Александр Мальцев
                      12.12.2019, 14:46
                      Расскажите подробнее, что вы хотите сделать? HTML элемент input имеет только атрибуты. Что вы подразумеваете под ключом и куда его нужно добавить?
                      1. Andrei Krivisheev
                        Andrei Krivisheev
                        12.12.2019, 14:58
                        есть два input в html, значение введенное в первый input, должно создавать новый ключ в ассоциативном массиве, а значение из второго input, записывать значение этого ключа.
                        1. Александр Мальцев
                          Александр Мальцев
                          12.12.2019, 15:30
                          Это можно выполнить так (например, при нажатии на кнопку получаем значение этих 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>
                    2. multidem
                      multidem
                      30.11.2019, 07:50
                      Здравствуйте, я не понял простой вещи, как перебрать в цикле объекты в массиве с разными именами? Подскажите пож.
                      Чтобы вывести на экран 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. Александр Мальцев
                        Александр Мальцев
                        01.12.2019, 08:56
                        Привет!
                        Это, например, можно выполнить с помощью цикла 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
                        
                        1. multidem
                          multidem
                          01.12.2019, 18:54
                          Спасибо, Александр! Трудно было бы догадаться самостоятельно о такой конструкции. Хотя я уже понял, что имя объектов можно вообще выбросить ):

                          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
                          
                          1. Александр Мальцев
                            Александр Мальцев
                            03.12.2019, 14:28
                            Да, если они не нужны, то их конечно можно не использовать.
                      2. Александр
                        Александр
                        03.10.2019, 13:11
                        Александр, отличная статья.
                        Подскажите, а как можно достучаться до массивов вложенных в ассоциативный.

                        Допустим есть асс. массив:
                        let a = {
                          b: [['Иван', 0], 'Татьяна', 'Ирина'],
                          c: ['Сергей', 'Карп', ['Тамара', 1]],
                          d: [['Петр', 1], 'Иван', ['Николай', 0]]
                        }
                        
                        Как из него получить имена, у которых вторым значением идет 0?
                        1. Александр Мальцев
                          Александр Мальцев
                          03.10.2019, 13:48
                          Спасибо.
                          Это можно решить таким скриптиком:
                          // переменная, для хранения результата
                          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(', '));
                          
                          1. Александр
                            Александр
                            03.10.2019, 16:02
                            Спасибо огромное. А как быть с объектом в объекте? Как его можно вывести на экран? Получается надо дважды перебрать 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'
                            },

                            }
                            1. Александр Мальцев
                              Александр Мальцев
                              04.10.2019, 01:39
                              Зачем? Просто нужно обратиться к значениям по ключам (именам свойств) объекта.
                              Это можно выполнить с помощью одного цикла for..in:
                              for (key in countryInform) {
                                // выводим название страны
                                console.log('Страна = ' + key);
                                // выводим население страны
                                console.log('Население = ' + countryInform[key]['population']);
                                // выводим столицу страны
                                console.log('Столица = ' + countryInform[key]['capital']);
                                console.log('===');
                              }
                              
                              1. Петр
                                Петр
                                26.01.2020, 20:11
                                Александр, будьте добры, подскажите как реализовать.
                                Вывожу данные на 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 и скрипт создавать? Правильно ли так?
                                1. Александр Мальцев
                                  Александр Мальцев
                                  27.01.2020, 14:17
                                  Можно так:
                                  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 нет этого ключа, то переходим к следующей итерации.
                                  1. Петр
                                    Петр
                                    27.01.2020, 15:12
                                    Спасибо за ответ, учту если пригодится :) А так, пока ответа ждал решил просто массивы выводить и json не нужен уже, информации не так много для вывода :)
                                2. Александр
                                  Александр
                                  04.10.2019, 01:53
                                  Спасибо.
                          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.