ES6语法

一、CONST

• 不允许重复声明
• 不属于顶层对象window
• 不存在变量提升
• 暂时性死区（先声明后使用）
• 块级作用域（块级作用域内有用）

二、 Arrow Function（箭头函数）

https://es6.ruanyifeng.com/#d...

三、 解构赋值

const obj = {
    name: '张三',
    age: 30,
    hobby: ['篮球','足球'],
    school: {
        name: '北大附中',
        city: '北京'
    }
}

const {
    name: aliaName, // 别名
    age, 
    hobby,
    school: {
        name,
        city
    }
} = obj
console.log(aliaName,age,hobby,name,city)
打印： 张三，30，['篮球','足球']，北大附中，北京

在项目中使用解构赋值

// 当作函数参数传递
方式一：
const sum = ([a, b]) => {
    return a+b; // 5
}
sum([2,3])

// 方式二：
const foo = ({name, age}) => {
    console.log(name, age); // 张三， 30
}
foo({
    name: '张三',
    age: 30
})

// 两个值交换
let a = 1;
let b = 2;
[b,a] = [a,b]

// Ajax请求（json格式）
json:
{
    "name": "张三",
    "age": 30
}

axios.get('./data.json', (res) => {
    console.log(res); //  {..., data:{name:张三',age:30}, ...}
})
axios.get('./data.json', ({data}) => {
    console.log(data); // {name:张三',age:30} 
})
axios.get('./data.json', ({data:{name, age}}) => {
    console.log(name,age); // 张三, 30
})

四、ES6运算符扩展

4.1 链判断运算符

a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

五、Symbol [ 消除魔术字符串 ]

// 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.triangle:
            area = 2
            break
    }
   return area
}

getArea(shapeType.triangle)