if中的判断语句

if(    type == 1 ||    type == 2 ||    type == 3 ||    type == 4 ||){   //...}

通过改良后，能够简写成：

const condition = [1, 2, 3, 4]const type = 11if (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 = 1let key = `topic${index}`obj[key] = '话题内容'

为什么要额定创立一个变量。

（指着我）难道你不晓得ES6中的对象属性名是能够用表达式的吗？

改良后：

let obj = {}let index = 1obj[`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]   }) }

更多前端开发技巧：开发者网站-论坛