开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情
大家好，我是林家少爷，是一位专注于前端技术，立志成为前端技术专家的热血青年。
从2023年1月17日开始，我决定开辟一个新的专栏【刷爆LeetCode】，每天至少刷一道LeetCode原题，并且使用Typescript和原生JS来编写代码。
今天是第3天ヾ(◍°∇°◍)ﾉﾞ
让大家了解一下我此时此刻所在的地方：
没错，我今天早上搬完家，下午就马不停蹄地赶过来公司，我负责的，模块还有一点收尾需要做的，但是很可惜token没有访问权限，只能明天再找同事开一下权限。
这是我的新家，搬家前搬家后，还需要收拾，我是希望能够把家的氛围弄好一点，这样更加有学习的氛围，说不定能够提高学习效率也说不定。
满目都是凌乱感，受不了，回去收拾完再睡觉！！
但是也不是白跑一趟，起码知道了怎么摆渡~
接着昨天的话题，继续更新一下工作中常用的es6语法：
if中的判断语句
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
经过改进后，可以简写成：
const condition = [1, 2, 3, 4] const type = 11 if (condition.includes(type)) { console.log('这是真的吗') }
列表搜索
在正式项目开发中，面对一些没有分页的列表的搜索功能，一般是前端来负责实现。
搜索一般分为精确搜索和模糊搜索，搜索也叫作过滤。
一种是模糊搜索，一般用filter来实现：
const a = [1, 2, 3, 4, 5] const result = a.filter((item) => { return item === 3 }) console.log('result', result)//[3]
但是，如果是精确搜索，需要使用ES6中的find
const a = [1,2,3,4,5];
const result = a.find(
item =>{
return item === 3
}
)
获取对象属性值
const name = obj && obj.name;
可以使用ES6中的可选链操作符：
const name = obj?.name;
扁平化数组
在开发ERP系统或者人事管理系统中，经常会遇到一个应用场景：
一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在需求是需要把部门的成员id都提取到一个数组集合中：
const deps = {
'数据部':[1,2,3],
'DT部':[5,8,12],
'行政部':[5,14,79],
'人事部':[3,64,105],
}
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
这时候我仿佛听到前端组长开始开骂啦：
获取对象的全部属性值还需要遍历？性能优化好不好，Object.values忘记了？之前没用过ES6？（灵魂拷问），还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法？
我……（无言以对）
const deps = {
'数据部':[1,2,3],
'DT部':[5,8,12],
'行政部':[5,14,79],
'人事部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
其中使用Infinity作为flat参数，这样可以无需知道被扁平化的数组的维度。
添加对象属性值
当给对象添加属性时，如果属性名是动态变化的，该怎么处理：
let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';
为什么要额外创建一个变量。
（指着我）难道你不知道ES6中的对象属性名是可以用表达式的吗？
改进后：
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
输入框非空的判断
在日常开发中，无论PC端还是移动端，在处理输入框相关业务的时候，往往会判断输入框未输入值的场景：
if(value !== null && value !== undefined && value !== ''){
//...
}
可以改进为：
if((value??'') !== ''){
//...
}
是不是省了一大堆代码，惊不惊喜，意不意外！！！
获取对象属性值
举个栗子：
const name = obj && obj.name;
改进后：
const name = obj?.name;
异步函数
异步函数非常常见，直接上栗子：
const fn1 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 300);
});
}
const fn2 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 600);
});
}
const fn = () =>{
fn1().then(res1 =>{
console.log(res1);// 1
fn2().then(res2 =>{
console.log(res2)
})
})
};
看着这样的代码，我仿佛看到了前端组长那鄙视的眼神~
写成这样，和回调地狱有什么区别啊！
小心翼翼改进后：
const fn = async () =>{
const res1 = await fn1();
const res2 = await fn2();
console.log(res1);// 1
console.log(res2);// 2
}
代码一下子简洁很多，总算松了一口气。
如果是并发请求，可以使用Promise.all()
const fn = () =>{
Promise.all([fn1(),fn2()]).then(res =>{
console.log(res);// [1,2]
})
}
结语
以上就是我总结的最常用的es6语法，总算兑现了我的承诺。
最近搬了新家，打算买一些装饰品来点缀一下我的房间，虽然是租房，但是好的环境一定可以带来好的心情，说不定coding也会更快很多了。
当然还是想拥有一套自己的房子，就买在老家茂名就好啦。
我妹早在去年就买了自己的房子车子，给了我很大启发，还有她的家居装饰，真的太ins了！
上图是我妹卧室的一角，不得不说光线真好，满满的幸福感(*^▽^*)
下一期，就在【老林故事汇】，讲一讲我妹的故事，还有我买房的规划。
PS：我妹还单身，下期会放上我和我妹的合照！
敬请期待ヾ(◍°∇°◍)ﾉﾞ
