JS日常开发小技巧（持续更新）

前言

        整理总结了一些日常开发中的JS小技巧，可以简化代码，使代码看起来更加简洁明了。

一、数组去重

        数组去重的方法有很多种，比如：for循环、双重for循环等，思路一般是生成一个新数组，然后遍历原数组，判断新数组中是的有原数组的值，如果有就跳过，没有就添加，但这样写起来代码很多，不够简洁，而且太麻烦了，下面推荐一个简单的数组去重的方法。

var arr = [0,1,2,3,4,5,6,7,8,9,0,1,5,7,84,,5,6,8,4,7,4]
//new Set( )生成元素唯一性的类数组对象
console.log(new Set(arr));//{ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 84, undefined }
//...展开运算符将类数组对象展开放入数组中
console.log([...new Set(arr)]);//[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 84, undefined ]

二、数组取交集

        数组取交集，也是经常遇到的需求，思路一般也是判断这个数组里面有没有这个值，没有的话就跳过，有的话就取出来。思路是对的，但代码可能写起来比较麻烦，下面分享一个我自认为简单的数组取交集的方法。

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 4, 5]
//filter过滤器返回符合条件的值生成一个新数组
//includes数组方法，判断数组中是否有这个值，有的话返回true否则返回false
let arr3 = arr1.filter(item => arr2.includes(item))
console.log(arr3);//[2,3,4]

三、数组取并集

        一般也能通过循环解决，但是太麻烦，下面分享一个我自认为简单的数组取并集的方法。

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 4, 5]
//filter过滤器返回符合条件的值生成一个新数组
//includes数组方法，判断数组中是否有这个值，有的话返回true否则返回false
//concat数组方法，用于合并数组
let arr3 = arr1.concat(arr2.filter(item => !arr1.includes(item)))
console.log(arr3);//[2,3,4]

四、数组中有则删除，没有则添加

        自己写的方法，可以直接拿去用，但感觉不是最简单的，后期研究下优化。大家可以推荐一些简单的办法。

const arr1=[1,2,3,4]
const processing = (num)=>{
  if(arr1.includes(num)){
    arr1.splice(arr1.indexOf(num),1)
  }else{
    arr1.push(num)
  }
  console.log(arr1);
}
processing(3)

五、用??代替||更加严谨

        ??又被称为null判断运算符，只有当左边为undefined或null时，才取右边的值，否则则取左边的值。与||的不同在于||的话，||左边为0和false时，会取右边的值。

const num = 0 || 1
console.log(num);//1
const num1 = 0 ?? 1
console.log(num1);//0

六、用?.替代&&和三目运算符

        ?.被称为链式运算符，只有当左边为null或undefined的时候，才会取右边的值。

   ?.直接在链式调用的时候判断，判断左侧的对象是否为null或undefined，如果是的，就不再往下运算，返回undefined，如果不是，则返回右侧的值

const obj={
  name:'勇敢小陈'
}
console.log(obj&&obj.name);//勇敢小陈
console.log(obj?obj:obj.name);//{ name: '勇敢小陈' }
console.log(obj?.obj.name);

七、简化if判断

        复杂的if判断不止看起来恶心，对于有代码洁癖的人来说写起来更恶心，我也不想写这么多if呀，但是没办法呀，其实办法还是有的，给大家推荐一下简化if判断的方法。通过优化后的方法，可以更加简洁易懂，而且后期更容易维护。

//代码常见的if判断
let title=''
if(num===1){
  title='已完成'
}
if(num===2){
  title='未完成'
}
if(num===3){
  title='进行中'
}

//优化后的代码
let obj={
  1:'已完成',
  2:'未完成',
  3:'进行中'
}
const handle=(num)=>{
  return obj[num]
}
console.log(handle(1));

八、通过三木简化if...else...

        对于一些if...else的判断，我们可以通过三木进行进一步的简化

//简化前
let title=''
let identification=false
if(identification){
  title='已完成'
}else{
  title='未完成'
}
//通过三目运算符简化
title=identification?'已完成':'未完成'

2022.06.30