精简代码小技巧

1.巧用return

从一个函数调用另一个有返回值的函数 减少全局变量的使用（造成变量污染）
尤其是循环，若是匹配寻找逻辑，找到匹配的，处理完逻辑及时return跳出循环

return true;返回正常的处理结果；终止处理。
return false;返回错误的处理结果；终止处理；阻止提交表单;阻止执行默认的行为。
return;把控制权返回给页面。

2.运算符妙用

基本使用：

简写运用：

if( a == 1 ){
    
    
   console.log("OK");
}

简写成

a==1 && console.log("OK");

var a = 3, b;
if(a == 3){
    
    
   b = 6;
}
else if(a == 2){
    
    
   b = 4;
}
else{
    
    
   b = 1;
}

简写成

b = a==3 && 6 ||
      a==2 && 4 ||
      1;

var a = 0;
var b;
function test(i){
    
    
  if(i==3){
    
    
    b=10;
  }
  else if(i==4){
    
    
    b=23;
  }
  else if(i==6){
    
    
    b=44;
  }
  else{
    
    
   b=null;
  }
}

简写为

var a = 0;
var b;
function test(i){
    
    
  b = {
    
    "3":10, "4":23, "6":44}[i] || null;

switch (data) {
    
    
case 1:
test1();
break;

case 2:
test2();
break;

case 3:
test();
break;

var data = {
    
    
1: test1,
2: test2,
3: test
};

data[anything] && dataanything;

3.做好兜底逻辑

const MIN_NAME_LENGTH = 8;
let lastName = fullName[1] || ''; // 做好兜底，fullName[1]中取不到的时候，不至于赋值个undefined,至少还有个空字符，从根本上讲，lastName的变量类型还是String，String原型链上的特性都能使用，不会报错。不会变成undefined。
if(lastName.length > MIN_NAME_LENGTH) {
    
    
    ....
}
其实在项目中有很多求值变量，对于每个求值变量都需要做好兜底。
let propertyValue = Object.attr || 0; // 因为Object.attr有可能为空，所以需要兜底。
但是，赋值变量就不需要兜底了。
let a = 2; // 因为有底了，所以不要兜着。
let myName = 'Tiny'; // 因为有底了，所以不要兜着。

4.解构赋值

const data = {
    
    name:'dys', age:1};
const {
    
    name, age} = data;

设置默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; 

修改变量名

let {
    
     foo: baz } = {
    
     foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

5.提取常量

所有的常量用一个以提取为常量，方便后续维护和修改。

const DEFAULT_ROOM_PHOTO_URL = 'https://xxx.png';
this.currentHandleOrder.roomTypePhoto = DEFAULT_ROOM_PHOTO_URL;