几个小case

案例1：可选链

读取一个被连接对象的深层次的属性的值

    const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80号'
        }
    }
}

ES5语法：

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()

ES6+语法：

const street = user?.address?.street
const num = user?.address?.getNum?.()

案例2：消除魔术字符串

魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。

ES5语法：

    function getArea(shape) {
        let area = 0
        switch (shape) {
            case 'Triangle':
                area = 1
                break
            case 'Circle':
                area = 2
                break
        }
        return area
    }
    getArea('Triangle')

ES6+语法：

        const shapeType = {
        triangle: Symbol(),
        circle: Symbol()
    }
    function getArea(shape) {
        let area = 0
        switch (shape) {
            case shapeType.triangle:
                area = 1
                break
            case shapeType.circle:
                area = 2
                break
        }
        return area
    }
    getArea(shapeType.triangle)

案例3：将类数组转化为数组

const arrayLike = document.querySelectorAll('.item')

ES5语法 Array.prototype.slice.call(arrayLike)

ES6+语法 Array.from(arrayLike)

案例4：优雅的异步操作与解构赋值

ES5语法

    function getData (url) {
        ajax(url, function (res) {
            var data = res.data
            this.list = data
        })
    }

ES6+语法

    async function getData (url) {
    const { data } = await axios.get(url)
    this.list = data
}