一道关于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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
JS修改css样式style浅谈
May 06 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 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
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
详解python3中tkinter知识点
2018/06/21 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
深入了解Django中间件及其方法
2019/07/26 Python
python字典的常用方法总结
2019/07/31 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
华为慧通面试题
2012/09/11 面试题
小学生母亲节演讲稿
2014/05/07 职场文书
红头文件任命书范本
2014/06/05 职场文书
会计专业求职信范文
2015/03/19 职场文书
国际贸易实训总结
2015/08/03 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电