一、Let声明变量
1.声明变量特点
let a;
let b,c,d;
（1）变量不能重复声明
（2）块级作用域 、全局、函数、evel
例如在块级作用域用let声明的变量，在全局访问不到。
（3）不存在变量提升
运用var关键字声明变量，可以变量提升，声明的变量相当于一开始就声明好了，到赋值之后才会出现。
console.log(a);//undefined
var a="lili";
console.log(a);//lili
let声明变量无提升，会报错
console.log(a);
let a="lili";
console.log(a);//lili
（4）不影响作用域链
变量a和函数是在一个块级作用域中，调用函数是可以访问到a的。
{
let a="lili";
function fun(){
console.log(a);
}
fun();
}
2.例题
点击div使div变色：
<script>
window.onload=function(){
//获取div元素对象
let item=document.getElementsByClassName("item");
for(var i=0;i<item.length;i++){
item[i].onclick=function(){
this.style.background="yellow";
}
}
}
</script>
使用var定义变量时，如果使用item[i].style.background="yellow";会报错，因为当前的 i 是3，已经越界了。所以需要使用this表示每次点击元素这个对象
<script>
window.onload=function(){
//获取div元素对象
let item=document.getElementsByClassName("item");
for(let i=0;i<item.length;i++){
item[i].onclick=function(){
this.style.background="yellow";
}
}
}
</script>
当使用let去声明i变量时，使用item[i].style.background="yellow";或者this.style.background="yellow";都可以。
二、const声明常量
常量是不能修改的量。
const NAME="孙悟空";
1.一定要赋初始值。
2.一般常量尽量使用大写。
3.常量的值不能修改。
4.块级作用域定义的常量，全局访问不到。
5.对于数组和对象的元素修改，不算做对常量的修改，不会报错。
const NAME=["孙悟空","猪八戒"];
NAME.push("沙和尚");
console.log(NAME);
//数组的地址未变
三、ES6 解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
1.数组的解构
const F3=["孙悟空","猪八戒","沙和尚"];
//定义一个变量
let[sun,zhu,sha]=F3;
console.log(sun);//孙悟空
2.对象的解构
const sun={
name:"孙悟空";
age:18;
sayName:function(){
console.log(this.name);
}
};
let{
name,age,sayName}=sun;
console.log(name);
sayName();//可以直接调用
三、模板字符串
1.声明
ES6 引入新的声明字符串的方式,反引号``
let str=`我是字符串哦`
console.log(str,typeof str);
2.内容中可以直接出现换行符
//使用单引号直接换行会报错，需要进行拼串
let str='<ul>'+
'<li>aa</li>'+
'<li>bb</li>'+
'</ul>';
使用模板字符串可以直接进行换行
let str=`<ul>
<li>aa</li>
<li>bb</li>
</ul>`;
3.变量拼接
语法：变量2=${变量1} xxx;
let lovest="孙悟空";
let out=`${
lovest}是最厉害的`;
console.log(out);//孙悟空是最厉害的
四、简化对象写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
let name='孙悟空';
let sayHello=function(){
console.log("hello");
};
const per={
name,
sayHello,
change(){
console.log("方法可以简化写");
}
/*
change function(){
console.log("方法可以简化写");
}
*/
}
五.箭头函数
1.ES6允许使用 箭头 （=>）定义函数
//之前声明一个函数
let fn=function(){
}
//使用箭头声明函数
let fn =(a,b)=>{
return a+b;
}
//调用函数
fu(1,2);
2.箭头函数声明特点
（1）this是静态的，this始终指向函数声明时所在的作用域下的那个对象this的值。
//普通函数
function getName(){
console.log(this.name);
}
//箭头函数
let getName2=()=>{
console.log(this.name);
}
//设置window对象的name属性
window.name="李李";
const per={
name:"lili";
}
//直接调用，直接调用全局的name
getName();//李李
getName2();//李李
//call方法调用
getName.call(per);//lili
getName2.call(per);//李李
2.不能作为构造函数实例化对象
3.不能使用arguments 变量
4.箭头函数的简写
（1）省略小括号，当新参有且只有一个的时候
let add= n =>{
return n;
}
console.log(add(9));
（2）省略花括号，当代码体只有一条语句的时候，此时return也必须省略，而且语句的执行结果就是函数的返回值。
let pow = (n) => n*n
console.log(pow(8));
3.点击延时变色练习
<script>
window.onload=function(){
let box=document.getElementById("box");
box.addEventListener("click",function(){
//定义一个变量来保存this
let that=this;
//定时器
setTimeout(function(){
//this.style.backgroundColor="black";使用this会报错，因为当前this就是window
that.style.backgroundColor="black";
},2000);
});
}
</script>
ES6使用箭头函数的写法：
<script>
window.onload=function(){
let box=document.getElementById("box");
box.addEventListener("click",function(){
//定时器
setTimeout(()=>{
//使用箭头函数，因为箭头函数中的this是静态的
//this始终指向声明作用域下对象的值，就是box
this.style.backgroundColor="black";
},2000);
});
}
</script>
4.过滤偶数练习
<script>
//从数组中返回偶数的元素
let arr=[1,2,3,4,5,6,7,8,9];
let result=arr.filter(function(item){
if(item % 2===0){
return true;
}
})
console.log(result);
</script>
ES6写法：
<script>
//从数组中返回偶数的元素
let arr=[1,2,3,4,5,6,7,8,9];
let result=arr.filter((item)=>(item%2===0))
console.log(result);
</script>
总结：箭头函数适合与this无关的回调，定时器，数组的方法回调；
箭头函数不适合与this有关的回调、事件回调、对象的方法。