JavaScript ES6即后续版本学习

1、可选链

const user = {

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
}