es6总结

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准

• let关键字
• 变量的解构赋值
• 对象的简写属性
• 箭头函数
• 三点运算符
• Promise对象
• Symbol
• ierator
• Generator
• 类的使用
• async
• 深度克隆

let关键字
let与var类似，用于声明一个变量
特点:在块级作用作用域内有效
不能重复声明，不存在变量提升，不会预处理

变量的解构赋值

// 对选哪个的解构赋值
        let obj = {username:"kobe",age:"41"}
        let{age} = obj
        console.log(age)
        // 数组
        let arr = [1,2,3,"abc"]
        let[a,b] = arr
        console.log(a,b)

        function foo(username,age){
            console.log(username,age)
        }
        foo(obj)

对象的简写属性

		let username = "kobe"
        let age = 41
        let obj = {
            username,
            age,
            getName(){
                return this.username
            }
        }

箭头函数
特点：
1.简洁
2.没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3.扩展理解：箭头函数的this看外层是否有函数
有，外层函数的this就是内部箭头函数的this
没有，this是window

		let fun = () => console.log("我是钩子函数")
        	fun()

        // 形参的情况
        // 1.没有形参的时候
        let fun1 = () => console.log("我是钩子函数")
        	fun1()

        // 2.只有一个形参的时候()可以省略
        let fun2 = a => console.log(a)
        	fun2("aaaaaa")

        // 3.两个及两个以上的形参的时候()不能省略
        let fun3 = (x,y) => console.log(x,y)
        	fun3(1,1)
	
        // 函数体的情况
        // 1.函数体只有一条语句或者是表达式的时候{}可以省略----会自动返回语句执行的结果或者表达式的结果
        let fun4 = (x, y) => x + y
        	console.log(fun4(1,2))

        let fun5 = (x,y) => {
            return x + y
        }
        console.log(fun5(5,5))


        let btn1 = document.getElementById("btn1")
        let btn2 = document.getElementById("btn2")

        btn1.onclick = function(){
            console.log(this)
        }
        let obj = {
            name : "箭头函数",
            getName(){
                btn2.onclick = () => {
                    console.log(this)
                }
            }
        }
        obj.getName()

三点运算符

		let arr = [1,7]
        let arr1 = [2,3,4,5,6]
        arr = [1,...arr1,7]
        console.log(arr)

Promise对象
Promise对象：代表了未来某个将要发生的事情（异步操作）

Promise对象，可以将异步操作已同步的流程表达出来，避免层层嵌套的回调函数（回调地狱）

			let promise = new Promise((resolve,reject) =>{
            // 初始化promise状态：pending : 初始化
            console.log("1")
            // 执行异步操作，通常是ajax请求，开启定时器
            setTimeout(() => {
                console.log("3")
                // 根据异步任务的返回结果去修改promise的状态
                // 异步任务执行成功
                resolve("略略略") //修改promise的状态 为fullfilled 成功的状态
                // reject("哈哈哈") //修改promise的状态 为rejected 失败的状态
            },2000)
        })
        console.log("2")

        promise
            .then((data) => {//成功的回调
                console.log(data,"成功了")
            }, (error) => {//失败的回调
                console.log(error, "失败了")
            })

Symbol

		// 创建symbol属性
        let symbol = Symbol()
        console.log(symbol)
        let obj = {usename:"kobe",age:41}
        obj[symbol] = "hi"
        console.log(obj)
        for(let i in obj){
            console.log(obj[i])
        }

ierator
遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

		// 准备一个数据
        let arr = [1,4,3,"aaa"]
        let iteratorObj = myIterator(arr)
        console.log(iteratorObj.next())

        // 将iterator接口部署到指定的数据类型上，可以用for of去遍历
    
        for(let i of arr){
            console.log(i)
        }

Generator
Generator函数是一个状态机，
用来生成遍历器对象
可暂停函数（惰性求值），yield可暂停，next方法可启动，每次返回的是yield后的表达式结果

特点：
function 与函数名之间有一个星号
内部用yield表达式来定义不同状态

async
async函数不需要像Generator去调用next方法，遇到await等待，当签的异步操作完成就往下执行
返回的总是Promise对象，可以用then方法进行下一步操作

		async function foo(){
            return new Promise(resolve => {
                setTimeout(resolve,2000)
            })
        }

        async function test(){
            console.log("开始执行",new Date().toTimeString())
            await foo()
            console.log("执行完毕",new Date().toTimeString())
        }
        test()
        
		async function asyncPrint(){
            let result = await Promise.resolve("promise")
            console.log(result)
        }
        asyncPrint()

类的使用

// 父类
        class Person{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            // 类的一般方法
            showName(){
                console.log(this.name)
            }
        }
        let person = new Person("kobe",41)
        console.log(person)
        person.showName()
//子类
        class StartPerson extends Person{
            constructor(name,age,salary){
                super(name,age) //调用父类的构造方法
                
                this.salary = salary
            }
            // 父类方法重写
            showName(){
                console.log(this.name,this.age,this.salary)
            }
        }
        let startPerson = new StartPerson("kd",30,101110)
        console.log(startPerson)
        startPerson.showName()

深度克隆
拷贝数据
基本数据类型：
拷贝后会生成一份新的数据，修改拷贝后的数据不会影响原数据
对象/数组
拷贝后不会生成一份新的数据，而是拷贝引用，修改拷贝后的数据会影响原数据

拷贝数据的方法
1，直接赋值给一个变量
2.Object.assign() //浅拷贝
3.Array.prototype.concat() //浅拷贝
4.Array.prototype.slice() //浅拷贝
5.JSON.parse(JSON.stringify()) //深拷贝 。拷贝的数据里不能有函数

浅拷贝(对象/数组)
特点：拷贝的引用，修改拷贝的数据会影响原数据
深拷贝(深度克隆)
特点：拷贝生成新的数据，修改拷贝的数据不会影响原数据