JS高级-ES6

let/const

变量和常量

不能重复定义

case1

{
    //js
    var a = 10
    a = 20
    // es6
    let b = 10
    b = 30
    const c = 10
    c = 40  //报错
}

存在块级作用域

case2

{
    const obj = {
        a: 10
    }
    obj.b = 20
}

多行字符串/模板变量

case

{
    var name = 'susan', age = 18, html = ''
    //JS
    html += '<div>' +
                '<p>' + name + '</p>' +
                '<p>' + age + '</p>' +
            '</div>'
    //ES6
    html += `<div>
                <p>${name}</p>
                <p>${age}</p>
            </div>
            `
}

解构赋值

case1

{
    var obj = {
        a: 10,
        b: 20
    }
    // JS
    var a = obj.a
    var b = obj.b
    // ES6
    let {a, b} = obj
}

case2

{
    function fn(){
        return {
            a: 10,
            b: 20
        }
    }
    let {a, b} = fn()
    console.log(a, b)
}

块级作用域

case

{
    var arr = [1, 2, 3, 4, 5]
    // JS
    for(var i = 0; i < arr.length; i++) {}
    console.log(i)
    // ES6
    for (let j = 0; j < arr.length; j++) {}
    console.log(j)
}

函数默认参数

case

{
    // JS
    function fn(a, b) {
        if (b==null){
            b=0
        }
    }
    // ES6
    function fn(a, b=0){}
}

箭头函数

case1

{
    var arr = [1, 2, 3, 4, 5]
    // JS
    var arr1 = arr.map(function(item) {
        return item+1
    })
    console.log(arr1)
    // ES6
    let arr2 = arr.map(item => item+1)
    let arr3 = arr.map((item, index) => {
        return item+index
    })
    console.log(arr2)
    console.log(arr3)
}

case2

{
    function fn() {
        var arr = [1, 2, 3, 4, 5]
        console.log('fn: '+this)
        arr.map(function(item){
            console.log('JS: '+this)
        })
        arr.map(item=>{
            console.log('ES6: '+this)
        })
    }
    fn.call({a:10})
}

分析：第一个this是{a:10}，第二个this是window对象，第三个this是{a:10}。

Class

先回顾下JS构造函数

case

{
    function MathHandle(x,y){
        this.x=x
        this.y=y
    }
    MathHandle.prototype.add=function(){
        return this.x+this.y
    }
    var m = new MathHandle(1,2)
    console.log(m.add())
}

然后我们看下class语法

{
    class MathHandle {
        constructor(x,y){
            this.x=x
            this.y=y
        }
        add(){
            return this.x+this.y
        }
    }

    var m = new MathHandle(1,2)
    console.log(m.add())
    console.log(typeof MathHandle)
    console.log(MathHandle === MathHandle.prototype.constructor)
    console.log(m.__proto__ === MathHandle.prototype)
}

上面case我们后面添加了2个console

typeof MathHandle // function

MathHandle === MathHandle.prototype.constructor // true

m.__proto__ === MathHandle.prototype // true

我们可以看出class是语法糖，它的本质还是function

继承

先看下JS的继承如何书写

case

function Animal(name){
  this.name = name
  this.eat = function(){
      console.log(this.name + ' eat')
  }
}
function Dog(name){
  Animal.call(this, name)
  this.bark = function(){
      console.log(this.name + ' bark')
  }
}
Dog.prototype = new Animal()
var dog = new Dog('hashiqi')
dog.bark()
dog.eat()

ps：原型链继承可以继承构造函数里面以及原型链上的属性和方法，实例化子类的时候没法给父类传值。对象冒充继承，没法继承原型链上的属性和方法。

然后看下es6继承如何实现

{
    class Animal{
        constructor(name){
            this.name=name
        }
        eat(){
            console.log(`${this.name}+ eat`)
        }
    }
    class Dog extends Animal{
        constructor(name){
            super(name)
            this.name=name
        }
        bark(){
            console.log(`${this.name} bark`)
        }
    }
    const dog = new Dog('gou')
    dog.bark()
    dog.eat()
}

 Promise的基本语法

解决Callback Hell

case

{
    function loadImg(src, callback, fail) {
        var img = document.createElement('img')
        img.onload=function(){
            callback&&callback(img)
        }
        img.onerror=function(){
            fail()
        }
        img.src=src
    }
    var src='https://......jpeg'
    loadImg(src, function(){
        console.log('success')
    }, function(){
        console.log('fail')
    })
}

case2

{
    function loadImg(src) {
        const promise = new Promise(function(resolve, reject){
            var img = document.createElement('img')
            img.onload=function(){
                resolve(img)
            }
            img.onerror=function(){
                reject()
            }
            img.src=src
        })
        return promise
    }

    var src='https://.....jpeg'
    var result = loadImg(src)
    result.then(function(img){
        console.log('success', img)
    }, function(){
        console.log('fail')
    })
    result.then(function(img){
        console.log('success', img.height)
    })
}

new Promise  并返回promise

有两个函数参数，函数有resolve，reject

成功执行resolve，失败调用reject

then监听结果

模块化

case1

export let A = 123

export function test(){
    console.log('test')
}
export class Hello {
    test(){
        console.log('hello')
    }
}

import {A, test, Hello} from './a'

console.log(A, test, Hello)

import * as m from './a'

console.log(m.A, m.test, m.Hello)

case2

let A = 123

function test(){
    console.log('test')
}
class Hello {
    test(){
        console.log('hello')
    }
}
export default{
    A,
    test,
    Hello
}

import m from './a'

console.log(m.A, m.test, m.Hello)

注意有无default