var的说明
1.可以提升自己的变量
例如:
console.log(a);
var a;
a=100;
console.log(a);
输出
undefined
100
2.变量的值可以进行更改
例如:
var a=100;
console.log(a);
a=200;
console.log(a);
输出:
100
200
3.变量在全局作用域
例如:
var a=100;
console.log(a);
function change(){
if(true){
a++;
}
return a;
}
console.log(change());
输出:
100
101
let的说明
1.不可以提升自己的变量
console.log(b);
let b=100;
输出:
Cannot access 'b' before initialization
2.变量的值可以进行更改
let b=100;
console.log(b);
b=200;
console.log(b);
输出
100
200
3.块级作用域下的变量,在别的函数作用域下,不可以使用
if (true) {
let b = 100;
console.log(b);
}
console.log(b);
输出:
100
b is not defined
const的说明
1.不可以提升自己的变量
console.log(a);
const a=15;
输出:
Cannot access 'a' before initialization
2.简单型数据变量的值不可以进行更改;当不涉及地址改变时,复杂型数据型变量的值(如数组,对象等)可以进行更改;当涉及地址改变时,复杂型数据型变量的值(如数组,对象等)不可以进行更改;
例如:
const person=['Wei','Uzi','Xiaohu','Ming'];
console.log(person);
person[1]='Gala';
console.log(person);
const team={
Lpl:'Ig',
Lck:'Skt',
Lec:'Fnc'
}
console.log(team);
team.Lpl='Rng';
console.log(team);
person=['Cryin','Gala','Wei','Xiaohu'];
console.log(person);
team={
Lpl:'fpx',
Lck:'Dk',
Lec:'G2'
}
console.log(team);
输出:
["Wei", "Uzi", "Xiaohu", "Ming"]
["Wei", "Gala", "Xiaohu", "Ming"]
{Lpl: "Ig", Lck: "Skt", Lec: "Fnc"}
{Lpl: "Rng", Lck: "Skt", Lec: "Fnc"}
Assignment to constant variable.
Assignment to constant variable.
3.块级作用域下的变量,在别的函数作用域下,不可以使用
例如:
if (true) {
const a = 1999;
}
console.log(a);
输出:
a is not defined
关于let的更多应用,比如遍历循环时,可以用let代替var
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>搜索1</button>
<button>搜索2</button>
<button>搜索3</button>
<button>搜索4</button>
<script>
var btns = document.querySelectorAll('button');
//错误示例
// for (var k = 0; k < btns.length; k++) {
// btns[k].onclick = function() {
// for (var i = 0; i < btns.length; i++) {
// btns[i].innerText = '搜索' + i;
// }
// btns[k].innerText = '搜索我啊,小笨蛋,(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤'
// }
// }//会先编译for循环,然后找不到btns[k=4]这个按钮,因此会报错
//正确示例
// 1.如立即执行函数
for (var i = 0; i < btns.length; i++) {
(function(e) {
btns[e].onclick = function() {
for (var i = 0; i < btns.length; i++) {
btns[i].innerText = '搜索' + i;
}
btns[e].innerText = '搜索我啊,小笨蛋,(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤'
}
})(i) //i作为实参传递给形参e
}
//2.利用es6新语法,let变量
for (let k = 0; k < btns.length; k++) {
btns[k].onclick = function() {
for (var i = 0; i < btns.length; i++) {
btns[i].innerText = '搜索' + i;
}
btns[k].innerText = '搜索我啊,小笨蛋,(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤'
}
}
</script>
</body>
</html>
至于效果,就你们自己点击啦!