JavaScript forEach 循环：同步任务与执行顺序？

Question

目前生产出现了，handleDealData()返回的结果是[],并非是forEach执行后的数组，此问题偶发。
但是查了资料，解释说forEach的循环是同步任务。

            handleDealData: function () {
                var self = this
                var initData = self.deepCopyInitData;
                console.log("🐅  initData--->", initData)
                var val = []
                initData.forEach(function (obj, key) {
                    var _newObj_ = {
                        impartTarget: self.impartTarget,
                        insuredMark: self.insuredMark,
                        impartCode: obj.questList.notificationCode,  
                        showContent: obj.question,     
                        impartAnser: '',                  
                        showAnser: obj.active ? self.identity + ':' + obj.remark : '',
                        demo: obj.active ? obj.result : ''
                    }
                    var TAndF = Number(obj.active)
                    var allResult = obj.allResult
                    if (typeof obj.allResult !== "string") {
                        allResult = allResult.join('#')
                    }
                    _newObj_.showAnser = _newObj_.showAnser.replace(_newObj_.showContent, '')
                    _newObj_.impartAnser = TAndF + ',' + allResult
                    val.push(_newObj_)
                })
                return val
            },

chrome测试正常，返回非[]
forEach的执行顺序是否跟机型、浏览器有关？

Answer 1

forEach是同步任务，所以就不要老盯着他看了，可以看看其他的地方。

handleDealData返回的val是空数组，val是根据initData循环来的，所以可以看下initData是不是空。

另外，console打印的是快照，也就是你点击展开显示的值和你打印时的值可能不一样（中间你修改了这个数据），所以，可以猜测也有可能是后面更改了val

Answer 2

一、关于 forEach 及其变化

forEach 是同步的，这里的代码抽象一下，可以看到是这个结构：

const newArray = [];  // 产生一个空数组
oldArray.forEach(() => {
    const aObj = ..;
    newArray.push(aObj); // 每次循环插入一个数据
});
// 得到有数据的 newArray

这个结构可以直接使用 .map 来实现，即把 .forEach() 变更为 .map：

const newArray = oldArray.map(() => {
   const aOjb = ...;
   return aObj
});

如果处理过程中存在 if 分支，并不是每次都会 push，那可以在 map 前（或后）使用 filter，来过滤数据。

参阅：JavaScript 数据处理 - 列表篇

二、关于 console.log

console.log 输出的是一个对象，而这个对象在实际渲染输出的时候，使用的是终值，并不一定是 console.log 执行时的值。

如果需要打印如当时的信息，最好是通过 JSON.stringify 或者是选择一部分属性（值）拼接成字符串（用模板字符串比较方便）来显示。注意使用 JSON.stringify 处理对象的时候可能需要处理循环引用问题。

比如

console.log("initData --->", JSON.stringify(initData, null, 2));