一道关于JavaScript变量作用域的面试题


Posted in Javascript onMarch 08, 2016

小编觉得这道题对理解JavaScript 作用域还是很有帮助的,特此又把自己的解题思路梳理了一遍,希望对其它人有所帮助。

首先看下面试题:

var arr = [1, 2, 3];
  for (var i = 0, j; j = arr[i++];) {
    console.log(j);
  }

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

在解题前,我们先回顾下 JavaScript 中,变量域相关的知识。

全局变量(Global)
全局变量是指在任何地方都可以访问的变量,有两种情况

在 function 外面声明,不论是否用 var 关键字
在 function 里面声明,不使用 var 关键字,当然声明的语句必须被执行才可以
局部变量(Local )
局部变量只能在被声明的 function 内部才能访问
在 function 里面声明,使用 var 关键字
两点要注意的地方

先看代码:

alert(i); // 输出 undefined
 
 for (var i = 0; i < 1; i++){};
 
 alert(i); // 输出1

JavaScript 不存在语句作用域,在语句内定义的变量会扩散到语句外边, 例子中 i 在 for 语句中声明,但是在 for 语句的外面任然可以访问
在 for 语句之前就可以访问到 i ,只不过这时候还没有被赋值
开始我们的解题

i++ 是在 i 使用后再自加:

第一次执行时,j=arr[0],之后 i=1,console.log(j) 输出 1

第二次执行时,j=arr[1],之后 i=2,ocnsole.log(j) 输出 2

第三次执行时,j=arr[2],之后 i=3,ocnsole.log(j) 输出 3

第四次(不符合 for  条件),j=arr[3] 为 undefined,之后 i=4,ocnsole.log(j) 没有输出,退出 for 循环

for 语句执行结束后,console.log(i) 由上分析可知输出 4,console.log(j) 输出 undefined

最后输出结果为:

2
---------
---------
undefined
---------

针对上面的分析和结果,想必大家都已经搞清楚了吧,然后我们开始举一反三吧。

借题改题一
题目:
var arr = [1, 2, 3];

for (var i = 0, j; j = arr[++i];) {
    console.log(j);
  }

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

答案:

2
3
---------
3
---------
undefined
---------

借题改题二
题目:

function xxx() {
    var arr = [1, 2, 3];
    for (var i = 0, j; j = arr[i++];) {
      console.log(j);
    }
  }
  xxx();

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

答案:

1
2
3
---------
报错:Uncaught ReferenceError: i is not defined

为大家就分享到这,希望对大家理解JavaScript作用域有所帮助。

Javascript 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 #Javascript
javascript对象的创建和访问
Mar 08 #Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 #Javascript
使用JQuery实现智能表单验证功能
Mar 08 #Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 #Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 #Javascript
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
Use Word to Search for Files
2007/06/15 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
激励员工的口号
2014/06/16 职场文书
毕业生实习证明
2014/09/19 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年团委工作总结
2014/11/13 职场文书
会计师事务所实习证明
2014/11/16 职场文书
公司档案管理制度
2015/08/05 职场文书