ES6初总结

我正在参加「掘金·启航计划」

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

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()