前端如何净化自己的代码？？(满满的干货)

1.判断几种包括

古代写法

if(value === 'a' || value === 'b' || value === 'c') {
}  

现代写法

const options = ['a', 'b', 'c'];
if (options.includes(value)) {
}

2.拒绝if else(1)

>古代写法

  const a = 1;
  const b = 2;
  let c = null
  if(a>b){
   c = '错的'
  }else{
   c = '对的'
  }
  console.log(c)     //对的

现代写法

 const a = 1;
 const b = 2;
 const c =  a > b && '错的' || '对的'
 console.log(c)    //对的

2.拒绝if else(2)

古代写法

 let a = null
  let b = 3
  if(b == 1){
    a = 1
  }else if(b == 2){
    a = 2
  }else{
    a = 3
  }
  console.log(a)   //3

现代写法(1)

  const b = 3
  const a = (b==1 && 1) || (b==2 && 2) || (b==3 && 3) || 0;  
  console.log(a)  //3

现代写法(2)

  let value = 0
  let typeFn = {
      'a': 1,
      'b': 2 ,
      'c': 3
  };
  function process(operateType) {
     return typeFn[operateType];
  };
 process('c'); 
 console.log(a)  //3

现代写法(3)

  let value = 0
  let typeFn = new Map([
    ['a', function () {value = 1 }],
    ['b', function () {value = 2}],
    ['c', function () {value = 3}],
  ]);

  function process(operateType) {
      typeFn.get(operateType)();
  };
  process('c'); 
  console.log(value) //3

3.大小区间简介写法

古代写法

function youAreMyHero(experience) {
    if (experience < 100) {
        return 'a';
    } else if (experience < 200 && experience >= 100) {
        return 'b';
    } else if (experience < 300 && experience >= 200) {
        return 'c';
    } else if (experience >= 300) {
        return 'd';
    };
};
let level = youAreMyHero(351); //d

现代写法

function youAreMyHero(param) {
    let experience = [300, 200, 100];
    let level = ['a', 'b', 'c', 'd'];

    for (let i = 0; i < experience.length; i++) {
        if (param >= experience[i]) {
            return level[i];
        };
    };
    return level[level.length - 1];
};

 let level = youAreMyHero(351);  //d

4.通过条件判断给变量赋值布尔值的正确姿势

古代写法

  let b;
  let a = 'a'
  if (a === 'a') {
      b = true
  } else {
      b = false
  }

现代写法

  let b;
  let a = 'a'
  b = a === 'a'

5.在if中判断数组长度不为零的正确姿势

古代写法

 if (arr.length !== 0) {
  }

现代写法

  if (arr.length) {
  }		

6.简单的if判断使用三元表达式

古代写法

  if (a === 'a') {
      b = a
  } else {
      b = c
  }	

现代写法

b = a === 'a' ? a : c

7.字符串每一项切割成数组

古代写法

  const word = 'apple'
  const characters = word.split('')
  console.log(characters) // ["a", "p", "p", "l", "e"]

现代写法

  const word = 'apple'
  const characters = [...word]
  console.log(characters) // ["a", "p", "p", "l", "e"]

8.结构赋值精简

object 解构赋值

const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

array 解构赋值

const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2