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

40次阅读

共计 2056 个字符,预计需要花费 6 分钟才能阅读完成。

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

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

正文完
 0