精简代码小技巧

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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值