关于JS循环中索引的问题

Question

代码如下，考虑到i的循环问题，用闭包把i传了进去，，里面的console.log中image是正确的，但是push进去后最终得到的imageList却全部都是1，好奇怪，不知道是哪里写错了

const sliderImages = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6}]
const imageList = [];
  const len = Math.ceil(12 / 6);
  for (let i = 0; i < len; i++) {
    (function (index) {
      sliderImages.forEach((image) => {
        image.fancybox = `list-${index}`;
        console.log('image', image);
        imageList.push(image);
      })
    })(i);
  }
  console.log('imageList', imageList);

内部的console.log都是有0、有1后缀的

push出来的全部都是1了

Answer 1

 image.fancybox = `list-${index}`;

第二次循环把对象的这个之改掉了

Answer 2

imageList.push(JSON.parse(JSON.stringify(image)));

Answer 3

楼上答到点上了。
一般不建议在遍历对象数组的时候，给数组加属性

// 外层for循环跑了两次
sliderImages.forEach((image) => {
        // 两次循环都是给sliderImages遍历的每个元素对象赋值fancybox，所以第二次赋值覆盖了第一次
        image.fancybox = `list-${index}`;
        console.log('image', image);
        imageList.push(image);
})

要达到想要的效果，你可以考虑每次遍历造一个变量

sliderImages.forEach((old) => {
        // 如果old只是一层对象的话，直接拷贝一个，避免修改到原数组
        const image = {...old};
        image.fancybox = `list-${index}`;
        console.log('image', image);
        imageList.push(image);
      })