使用forEach循环异步方法,导致使用深拷贝时,得不到最新数据,控制台会打印出最新的数据

在使用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基本功还不扎实,需要加强练习

相关推荐
Myli_ing17 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风19 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave26 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟28 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚3 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷4 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript