Skip to main content

几个小case

我们通过几个案例,来对比ES6+语法新特性的魅力所在。

案例1:可选链

读取一个被连接对象的深层次的属性的值

const user = {
address: {
street: 'xx街道',
getNum() {
return '80号'
}
}
}

ES5语法:

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()

ES6+语法:

const street = user?.address?.street
const num = user?.address?.getNum?.()

案例2:消除魔术字符串

魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

ES5语法:

function getArea(shape) {
let area = 0
switch (shape) {
case 'Triangle':
area = 1
break
case 'Circle':
area = 2
break
}
return area
}
getArea('Triangle')

ES6+语法:

const shapeType = {
triangle: Symbol(),
circle: Symbol()
}
function getArea(shape) {
let area = 0
switch (shape) {
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
getArea(shapeType.triangle)

案例3:将类数组转化为数组

const arrayLike = document.querySelectorAll('.item')

ES5语法

Array.prototype.slice.call(arrayLike)

ES6+语法

Array.from(arrayLike)

案例4:优雅的异步操作与解构赋值

ES5语法

function getData (url) {
ajax(url, function (res) {
var data = res.data
this.list = data
})
}

ES6+语法

async function getData (url) {
const { data } = await axios.get(url)
this.list = data
}