Js编程技巧之jQuery源码（代码技巧篇）

本文是专栏《Js编程技巧之jQuery源码分析》的第二篇，将源码里的一些编码技巧提取并分类，辅之以案例，尽可能使之易于理解和消化

逻辑运算符的高级用法

逻辑运算符可以结合多重运算实现更强大的操作

双“非”

语法：!!var_name

需求：获取变量对应的boolean值

!!0 //false
!! undefined //false
!! 1 //true
!! null //false

“且”连接其他表达式

语法：condition && expression

满足条件时才运算表达式并返回它的值

expression 可以为赋值表达式、算数运算表达式、函数调用表达式等

var locked = false;
function handleUnlockMsg(){
  console.log('没有锁住！')
}
!locked && handleUnlockMsg(); 

“或”连接其他表达式

语法：condition && expression

不满足条件时才运算表达式并返回它的值

需求：往record对象里添加某个类型的项目，如果没有该类型对应的属性则声明空数组后添加，如果存在直接添加。

var record = {}
function addToRecord({type,name}){
  //判断record[type]是否存在
  //条件为false（不满足）则返回空数组执行
  //最后对整个表达式调用push方法
  (record[type] = record[type] || []).push(name)
  //(record[type] || (record[type] = [])).push(name)
}
addToRecord({
  type:"Music",
  name:"爱你一万年"
})
addToRecord({
  type:"Music",
  name:"东风破"
})

巧用 while 循环

while 循环的条件判断里可以同时做三件事情：

• 表达式计算
• 赋值
• 判断真假

案例一

需求：用正则表达式匹配紧跟“我的”后的“爱好”,并依次打印所有的“爱好”。

var string = `我爱中国，我爱旅游，我爱看书，当然必须的：我爱美女`;
var r = /我爱([^，]+)/g;
var temp;
while (temp = r.exec(string)) {
  console.log(`我的爱好--->`, temp[1]);
}
//output:
//我的爱好---> 中国
//我的爱好---> 旅游
//我的爱好---> 看书
//我的爱好---> 美女

案例二

需求：数组的拷贝。支持定义起点和终点

function slice(arr,beginIndex,endIndex){
  //返回的新数组
  let ret = [];
  //变量i 被拷贝的元素个数
  let i = endIndex - beginIndex + 1;
  //1.判断个数i 真假 
  //2.i自减后成为新数组的index（最后一位开始）,也是起点需要偏移的位移（长度）--> beginIndex+i
  while(i--){
    ret[i] = arr[beginIndex+i]
  }
}

巧用字符串替换数组

场景：需要一次性迭代处理一列数据。

很多人会想到定义一个数组变量，进行迭代，完事再释放内存。可如果有多个类似的需求，代码里就需要定义多个一次性变量，降低识别度。

jQuery则将一系列的数据初始化为一串包含分割符的字符，然后运行时再根据排列规则解析为数组，一切都在内部完成

var class2type = {};
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),function( _i, name ) {
  //name 为 Boolean, Number, String...
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});