一道关于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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
js获取php变量的实现代码
Aug 10 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
理解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 curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
基python实现多线程网页爬虫
2015/09/06 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
工程专业求职自荐书范文
2014/02/18 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技