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

Добрый день! Код функции, генерирующей объект пользователя с полями name, age и job:

const randomPerson = () => {
  const name = ['Мария', 'Елена', 'Ирина', 'Светлана', 'Есения'];
  const job = ['teacher', 'lawyer', 'journalist', 'doctor', 'seller'];
  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  return {
    name: name[0, random(0, name.length - 1)],
    age: random(18, 30),
    job: job[0, random(0, job.length - 1)]
  }
}

Пример на CodePen: codepen.io/itchief/pen/JjmwbvB

Спасибо огромное!

Добрый день! В функции, вы сначала создаёте переменную out со значением пустая строка. Далее в переменные a и b складываете значения из соответствующих <input>. Потом запускаете цикл, то есть перебираете свойства в a6. Но в a6 вы не добавили новое ключ-значение. И поэтому в out получаете строку только из того, что было в a6 на момент запуска цикла for..in. То, что вы добавили в a6 внутри цикла a6[a] = b у вас сработает только при следующем запуске этого цикла. Поэтому это срабатывает у вас после второго клика.

function f6() {
  let out = '';
  const a = document.querySelector('.i-61').value;
  const b = document.querySelector('.i-62').value;
  for (let key in a6) {
    a6[a] = b;
    out += key + ':' + a6[key] + '<br>';
  }
  document.querySelector('.out-6').innerHTML = out;
}

Поэтому, чтобы ваш пример корректно работал, нужно просто инструкцию a6[a] = b; поместить до цикла:

function f6() {
  let out = '';
  const a = document.querySelector('.i-61').value;
  const b = document.querySelector('.i-62').value;
  a6[a] = b;
  for (let key in a6) {
    out += key + ':' + a6[key] + '<br>';
  }
  document.querySelector('.out-6').innerHTML = out;
}

Александр, спасибо вам большое!

Привет! Пожалуйста! Эту задачку можно решить очень большим количеством способов. Например, так:

let arr1 = [3, 3, 1, 2]
let arr2 = [4, 2, 2]

const colors = {
  1: 'blue',
  2: 'green',
  3: 'red',
  4: 'black'
}

arr1 = arr1.map(item => colors[item])
arr2 = arr2.map(item => colors[item])

console.log(arr1) // ['red', 'red', 'blue', 'green']
console.log(arr2) // ['black', 'green', 'green']

Александр, большое спасибо! Я представлял себе более сложную функцию, но оказалось очень просто.

Добрый день! Можно конечно попроще организовать структуру answerArr. В данном случае можно написать следующую функцию для получения текста вопроса из массива:

const getAnswer = (questionIndex, answerNum) => {
  const question = answerArr.find(el => el['questionIndex'] === questionIndex);
  if (question) {
    return question[answerNum];
  }
}
// пример
getAnswer(3, 4); // 'answer4'

Огромное Вам спасибо! Действительно, очень изящное решение!

А вообще, так сказать, для общего развития - существуют какие-то функции или алгоритмы для сравнения двух ассоциативных массивов между собой (на предмет совпадений)?

Если нужно сравнить на полное совпадение, то можно через JSON:

JSON.stringify(arr1) === JSON.stringify(arr2)

Если необходимо отдельно по ключам, то, например, через forEach:

const arr1 = {
  a: 1,
  b: 'xyz',
  c: true
}
const arr2 = {
  a: 2,
  b: 'xyz',
  c: true,
  d: null
}
Object.keys(arr1).forEach((key) => {
  if (arr1[key] === arr2[key]) {
    console.log(`[${key}]: ${arr1[key]}`);
  }
});

<button type="button">Кнопка</button>
<script>
  const radius = 5;
  document.querySelector('button').onclick = () => {
    const square = Math.PI * radius * radius;
    alert(`Площадь круга с радиусом ${radius} см: ${square.toFixed(2)} см2`);
  }
</script>

const date = '2025-12-31';
const arr = date.split('-');
const result = arr.reverse().join('/');
console.log(result);

const value = test1.get('t3');

// создаём массив из Map
const array = Array.from(test1, ([name, value]) => ({ name, value }));
// получаем значение по индексу
const value = array[2].value;

for (let key in products) {
  // если products[key]['category'] не равно 'vegetable', то тогда переходим к следующей итерации
  if (products[key]['category'] !== 'vegetable') {
    continue;
  }
  ...
}

const person = {
  name: 'Иван',
  age: 23
}

// установим ключу name новое значение 'Иван'
person['name'] = 'Иван';

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;
}

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>';
  }
}

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);

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']);
}

<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>

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

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

// переменная, для хранения результата
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(', '));

for (key in countryInform) {
  // выводим название страны
  console.log('Страна = ' + key);
  // выводим население страны
  console.log('Население = ' + countryInform[key]['population']);
  // выводим столицу страны
  console.log('Столица = ' + countryInform[key]['capital']);
  console.log('===');
}

$('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);
    })
}

{
	"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 г"
	}
}

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">';
      ...