Angular 从全局变量复制的本地数组更新时同步修改全局变量如何解决？

遗漏的核心知识点 #

你遇到的现象是JavaScript 引用数据类型的赋值特性导致的：

• 字符串、数字、布尔等基础值类型赋值时会直接拷贝值，两个变量完全独立互不影响
• 数组、对象等引用类型赋值时仅拷贝内存指针，不会生成新的独立副本。你当前代码中直接把全局的favBook赋值给本地变量时，两个变量指向内存中的同一个数组，任意一侧修改都会同步影响另一侧。

正确实现方案 #

你需要在赋值时对全局的数组做拷贝生成本地独立副本，根据数组的元素类型选择对应方案：

场景1：数组元素都是基础类型（字符串、数字等） #

使用浅拷贝即可满足需求，三种常用写法：

• 扩展运算符写法（最简洁）：

this.favBook = [...this.gc.userData.favBook]

• slice方法：

this.favBook = this.gc.userData.favBook.slice()

• Array.from方法：

this.favBook = Array.from(this.gc.userData.favBook)

场景2：数组元素是对象/嵌套数组 #

需要做深拷贝才能完全脱离全局数据的影响：

• 普通数据结构（无函数、Symbol、BigInt等特殊类型）可以用JSON序列化实现：

this.favBook = JSON.parse(JSON.stringify(this.gc.userData.favBook))

• 复杂数据结构可以使用工具函数实现深拷贝，比如lodash的cloneDeep方法：

this.favBook = _.cloneDeep(this.gc.userData.favBook)

提交时更新全局数据 #

用户确认提交后再手动把修改后的本地数据同步回全局即可，示例：

submitForm() {
  // 表单校验、提交接口等逻辑完成后更新全局变量
  const updatedUserData = {
    ...this.gc.userData,
    favBook: this.favBook
  }
  this.gc.setUserData(updatedUserData)
}

额外注意 #

你原代码ngOnInit方法中给favBook赋值时遗漏了this指向，需要修正为this.favBook = xxx，否则会触发变量未定义的报错。

内容的提问来源于stack exchange，提问作者Mohan Kumar P R