银行前端面试高频基础问题——var、let和const到底有哪些区别？讲不清楚当场发感谢信！？

银行前端面试高频基础问题——var、let和const到底有哪些区别？讲不清楚当场发感谢信！？

• 面试官：知道const、let和var吧，说说他们的区别吧

• 我：… …

前言

可以说这是银行我们面试遇到的最高频的一个问题，也是一个很基础的问题了。所以，我们定然在这个问题上，不能讲不清楚，那就当场发感谢信了。当然，除此之外深入的还需要去了解一下const和let的实现原理。

let

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明；
2. 块儿级作用域（局部变量）；
3. 不存在变量提升；
4. 不影响作用域链；

示例

// let关键字使用示例：let a; // 单个声明let b,c,d; // 批量声明let e = 100 ; // 单个声明并赋值let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值

不允许重复声明

let dog = "狗";let dog = "狗";// 报错：Uncaught SyntaxError: Identifier 'dog' has already beendeclared

块儿级作用域（局部变量）

{let cat = "猫";console.log(cat);}console.log(cat);// 报错：Uncaught ReferenceError: cat is not defined

不存在变量提升

// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；console.log(people1); // 可输出默认值console.log(people2); // 报错：Uncaught ReferenceError: people2 is not definedvar people1 = "大哥"; // 存在变量提升let people2 = "二哥"; // 不存在变量提升

不影响作用域链：

// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用{            let p = "大哥";var s;               //p的作用域是块(花括号内)级的，而s的作用域为函数作用域全局            function fn() {                console.log(p); // 这里是可以使用的            }            fn();        }

应用场景

以后声明变量使用 let 就对了；

let案例：点击div更改颜色

 // 获取div元素对象        let items = document.getElementsByClassName('item');        //ES5错误解法        for (var i = 0; i < items.length; i++) {            items[i].onclick = function () {                items[i].style.background = 'pink';                 alert('点击了' + i + '个')            }            // 由于点击事件是异步的，i又是全局的，所以每个item用的i都是同一个i。        }        //ES5解法1        for (var i = 0; i < items.length; i++) {            items[i].onclick = function () {                this.style.background = 'pink'; // 写法一：常规写法一般无异常                alert('点击了' + i + '个')            }        }        //ES5解法1        for (var i = 0; i < items.length; i++) {            //使用闭包，控制作用域            (function (i) {                items[i].onclick = function () {                    items[i].style.background = 'pink'; // 写法二                    alert('点击了' + i + '个')                }            })(i)        }        // ES6解法        for (let i = 0; i < items.length; i++) {            items[i].onclick = function () {                // 修改当前元素的背景颜色                // this.style.background = 'pink'; // 写法一：常规写法一般无异常                items[i].style.background = 'pink'; // 写法二                // 写法二：需要注意的是for循环内的i必须使用let声明 //点击事件是异步的                // 如果使用var就会报错，因为var是全局变量，                // 经过循环之后i的值会变成3，items[i]就会下标越界                // let是局部变量                // 我们要明白的是当我们点击的时候，这个i是哪个值                // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3                // 由于let声明的是局部变量，每一个保持着原来的值                // 点击事件调用的时候拿到的是对应的i            }        }

const

const 关键字用来声明 常量 ，const 声明有以下特点：

1. 声明必须赋初始值·；
2. 标识符一般为大写（习惯）；
3. 不允许重复声明；
4. 值不允许修改；
5. 块儿级作用域（局部变量）；

注:当常量为对象时，值不允许修改含义是指向的对象不能修改，但是可以改变对象内部的属性

示例

        // const声明常量        const DOG = "旺财";        console.log(DOG);        // 1\. 声明必须赋初始值；        // const CAT;        // 报错：Uncaught SyntaxError: Missing initializer in const  declaration        // 2\. 标识符一般为大写（习惯）；        // const dog = "旺财"; // 小写也不错        // 3\. 不允许重复声明；        // const CAT = "喵喵";        // const CAT = "喵喵";        // 报错：Uncaught SyntaxError: Identifier 'CAT' has already been declared       //  注意：对数组元素的修改和对对象内部的修改是可以的（数组和对象存的是引用地址）；        // 4\. 值不允许修改；        // const CAT = "喵喵";        // CAT = "咪咪";        // 特例：const arr = ['55','66'];        // arr.push('77');  //arr的中已经接上了‘77’ 这是因为arr指向的地址并没有发生改变        // 报错：Uncaught TypeError: Assignment to constant variable.        // 5\. 块儿级作用域（局部变量）；        // {        // const CAT = "喵喵";        // console.log(CAT);        // }        // console.log(CAT);        // 报错：Uncaught ReferenceError: CAT is not defined

应用场景：

声明对象类型使用 const，非对象类型声明选择 let；

var、let和const的区别

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问. 并不是全局作用域

2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

4. var声明的变量存在变量提升现象，let和const声明的变量不存在变量提升现象（遵循：“先声明，后使用”的原则，否则会报错）。

5. var不存在暂时性死区，let和const存在暂时性死区。

   解析：只要块级作用域内存在let命令，那么它所声明的变量就会绑定到这个区域，不再受外部的影响。

6. var允许重复声明同一个变量，let和const在同一作用域下不允许重复声明同一个变量。

   解析：var允许重复声明变量，后一个变量会覆盖前一个变量，const和let会报错。

HTML

浏览器页面有哪三层构成，分别是什么，作用是什么?
HTML5的优点与缺点？
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
HTML5有哪些新特性、移除了哪些元素？
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
说说你对HTML5认识?（是什么,为什么）
对WEB标准以及W3C的理解与认识?
HTML全局属性(global attribute)有哪些?
说说超链接target属性的取值和作用？
iframe有哪些缺点？
Label的作用是什么，是怎么用的？
如何实现浏览器内多个标签页之间的通信?
谈谈你对canvas的理解？

CSS

解释一下CSS的盒子模型？
请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
请你说说CSS有什么特殊性” />

JavaScript

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
js拖拽功能的实现
异步加载js的方法
js的防抖与节流
说一下闭包
说说你对作用域链的理解
JavaScript原型，原型链 ? 有什么特点？
请解释什么是事件委托/事件代理
Javascript如何实现继承？
函数执行改变this
babel编译原理
函数柯里化
说一下类的创建和继承
说说前端中的事件流
如何让事件先冒泡后捕获
说一下图片的懒加载和预加载
js的new操作符做了哪些事情
改变函数内部this指针的指向函数（bind，apply，call的区别）
Ajax解决浏览器缓存问题

如果你需要这份完整版的面试笔记，可以

React

React单项数据流
react生命周期函数和react组件的生命周期
react和Vue的原理，区别，亮点，作用
reactJs的组件交流
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
项目里用到了react，为什么要选择react，react有哪些好处
怎么获取真正的dom
选择react的原因
react的生命周期函数
setState之后的流程
react高阶组件知道吗？
React的jsx，函数式编程
react的组件是通过什么去判断是否刷新的
如何配置React-Router
路由的动态加载模块
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发

浏览器

跨标签页通讯
浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8垃圾回收机制
内存泄露
reflow(回流)和repaint(重绘)优化
如何减少重绘和回流” />

服务端与网络

HTTPS和HTTP的区别
HTTP版本
从输入URL到页面呈现发生了什么？
HTTP缓存
缓存位置
强缓存
协商缓存
缓存的资源在那里
用户行为对浏览器缓存的影响
缓存的优点
不同刷新的请求执行过程
为什么会有跨域问题
如何解决跨域
访问控制场景（简单请求与非简单请求）
withCredentials 属性
服务器如何设置CORS
URL类中的常用方法

算法与数据结构

二叉树层序遍历
B树的特性，B树和B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
说一下冒泡快排的原理
Heap排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数

最后

跳槽是升职涨薪最直接有效的方式，备战2021金九银十，各位做好面试造火箭，工作拧螺丝的准备了吗？

掌握了这些知识点，面试时在激烈竞争中又可以夺目不少。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。

如果你需要这份完整版的面试笔记，可以点击这里直达领取方式！