一道关于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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
js获取微信版本号的方法
May 12 Javascript
javascript元素动态创建实现方法
May 13 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
小程序实现短信登录倒计时
Jul 12 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
理解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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Vue中props的详解
2019/05/16 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
详解vue 命名视图
2019/08/14 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python实现代码统计工具
2019/09/19 Python
Python decimal模块使用方法详解
2020/06/08 Python
Python之多进程与多线程的使用
2021/02/23 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
小学生环保标语
2014/06/13 职场文书
社区活动策划方案
2014/08/21 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
银行求职自荐信范文
2015/03/04 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
教你用python控制安卓手机
2021/05/13 Python