深入浅析var,let,const的异同点


Posted in Javascript onAugust 07, 2018

一、let和var区别

1.关于变量提升,var能变量提升,let不能

// 关于var 如下所示
console.log(a); //输出undefined,此时就是变量提升
var a = 2;  
console.log(a); //2

//相当于下面的代码
var a; //声明且初始化为undefined
console.log(a); //输出undefined
a=2;    //赋值
console.log(a); //2

// 关于let 如下所示
console.log(a); // 报错ReferenceError
let a = 2;
//相当于在第一行先声明a但没有初始化,直到赋值时才初始化

//直接用let声明变量不赋值是会打印undefined,这时候初始化了
let a;
console.log(a);//值为undefined

2.暂时性死区:块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响重点内容,简而言之,就是某个代码块有let指令,即使外部有名称相同的变量,该代码块的同名变量与外部的变量也互不干扰。而var不会,如下所示:

//let
var a = 123;
if (true) {
 let a="abc";
 console.log(a); //输出abc 
}
console.log(a);  //输出值为123,全局a与局部a互不影响

//var
var a = 123;
if (true) {
 var a="abc";
 console.log(a); //输出abc 
}
console.log(a);  //输出值为abc,全局的已被改变

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。例子如下:

var tmp=1;
if (true) {
 // TDZ开始
 tmp = 'abc'; // ReferenceError
 console.log(tmp); // ReferenceError

 let tmp; // TDZ结束
 console.log(tmp); // undefined

 tmp = 123;
 console.log(tmp); // 123
}
console.log(tmp); //

3.let声明绑定的代码块内,不能重复声明同一个变量,var可以

//a不能重复声明
function sub() {
 let a = 10;
 var a = 1;
}  //报错,Identifier 'a' has already been declared

function sub() {
 let a = 10;
 let a = 1;
}  //同上

function sub() {
 let a = 10;
 {let a = 1;} //此时不在同一个代码块,不会报错
} 

//var可以重复声明,不会报错
function sub() {
 var a = 10;
 var a = 1;
}

4.类似for循环的代码块,let只在代码块内部有效,var在代码块外部也有效

//let只在代码块内部有效
for (let i = 0; i < 10; i++) {}
console.log(i); //报错ReferenceError: i is not defined

//var在代码块外部也有效
for (let i = 0; i < 10; i++) {}
console.log(i); //101

let在for循环内特别之处:就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
//只在父作用域
var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
  console.log(i);
 };
}
a[6](); // 6

//子作用域重新声明
var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
   let i=3; //重新赋值
   console.log(i);
 };
}
a[6](); // 3 ,取得新的值

二、let和const

1、相同点:

A、变量不提升。
B、暂时性死区,只能在声明的位置后面使用。
C、不可重复声明。

2、不同点:

let声明的变量可以改变。
const声明一个只读的常量。一旦声明,常量的值就不能改变,且声明的时候必须初始化赋值。
let a;  //undefined
const b;//报错,声明的时候必须赋值

let a=1;
a=2;    //可改变

const b=1;
b=2;    //报错,不能改变值

//一些自己觉得要注意的点
let a=null;         //a=null
a=undefined;    //a=undefined
a=2;            //a=2
const a=null;   //a=null,const也可以定义null和undefined
const b=undefined;   //b=undefined
b=2;            //报错,不能改变值

本质:

const实际上保证的,并不是变量的不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

A、五种基本数据类型(Number,String,Boolean,Undefined,Null):值就保存在变量指向的那个内存地址,等同于常量。不能改变值。

B、复杂数据类型(Object:数组、对象):该类型变量名不指向数据,而是指向数据所在的地址,const只保证变量名指向的地址不变,并不保证改地址的数据不变,因此可以对该地址的属性值进行修改,但是不能改变地址指向。

const a=[];
a.push("Hello"); //可执行,改地址的属性值可以修改
a.length=0;   //可执行,同上
a=["Tom"];   //报错,不能改变地址指向

const b ={};
b.prop=123;   //为b添加一个属性,可以成功
b.prop    //123
b={};    //将b指向另外一个地址,就会报错

如果真的想将对象冻结,应该使用Object.freeze方法。
const b=Object.freeze({});
// 常规模式时,下面一行不起作用,b.prop为undefined
// 严格模式时,该行会报错
b.prop = 123;

总结

以上所述是小编给大家介绍的var,let,const的异同点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
js活用事件触发对象动作
Aug 10 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
jquery实现页面加载效果
Feb 21 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 #Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 #Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 #Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 #Javascript
js实现图片上传并预览功能
Aug 06 #Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 #Javascript
微信小程序网络封装(简单高效)
Aug 06 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python管理Windows服务小脚本
2018/03/12 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
pandas实现导出数据的四种方式
2020/12/13 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
某公司部分笔试题
2013/11/05 面试题
致跳远运动员加油稿
2014/02/11 职场文书
股权转让协议书范本
2014/04/12 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
护士医德医风自我评价
2014/09/15 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技