ES6里面实用技巧

本文整理ES6里面的一些实用技巧，能提高编码效率。例子是用Vue里面编写。
例子1：利用展开符…赋值

test_spreed_symbol() { //展开操作符
	console.log('展开操作符，展开数组：');
	let arr1 = ['1', '2'];
	let arr2 = ['3', '4', ...arr1];
	console.log('arr1：', arr1);
	console.log('arr2：', arr2);

	console.log('展开操作符，展开对象：');
	let user = {
		name: 'zhangsan',
		nick: '张三'
	};
	let userex = {
		...user,
		age: 26
	};
	console.log('user：', user);
	console.log('userex：', userex);
}

例子2：格式化字符串

test_format_string() { //格式化字符串
	console.log('格式化字符串：');
	const {
		str1,
		str2
	} = {
		str1: '晴',
		str2: '26°C'
	};
	const fmtStr = `今天天气${str1},温度${str2}`;
	console.log('fmtStr：', fmtStr);
}

例子3：剩余操作符

test_remain_argcs(argc1, argc2, ...remain) { //剩余操作符
	console.log('剩余操作符：');
	console.log('argc1 = ', argc1);
	console.log('argc2 = ', argc2);
	console.log('remain = ', remain);
}

例子4：解构赋值

test_parse_assignment() { //解构赋值
	console.log('解构赋值：');
	const {
		code,
		data: [
			[
				{
					Authoper,
					Authview,
					DepartId,
					Id,
					Name,
					RegTime,
					Remarks
				}
			]
		]
	} = {
		code: "0",
		data: [
			[	
				{
					Authoper: "{}",
					Authview: "{}",
					DepartId: 1,
					Id: 1,
					Name: "系统管理员",
					RegTime: "2020-06-14 22:12:32",
					Remarks: "系统管理员"
				}
			]
		]
	};
	console.log('code = ', code);
	console.log(Authoper, Authview, DepartId, Id, Name, RegTime, Remarks);
}

例子5：测试异步处理

do_somethings() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('----------------do_somethings');
			resolve('done');
		}, 3000)
	})
},
async test_async_await() { //测试异步操作
	try {
		const some = await this.do_somethings();
		return some;
	} catch (err) {
		// 在这里处理错误，建议返回某个值或者重新抛出错误
	}
}

例子6：测试箭头函数解决this作用域的问题

test_arrow_function() { //测试箭头函数
	let arr = [1,2,3];
	this.total = 0;

	arr.forEach((item) => {
		this.total += item; // `this` 指向外层函数
	})
	console.log('[test_arrow_function]total = ', this.total);
	return this.total;
}