ES6中的語法

下次新項(xiàng)目一樣要用es6的寫法┗( ▔, ▔ )┛

模板字符串

之前字符串要使用大量的""（雙引號）和 '+' 來拼接才能達(dá)到我們需要的模板漠秋，比如

let name = "Henry"
let element =" <p>我的名字叫"+ name + "很高興認(rèn)識你</p>"

在拼接的過程中經(jīng)常會出現(xiàn)哪個(gè)引號多寫笙蒙，少寫，寫得不對的情況庆锦，導(dǎo)致結(jié)果出現(xiàn)問題

使用模板字符串可以解決這繁瑣的事情,模板字符串的寫法簡易很多捅位，只需要用``(Tab鍵上方)將需要拼接的字符串包起來便可，如果里面有變量搂抒，則需要用${}將變量包起來就可以了艇搀，如下代碼

let name = "Henry"
let element =`<p>我的名字叫+ ${name} + 很高興認(rèn)識你</p>`

也可以在里面調(diào)用方法,如下代碼

let name = "Henry"
function makeUppercase(word) {
    return word.toUpperCase();
}
let template = `<p>我的名字叫+ ${makeUppercase(name)} + 很高興認(rèn)識你`
console.log(template) //<p>我的名字叫+ HENRY + 很高興認(rèn)識你

箭頭函數(shù)

es5中我們寫函數(shù)方法需要寫上function

const doublel = function(number) {
    return number * 2;
 }

箭頭函數(shù)不需要寫function，在形參后面加上=> 箭頭

 const doublel2 = (number)=> {
     return number * 2;
}

如果箭頭函數(shù)里面只有一行代碼return的話求晶，可以將return省略掉焰雕，如果只有一個(gè)形參，形參外面的括號也可以省略掉

const doublel3 = number=> number * 2
//也可以這樣寫
const doublel4 = (number=>number*5)

但是如果有兩個(gè)形參芳杏，甚至多個(gè)形參時(shí)矩屁，就需要用（）將形參都包裹起來

 const doublel5 = (number1,number2)=>number1 + number2
//或者
const doublel6 = (number1,number2)=> {
     sum = number1 + number2
     return sum
}

做個(gè)小練習(xí)

map一個(gè)數(shù)組，讓數(shù)組中的值以double形式展示
 const numbers = [1,2,3];
// es5的寫法
 const sum = numbers.map(function(number) {
     return number * 2
 })
//es6 箭頭函數(shù)
 const sum2 = numbers.map(number=>number * 2)

箭頭函數(shù)還能改變this的指向

const team = {
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function() {
        return this.members.map(function(member) {
            // this不知道指向誰了
            return `${member}隸屬于${this.teamName}小組`
        })
    }
}
console.log(team.teamSummary()) //["Henry隸屬于undefined小組", "Elyse隸屬于undefined小組"]

以上代碼顯示調(diào)用team.teamSummary()打印出來的this.teamName為undefined爵赵，我們知道吝秕，在全局作用域下 this對象指向的是window對象，在對象里面空幻，this的指向是當(dāng)前該對象烁峭，但是調(diào)用了map函數(shù)以后，this就不知道該指向誰了，所以顯示undefined

針對this指向约郁，可以使用以下方式解決
tips：還有其他方式改變this的指向缩挑，這里只列舉了這幾種

提前將this保存起來

const team = {
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function() {
        let self = this;
        console.log(self)
        return this.members.map(function(member) {
            return `${member}隸屬于${self.teamName}小組`
        }
    }
}

2.使用bind將this保存起來

const team = {
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary:function() {
        let self = this;
        console.log(self)
        return this.members.map(function(member) {
            return `${member}隸屬于${this.teamName}小組`
        }.bind(this))
    }
}

3.使用箭頭函數(shù)

const team = {
    members:["Henry","Elyse"],
    teamName:"es6",
    teamSummary() {
        let self = this;
        console.log(self)
        return this.members.map((member)=> {
            // this指向team
            return `${member}隸屬于${this.teamName}小組`
        })
    }
}

增強(qiáng)對象字面量

Tips：其實(shí)只是縮減代碼的作用

//使用es5
function createBookShop(inventory) {
    return {
        inventory : inventory,
        inventoryValue:function() {
            return this.inventory.reduce((total,book)=> total + book.price,0)
        },
        priceForTitle:function(title) {
            return this.inventory.find(book=> book.title === title).price
        }
    }
}
const inventory = [
    {title:"VUe",price:10},
    {title:"Angular",price:15}
];
const bookShop = createBookShop(inventory)
console.log(bookShop.inventoryValue())
console.log(bookShop.priceForTitle("Angular"))


//增強(qiáng)對象字面量的寫法，其實(shí)就是屬性如果跟值的命名一樣的話鬓梅，可以將屬性和值合并
function createBookShop(inventory) {
    return {
        inventory,
        inventoryValue() {
            return this.inventory.reduce((total,book)=> total + book.price,0)
        },
        priceForTitle(title) {
            return this.inventory.find(book=> book.title === title).price
        }
    }
}
const inventory = [
    {title:"VUe",price:10},
    {title:"Angular",price:15}
];
const bookShop = createBookShop(inventory)
console.log(bookShop.inventoryValue())
console.log(bookShop.priceForTitle("Angular"))

函數(shù)參數(shù)默認(rèn)值

es5中供置，如果形參和實(shí)參數(shù)量不相等，要判斷是否存在某個(gè)實(shí)參傳過來绽快，需要寫判斷語句

//es5
function makeAjaxRequest(url,method) {
    if(!method) {
        method = "get"
    }
    return method
}
console.log(makeAjaxRequest("google.com"))

函數(shù)參數(shù)默認(rèn)值是指如果某個(gè)實(shí)參不存在的話士袄，就給他顯示默認(rèn)值

//es6
function makeAjaxRequest(url,method = "get") {
    return method
}
console.log(makeAjaxRequest("google.com"))

function User(id) {
    this.id = id;
}
console.log(new User(1))
function randomId() {
    return Math.random() * 999999
}
console.log(new User(randomId()))

展開運(yùn)算符

function addNumbers(...numbers) {
    return numbers.reduce((sum,number) => {
        return sum + number
    },0)
} 
 console.log(addNumbers(1,2,3,4,5,6,7,8,9))

解構(gòu)

var expense = {
     type:"es6",
     amount:"45"
 }
// 普通取值
 var type = expense.type
 var amount = expense.amount
console.log(type,amount) //es6 45
// 解構(gòu)取值
const {type,amount,abc} = expense
 console.log(type,amount,abc) //es6 45 undefined

var saveFiled = {
    extension:"jpg",
    name:"girl",
    size:14040
}
es5
function fileSammary(file) {
    return `${file.name}.${file.extension}的總大小是${file.size}`
}
 es6
function fileSammary({name,extension,size}) {
    return `${name}.${extension}的總大小是${size}`
}
console.log(fileSammary(saveFiled))

const names = ["henry","bucky","emily"] //中括號
解構(gòu)
const [name1,name2,name3] = names;
console.log(name1,name2,name3)
const {length} = names //花括號
console.log(length)

結(jié)合展開運(yùn)算符
const [name,...rest] = names
console.log(name)

const people = [
    {name:"henry",age:20},
    {name:"bucky",age:25},
    {name:"emily",age:30}
];

es5
var age = people[0].age;
console.log(age)
es6 解構(gòu)
const [{age}] = people
console.log(age)



使用場景，將數(shù)組轉(zhuǎn)化為對象
const points = [
    [4,5],
    [10,1],
    [0,40]
];

期望數(shù)據(jù)格式
[
    {x:4,y:5},
    {x:10,y:1},
    {x:0,y:40}
]
方法一
let newPoints = points.map(pair=> {
    const [x,y] = pair
    return {x,y}
})
console.log(newPoints)
方法二
let newPoints = points.map(([x,y])=> {
        return {x,y}
})
console.log(newPoints)