资讯专栏INFORMATION COLUMN

从一个诡异的bug发现js变量作用域问题

VishKozus / 2984人阅读

摘要:分支分支以上代码产生了一个表面上看起来会很诡异的问题,就是如果的分支情况下,有时候会导致外层的循环回头,即明明最外层已经循环到的最后一个了,跑完分支之后,外层循环又回头执行。

for (var i = 0; child && i < child.length; i++) {
            var obj = child[i];
            var kind = child[i].kind;
            var deiveId = child[i].id;
            if (kind == "4") {//分支1
                 // do sometjing
            }else{//分支2
                for(i in arr){
                   //do something
                }
            }

以上代码产生了一个表面上看起来会很诡异的问题,就是如果kind!=4的分支2情况下,有时候会导致外层的for循环回头,即:明明最外层已经循环到child的最后一个了,跑完分支2之后,外层for循环又回头执行。

原因分析:
我想专业人士不像我这么渣的话会发现问题在变量i,此处i并不会成为块级变量,而是函数级,分支2中的i变化会导致外层i变化,从而导致循环回头。
js在ES6之前没有块级作用域,只分为全局作用域和函数级作用域,此处i为函数级作用域,而我们用它做循环索引的时候其实是想当作块级作用域使用。

解决办法

想要达到块级作用域效果可以使用ES6语法的let关键字实现:

for(let i=0;i

或者只针对解决上述问题,不必纠结作用域问题的话,我用了更low一些但可以解决问题的,那就是分支2就不用i,换成j一样可行。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95199.html

相关文章

  • 前端_JavaScript

    摘要:为此决定自研一个富文本编辑器。例如当要转化的对象有环存在时子节点属性赋值了父节点的引用,为了关于函数式编程的思考作者李英杰,美团金融前端团队成员。只有正确使用作用域,才能使用优秀的设计模式,帮助你规避副作用。 JavaScript 专题之惰性函数 JavaScript 专题系列第十五篇,讲解惰性函数 需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意...

    Benedict Evans 评论0 收藏0
  • 前端编码规范

    摘要:去掉无用的代码使用主动语态避免一连串松散结构的代码逻辑把相关的变量函数放在一起。该处代码运行正常,但可能由于时间赶或者其他原因,需要修正。此时需要对思路或诡异手段进行描述。 命名规范 变量名, 函数名 小驼峰【命名法 camel Case】: numberOfPeople 第一个单词的首字母小写;第二个单词开始每个单词的的首字母大写 组件名 大驼峰【命名法 Camel Case】: ...

    YJNldm 评论0 收藏0
  • PHP 一个诡异加法算法研究

    摘要:然而实际上,这个结果反而是正确的。结论我认为出现这种诡异的结果应该算是的,同时,这也说明了此种问题不太容易被发现和暴露,这要求我们平常写代码的时候尽量使用常用的语法,和精干的语句,让代码和逻辑达到最佳的平衡点。 前言 之前我在面试的时候,遇到许多年轻人都声称自己精通php,有过许多项目经验等等。然而,当真正笔试的时候,我问到 $result=1; if(-1){ $result=2;...

    gekylin 评论0 收藏0
  • vue总结系列--组件化

    摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...

    cuieney 评论0 收藏0
  • js作用和this理解

    摘要:总结总而言之,作用域在语法分析时就已经处理完啦,的作用域是静态作用域,在运行时只是上下文对象在一直发生变化。 JavaScript 的作用域和上下文对象this 从几个有意思的js问题开始 为什么输出的不是f2? `var scope = top; var f1 = function() { console.log(scope); }; f1(); //...

    李文鹏 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<