深入浅析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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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
PHP 网页过期时间的控制代码
2009/06/29 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python yield关键词案例测试
2019/10/15 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
化学实验员岗位职责
2013/12/28 职场文书
学校门卫管理制度
2014/01/30 职场文书
连带责任保证书
2014/04/29 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
酒桌上的开场白
2015/06/01 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang