【10种比较优雅的javaScript的写法】

数组去重

  1. 通过内置数据解构特性进行去重[] => set => []
  2. 通过遍历并判断是否存在进行去重[many items].forEach(item => (item <不存在于> uniqueArr) && uniqueArr.push(item))

例如:const arr = [1, 2, 2, 4, 4, 5, 6, 6]

  1. 方法一:const res1 = Array.from(new Set(arr));
  2. 方法二:const res2= arr.filter((item, index) => {
    return arr.indexOf(item, 0) === index;
    })
  3. 方法三:const res3= arr.reduce((prev,cur) => prev.includes(cur) ? prev : […prev,cur],[]);

数组的最后一个元素

  1. 使用at(-1)获取数组中位置最后的一个元素

例如:const arr = [1, 2, 2, 4, 4, 5, 6, 6]
console.log(arr.at(-1)) // 倒数第一个值
console.log(arr.at(-2)) // 倒数第二个值
console.log(arr.at(0)) // 正数第一个
console.log(arr.at(1)) // 正数第二个

数组对象的相关转换

  1. 对象到数组:Object.entries()
  2. 数组转对象:Obecjt.fromEntries()

例如:const arr = [[‘name’: ‘asd’], [age: ‘18’]]
const res = Object.fromEntries(arr) // { name: ‘asd’, age: ‘18’ }

短路操作

通过短路操作避免后续表达式的执行

  1. a或b:a真b不执行
  2. a且b:a假b不执行

例如:
或操作a || b:该操作只要有一个条件为真值时,整个表达式就为真;即a为真时,b不执行;
且操作a && b:该操作只要有一个条件为假值时,整个表达式就为假;即a为假时,b不执行;

基于默认值的对象赋值

通过对象解构合并进行带有默认值的对象赋值操

  1. a或b:{…defaultData, …data}

多重条件判断优化

单个值与多个值进行对比判断时,使用includes进行优化

  1. [404,400,403].includes

例如 if (type === ‘a’ || type === ‘b’ || type === ‘c’) {} 可以转换成
const typelist = [ ‘a’, ‘b’, ‘c’]
if (typelist.includes(type))

交换两个值

通过对象解构操作进行简洁的双值交换

  1. [a, b] = [b, a]

解释:这里相当于使用了一个数组对象同时存储了a和b,该数组对象作为了临时变量
之后再将该数组对象通过解构操作赋值给a和b变量即可

位运算

通过位运算提高性能和简洁程度

replace()的回调

通过传入回调进行更加细粒度的操作

sort()的回调

通过传入回调进行更加细粒度的操作

  1. 根据字母顺序排序
  2. 根据真假值进行排序

数字升序:arr.sort((a,b)=>a-b)
按字母顺序对字符串数组进行排序:arr.sort((a, b) => a.localeCompare(b))

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值