let关键字声明变量
let声明的变量有这几个特点：1、不允许重复声明，2、块儿级作用域，3、不存在变量提升，4、不影响作用域链。
const关键字声明常量
const声明的常量有这几个特点：1、声明必须赋初始值，2、标识符一般为大写，3、不允许重复声明，4、值不允许修改，5、块儿级作用域。
案例代码
let关键字声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let关键字声明变量</title>
</head>
<body>
<script>
//声明变量
let a;
let b,c,d;
let e = 100000;
let f = 521521, g = 'XiaoFenDou', h = [];
//1、变量不能重复声明
let star = '孔子';
// let star = '孟子';
//2、块儿级作用域 全局, 函数, eval
// if else while for
// {
// let girl = '女孩';
// }
// console.log(girl);
//3、不存在变量提升
// console.log(song);
// let song = '';
//4、不影响作用域链
{
let school = '学堂';
function fn(){
console.log("function",school);
}
fn();
}
console.log("out",school); // school is not defined
</script>
</body>
</html>let关键字声明变量>>点击DIV换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let关键字声明变量>>点击DIV换色</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.item {
width: 100px;
height: 50px;
border: solid 1px rgb(42, 156, 156);
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
//获取div元素对象
let items = document.getElementsByClassName('item');
// 遍历并绑定事件
for(let i = 0;i<items.length;i++){
items[i].onclick = function(){
// 修改当前元素的背景颜色
// this.style.background = 'pink';
items[i].style.background = 'pink';
}
}
// 使用var时出错，this指向是动态的，let时，this指是静态的
</script>
</body>
</html>const关键字声明常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>const关键字声明常量</title>
</head>
<body>
<script>
//声明常量
const SCHOOL = '小奋斗>>>>学习';
//1、一定要赋初始值
// const A;
//2、一般常量使用大写（默认规则）
// const a = 100;
//3、常量的值不能修改
// SCHOOL = 'IT小奋斗';
//4. 块儿级作用域
// {
// const PLAYER = 'player';
// }
// console.log(PLAYER);
//5. 对于数组和对象，对元素的修改, 不算做对常量的修改
const TEAM = ['萧何','曹参','周勃','樊哙',"王陵","夏侯婴"];
TEAM.push('雍齿');
console.log(TEAM);
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)