那些前端工作中遇到的坑(01)

栏目: JavaScript · 发布时间: 5年前

内容简介:前段时间接手一个老项目(jQuery+React混在一块)的迁移工作,除了用你以为这样就结束了?一大堆bug在等着,整整改了半个月,虽然都是些小问题,但整天被测试钉来钉去还是蛮头疼的。现在来说说今天的主角吧,这是一个不起眼的问题,最初发现的时候很让人摸不着头脑。

前段时间接手一个老项目(jQuery+React混在一块)的迁移工作,除了用 React 重写一些 vm+jQuery 的老页面(这种至少是自己写的,心里有数,调起来也省心),剩下的就是将原有的React迁到新仓库里,复制!粘贴!改路径!完事!是个体力活。

你以为这样就结束了?一大堆bug在等着,整整改了半个月,虽然都是些小问题,但整天被测试钉来钉去还是蛮头疼的。

现在来说说今天的主角吧,这是一个不起眼的问题,最初发现的时候很让人摸不着头脑。

part one

const res = request(url);
console.log(res);   // { stat: 'ok', data: { value: 1, childs: [1, 2, 3] } }
复制代码

上面的代码很普通,但是打开控制台的Network去看这个接口的返回结果是: { stat: 'ok', data: { value: 1, children: [1, 2, 3] } } ,你没有看错,返回的数据中是 children ,而 console.log 打印出来的是 childs ,是不是很不可思议?接下来我们逐一排查问题。

part two

const res = request(url);
console.log(JSON.stringify(res));   // { stat: 'ok', data: { value: 1, children: [1, 2, 3] } }
console.log(res);   // { stat: 'ok', data: { value: 1, childs: [1, 2, 3] } }
复制代码

这里我们把 res 转成字符串再输出,和直接输出对比发现转成字符串后的结果是和接口返回的结果一样的,都是 children 。看到这里相信有不少小伙伴已经清楚是怎么回事了,但应该也有部分同学脑子里全是问号了(比如当时的我)。

那些前端工作中遇到的坑(01)
如果光是靠这些线索,确实还没发定位问题。那我们进一步探索,既然出问题的的是 res

,那就顺藤摸瓜,找到使用他的地方。然后就发现了这段代码:

res.data.children = res.data.childs;
delete res.data.childs;
复制代码

原来是为了换字段,直接操作了源数据,而对象,数组都是引用类型的,so...

那难道 console.log 难道是异步执行的吗,不然代码顺序执行的话前面输出的结果应该是对的呀?

这么说其实不准确,我们把同样的代码换个方式执行,比如node.js:

那些前端工作中遇到的坑(01)
那些前端工作中遇到的坑(01)

然后跟在浏览器中执行对比一下:

那些前端工作中遇到的坑(01)

这样就很清晰了,我们都知道js需要一个运行环境,而 console.log 的执行跟运行的环境有关。而通过 JSON.stringify 转成字符串再输出相当于给 res 拍了一次快照(记录了他最初的样子),后面再操作该对象也不会影响到这个字符串(你操作对象关我字符串什么事)。

问题搞清楚了,下面要考虑的就是怎么解决以及以后如何避免。

归根到底就是一句话:

不要操作源数据!

不要操作源数据!

不要操作源数据!

使用之前深拷贝一下,可以使用最简单粗暴的 JSON.parse(JSON.stringify(res))

鸡汤:坑踩多了不要紧,反正后面还多着呢


以上所述就是小编给大家介绍的《那些前端工作中遇到的坑(01)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript编程精解

JavaScript编程精解

Marijn Haverbeke / 徐涛 / 机械工业出版社华章公司 / 2012-10-1 / 49.00元

如果你只想阅读一本关于JavaScript的图书,那么本书应该是你的首选。本书由世界级JavaScript程序员撰写,JavaScript之父和多位JavaScript专家鼎力推荐。本书适合作为系统学习JavaScript的参考书,它在写作思路上几乎与现有的所有同类书都不同,打破常规,将编程原理与运用规则完美地结合在一起,而且将所有知识点与一个又一个经典的编程故事融合在一起,读者可以在轻松的游戏式......一起来看看 《JavaScript编程精解》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具