JavaScript数组push方法未按预期生效，为何代码块1失效而代码块2可运行？

核心原理 #

JSON.parse() 每次被调用时，都会基于输入的JSON字符串生成一个全新的、独立的JS对象/数组，每次返回的结果都存储在不同的内存地址中，互相之间没有关联。 #

代码块1无法生效的原因 #

你的代码块1一共调用了3次JSON.parse(jsonValue)，每次返回的都是完全独立的数组：

1. 第一次调用是在if判断条件里，得到数组A，仅用来做非空校验
2. 第二次调用是执行push操作的时候，得到数组B，你给这个数组B追加了新元素，但操作完成后数组B没有被任何变量引用，直接被JS引擎回收
3. 第三次调用是console.log的时候，得到全新的数组C，这个数组从来没有执行过push操作，所以打印出来的自然是原始数据，看不到新增的内容

代码块2生效的原因 #

你贴出的代码块2存在明显的粘贴笔误，按照你写的内容逻辑和代码块1完全一致，是不会正常生效的。推测你实际运行的可生效代码应该是下面的版本：

const jsonValue = await AsyncStorage.getItem('@custom_layout');
const myData = JSON.parse(jsonValue);
if (myData != null) {
  myData.push(placeholder[0]);
  console.log(myData);
}

这个版本的逻辑是：

1. 只调用一次JSON.parse(jsonValue)，将反序列化得到的数组存在myData变量里
2. 后续非空判断、push操作、打印操作都是针对同一个myData数组进行，修改会直接作用在这个数组对象上，自然能看到追加后的结果

额外注意 #

你当前的写法就算修改正确，也只是修改了内存中的数组，没有重新调用AsyncStorage.setItem把修改后的数组序列化存回本地存储，下次从AsyncStorage取数据的时候还是会拿到旧的内容，要完成完整的存储流程需要补充对应的写入逻辑。

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