看代码及注释就懂了
把ES6(es2015)代码转换为ES5代码
- $ npm install -g babel-cli
- $ npm install babel-preset-env –save
- $ babel ./src/es6.js -w –out-file ./dist/es5.js –presets env
解构赋值
const breakfast = () => ['cake', 'coffee', 'apple']
let [dessert, drink, fruit] = breakfast()
console.info(dessert, drink, fruit) // 'cake' 'coffee' 'apple'
const breakfast = () => {
return {
dessert: 'cake',
drink: 'coffee',
fruit: 'apple'
}
}
let {dessert, drink, fruit} = breakfast()
console.info(dessert, drink, fruit) // 'cake' 'coffee' 'apple'
字符串
- 反引号代替引号:
`some content ${variable} some content`
- str.includes()、str.startsWidth()、str.endsWith() 代替了正则表达式匹配
数组展开符
// 利用 Array 的 concat() 实现
let breakfast = ['cake', 'coffee', 'apple']
let food = ['rice', ...breakfast]
console.info(...breakfast, food) // 'cake' 'coffee' 'apple', ["rice", "cake", "coffee", "apple"]
对象
// 对象属性
let food = {}
let drink = 'hot drink'
food[drink] = 'milk'
console.log(food['hot drink']) // 'milk'
let food = {}
let drink = 'hot drink'
food[drink] = 'milk'
let dessert = 'cake'
food.fruit = 'banane'
let breakfast = Object.assign({}, {dessert}, food) // {dessert} 有属性有值
console.log(breakfast) // {dessert: "cake", hot drink: "milk", fruit: "banane"}
集合 Set 和 Map
let fruit = new Set(['apple', 'banane', 'orange'])
/* 添加元素,但是不会添加相同的元素,利用这个特性实现数组去重:[...new Set(arr)] */
fruit.add('pear')
/* 元素数量 */
console.log(fruit.size) // 4
/* 是否有指定元素 */
console.log(fruit.has('apple')) // true
/* 删除元素 */
fruit.delete('banana')
console.log(fruit) // Set(4) {"apple", "banane", "orange", "pear"}
/* 遍历 */
fruit.forEach(item => {
console.log(item)
})
/* 清空 */
fruit.clear()
console.log(fruit) // Set(0) {}
let food = new Map()
let fruit = {}, cook = function(){}, dessert = '甜点'
food.set(fruit, 'apple')
food.set(cook, 'knife')
food.set(dessert, 'cake')
console.log(food, food.size) // Map(3) {{…} => "apple", ƒ => "knife", "甜点" => "cake"} 3
console.log(food.get(fruit)) // "apple"
console.log(food.get(dessert)) // "cake"
food.delete(dessert)
console.log(food.has(dessert)) // false
food.forEach((value, key) => {
console.log(`${key} = ${value}`) // [object Object] = apple function(){} = knife
})
food.clear()
console.log(food) // Map(0) {}
Generator
function* calc(num){
yield num+1
yield num-2
yield num*3
yield num/4
return num
}
let cal = calc(4)
console.info(
cal.next(), // {value: 5, done: false}
cal.next(), // {value: 2, done: false}
cal.next(), // {value: 12, done: false}
cal.next(), // {value: 1, done: false}
cal.next(), // {value: 4, done: true} 遍历完了后 done:true
cal.next() // {value: undefined, done: true}
)
类
class Chef{
constructor(food){
this.food = food;
this.dish = [];
}
get menu(){ // 不得有参数(Getter must not have any formal parameters.)
console.log('getter 取值')
console.log(this.dish)
return this.dish
}
set menu(dish){ // 必须有一个参数(Setter must have exactly one formal parameter.)
console.log('setter 存值')
this.dish.push(dish)
}
cook(){
console.log(this.food)
}
}
let Gu = new Chef('vegetables');
Gu.cook() // "vegetables"
console.log(Gu.menu) // "get 取值" []
Gu.menu = 'egg' // "setter 存值"
Gu.menu = 'fish' // "setter 存值"
console.log(Gu.menu); // "getter 取值" ["egg", "fish"]
class Person {
constructor(name, birth){
this.name = name
this.birth = birth
}
intro(){
return `${this.name}的生日是${this.birth}`
}
}
class One extends Person {
constructor(name, birth){
super(name, birth)
}
}
let z = new Person('zz', '01-09')
let x = new One('xx', '01-09')
console.log(z.intro(), x.intro()) // "zz的生日是01-09" "xx的生日是01-09"
// 转化为ES5的代码大概就是
/* function Person(name, birth) {
this.name = name;
this.birth = birth;
}
Person.prototype.intro = function () {
return this.name + '\u7684\u751F\u65E5\u662F' + this.birth;
};
function One(name, birth) {
Person.apply(this, arguments);
}
One.prototype = new Person();
var z = new Person('zz', '01-09');
var x = new One('xx', '01-09');
console.log(z.intro(), x.intro()); // "zz的生日是01-09" "xx的生日是01-09" */
Promise
- 回调地狱
function ajax(fn){
setTimeout(()=>{
console.log('执行业务')
fn()
},1000)
}
ajax(()=>{
ajax(()=>{
ajax(()=>{
ajax(()=>{
console.log('执行结束4')
})
console.log('执行结束3')
})
console.log('执行结束2')
})
console.log('执行结束1')
})
/*
效果:
1s: 执行业务 执行结束1
2s: 执行业务 执行结束2
3s: 执行业务 执行结束3
4s: 执行业务 执行结束4
*/
- Promise 这样写
function delay(word){
return new Promise((reslove,reject) => {
setTimeout(()=>{
console.log('执行业务')
reslove(word)
},1000)
})
}
delay('执行业务1')
.then(word=>{
console.log(word)
return delay('执行业务2')
})
.then(word=>{
console.log(word)
return delay('执行业务3')
})
.then(word=>{
console.log(word)
return delay('执行业务4')
})
.then(word=>{
console.log(word)
})
.catch()
- async + await
function delay(word){
return new Promise((reslove, reject) => {
setTimeout(()=>{
console.log('执行业务')
reslove(word)
},1000)
})
}
const start = async () => {
const word1 = await delay('执行业务1')
console.log(word1)
const word2 = await delay('执行业务2')
console.log(word2)
const word3 = await delay('执行业务3')
console.log(word3)
const word4 = await delay('执行业务4')
console.log(word4)
}
start()