最近,看了一些es6的相关知识点,有时候看完就忘记了,所以写下该博客,以此记录。
1、变量(let,const)
es6使用let定义变量,const定义常量。
变量可重复赋值,但常量重复赋值会报错(报错信息如下:Uncaught TypeError: Assignment to constant variable.)。
使用let,const定义的变量有块级作用域,使用var定义的变量没有块级作用域。
let是用来声明块级作用域,它所声明的变量,只是在let命令所在的那个代码块中有效。
const也是用来声明块级作用域,但它声明的是常量。就是一旦声明,常量的值就不能改变并且必须直接赋值。
但是声明对象是可以改变的:
const obj = { age:10 } obj.age = 20; // obj = {};改变内存地址
//const 对象 属性不能修改 Object.freeze冻结对象
const obj2 = Object.freeze({age:20});
//不起作用 obj2.age = 10;
console.log(obj2.age)//20
具体的例子:
使用var定义的变量:
<script type="text/javascript">
for(var i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//10
</script>
使用let定义的变量:
<script type="text/javascript">
for(let i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//Uncaught ReferenceError: i is not defined 因为let声明块级作用域
</script>
下面用一个例子来说明使用var和let(无块级作用域和有块级作用域的区别):点击每个li ,弹出相应的下标。
方式1:使用闭包的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--实现点击每个li,弹出相应的下标-->
<!--用闭包形式-->
<script>
window.onload=function () {
var oLi=document.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++){
(function (i) {
oLi[i].onclick=function () {
alert(i);
}
})(i)
}
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
方式2:使用块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--实现点击每个li,弹出相应的下标-->
<!--用的是es6的let定义变量-->
<script>
window.onload=function () {
var oLi=document.getElementsByTagName('li');
for(let i=0;i<oLi.length;i++){
oLi[i].onclick=function () {
alert(i);
}
}
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
记录1:再看书的时候看到一个点,所以记录如下:(面试的时候有可能会问到哦)
for
循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {