本文是专栏《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();
});