проблема JavaScript с внутренним циклом

Question

Я пытаюсь зациклить 3 массива и создать группу детей с уникальными идентификаторами

Но по какой-то причине свойство id не получает уникальное значение (см. Результаты консоли)

Я пробовал разные способы, например, использовал forEach, использовал closures, использовал локальные переменные.никто из них не работает.

const alpha = [{ name: 'AAA', value: 'a' }, { name: 'BBB', value: 'b' }, { name: 'CCC', value: 'c' }], 
	numeric = [{ name: 'ONE', value: '1' }, { name: 'TWO', value: '2' }, { name: 'THREE', value: '3' }], 
	symbol = [{ name: 'AT', value: '@' }, { name: 'HASH', value: '#' }, { name: 'DOLLAR', value: '$' }];

const result = alpha.map(a => {
  a.children = numeric.map(n => {
    n.children = symbol.map(s => {
      s.id = a.value + n.value + s.value;
      return s;
    });
    n.id = a.value + n.value;
    return n;
  });
  a.id = a.value;
  return a;
})


console.log(result[0].children[0].children[0].id)   // should be "a1@"
console.log(result[1].children[0].children[0].id)   // should be "b1@"
console.log(result[2].children[0].children[0].id)   // should be "c1@"

Answer 1

Проблема в том, что вы модифицируете свои входные объекты, поэтому один и тот же (например) s изменяется несколько раз.Вот почему вы видите только последние alpha и numeric в своих идентификаторах - они запускаются последними, поэтому были последними, кто изменил общий объект.

Чтобы это исправить, верните новый объект с вашим ID, и все должно быть хорошо:

const alpha = [{ name: 'AAA', value: 'a' }, { name: 'BBB', value: 'b' }, { name: 'CCC', value: 'c' }], 
	numeric = [{ name: 'ONE', value: '1' }, { name: 'TWO', value: '2' }, { name: 'THREE', value: '3' }], 
	symbol = [{ name: 'AT', value: '@' }, { name: 'HASH', value: '#' }, { name: 'DOLLAR', value: '$' }];

const result = alpha.map(a => {
  a.children = numeric.map(n => {
    n.children = symbol.map(s => {
      return { ...s, id: a.value + n.value + s.value };
    });
    return { ...n, id: a.value + n.value };
  });
  return { ...a, id: a.value };
})


console.log(result[0].children[0].children[0].id)   // should be "a1@"
console.log(result[1].children[0].children[0].id)   // should be "b1@"
console.log(result[2].children[0].children[0].id)   // should be "c1@"

Answer 2

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

symbol.map(s => {  // s is always a reference to the same set of objects object
   s.id = a.value + n.value + s.value;
   return s;
});

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

const alpha = [{ name: 'AAA', value: 'a' }, { name: 'BBB', value: 'b' }, { name: 'CCC', value: 'c' }], 
	numeric = [{ name: 'ONE', value: '1' }, { name: 'TWO', value: '2' }, { name: 'THREE', value: '3' }], 
	symbol = [{ name: 'AT', value: '@' }, { name: 'HASH', value: '#' }, { name: 'DOLLAR', value: '$' }];

const result = alpha.map(a => {
  a.children = numeric.map(n => {
    n.children = symbol.map(s => {
      s.id = a.value + n.value + s.value;
      return s;
    });
    n.id = a.value + n.value;
    return n;
  });
  a.id = a.value;
  return a;
})

// these are the same objects:
console.log("0 & 1 Same reference?", result[0].children[0].children[0] === result[1].children[0].children[0])

console.log("1 & 2 Same reference?", result[1].children[0].children[0] === result[2].children[0].children[0])