前端代码简洁之道（持续更新）

1.判断或使用对象时的严谨写法

//首先记得先判断对象是否存在！
var Obj = {name: 'ly', age:26};
var name = Obj.name && Obj.name;

2.三元表达式

//对于两种情况的if条件判断可以多用三元表达式
  function isTrue(flag){
    if(flag){
      return true
    }else{
      return false
    }
  }
  //使用三元表达式后
  function demo(flag){
    return flag ? true : false
  }

3.接口响应的数据处理

//通常接口返回的一个大对象包含了很多个子对象，想要判断是否存在且有我们想要的属性时，可以使用以下方法

 let result={
    status:200,
    msg:'success',
    data:{
      mainData:{
        flowId:22010293029,
        cityId: 851,
        cityName: '贵阳',
        userInfo: {
        	accountName: 'Tony',
        	mobile: '150****8293',
        	dept:['档案室','办公室']
        }
      }
    }
 }
 //优化前
 if(result.data){
 	if(result.data.mainData){
 		if(result.data.mainData.userInfo){
 			if(result.data.mainData.userInfo.dept){
 			}
 		}
 	}
 }
 
 //优化后
 if(result.data.mainData.userInfo.dept.length){
 	//遍历逻辑
 }
 
 //优化后2
 try{
    //这里只要发生错误时候，会捕捉到错误
    if(result.data.mainData.userInfo.dept.length){
    	// 写遍历逻辑
    }
  }catch(error){
  		console.log('error')
  }

4.数组循环

// 最常见的还是for循环
var Arr = ['Alice','Bob','Ciddy','David'];
//优化前
for(i=0;i<Arr.length;i++){
  console.log(Arr[i])
}

//优化1  用for..in
for (var value in Arr) {
  console.log(Arr[value ]);
}

//优化2  用for..of
for (let value of Arr) {
  console.log(value );
}

//优化3 用array.foreach
Arr.forEach(function(value , index) {
	console.log(value , index);
})

5.遍历数组进行处理

i) some函数

主要用于遍历数组看是否满足条件

var Arr = ['Alice','Bob','Ciddy','David'];
//优化前
for (let value of Arr) {
  if(value == 'Ciddy'){
    return true
  }
}
//优化4 用some函数, 判断遍历是否有值
var result = Arr.some(function(val, index) {
	if (val== 'Ciddy') {
		return; // continue;
		// return false; // continue;
		// return true; // break;
	}
	console.info(val, index);
})
console.log(result);

ii) every函数

主要用于遍历数组看是否都满足某一个条件

//优化前
var Arr = ['Alice','Abby','Alison','Ann'];
var flag = true;
for (let value of Arr) {
  if(value.indexOf('A') < 0){
    flag = false
  }
}
console.log(flag)  //true

//优化后
var Arr = ['Alice','Abby','Alison','Ann'];
var result = Arr.every(function(val, index) {
	return val.indexOf('A') > -1
})
console.log(result) //true

iii) map函数

主要用于遍历数组统一进行操作

var Arr = ['Alice','Abby','Alison','Ann'];
var newArr = Arr .map(function(value, index) {
	console.info(value, index);
	return "Tony " + value;
});
console.info(newArr);
// Alice 0
// Abby 1
// Alison 2
// Ann 3
// [ 'Tony Alice', 'Tony Abby', 'Tony Alison', 'Tony Ann' ]

6.使用剩余参数

  const person={
    name:'Larryu',
    age:25,
    sex:'男',
    address:'贵阳市'
  }
 
  //新的对象如果只需要姓名和年龄,需要重新组装新的对象
  delete person.sex
  delete person.address
 
  //优化前
  const person={
    name: person.name,
    age: person.age
  }
 
   //优化后
  const {name,age}=newPerson
  const newPerson={name,age}

7.巧用includes

对于一些变量的值存在多种情况则进行相同的逻辑判断时

    //优化前
    function isFirstPrize(name){
      if(name=='Abby' || name=='Bob' || name=='Ciddy'){
        return '恭喜您，获得一等奖！'
      }else{
        return '很遗憾，继续努力！'
      }
    }
 
 
   //优化后
   function isFirstPrize(name){
     if(['Abby','Bob','Ciddy'].includes(name)){
        return '恭喜您，获得一等奖！'
     }else{
        return '很遗憾，继续努力！'
      }
   }
   // 同时也可以结合三元表达式
   function isFirstPrize(name){
     return ['Abby','Bob','Ciddy'].includes(name) ? '恭喜您，获得一等奖！' : '很遗憾，继续努力！'
   }

8.数组去重

var arr = ['2023-01-27', '2023-01-28', '2023-01-29', '2023-01-29'];

优化前：
var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (newArr.length === 0) {
		newArr.push(arr[i]);
		continue;
	}
	for (var j=0;j<newArr.length;j++) {
		if (newArr.indexOf(arr[i]) === -1) {
			newArr.push(arr[i]);
		}
	}
}

优化后：
var newArr = arr.filter((item, index) => {
	return arr.indexOf(item) === index;
})

同时也可以用 filter | includes 来循环判断，生成一个新的数组。
但是感觉平时用到的数组是用于解耦到一个新的对象，那么可以用下面这种方法：

var obj = {}; // 对象的key值是唯一的
var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (!obj[arr[i]]) {
		obj[arr[i]] = arr[i];
	}
}