一、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有关的回调、事件回调、对象的方法。