一道关于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创建自己的插件(自定义插件)的方法
Jun 10 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
详解如何使用Node.js实现热重载页面
May 06 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的简单采集数据入库程序
2014/07/30 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Smarty模板配置实例简析
2019/07/20 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
自荐信的五个重要部分
2013/10/29 职场文书
公司出纳岗位职责
2013/12/07 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python