javascript 内循环问题

Question

我正在尝试循环 3 个数组并生成一组具有唯一 ID 的子元素

但由于某种原因，属性 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 被修改了多次。这就是为什么您只能在 ID 中看到最后一个 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@"