一道关于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事件处理器中的event参数使用介绍
May 24 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
express express-session的使用小结
Dec 12 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
javascript实现简单留言板案例
2021/02/09 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python 实时遍历日志文件
2016/04/12 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python中一行和多行import模块问题
2018/04/01 Python
python 编写简单网页服务器的实例
2018/06/01 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
入党介绍人评语
2014/05/06 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL