let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版。下面我就来详细讲讲var和let的区别
var和let的区别
不同点:
(1)var是全局作用域,let不是
var 和 let 声明的变量在全局作用域中被定义时,两者非常相似。但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以
let a = 'aaa;
var b = 'bbb';
console.log(window.a); // undefined
console.log(window.b); //'bbb'
(2)var没有块级作用域,let有块级作用域
let有块级作用域,而var没有块级作用域,这是二者最明显的区别。例如:
var func;
if(1 == 1){
var name = "LHS"
func = function(){
console.log(name)
}
}
name = "ljq";
func();//输出的:ljq
一般情况我们都希望把块级内的与块级内数据区分,但var没有块级作用域,只有函数作用域
如果大家还不理解,我再举例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 20px;
font: 30px/100px "microsoft yahei";
text-align: center;
}
</style>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</body>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);//都是输出:10
}
}
</script>
</html>
运行结果,点击输出都是10
以上问题就是var没有块级作用域,我们可以把函数作用域代替了块级作用域,用闭包解决问题:
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
(function(i){
divs[i].onclick=function(){
alert(i);
}
})(i)
}
闭包写起来有点麻烦,但使用let的话就可以一步到位:
var divs=document.getElementsByTagName("div");
for (let i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);
}
}
结果跟使用闭包一样,但比闭包简单
(3)var属于ES5规范,let属于ES6规范
相同点:
(1)var和let都有函数级作用域
const
(1)const定义的值不可以修改,而且必须初始化
(2)const是常量,var和let是变量
(3)常量的含义是指对象不能修改,但是可以改变对象内部的属性,如:
const app = {
id:1,
name:"lhs"
}
app.name="ljq";
console.log(app.name);//输出:ljq
es6对象字面量增强
相对于ES5,ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码同时语法更易于理解。那就一起来看看对象增强的功能。
属性增强写法
//属性增强写法
const id = 1;
const name = "LHS";
const age = 20
const app = {
id,
name,
age,
}
console.log(app);
函数增强写法
//函数增强写法
const ipp = {
msg(){
console.log("函数增强写法");
}
}
ipp.msg();
原文出处:https://www.cnblogs.com/bushui/p/12203766.html