使前端代码看起来更简洁的js写法

三元表达式

使用前

if(a === 0){
	console.log('0')
} else {
	console.log('1')
}

使用后

a === 0 ? console.log('0') : console.log('1')

巧用&&

这里原理主要是，第一个条件成立时（true）会执行第二个条件
使用前

let a = 1,b
if(a === 1){
	b = a
}
console.log(b)	 // 1

使用后

a===1 && (b=a)	// 注意这里b=a要加括号，否则根据符号优先级，执行顺序会出错
console.log(b) 	// 1

解构赋值

使用前

let obj = {
	"a":"1",
	"b":"2",
	"c":"3",
	"d":"4",
	"e":"5",
	"f":"6",
	"g":"7",
}
function init(){
	let a = obj.a
	let b = obj.b
	let c = obj.c
	let d = obj.d
	let e = obj.e
	let f = obj.f
	let g = obj.g
	console.log(a, b, c, d, e, f, g)
}

init()

使用后

let obj = {
	"a":"1",
	"b":"2",
	"c":"3",
	"d":"4",
	"e":"5",
	"f":"6",
	"g":"7",
}
function init(){
	let {a, b, c, d, e, f, g} = obj
	console.log(a, b, c, d, e, f, g)
}
init()

双问号操作符

使用前

let b
let item = {}
if(item.a) {
	b = item.a
}
else {
	b = 'a'
}

使用后

let b
let item = {}
b = item.a ?? '11111'   // 当item.a的值是null或者undefined时，会把字符串赋值给b

单问号操作符（可选链）

使用前

let b
let items = [
	{
		"name": "itemA",
		"type": {
			"typeName": "A"
		}
	},
	 {
		"name": "itemB",
		"type": {}
	},
	{
		"type": {}
	}
]
let newItems = []
newItems = items.map( item => {
	if(item.type !== undefined && item.type !== null) {
		if(item.type.typeName !== undefined && item.type.typeName !== null) {
			return item.type.typeName
		}
	}
	if (item.name!== undefined && item.name!== null){
		return item.name
	}
	return '未知'
})
console.log(newItems)   // ['A', 'itemB', '未知']

使用后

let b
let items = [
	{
		"name": "itemA",
		"type": {
			"typeName": "A"
		}
	},
	 {
		"name": "itemB",
		"type": {}
	},
	{
		"type": {}
	}
]
let newItems = []
newItems = items.map( item => {
	return item.type?.typeName ?? item.name ??  '未知'
})
console.log(newItems)   // ['A', 'itemB', '未知']