变量的声明方式
let / const取代var\
- 共同点：先声明后使用，块级作用域，同一作用域下不允许重命名，声明的全局变量没有挂在window对象上，都没有预编译。
- 不同点：let声明的值可以改变，const声明的变量值不能改变，且声明后需要立即赋值，const存储引用数据类型时值可以改变（地址不能改变）。
- 优先考虑使用const,如果变量后期可能改变就是用let，最后使用var。
//打印一个10
for(var i = 0;i<10;i++){
setTimeout(function(){
console.log(i);
})
}
//分别打印0-9,因为let是块级作用域，使用一次后就会释放
for(let i = 0;i<10;i++){
setTimeout(function(){
console.log(i);
})
}
//打印一个10,因为var i 是全局变量
console.log(i);
模板字符串
`${}`
解构
数组的解构
const arr = [1,2,3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
const [a,b,c] = arr;//这句代码等价于上面三句代码a=1,b=2,c=3
const [a,,c] = arr;//a=1,c=3;
//多维数组解构
const arr2 = [5,12,[13,15]];
const [a,b,[c,d]]=arr2;//a=5,b=12,c=13,d=15;
const [a,b,[,c]]=arr2;//a=5,b=12,c=15;
const [a,b,[c]]=arr2;//a=5,b=12,c=13
//交换两个值
let a = 2;
let b = 1;
[a,b] = [b,a];//可以看为[a,b]=[1,2]
对象的解构
复习：
- 函数this的指向：普通函数中this指向window,事件处理函数中this指向调用者，严格模式下this指向undefuned,对象函数的this指向对象自身
- 对象的访问方式：1、点语法obj.a 具体的属性名 不能解析变量 2、[]语法obj['a'] 通用
- 对象的遍历方式：for(var i in obj){i是对象的属性，obj[i]对象的属性值};对象是无序存储数据，所以无法使用普通for循环，forEach()是专属于数组的方法，因此无法使用此方法
对象的一般解构
const obj = {
name:'qhx',
age:21,
width:'70kg',
shuo:function(){
console.log('我最棒');
}
}
//对象解构
const {name:a,age:b,width:c,shuo:d} = obj;//a='qhx',b=21,c=70kg,d=function(){console.log('我最棒')}
对象的简写(条件：属性与属性值一样时，可以简写)
const a1 = 1;
const a2 = 2;
const a3 = 3;
const obj = {
a1:a1,
a2:a2,
a3:a3
}
console.log(obj);//a1:1,a2:2,a3:3;
//下面这段代码与上面的代码等同
const obj = {
a1,
a2,
a3
}
对象简写解构（重点）
const obj = {
name:'qhx',
age:21,
width:'70kg',
shuo:function(){
console.log('我最棒');
}
}
//对象简写解构
const {name:name,age:age,width:width,shuo:shuo} = obj;//name='qhx',age=21,width=70kg,shuo=function(){console.log('我最棒')}冒号后面的单词是后期声明的
//属性名与值相同可以简写
const {name,age,width,shuo} = obj;//name='qhx',age=21,width=70kg,shuo=function(){console.log('我最棒')}，这里的name,age,width,shuo是后期声明的
解构对象中的对象
const obj{
name:'qhx',
age:20,
jiaxiang:{
shengfen:'HuBei',
shi:'JingZhou'
}
}
const {name,age,jiaxiang:{shengfen,shi}}=obj;
对象解构总结：
1、解构时，对象属性值与声明的变量不同名时需要一一解构。
const obj = {
name:'qhx',
age:21,
width:'70kg',
shuo:function(){
console.log('我最棒');
}
}
const {name:mingzi,age:nianling,width:tizhong,shuo:fangfa} = obj;
2、属性值与声明的变量相同时可以简写
const obj = {
name:'qhx',
age:21,
width:'70kg',
shuo:function(){
console.log('我最棒');
}
}
const {name:name,age:age,width:width,shuo:shuo} = obj;//代码优化得
const {name,age,width,shuo} = obj;//代码优化得
展开运算符
...
复习：数组的深拷贝和浅拷贝
- 深拷贝：拷贝地址中的值（遍历数组，放到新数组；截取arr.slice()数组中所有值，放到新数组中；[...arr]）
- 浅拷贝：只拷贝地址
展开运算符的使用
const arr = [1,2,3];
const arr2 = [...arr];//等同于arr2 = [1,2,3];
const arr3 = [...arr2,5,6,7];//arr3=[1,2,3,5,6,7];
const arr4 = [20,21,22];
const arr5 = [...arr1,...arr4];//arr5=[1,2,3,20,21,22];
const obj = {a:1,b:2,c:3};
const obj = {...obj,name:'qhx'};//obj = {a:1,b:2,c:3,name:'qhx'};
箭头函数
复习：函数有预编译，但是赋值式函数没有预编译\
//箭头函数声明
const fn = (参数)=>{函数体}
//箭头函数的调用
fn(参数)；
- 具名函数，不能改写为箭头函数，只有赋值式函数可以改写成箭头函数，箭头函数没有预编译
- 箭头函数的形参有且只有一个时，参数括号可以省略
- 箭头函数中没有arguments
- 箭头函数的函数体只有一句代码且有返回值的时候可以省略{}和return，省略了{}就必须省略return;
const fu = n =>{return ++n};//与下面代码等价
const fn = n => ++n;
在箭头函数中没有arguments时，可以用以下方式动态获得参数
const fn = (...arr)=>{
console.log(arr);
}
//这里得到的是一个真数组
箭头函数的this的指向问题（极其重要）
- this的指向只有在函数中才可能有所改变
- 箭头函数没有自己的this指向，父级函数的this指向谁，箭头函数的this的函数就指向谁，没有父级函数时，箭头函数this指向window。
- 箭头函数最重要的作用就是保持（维持）this的指向
document.onclick = function(){
//document
console.log(this);//事件处理函数的this指向事件源document
setTimeout(function(){
//window
console.log(this);//除了事件处理函数和对象函数外，其余函数this指向window,因此这里指向window
})
setTimeout(()=>{
//document
console.log(this);//箭头函数的thi指向父级函数的this指向，这里的父级函数是事件处理函数，因此指向事件源doucment
})
}
