var和const和let的区别
简述:
1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量)
2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let.
var 不会报错,有声明提升,会显示undefined(一个变量未初始化);
function show(falg){
// var a;//**声明提升,初始化为undefined,函数体(作用域)的最前排
console.log(a);//undefined
if(falg){
var a ="111";
console.log(a); //111
}else{
console.log(a);//undefined
}
}
show(true);
show(false);
var a = "123";
var a = "456";//覆盖,同名,let不会,要报错Identifier 'a' has already been declared(已被声明)。
console.log(a);
const/let访问范围
function show(falg){ // JavaScript引擎在扫描代码发现变量 TDZ暂时性死区(有let申明)
console.log(a);//报错: a is not defined //a 放入(未申明引用报错)
if(falg){//在第134行和第137行的大括号之间,
let a="111";
console.log(a); // 111 //a 移除(已申明引用移除)
}else{
console.log(a);//报错: a is not defined //a 放入(未申明引用报错)
}
}
show(true);
show(false);
const/let不同作用于可同名,同一作用于不可同名;
function show(falg){
let a="222";
// let a="333";//Identifier 'a' has already been declared
console.log(a);// 222
if(falg){
let a="111";
console.log(a); // 111
}else{
console.log(a);// a is not defined
}
}
show(true);
// show(false);
二.var 和 const/let 的区别
1.const/let:声明变量,声明的是局部变量
用途及区别:ES6新增了let命令,用来声明变量,类似于var ,但是声明的变量只在let所在的代码块的内部有效
let不存在变量提升,这个要注意哟
- 暂时性的死区(Temporal Dead Zone),简写为 TDZ:
只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响
let 和 const 声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会导致报错:
console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;
复制代码这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将它们提升到作用域顶部(遇到 var 声明),要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后方可访问。
- 不允许重复声明
内部的数据有了let声明过之后不允许重复声明
for循环的处理
var funcs = [];
for (var i = 0; i < 3; i++) {
//for (let i = 0; i < 3; i++) {
console.log(i);
funcs[i] = (function(i){
return function() {
console.log(i);
}
}(i))
}
funcs[0](); // let输出的结果是0;var输出的结果是3
for (var i = 0; i < 3; i++) {
var c = "123";//一次123
// let c = "123";//三次123
console.log(c);
}
使用let
var funcs = [];
for (let i = 0; i < 3; i++) {
funcs[i] = function () {
console.log(i);
};
}
funcs[0](); // 0
funcs[1](); // 1
funcs[2](); // 2
分解:
(let i = 0) {
funcs[0] = function() {
console.log(i)
};
}
(let i = 1) {
funcs[1] = function() {
console.log(i)
};
}
(let i = 2) {
funcs[2] = function() {
console.log(i)
};
};
let value = 1;
console.log(window.value); //undefined
再比较const和let的区别:
1.const定义衡量:
不可以重新赋值,但是可以给对象的属相重新赋值.
const data = {
value: 1
}
// 没有问题
data.value = 2;
data.num = 3;
报错
data = {}; // X Uncaught TypeError: Assignment to constant variable.(分配恒定的变量)
优点:const 意味着该标识符不能被重新赋值。
让它在代码中的使用尽可能的清晰。使用一个变量对应代表一个东西.
2.let 在定义后可能还会修改,可变,越来越多的被使用在循环和算法上面。
ES6兼容性问题?bable转义成ES5,用例:
需要安装 ES5的bable: npm install babel-core@5
C:\Users\Administrator\node_modules\babel-core
目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)
我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。
babel转义具体实现:
if (false) {
let a = 1;
// var a=1;//如果直接将let改成var,直接编译成 var,打印的结果肯定是 undefined
var _a = 1;//然而 Babel 很聪明,它编译成了内层变量名不一致
}
console.log(a); // Uncaught ReferenceError: a is not defined
// const 的修改值时报错,以及重复声明报错怎么实现的呢?
// 其实就是在编译的时候直接给你报错