下次新項目一樣要用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)
