在使用forEach循环遍历一个数组,如果循环时有异步方法,会导致最终深拷贝得不到最新数据,但是控制台会打印最新的数据
const arr = [
{ name: "Jone", age: 18 },
{ name: "Tom", age: 15 },
{ name: "Liu", age: 48 }
];
function funTimeout (param) {
return new Promise((resolve) => {
setTimeout(() => { resolve(170) }, 1000)
})
};
function getData () {
arr.forEach(async (item) => {
const res = await funTimeout(item);
item.height = res
});
console.log(arr, 'arrr');
console.log(JSON.parse(JSON.stringify(arr)), 'copyArr');
}
getData()
上面代码在控制台执行的结果,如图
使用JSON.parse(JSON.stringify())深拷贝后,height属性为追加到arr 数组中。刚开始以为是JSON.parse(JSON.stringify())的原因,还是使用lodash的_.cloneDeep,发现结果是一样的,
最后发现,这是由于forEach不会等待异步方法执行完成,以下是 MDN 的解释
解决方法:
1、使用原始的 for 循环;
2、使用 map 和 promise.all()
这个问题凸显出自己本身Js基本功还不扎实,需要加强练习