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