1、对象属性同名简写
以前同名属性需要这么写
const name = '林三心'
const age = '22'
const obj = {
name: name,
age: age
}
console.log(obj) // { name: '林三心', age: '22' }
ES6新增语法,只需这么写
const name = '林三心'
const age = '22'
// 属性同名可简写
const obj = {
name,
age
}
console.log(obj) // { name: '林三心', age: '22' }
2、Promise
Promise
,中文名为承诺
,承诺在哪呢?承诺在,一旦他的状态改变,就不会再改。这里就介绍基本使用,如果想要深入理解如何使用,请看我的另一篇文章看了就会,手写Promise原理,最通俗易懂的版本!!!
看看基本使用
-
成功状态
function requestData () {
// 模拟请求
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('林三心')
}, 1000)
})
}
requestData().then(res => {
console.log(res) // 一秒钟后输出 '林三心'
}, err => {
console.log(err)
})
-
失败状态
function requestData () {
// 模拟请求
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('错误啦')
}, 1000)
})
}
requestData().then(res => {
console.log(res)
}, err => {
console.log(err) // 一秒钟后输出 '错误啦'
})
-
all
方法-
接收一个Promise数组,数组中如有非Promise项,则此项当做成功
-
如果所有Promise都成功,则返回成功结果数组
-
如果有一个Promise失败,则返回这个失败结果
-
// 如果全都为成功
function fn(time) {
return new Promise((resolve, reject) => {
console.log(88)
setTimeout(() => {
resolve(`${time}毫秒后我成功啦!!!`)
}, time)
})
}
Promise.all([fn(2000), fn(3000), fn(1000)]).then(res => {
// 3秒后输出 [ '2000毫秒后我成功啦!!!', '3000毫秒后我成功啦!!!', '1000毫秒后我成功啦!!!' ]
console.log(res)
}, err => {
console.log(err)
})
// 如果有一个失败
function fn(time, isResolve) {
return new Promise((resolve, reject) => {
setTimeout(() => {
isResolve ? resolve(`${time}毫秒后我成功啦!!!`) : reject(`${time}毫秒后我失败啦!!!`)
}, time)
})
}
Promise.all([fn(2000, true), fn(3000), fn(1000, true)]).then(res => {
console.log(res)
}, err => {
console.log(err) // 3秒后输出 '3000毫秒后我失败啦!!!'
})
-
race
方法-
接收一个Promise数组,数组中如有非Promise项,则此项当做成功
-
哪个Promise最快得到结果,就返回那个结果,无论成功失败
-
function fn(time, isResolve) {
return new Promise((resolve, reject) => {
setTimeout(() => {
isResolve ? resolve(`${time}毫秒后我成功啦!!!`) : reject(`${time}毫秒后我失败啦!!!`)
}, time)
})
}
Promise.race([fn(2000, true), fn(3000), fn(1000)]).then(res => {
console.log(res)
}, err => {
console.log(err) // 1秒后输出
})
3、class
以前咱们使用构造函数生成对象,这么做
function Person(name) {
this.name = name
}
Person.prototype.sayName = function () {
console.log(this.name)
}
const kobe = new Person('科比')
kobe.sayName() // 科比
而有了ES6的class
可以这么做
class Person {
constructor(name) {
// 构造器
this.name = name
}
sayName() {
console.log(this.name)
}
}
const kobe = new Person('科比')
kobe.sayName() // 科比
值得一提的是,class
本质也是function
,class
是function
的语法糖
class Person {}
console.log(typeof Person) // function
除了以上,还需要知道class的以下知识点
静态属性和静态方法,使用static
定义的属性和方法只能class自己用,实例用不了
class Person {
constructor(name) {
this.name = name
}
static age = 22
static fn() {
console.log('哈哈')
}
}
console.log(Person.age) // 22
Person.fn() // 哈哈
const sunshine_lin = new Person('林三心')
console.log(sunshine_lin.age) // undefined
sunshine_lin.fn() // fn is not a function
extend
继承
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
}
class Cat extends Animal {
say() {
console.log(this.name, this.age)
}
}
const cat = new Cat('ketty', 5) // 继承了Animal的构造器
cat.say() // ketty 5
4、解构赋值
以前想提取对象里的属性需要这么做
const obj = {
name: '林三心',
age: 22,
gender: '男'
}
const name = obj.name
const age = obj.age
const gender = obj.gender
console.log(name, age, gender) // 林三心 22 男
ES6新增了解构赋值的语法
const obj = {
name: '林三心',
age: 22,
gender: '男',
doing: {
morning: '摸鱼',
afternoon: '摸鱼',
evening: 'sleep'
}
}
const { name, age, gender } = obj
console.log(name, age, gender) // 林三心 22 男
// 解构重名
const { name: myname } = obj
console.log(myname) // 林三心
// 嵌套解构
const { doing: { evening } } = obj
console.log(evening) // sleep
也可以进行数组的解构
const arr = [1, 2, 3]
const [a, b, c] = arr
console.log(a, b, c) // 1 2 3
// 默认赋值
const [a, b, c, d = 5] = arr
console.log(a, b, c, d) // 1 2 3 5
// 乱序解构
const { 1: a, 0: b, 2: c } = arr
console.log(a, b, c) // 2 1 3