ES6的新增
-
新增的声明关键字:let和const
- let和const
- 没有提升
- 不允许重复声明
- 块级作用域
- 暂时性死区
- 全局变量,不会绑定window
- const
- 不允许修改地址,可以改变值
- 作为常量使用
- 注意:复杂数据和一般数据的区别
- 不允许修改地址,可以改变值
- let和const
-
箭头函数
-
基础语法
var sayHello = (name)=>"hello"+name; sayHello("张三");
-
特点
- 类似于无名函数,只能作为值使用
- 没有自己的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
-
ES6的新增
-
新增的声明关键字:let和const
- let和const
- 没有提升
- 不允许重复声明
- 块级作用域
- 暂时性死区
- 全局变量,不会绑定window
- const
- 不允许修改地址,可以改变值
- 作为常量使用
- 注意:复杂数据和一般数据的区别
- 不允许修改地址,可以改变值
- let和const
-
箭头函数
-
基础语法
var sayHello = (name)=>"hello"+name; sayHello("张三");
-
特点
- 类似于无名函数,只能作为值使用
- 没有自己的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 = `<ul> <li>"${name}"</li> <li>'${name}'</li> <li>${name}</li> <li>${1+1}</li> <li>${fn()}</li> <li>${false ? "hello" : "wrold"}</li> </ul>`; 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
- 人眼能识别的最少频率是24
-
动画
- 简单动画-匀速动画
- 缓冲动画-减速动画
- 刹车
- 请参考缓冲运动的封装过程
var [a,b,c] = “hello”;
-
模板字符串
-
回顾单双引号字符串的特点
- 不允许换行,如果要换行,必须每行都是完整的字符串,还得用+连接
-
字符串的新的表达方式:反引号:`
- 允许换行
- 可以不用+号拼接,在反引号内,使用${}包裹变量
- 也可以使用+号拼接,只是没必要了
-
如:
var str = `<ul> <li>"${name}"</li> <li>'${name}'</li> <li>${name}</li> <li>${1+1}</li> <li>${fn()}</li> <li>${false ? "hello" : "wrold"}</li> </ul>`; 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
- 人眼能识别的最少频率是24
-
动画
- 简单动画-匀速动画
- 缓冲动画-减速动画
- 刹车
- 请参考缓冲运动的封装过程