一道关于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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JavaScript实现拖动对话框效果的实现代码
Oct 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
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js原型链原理看图说明
2012/07/07 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
python3 模拟登录v2ex实例讲解
2017/07/13 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
MySQL面试题目集锦
2016/04/14 面试题
采购内勤岗位职责
2013/12/10 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
道德之星事迹材料
2014/05/03 职场文书
员工试用期自我评价
2014/09/18 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
单位接收证明格式
2015/06/18 职场文书
水浒传读书笔记
2015/06/25 职场文书
python基础之文件处理知识总结
2021/05/23 Python