ES6中的语法

下次新项目一样要用es6的写法┗( ▔, ▔ )┛

模板字符串

之前字符串要使用大量的""（双引号）和 '+' 来拼接才能达到我们需要的模板，比如

let name = "Henry"
let element =" <p>我的名字叫"+ name + "很高兴认识你</p>"

在拼接的过程中经常会出现哪个引号多写，少写，写得不对的情况，导致结果出现问题

使用模板字符串可以解决这繁琐的事情,模板字符串的写法简易很多，只需要用``(Tab键上方)将需要拼接的字符串包起来便可，如果里面有变量，则需要用${}将变量包起来就可以了，如下代码

let name = "Henry"
let element =`<p>我的名字叫+ ${name} + 很高兴认识你</p>`

也可以在里面调用方法,如下代码

let name = "Henry"
function makeUppercase(word) {
    return word.toUpperCase();
}
let template = `<p>我的名字叫+ ${makeUppercase(name)} + 很高兴认识你`
console.log(template) //<p>我的名字叫+ HENRY + 很高兴认识你

箭头函数

es5中我们写函数方法需要写上function

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

箭头函数不需要写function，在形参后面加上=> 箭头

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

如果箭头函数里面只有一行代码return的话，可以将return省略掉，如果只有一个形参，形参外面的括号也可以省略掉

const doublel3 = number=> number * 2
//也可以这样写
const doublel4 = (number=>number*5)

但是如果有两个形参，甚至多个形参时，就需要用（）将形参都包裹起来

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

做个小练习

map一个数组，让数组中的值以double形式展示
 const numbers = [1,2,3];
// es5的写法
 const sum = numbers.map(function(number) {
     return number * 2
 })
//es6 箭头函数
 const sum2 = numbers.map(number=>number * 2)

箭头函数还能改变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小组"]

以上代码显示调用team.teamSummary()打印出来的this.teamName为undefined，我们知道，在全局作用域下 this对象指向的是window对象，在对象里面，this的指向是当前该对象，但是调用了map函数以后，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.使用箭头函数

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}小组`
        })
    }
}

增强对象字面量

Tips：其实只是缩减代码的作用

//使用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"))


//增强对象字面量的写法，其实就是属性如果跟值的命名一样的话，可以将属性和值合并
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"))

函数参数默认值

es5中，如果形参和实参数量不相等，要判断是否存在某个实参传过来，需要写判断语句

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

函数参数默认值是指如果某个实参不存在的话，就给他显示默认值

//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()))

展开运算符

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

解构

var expense = {
     type:"es6",
     amount:"45"
 }
// 普通取值
 var type = expense.type
 var amount = expense.amount
console.log(type,amount) //es6 45
// 解构取值
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"] //中括号
解构
const [name1,name2,name3] = names;
console.log(name1,name2,name3)
const {length} = names //花括号
console.log(length)

结合展开运算符
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 解构
const [{age}] = people
console.log(age)



使用场景，将数组转化为对象
const points = [
    [4,5],
    [10,1],
    [0,40]
];

期望数据格式
[
    {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)