乐趣区

关于前端:不想再被喷了好好整理一下常用es6

jiezi

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

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

退出移动版