Js-----数组中push对象，覆盖问题，每次都新建一个对象

最新推荐文章于 2025-06-12 13:44:18 发布

原创最新推荐文章于 2025-06-12 13:44:18 发布 · 9.1k 阅读

6 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在JavaScript中向数组添加对象时遇到的问题：修改一个数组元素导致所有元素变化。通过内存引用分析，指出了问题根源，并给出了正确的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇见问题：向JS数组中添加对象，想改变一个数组元素的值，结过一个改变，剩下的全部改变。

代码如下：


let data: any = {
        floor:'',
        name:'',
        hls_url:'',
        videoId:0,
        id:0,
        isShow:false,
        sort: 0
      };

for(let i=0;i<this.showVideoList.length;i++) {
      data.sort = i+1; 
      this.showVideoList[i] = data;
 }
在执行了上述代码之后，输出的JS数组中每个sort元素的值都是一样的，未循环最后sort的值。

原因：一切都是引用数据类型引起的！上述代码，因为只新建了一个对象，然后给数组中的每个元素，相当于数组中的每个元素所指向的都是同一个对象，所以一个当data改变时，数组中所有元素也会发生改变。因为指向的是同一个对象。内存分析图如下：


修改方法：每次给数组元素赋值的时候，都新建一个对象，确保数组中的每个引用指向的不是同一个对象，修改之后的代码如下：

for(let i=0;i<this.showVideoList.length;i++) {
      let data: any = {
        floor:'',
        name:'',
        hls_url:'',
        videoId:0,
        id:0,
        isShow:false,
        sort:(i+1)
      };
      this.showVideoList[i] = data;
    }

到这问题就完美解决了！