常用JS编码优化

1. 一个变量可能有多个值并且针对多个值的处理结果一样

   
   // bad
   if(x === 'ysgd' || x === 'wsgd' || x === 'ysj' || x === 'wsj') {
   	console.log('result', x);
   }
   
   // good
   if(['ysgd', 'wsgd', 'ysj', 'wsj'].includes(x)) {
   	console.log('result', x);
   }
   
   

2. 一个变量可能有多个值但是针对多个值的处理结果不一样

   
   // bad
   if(x === 'ysgd') {
   	console.log('ysgd');
   }
   if(x === 'wsgd') {
   	console.log('wsgd');
   }
   if(x === 'ysj') {
   	console.log('ysj');
   }
   if(x === 'wsj') {
   	console.log('wsj');
   }
   
   // good
   switch(x){
   	case 'ysgd':
   	console.log('ysgd');
   	break; 
   	case 'wsgd':
   	console.log('wsgd');
   	break; 
   	case 'ysj':
   	console.log('ysj');
   	break; 
   	case 'wsj':
   	console.log('wsj');
   	break; 
   	default:
   	console.log('ysgd');
   }
   
   // best
   const handler = {
   	'ysgd': () => {
   		console.log('ysgd'); 
   	},
   	'wsgd': () => {
   		console.log('wsgd'); 
   	},
   	'ysj': () => {
   		console.log('ysj'); 
   	},
   	'wsj': () => {
   		console.log('wsj'); 
   	},
   }
   handler[x]&&handler[x]();
   

3. 简化if-true-else-false

   
   // bad
   if(x === 'ysgd') {
   	y === true; 
   }else {
   	y === false; 
   }
   
   // good
   y = x === 'ysgd' ? true : false;
    
   // best
   y = x === 'ysgd';
   
   

4. null，undefined，默认值

   
   // bad
   if(x === null || x === undefined) {
   	y === '默认值'
   }
   
   // good
   y = x || '默认值';
   
   // best
   y = x ?? '默认值'; // es6语法
   
   

5. 定义多个类似变量

   
   // bad
   const bgRed = 'red';
   const bgBlue = 'blue';
   const bgGreen = 'green';
   
   // good
   const [bgRed, bgBlue, bgGreen] = ['red', 'blue', 'green'];
   
   

6. 简单的赋值操作

   
   // bad
   a = a + 1;
   b = b - 1;
   c = c * 20;
   
   // good
   a++;
   b--;
   c*=20;
   
   

7. for循环-length

   
   // bad
   for(let i = 0; i < arr.length; i+=1){
   	console.log(arr[i]); 
   };
   
   // good
   const { length } = arr;
   for(let i = 0; i < length; i+=1){
   	console.log(arr[i]); 
   }
   
   // best
   arr.forEach(item => {
   	console.log(item); 
   })
   
   

8. 隐式返回

   
   // bad
   function add(a, b){
   	 return a + b;
   }
   
   // good
   const add = (a, b) => {
   	 return a + b;
   }
    
   // best
   const add = (a, b) => a + b;
   
   

9. 延展操作符

   // bad
   let a = [1, 2, 3];
   const b = [4, 5, 6];
   b.forEach(item => {
   	a.push(item); 
   })
    
   // good
   let a = [1, 2, 3];
   const b = [4, 5, 6];
   a = a.push(b);
   
   // better
   let a = [1, 2, 3];
   const b = [4, 5, 6];
   a = a.concat(b);
    
   // best
   let a = [1, 2, 3];
   const b = [4, 5, 6];
   a = [...a, ...b];
   
   

10. 巧用map

    
    // bad
    const ids = [];
    data.forEach(item => {
    	 ids.push(item.id);
    })
    
    // good
    const ids = data.map(item => {
    	return item.id; 
    });
     
    // best
    const ids = data.map(item => item.id);
    
    

11. 模板字符串

    
    // bad
    const firstName = 'zhang';
    const lastName = 'san';
    const fullName = firstName + '-' + lastName;
    
    // good
    const firstName = 'zhang';
    const lastName = 'san';
    const fullName = `${firstName}-${lastName}`;
    
    

12. 解构赋值

    
    // bad
    const length = arr.length;
     
    // good 
    const { length } = arr;
    
    

13. for-of

    
    // bad
    const arr = [1, 2, '2', '3', 3, 4, '5'];
    const { length } = arr;
    for(let i = 0; i < length; i+=1){
    	if(typeof arr[i] !== 'number'){
    		console.log('非数字');
    		continue; 
    	} 
    	console.log(arr[i]);
    }
    
    // good
    const arr = [1, 2, '2', '3', 3, 4, '5'];
    arr.forEach(item => {
    	if(typeof item !== 'number'){
    		console.log('非数字');
    	} else {
    		console.log(arr[i]);
    	}
    })
    // 注意：forEach方法里不接受continue和break语法;
    
    // best
    const arr = [1, 2, '2', '3', 3, 4, '5'];
    for(const value of arr){
    	if(typeof value !== 'number'){
    		console.log('非数字');
    		continue; 
    	} 
    	console.log(value);
    }