ES6新增

ES6的新增
新增的声明关键字：let和const

let和const
没有提升
不允许重复声明
块级作用域
暂时性死区
全局变量，不会绑定window
const
不允许修改地址，可以改变值
作为常量使用
注意：复杂数据和一般数据的区别
箭头函数

基础语法
var sayHello = (name)=>“hello”+name;
sayHello(“张三”);
特点 0. 类似于无名函数，只能作为值使用
没有自己的this
有且只有一个参数时，可以省略小括号
有且直接返回数据时，可以省略花括号和return
当，有且直接返回对象时，并，省略花括号和return时，需要将对象使用小括号括起来
语义化不好，伤害了代码的可读性
不能new
小范围的作为返回值，参数，值使用，比较方便
函数的默认参数

在函数定义时的小括号中，可以给形参赋值，赋的这个值，就是当前参数的默认值
function fn(a=“456”){
// a = a || “123”;
console.log(a);
}
fn();
fn(“hello”);
解构赋值

解开结构，单独赋值
数组
数组是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined
var [a,b,c] = [“hello”,“world”,123];
对象
对象是数据的无序集合，所以在解构赋值时，变量之间没有顺序，找到对象中的key 了，就赋值，没有找到就是undefined
var {name,sex,age} = {name:“张三”,age:18,sex:1}
字符，因为字符类似于数组
字符也算是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined
var [a,b,c] = “hello”;
模板字符串

回顾单双引号字符串的特点
不允许换行，如果要换行，必须每行都是完整的字符串，还得用+连接
字符串的新的表达方式：反引号：允许换行 可以不用+号拼接，在反引号内，使用${}包裹变量 也可以使用+号拼接，只是没必要了 如： var str =

• 
  
• "$name"</li><li{>}^{\prime }${name}’
• 
  
• $name</li><li>${1+1}
• 
  
• $fn()</li><li>${false ? “hello” : “wrold”}
• 
  

`;
console.log(str);
var obox = document.getElementById(“box”);
obox.innerHTML = str;
展开运算符

…
展开运算符必须在能够接收多个数据的位置使用
展开数组，要在能够接收多个数据时使用
传参，合并数组
// 快速实现数组合并
var arr2 = [2,3,4,arr];
var arr2 = [2,3,4,…arr];
console.log(arr2);
// 函数的参数
function fn(a,b,c){
console.log(a,b,c)
}
fn(…[3,4,5]);
展开对象，要在能够接收多个键值对时使用
合并对象
var obj = {
name:“admin”,
age:18
}
var obj2 = {
sex:“男”,
…obj
}
console.log(obj2);
对象的简单写法

当对象的value是变量，且key和这个变量重名时，可以缩写
当对象的value是函数时，可以直接：函数名(){}
var name = “admin”;
var age = 18;
var obj = {
name,
age,
fn(){
console.log(this.name)
}
}
console.log(obj)
obj.fn()
DOM的高级应用 - 动画
什么是动画

谁，动起来，频率，步长，什么时候结束
动画的要素

运动源：正在运动的事物
频率：每个单位时间
步长：每个单位时间内做出来的改变
停止条件：什么时候结束
频率的限制

人眼能识别的最少频率是24
一秒钟切换连续的24张图片，就是动画
毫秒数，多长时间切换一个效果
时间越短，效果越好
浪费的性能越多，页面也不一定能够响应
20~40
30
动画

简单动画-匀速动画
缓冲动画-减速动画
刹车
请参考缓冲运动的封装过程