ES5及ES6回顾及补充、运动讲解

回顾

ES5新增

严格模式

• 声明必须有关键词 （var）

• this不能指向全局变量

• arguments的实参不同步

• 函数声明只能处在上下文中

• 禁止使用八进制

• 函数名不允许相同

数组新增的高阶函数

forEach 、map 、filter、reduce、reduceRight 、every 、some

更改this指向的方法

bind 、apply 、call

对象中的getter和setter

数组的辅助方法

Array.isArray indexOf lastIndexOf ...

字符串新增

trim

序列化 反序列化

JSON.stringify JSON.pase

ES6新增

块级作用域

let 、const （常量）

字符串新增方法

includes 是否包含 、startsWith 是否开头 、endsWith 是否结尾 、repeat 平铺

数组新增

Array.of 、Array.from 、find、findIndex、fill、includes、flat （数组扁平化方法）

数组扁平化就是只将一个多维数组变成一个一维数组 [[1],[2],[3]] ==> [1,2,3]

对象简写

对象中的属性简写 （属性名和属性值的变量名一致的情况下） 对象中的函数简写 （省略对应function）

函数增强

函数中的默认参数 （在形参中使用=号指定）

箭头函数

• 没有this和arguments

• 没有原型 不能被new

• 只有一个参数可以省略（）

• 只有一行代码可以省略 {}

• 只有一行代码 且省略{} 可以省略return

解构赋值

数组解构根据对应的顺序来 var [a] = [1,2,3] a提取的是1

对象解构根据对应的属性名来 var {name} = {age:18,name:'jack'} name提取的是jack

扩展运算符 ...

打开对应的对象或者数组将里面内容暴露出来（合并）

作为修饰形参时 可以传入不定个数的参数 使用对应的形参来接收（自动封装为数组）

新增基础值类型

BIgInt （大的整型）、Symbol （独一无二的值（机器码）用于对象的属性）

generator函数 （function*）

用于解决异步问题 将异步代码同步执行 （yield 开启执行块 next方法来进入这个执行块执行 done 是否完成）

promise （es7）

用于解决异步问题 将异步代码同步执行 （then 、catch方法来进行相关操作（三种状态 等待 成功 错误））

模块化

import 导入

export 导出

增强的循环

for of （数组 实现了迭代器） 、 for in （遍历对象的）

字符串模板

ES6新增内容补充

class 类

//class修饰的内容是一个类 这个类是用于产生对象的 
//类 （描述的模板） 与 对象 （产生的实例）
//从类变成对象的过程叫做构造   使用new关键词来构造 new关键词调用的函数被称为构造函数
//构造函数的首字母大写 
//类名首字母大写
class Person {
    //构造函数 在类中的构造函数的名字就是类名
    constructor() {
        this.name = "张三" //这个地方的this指向对应的构造的对象
        //person.name = '张三'
    }
}
//构造实例
let person = new Person()
console.log(person)

static 修饰静态函数及属性

class Person {
    //构造函数 在类中的构造函数的名字就是类名
    constructor() {
    }
    static sayHello() {
        console.log('hello')
    }
    static max = 10
}
//类中的关键词 static 静态的 静态方法使用类名直接点 （静态函数优先加载）
Person.sayHello()
console.log(Person.max)

extends 关键词用于继承

//extends 继承 用于类与类之间的继承  猴子 -- 猩猩 --- 类人猿 --- 人
//继承只能继承非私有的内容 
class Student extends Person{
    //继承的类中的构造函数 如果要用到this 必须先调用的super （父类构造函数）
    constructor(){
        super() //指向父类的构造函数 ===> this.name = "张三" //student.name = '张三'
        this.age = 18 
        //student.age = 18
    }
}
let student = new Student()
console.log(student);

Set

set是一个存储数据的集合（伪数组）他不允许重复的数据（基础数据的去重）（他的值就是key）

构建

var set = new Set()

属性

size 长度

方法

• add 添加

• delete 删除

• clear 清空

• keys 、values 、entries

• forEach 遍历

var set = new Set([1,3,1,2,3]) //iterable 迭代器 （传入的是伪数组或者是数组）
console.log(set)
//keys 获取所有的key  values 获取所有value  entries 获取所有的键值对
console.log(set.keys())
console.log(set.values())
console.log(set.entries())
//增删改查
//添加 add push set
set.add(3)
set.add(4)
console.log(set.size) //长度获取
//删除
set.delete(4)
//删除后再添加
//清空
set.clear()
console.log(set)
//has 是否存在
console.log(set.has(1));
//forEach 根据数组的forEach一致
set.forEach(function(v,i,arr){
    console.log(v,i,arr)
})

weakSet 专门存在对象的set

//专门存储对象的set (并不能完成对象去重)
let obj = {name:'jack'}
let weakSet = new WeakSet([obj,obj,{name:'jack'}])
console.log(weakSet)

Map

map是一种特殊的数据结构 他是由key：value构成的，key不允许重复，value允许重复。

构造方法

let map = new Map()

属性

size 获取长度

方法

• set 设置

• get 获取

• delete 删除

• clear 清空

• keys values entries

• forEach

//通过传入二维数组来构建
let map = new Map([[1,'a'],[2,'b'],[3,'c'],[4,'d']])
console.log(map)
//map是通过key：value进行存储的
//添加方法 set
//同时也是修改 相同的key的值会被覆盖
map.set('name','jack')
map.set('name','rose')
map.set('name','tom')
//获取
console.log(map.get('name')) //通过key获取value
//删除 
map.delete('name') //通过key来删除
console.log(map.get('name')) //通过key获取value
//清空方法
map.clear()
map.set('age',18)
//keys value  entries
console.log(map.keys())
console.log(map.values())
console.log(map.entries())
//forEach
map.forEach(function(v,k,map){ //v值 key 键  遍历的map
    console.log(v,k,map);
})
//has 判断是否存在对应的key
console.log(map.has('age'))

WeakMap

//weakMap 专门存储对象的
let weakMap = new WeakMap()
console.log(weakMap)

运动（上）

运动（动画）的概念，就是在一定时间内对应的位置的移动或者是样式的变化（就是css3里面的动画*）（操作dom 超出多次的重绘和回流）

运动的要素

• 迭代量 （匀速运动（迭代量不变）缓冲运动（迭代量要越来越小））

• 终止条件 （当前的位置到达目标位置 清除定时器）

• 当前位置 (当前位置 = 上一个位置+迭代量)

• 时间 （定时器）

匀速运动

示例

控制一个盒子从左移动到右 到达500的时候停止运动

初始位置为0、 目标位置为500、 迭代量是10

<div></div>
  <script>
    //获取元素div
    var div = document.querySelector('div')
    //已知条件 初始位置为0、 目标位置为500、 迭代量是10 
    var current = 0
    var target = 500
    var step = 10
    //设置定时器
    var timer = setInterval(function () {
      //在定时器内 控制对应的位置的变化
      //当前位置发生变化
      current += step
      //设置给对应的div
      div.style.left = current + 'px'
      //当到达目标位置的时候终止对应的定时器
      if(current == target){
        clearInterval(timer)
      }
    },20)
  </script>
</body>

封装匀速运动

//获取样式的方法
function getStyle(ele) {
    return getComputedStyle ? getComputedStyle(ele) : ele.currentStyle
}
//封装一个匀速运动的方法 传入元素对象 目标对象 left:300
function uniform(element, target,time=20) {
    //清除上一次的影响
    clearInterval(element.timer) //element.timer保证定时器唯一
    //设置定时器
    element.timer = setInterval(function () {
        var flag = true //判断是否全部到达目标位置
        //遍历target里面key
        for (var key in target) {
            //获取当前位置
            var current = parseInt(getStyle(element)[key])
            //当前位置如果小于目标位置 那么对应的step值是正的 否则是负
            var step = current < target[key] ? 10 : -10
            //在定时器内 控制对应的位置的变化
            //当前位置发生变化
            //设置给对应的div
            element.style[key] = current + step + 'px'
            //判断是否到达目标位置
            if (current + step != target[key]) {
                flag = false
            }
        }
        // 当到达目标位置的时候终止对应的定时器
        if(flag){
            clearInterval(element.timer)
        }
    }, time)
}

匀速的问题存在于对应的变化量是一样的导致的对应的时间不一致

缓冲运动

迭代量 （（目标位置-当前位置）/10）

示例

缓冲运动的透明度变化 （将对应的步长和对应的current先乘以100 再除100的操作）

<div></div>
<script>
    //控制div的透明度变化
    //获取div
    var div = document.querySelector('div')
    //读取当前值
    var current = 0.75
    //读取目标值
    var target = 0.5
    //设置定时器
    var timer = setInterval(function () {
        //在定时器内容设置对应的step
        var step = (target - current)*100 / 10 // 0.01 - 0.1  
        //小于0向下取整  大于0向上取整 除以100 为了保证他取值范围在  0.01 - 0.1 
        step = step<0?Math.floor(step):Math.ceil(step)
        //将步长和对应的当前的opacity先乘以100 再除100
        current = parseInt(current*100+step)/100
        //在定时器内设置对应的样式
        div.style.opacity = current
        //到达位置清除对应的定时器
        if (current == target) {
            clearInterval(timer)
        }
    }, 1000)
</script>

缓冲运动的封装

//运动的元素  目标对象
function bufferAnimation(element, targetObj) {
    //清除上一次的定时器
    clearInterval(element.timer)
    //设置当前定时器
    element.timer = setInterval(() => {
        //获取当前的target目标值
        var flag = true //记录当前是否全部完成
        //遍历target对象
        for (var key in targetObj) {
            //获取当前的目标值
            var target = targetObj[key]
            //获取当前的位置
            var current = parseFloat(getStyle(element)[key])
            //设置步长 (目标值-当前值)/10
            var step = target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10)
            //传入key 为 left top width height... 传统的需要带上px为单位
            if (key == 'left' || key == 'top' || key == 'width' || key == 'height') {
                //设置对应的位置
                current =  current + step + 'px'
            }
            //如果传入的是opacity 没有单位 以及变化量要乘以100 再除100
            else if (key == 'opacity') {
                //小于0向下取整  大于0向上取整 除以100 为了保证他取值范围在  0.01 - 0.1 
                step = target < current ? Math.floor((target - current) * 100 / 10) : Math.ceil((target - current) * 100 / 10)
                //将步长和对应的当前的opacity先乘以100 再除100
                current = parseInt(current * 100 + step) / 100
            }
            //如果传入的color 或者是 zIndex 直接设置
            else {
                //直接设置
                current = target
            }
            //将对应的样式设置
            element.style[key] = current
            //判断是否完成
            if(parseFloat(getStyle(element)[key]) != target){
                flag = false
            }
        }
        //判断是否全部完成
        if(flag){
            clearInterval(element.timer)
        }
    }, 20)
}
//获取当前样式的方法
function getStyle(ele) {
    return getComputedStyle ? getComputedStyle(ele) : ele.currentStyle
}

链式运动

概述：上一个完成继续下一个 像链子一样衔接运行

• 主要是通过对应的回调函数来完成对应的链式运动操作

// 运动 利用定时器来让对应的元素位置发生变化 由于定时器是异步 我不知道他什么时候执行完
function fn(callback){
    setTimeout(() => {
        console.log(1)
        //将第二个定时器的代码放入到第一个定时器里面最后执行
        setTimeout(() => {
            console.log(2)
            console.log(3)
            callback()//将函数或者代码放入到对应的异步代码里面的最后执行 就可以将我们的代码同步执行 回调函数 最后调用的函数
        }, 2000)
    }, 2000)
}