var 重新赋值,重新定义,作用域 属于:function scope;
let 声明的变量只在 let 命令所在的代码块内有效,Block scope。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
传送门:https://www.runoob.com/w3cnote/es6-let-const.html
对比一:作用域:var:function scope,所以以下代码,var totalPrice 为全局;let,const为块级作用域,只作用在if条件范围内;
var price = 10; var count = 10; if (count > 5) { var totalPrice = 10 * 0.9; console.log(`var totalPrice:${totalPrice}`); } console.log(totalPrice);//成功输出9 这里的totalPrice是全局变量,可以访问
var price = 10; var count = 10; if (count > 5) { let totalPrice = 10 * 0.9; console.log(`let totalPrice:${totalPrice}`); } console.log(totalPrice);//会出错误(Uncaught ReferenceError: totalPrice is not defined) 这里的totalPrice是let块级变量,外部无法访问
对比二:作用域:以下代码只有声明的类型不一样,var 支持重新赋值,totalPrice会被重新赋值,而let中的totalPrice,第一个为全局变量, 第二个只被作用在块级中,所以最终输出0
var price = 10; var count = 10; var totalPrice = 0; if (count > 5) { var totalPrice = 10 * 0.9; console.log(`var totalPrice:${totalPrice}`); //9 } console.log(totalPrice); //9
var price = 10; var count = 10; let totalPrice = 0; if (count > 5) { let totalPrice = 10 * 0.9; console.log(`let totalPrice:${totalPrice}`); //9 } console.log(totalPrice); //0
对比三:var,let,const:定义,赋值,区别如下,注意const为对象时,虽然不能被重新赋值,但是可以修改其属性值
var name = "sun"; var name = "sun2"; //可以被重新定义 name = "liping"; //可以被重新赋值 console.log(`var name:${name}`); //var name:liping let age = 10; //let age = 20; //会出错,不能被重新定义 age = 22; //可以被重新赋值 console.log(`let age:${age}`);//let age:22 const sex = "女"; //const sex = "男"; //会出错,不能被重新定义 //sex = "男"; //会出错,不能被重新赋值 console.log(`const sex:${sex}`); //女
第四点:控制属性的改变:
const product = { name :"手机", price:5999 }; //可以修改属性 product.price = 8999; console.log(JSON.stringify(product));//{"name":"手机","price":8999} //如果不想product被改变则:(使用freeze方法冻结该对象) const product2 = Object.freeze( { name :"手机", price:5999 }); product2.price = 9999; console.log(JSON.stringify(product2));//{"name":"手机","price":5999}
第五点:实际应用过程的细节
for (var i = 0; i < 5; i++) { console.log(`var i is ${i}`); //这里会输出 0,1,2,3,4 setTimeout(function () { console.log(`var i is ${i}`); //这里会输出 5个 5 }, 1000); } console.log(`i is ${i}`); //会输出5 console.log(`---------------解决setTimeout输出0-4的数字------------------------------`); for (let i = 0; i < 5; i++) { console.log(`let i is ${i}`); //这里会输出 0,1,2,3,4 setTimeout(function () { console.log(`let i is ${i}`); //这里会输出 0,1,2,3,4 }, 1000); }
第六点:同理解析:当执行a[1]方法时,i 已经=3了,所以都输出3,如果想要输出1,2,3可改类型为let
var a = [];
for (var i = 0; i < 3; i++) {
a[i] = function () { console.log(i) }
}
a[1](); //3
a[2](); //3
第七点:当块级元素
var a = 10; if (1) { a = 100; //当块级元素包含let声明,给a赋值,只在当前块找a console.log(a);//所以这里会报错 let a = 1; console.log(a); }
第八点:变量提升:
console.log(abc);//undefined ,变量提升,实际解析:var abc; console.log(abc);abc=10; var abc = 10; //console(num);//会出错 let num = 10; //console.log(filename);//会出错 const filename = "abc.txt";
写在最后:以上只是说明用法,随手百度就能了解,原理后续再作研究