`
阅读更多

【前言】

    本文谈下常见的一道JS面试题,let声明变量与var的区别,块级作用域等

 

【主体】

    篇幅问题,部分放到文章JS中的let和var的区别里。

    

    (1)面试题:接下来看到面试题

编写一个函数,该函数将遍历整数列表,并在延迟3秒后打印每个元素的索引

   

    (2)错误写法:经常错误写法是这样的:

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

   如果运行上面代码,3 秒延迟后你会看到,实际上每次打印输出是 4,而不是期望的 0,1,2,3 。

   为了正确理解为什么会发生这种情况,了解为什么会在 JavaScript 中发生这种情况将非常有用,这正是面试官试图测试的内容。

 

   (3)原因解析:

   原因是因为 setTimeout 函数创建了一个可以访问其外部作用域的函数(闭包),该作用域是包含索引 i 的循环。 经过 3 秒后,执行该函数并打印出 i 的值,该值在循环结束时为 4,因为它循环经过0,1,2,3,4并且循环最终停止在 4。

    (4)解决方案

   1、解决方案有很多种,最简单的一种就是用let方法(将上面的var改为let即可)

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

   原因:ES6可以用let定义块级作用域变量,稍后详解

   2、闭包

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000)
}

 

 

    (5)拓展:块级作用域

    详情看文章浅谈JS块级作用域

 

 

 

.

分享到:
评论

相关推荐

    2021年前端面试题汇总包括腾讯华为等前端面试题

    本压缩包文件名为"2021腾讯华为、前端面试题.pdf",它集合了腾讯、华为等知名企业的前端面试问题,旨在帮助求职者更好地准备面试,展示其在Vue、ES6、React、JavaScript以及小程序开发方面的专业技能。 首先,我们...

    js面试题面试题面试题

    根据给定的文件信息,以下是对每一道JS面试题的知识点进行详细解析: ### 第一题:编写一个方法求一个字符串的字节长度 #### 解析: 在这道题目中,我们需要编写一个函数来计算字符串的字节长度。这里的重点在于...

    前端开发面试题、腾讯华为前端面试题

    接着,ES6是现代JavaScript的基础,面试题通常包括箭头函数、解构赋值、模板字符串、let/const与var的区别、Promise和async/await的运用,以及新增的数组方法如find、findIndex、includes等。ES6编程题可能要求实现...

    搜集了众多经典高频前端面试题和大厂前端面试题以及相关代码题 pdf.pdf

    本资源汇总了众多经典高频前端面试题和大厂前端面试题,以及相关代码题。通过详细解释和代码实现,涵盖了JavaScript基础、前端笔试题、web前端等知识点。 一、JavaScript基础 1. 手写Object.create思路:将传入的...

    前端75道经典面试题.rar

    在准备前端面试的过程中,了解并熟练掌握各类面试题是至关重要的。"前端75道经典面试题.rar"这个压缩包提供了互联网大厂常问的75道前端面试题,覆盖了基础到进阶的多个层面,是提升你面试能力的理想资料。以下是一些...

    js面试题下载

    面试题集合通常包含各种问题,旨在考察候选人在JS基础、jQuery库以及Ajax技术方面的理解和应用能力。现在,让我们深入探讨这些关键知识点。 1. **JavaScript基础**: - 变量与数据类型:了解`var`, `let`, `const`...

    JavaScript面试题阿里巴巴JavaScript面试题 阿里巴巴

    ### JavaScript面试题解析 #### 一、ES6的新语法 ES6(ECMAScript 6)是JavaScript语言标准的一个重要版本,它引入了许多新的特性和语法改进,旨在提高开发效率和代码可读性。以下是一些重要的新特性: 1. **let ...

    17.Vue3面试真题(6题).pdf

    ### Vue3面试真题知识点详解 #### 一、Composition API 的引入及意义 - **背景**:Vue3中推出的Composition API被广泛认为是Vue3最重要的特性之一。它旨在解决Vue2中存在的若干问题,特别是当项目逐渐庞大时,代码...

    Rust常见面试题.pdf

    ### Rust常见面试题详解 #### 1. Rust是一种什么类型的编程语言?请简要介绍Rust语言的特点和优势。 Rust是一种系统级编程语言,它由Mozilla基金会开发,旨在提供高性能的同时保持内存安全性。Rust的设计哲学强调...

    js常见面试题

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域,它的地位尤为重要。...在压缩包文件“面试题”中,可能会包含这些概念的实际题目,建议逐一解答并深入研究,以提高自己的JavaScript技能。

    ES6经典面试题.docx

    "ES6经典面试题" ES6(ECMAScript 6)是JavaScript的一种标准,自2015年发布以来,已经成为前端开发的 industry standard。下面是对ES6的一些经典面试题的解答和知识点总结: 1. ES5、ES6 和 ES2015 有什么区别? ...

    js面试技巧,面试题总结,MK

    这份"js面试技巧,面试题总结,MK"文档显然包含了作者在学习过程中整理的JS面试重点和常见问题,对于准备JS面试或者巩固基础知识的人来说是一份宝贵的资料。 在JS面试中,以下知识点经常会被考察: 1. **基础概念*...

    JS、CSS、HTML面试题

    ### CSS面试题知识点: 1. **选择器**:掌握ID选择器(#id),类选择器(.class),元素选择器(tag),以及组合选择器(如后代选择器,子元素选择器,相邻兄弟选择器等)。 2. **盒模型**:理解CSS盒模型,包括...

    ES6经典面试题

    **ES6经典面试题** 在JavaScript的世界里,ES6(ECMAScript 2015)引入了许多新的特性和语法糖,极大地提升了开发者的效率和代码的可读性。ES6已经成为现代JavaScript开发的标准,因此理解和掌握ES6的特性对于任何...

    2021年前端面试题汇总 高清pdf完整版

    《2021年前端面试题汇总》是一个全面的前端面试资源,涵盖了JavaScript基础到高级、CSS以及常用Web框架的相关面试题目。这份资料对于正在准备前端面试的开发者来说,是一份极具价值的学习材料。以下是对其中关键知识...

    几个大公司前端面试题

    - 面试题中可能会涉及到JavaScript的基本语法,如变量声明(var, let, const的区别),作用域(全局/局部,函数作用域,块级作用域),闭包,以及原型链等概念。 - 另外,事件处理、DOM操作、异步编程(回调、...

    java面试题中

    Java面试题全集中涵盖了许多Java Web和Web Service相关的知识点,这些是Java开发人员在面试过程中经常遇到的主题。让我们深入探讨一下这些关键领域的核心概念和重要问题。 **Servlet** Servlet是Java编程语言中用于...

    收集的前端面试题和答案

    在前端开发领域,面试题是检验开发者技能和知识深度的重要方式。这个名为"收集的前端面试题和答案"的资源包含了一系列与前端相关的知识点和面试问题,覆盖了JavaScript的各个方面,特别是那些“其它杂项”类的问题,...

    JavaScript常见面试题共41页.pdf.zip

    这份名为“JavaScript常见面试题共41页.pdf”的压缩文件,显然包含了41页关于JavaScript面试的常见问题和解答,旨在帮助求职者准备技术面试。从标签“JavaScript常见面试题共”可以看出,它涵盖了JavaScript的基础...

    Java/Jsp面试题汇总

    Java/Jsp面试题汇总主要涵盖了Java编程语言及JSP(JavaServer Pages)的相关技术要点,这些知识点是面试中经常被问到的,也是开发者必备的基础技能。以下是对这些主题的详细解析: 1. **Java基础知识**: - 类与...

Global site tag (gtag.js) - Google Analytics