10 Vue - ES6语法补充

1  let 关键字

用法跟var没区别，但规定变量必须先声明后使用（即：没有变量提升）

 

2 模板字符串

let name = "zhang"
let age = 18
let city = "beijing"
# 使用。用1前面的符号包裹字符串
let str = `姓名：${name } 年龄：${age } 城市：${city }`
console.log(str)

 

3 对象中的简化内容

let name = "zhang"
let city = "beijing"
let person = {
    # 如果属性名和变量名相同，可以简写
    name,  // 相当于name：name
    city,  // 相当于city：city
    # 方法可以写为以下方式
    sayHello(){
        console.log("hello")
    }
}

 

4 箭头函数（可以解决axios请求this赋值that问题）

• 原则

function 省略掉，替换为 =>
参数只有一个时，可以省略()
函数体只有一行时，可以省略{}
函数体只有一行，并且有返回值时，如果省略了{}，必须省略return

• 无参数，一行代码，无返回

原函数
let func1 = function(){
    console.log("hello")
}
箭头函数
let func1 = () => console.log("hello")

• 一个参数，一行代码，无返回

原函数
let func2 = function(p1){
    console.log(p1)
}
箭头函数
let func2 = p2 => console.log(p1)

• 2个参数，多行，无返回

原函数
let func3 = function(p1,p2){
    console.log(p1)
    console.log(p2)
}
箭头函数
let func3 = (p1,p2) => {
    console.log(p1)
    console.log(p2)
}

• 无参数，一行，有返回

原函数
let func4 = function(){
    return "hello"
}
箭头函数
let func4 = () => "hello"

• 一个参数，一行，有返回

原函数
let func4 = function(p1){
    return p1 + "hello"
}
箭头函数
let func4 = p1 => return p1 + "hello"

• 2个参数，多行，有返回

原函数
let func5 = function(p1,p2){
    console.log(p1,p2)
    return p1 + p2
}
箭头函数
let func5 = (p1,p2) => {
    console.log(p1,p2)
    return p1 + p2
}