【ES6】ES6入门
let命令
//1.声明变量
let star = '罗志祥';
let star = '小燕子';//重复定义导致的错误:'star' has already been declared
//故:let不能进行重复定义 不会导致变量污染
var star = '罗志祥';
var star = '小燕子';//var定义的变量就不会导致错误
//2.块级作用域 全局 函数 eval
{
let girl = '周扬青';
}
console.log(girl);//girl is not defined
//故:let存在块级作用域里面
{
var girl = '周扬青';
}
console.log(girl);//周扬青 var不存在块级作用域
//其中,块级作用域的表现形式主要为:1,花括号 2,if else 以及while for等的花括号里面
//3,不存在变量提升
console.log(song);
let song = '恋爱达人';//let不存在变量提升 则发生报错
//代码执行的时候:是从上往下进行执行,当定义之后,会在前面进行执行收集,先定义再执行符合逻辑习惯
console.log(song);
var song = '恋爱达人';//undefined
//4,不影响作用域链
{
var school = '欧亚';
function fn(){
console.log(school);//欧亚
}
fn();
}
let的实例
//当点击之后进行切换颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xwq</title>
</head>
<body>
<div class = "container">
<div class = "page-header">点击切换颜色</div>
<div class= "itme"></div>
<div class = "item"></div>
<div class = "item"></div>
<script>
//1,获取元素对象
let items = document.getElementsByClassName('item');
//进行遍历并且绑定事件
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){
//修改当前元素的背景颜色
this.style.background = 'pink';
//错误写法: items[i].style.background = 'pink';因为i属于全局作用域 使用this或者let均正确
}
}
</script>
</div>
</body>
</html>
const命令
//const的使用特性
//1.const定义的是常量(值不发生修改的量)
const SCHOOL = '欧亚';
console.log(SCHOOL);//欧亚
//注意:1,一定要赋予初始值
const a;//没有赋予初始值就会发生报错
//2 一般常量都进行大写
const SCHOOL = '欧亚';
//3.常量的值不能会发生改变
SCHOOL = '翻译';
//4.块级作用域
{
const girl = 'xwj';
}
console.log(girl);// 报错:girl is not defined
//5,对数组 对象的元素进行修改 不会发生报错
const TEAM = ['刘德华','周杰伦','华尔兹'];
TEAM.push('mike');//向元素里面继续增加元素 值不会报错
//原因是:const所指向的值的地址不能发生变化
Team = 100;//会发生报错