[JavaScript] 多數(shù)前端工程師都沒(méi)注意到的一個(gè)關(guān)于console.log()的坑
請(qǐng)閱讀以下代碼并猜測(cè)結(jié)果：

function test() {let obj = {}, arr=[]for(var i = 0; i < 4; i++) {obj.first = iobj.second = i+1obj.three = i+2arr.push(obj)}console.log(arr)}test()

輸出結(jié)果為：

為什么輸出結(jié)果不是以下這個(gè)？

我要說(shuō)的坑不是這個(gè)，因?yàn)橄嘈胚@個(gè)引用類(lèi)型的賦值問(wèn)題很多伙伴都能輕松解決。以下提供兩種解決方案：
（方法一），將let obj={}移到for循環(huán)中，每次循環(huán)創(chuàng)建一個(gè)新對(duì)象：

function test() {let arr=[]for(var i = 0; i < 4; i++) {let obj = {}obj.first = iobj.second = i+1obj.three = i+2arr.push(obj)}console.log(arr)}test()

能得到預(yù)期結(jié)果：

（方法二）：使用ES6新特性O(shè)bject.assign，輕松實(shí)現(xiàn)深復(fù)制，這樣的好處是不用每次都創(chuàng)建一個(gè)新對(duì)象：

function test() {let obj= {}, arr=[]for(var i = 0; i < 4; i++) {obj.first = iobj.second = i+1obj.three = i+2arr.push(Object.assign({}, obj))}console.log(arr)}test()

同樣能得到預(yù)期結(jié)果：

問(wèn)題都解決了，那么我說(shuō)的坑是什么呢？
接下來(lái)我們將解決了以上問(wèn)題的代碼作出以下修改，將console.log移到循環(huán)中，如下：

function test() {let obj= {}, arr=[]for(var i = 0; i < 4; i++) {obj.first = iobj.second = i+1obj.three = i+2arr.push(Object.assign({}, obj))console.log(arr)}}test()

請(qǐng)先預(yù)測(cè)一下結(jié)果是什么再看以下答案。
運(yùn)行結(jié)果為：

每次循環(huán)輸出的都是最后的值，是不是有點(diǎn)驚訝？我們?cè)賮?lái)看一點(diǎn)更驚訝的，在輸出數(shù)組前數(shù)組一下數(shù)組的長(zhǎng)度console.log(arr.length)，如下：

function test() {let obj= {}, arr=[]for(var i = 0; i < 4; i++) {obj.first = iobj.second = i+1obj.three = i+2arr.push(Object.assign({}, obj))console.log(arr.length)console.log(arr)}}test()

同樣，先預(yù)測(cè)運(yùn)行結(jié)果再看以下答案。
運(yùn)行結(jié)果為：

第一次循環(huán)輸出數(shù)組的長(zhǎng)度是1，看起來(lái)也是只有一個(gè)對(duì)象，這很符合預(yù)期；但是為什么展開(kāi)后，里邊會(huì)有四個(gè)對(duì)象？第二次循環(huán)數(shù)組長(zhǎng)度是2，看起來(lái)有兩個(gè)對(duì)象，這符合預(yù)期，但是點(diǎn)開(kāi)后為什么里邊也是有四個(gè)對(duì)象？這就是我說(shuō)的坑！！！

原因：
使用console.log()輸出引用類(lèi)型值時(shí)，console.log的實(shí)際執(zhí)行會(huì)推遲，相當(dāng)于“惰性”求值，遇上數(shù)組、對(duì)象這樣的引用類(lèi)型就出上面的問(wèn)題了，也就是我們點(diǎn)擊箭頭打開(kāi)的時(shí)候，才會(huì)輸出真正的值，而這時(shí)候循環(huán)早就已經(jīng)執(zhí)行完了，所以輸出的會(huì)是循環(huán)執(zhí)行完后的結(jié)果！

測(cè)試
我們可以將arr轉(zhuǎn)成非引用類(lèi)型的數(shù)據(jù)格式，來(lái)證明我們的想法，如下：

function test() {let obj= {}, arr=[]for(var i = 0; i < 4; i++) {obj.first = iobj.second = i+1obj.three = i+2arr.push(Object.assign({}, obj))console.log(arr.length)console.log(JSON.parse(JSON.stringify(arr)))}}test()

顯然，結(jié)果已經(jīng)符合預(yù)期，猜測(cè)正確！！

完結(jié)~ 午休一會(huì)~~~

總結(jié)

以上是生活随笔為你收集整理的[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。