JavaScript数组赋值后新变量随原数组意外变更问题咨询

嘿，这个问题我太熟悉了！你碰到的是JavaScript里引用类型的经典陷阱——数组属于引用类型，直接赋值的时候并没有复制整个数组，只是把指向原数组的内存引用给了新变量。

咱们来拆解你的代码看看：

let reference = "I was sent* to Earth,* to protect you." 
let orders = reference.split("*").map(s => s.toLowerCase().replace(/\,|\?|\!|\:|\./g,'').trim()); 
let answer = orders; // 这里不是复制数组，只是让answer和orders指向同一个数组！

这时候orders和answer其实是“共享”同一个数组实例的，就像两个人拿着同一扇门的钥匙，不管谁开门/改门里的东西，另一个人看到的都是同一个结果。所以当你执行orders.push(orders.shift());时，你修改的是这个共同的数组，answer自然也会跟着变化。

怎么解决？你需要真正复制一份数组 #

下面几种方法都能帮你创建原数组的独立副本，修改原数组就不会影响新变量了：

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

  let answer = [...orders];
  

• Array.from()方法：

  let answer = Array.from(orders);
  

• slice()方法：

  let answer = orders.slice(); // 不传参数默认复制整个数组
  

• concat()方法：

  let answer = [].concat(orders);
  

修改后的代码示例 #

咱们把你的代码改成用扩展运算符复制，运行看看效果：

let reference = "I was sent* to Earth,* to protect you." 
let orders = reference.split("*").map(s => s.toLowerCase().replace(/\,|\?|\!|\:|\./g,'').trim()); 
let answer = [...orders]; // 这里改成真正复制数组
console.log(orders) 
console.log(answer) 
// 仅修改orders而非answer！
orders.push(orders.shift()); 
// 现在orders变化，answer保持原样啦
console.log(orders) 
console.log(answer)

这样执行后，orders会按照你的预期修改，而answer会保留最初的数组内容，不会跟着变化了~

内容的提问来源于stack exchange，提问作者user5607806