Question

我喜欢解释为什么这个功能的结果不符合我的期望。

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

async function(domain) {
  let matrix = []
  objects.forEach((object) => {
    numbers.forEach((number) => {
      object.number = number
      matrix.push(object)
    })
  }) 
  return matrix
}()

实际

结果，一旦承诺得到解决，就会返回：

[ 
  { f: 'a', number: 2 },
  { f: 'a', number: 2 },
  { f: 'b', number: 2 },
  { f: 'b', number: 2 } 
]

预期

但是，我的期望是它会回归：

[ 
  { f: 'a', number: 1 },
  { f: 'a', number: 2 },
  { f: 'b', number: 1 },
  { f: 'b', number: 2 } 
]

最令我困惑的事情之一是，如果我在推动之前console.log对象的值，它会在我预期的结果中注销掉每个对象。

Answer 1

因为对象是通过引用传递的，而您正在修改原始对象，所以您可以推送新对象。

＆＃13;

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

let matrix = []
objects.forEach((object) => {
  numbers.forEach((number) => {
    matrix.push({...object, number})
  })
})

console.log(matrix)

＆＃13;

Answer 2

使用嵌套Array#map来迭代objects和number以及Object#assign以创建包含该数字的新对象。使用spread syntax中的Array#concat展平生成的嵌套数组：

＆＃13;

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

const matrix = [].concat(... // flatten the nested arrays
  objects.map((o) => // map the objects
    numbers.map( // map the numbers
      (number ) => Object.assign({}, o, { number }) // return a new object with the number
    )
  ));

console.log(matrix);

＆＃13;

Answer 3

@Nenad是正确的。您也可以使用缩小和地图。

const numbers = [ 1, 2 ];
const objects = [{f: 'a'}, {f: 'b'}];

const matrix = numbers.reduce((acc, nxt) => {
	const numberedObjs = objects.map(obj => ({...obj, number:nxt}));
	acc.push(...numberedObjs);
	return acc;
}, []);

使用嵌套的forEach循环来推送和对象到数组

实际

预期

3 个答案: