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]
   }) 
}

更多前端开发技巧：????https://cybozudev.kf5.com/hc/community/topic/