你不知道ES6的那些事

1- 关于数组扁平化的处理

	// 需求是获取所有车辆的id放到一哥数组集合中
	const objs = {
		'奥拓': [100,120,130],
		'奔腾': [46,52,67],
		'宝骏': [123,234,456]
	}
	// 旧版
	let carList = []
	for(let item in objs) {
		const value = objs[item]
		if(carList instanceof Array) { carList = [ ...carList, ...value ] } 
	}
	carList = [...new Set(carList)]

	// 新版处理
	// 如果不加Infinity扁平化的深度只能到达2层, 如需无视层数添加Infinity参数
	// 缺点 flat 方法不支持 IE 浏览器
	carList = Object.values(carList).flat(Infinity) 
	

2- 获取对象的属性值

	// 正常获取对象中的属性，首先判断对象是否存在, 再去读
	const name = obj && obj.name

ES6中提供了一个可选链操作符

	const name = obj?.name

3- 输入框非空判断

在处理输入框业务时，往往处理非空校验时

 if(value !== null && value !== undefined && value !== '' ) {  ... }

ES6新增空值合并运算符

	if((value??'') !== '' ) { ... }

4-对象解构（工作中的坑）

在解构一个不存在的属性时　报错
后端返回的值是个动态的，所以有时候会不存在这个值，然后了解了很多方法

	// 正常解构
	let a = { person: { name: 1 } }
	const { name } = a.person
	console.log(name) // 1  
	
	// 解构别名
	let b = { person: { name: 2 } }
	const { name: nums } = b.person
	// 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
	console.log(name) // ''  Es6 官网是说报错。控制台打印就是 '' 因为name是window的属性，所以是''
	console.log(nums) // 2 解构别名
	
	// 别名和默认值 (当要解构的对象中不包含这个属性的时候, 就可以设置默认值)
	let c = { person: { age: '3' } }
	const { name: name = '3' } = c.person
	console.log(name) // 3 解构默认值
	// 默认值生效的条件是，对象的属性值严格等于undefined 
	// 因为在获取一个对象不存在的属性的时候 调用的对象的 [[get]]: 获取函数, 在读取属性时调用, 默认值 undefined 
	
	// es2020 null 判断运算符 ?? 
	let d = { person: { age: 4 } }
	//只有运算符左侧的值为null或undefined时，才会返回右侧的值。
	const name = d.person.name ?? '4'
	console.log(name) // 4
	// 如果person要解构的值不止一个，还是推荐使用解构的默认值
	

慢慢更新