JS 的骚操作

一、强制类型转换

1.1string强制转换为数字
//可以用*1来转化为数字((实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN)
'32' * 1            // 32
'ds' * 1            // NaN
null * 1            // 0
undefined * 1    // NaN
1  * { valueOf: ()=>'3' }        // 3
//使用+来转化字符串为数字
+ '123'            // 123
+ 'ds'               // NaN
+ ''                    // 0
+ null              // 0
+ undefined    // NaN
+ { valueOf: ()=>'3' }    // 3

1.2使用Boolean过滤数组中的所有假值
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]) 

 

1.3 数值取整 --去除小数点后面的值
~~2.33
2.33 | 0
2.33 >> 0
//Math.floor()向下取整,值永远只会变小

 

1.4 判断奇偶数,负数同样适用
const num=3;
!!(num & 1)                    // true
!!(num % 2)                    // true
//以上两种形式返回true的都是奇数

 

1.5 JS|| && 妙用 多重if else 选择情况
假设对成长速度显示规定如下:
成长速度为5显示1个箭头
成长速度为10显示2个箭头
成长速度为12显示3个箭头
成长速度为15显示4个箭头
其他显示为0个箭头

//一般代码
var add_level = 0; 
if(add_step == 5){ 
add_level = 1; 
} 
else if(add_step == 10){ 
add_level = 2; 
} 
else if(add_step == 12){ 
add_level = 3; 
} 
else if(add_step == 15){ 
add_level = 4; 
} 
else { 
add_level = 0; 
} 

//好一点的switch
var add_level = 0; 
switch(add_step){ 
    case 5 : add_level = 1; 
    break; 
    case 10 : add_level = 2; 
    break; 
    case 12 : add_level = 3; 
    break; 
    case 15 : add_level = 4; 
    break; 
    default : add_level = 0; 
    break; 
}

//更好一点的
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0; 

//还有更好的
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0; 

 二、函数

 

2.1 惰性载入函数
//这个判断依据在整个项目运行期间一般不会变化，所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数
function foo(){
    if(a !== b){
        console.log('aaa')
    }else{
        console.log('bbb')
    }
}

// 优化后
function foo(){
    if(a != b){
        foo = function(){
            console.log('aaa')
        }
    }else{
        foo = function(){
            console.log('bbb')
        }
    }
    return foo();
}

 

2.2//动态添加js
document.write("<script src='" + context.path + "/resource/apps/logger.js'></script>");

/**
 * 动态添加JS
 * @param {Object} js
 */
function loadJs(js) {
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', js);
    var content = document.getElementById("container-fluid");
    content.appendChild(s);
}

 

2.3劫持别人写的函数

function A () {
    console.log("我是原函数");
}
/**
 * 
 * @param {*要劫持的函数所在的对象} obj 
 * @param {*计划要劫持的函数名} method 
 * @param {*回调函数} fun 
 */
const hijack = (obj, method, fun) => {
    let orig = obj[method];//保存原函数
    obj[method] = fun(orig);//将重写的函数作为回调函数的返回值赋给原函数变量
}
hijack(window,'A',function(orig){
    return function (){
        //做任何你想函数A执行时候你想做的事情
        console.log("我劫持了函数A");
        orig.call(this);
    }
})
A();

 

2.4AOP在JS当中的执行

/**
* 织入执行前函数
* @param {*} fn 
*/
Function.prototype.aopBefore = function(fn){
    console.log(this)
    // 第一步：保存原函数的引用
    const _this = this
    // 第四步：返回包括原函数和新函数的“代理”函数
    return function() {
        // 第二步：执行新函数，修正this
        fn.apply(this, arguments)
        // 第三步 执行原函数
        return _this.apply(this, arguments)
    }
}
/**
 * 织入执行后函数
 * @param {*} fn 
 */
Function.prototype.aopAfter = function (fn) {
    const _this = this
    return function () {
        let current = _this.apply(this,arguments)// 先保存原函数
        fn.apply(this, arguments) // 先执行新函数
        return current
    }
}
/**
 * 使用函数
 */
let aopFunc = function() {
    console.log('aop')
}
// 注册切面
aopFunc = aopFunc.aopBefore(() => {
    console.log('aop before')
}).aopAfter(() => {
    console.log('aop after')
})
// 真正调用
aopFunc();

 

2.5一次性函数，适用于初始化的一些操作
var sca = function() {
    console.log('msg')//永远只会执行一次
    sca = function() {
        console.log('foo')
    }
}
sca()        // msg
sca()        // foo
sca()        // foo

 

三、数组

3.1 reduce方法同时实现map和filter
const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num,currentIndex,numbers) => {
  
  console.log(finalList);
  console.log(num);
  console.log(currentIndex);
  console.log(numbers);
  num = num * 2;
  if (num > 50) {
    finalList.push(num);
  }
  return finalList;
}, []);

 

四、元素操作

1：判断一个元素是否函数某个class，存在就删除，不存在就添加
let $this = $(this);
let $target = $(target);
$this[$target.hasClass('am-in') ? 'addClass' : 'removeClass']('am-collapsed');

　　

五、其他

//空('' null undefined)验证
let pan = '';
function fUN () {
    console.log("panrui");
    return true;
}
let rui  = pan || fUN();

 

//三目运算后面使用函数
let string = true;
function pan () {
    console.log("pan");
}
function rui () {
    console.log("rui");
}
string ? pan() : rui();

 

$('.js_name')['addClass']('none') 等价于$('.js_name').addClass('none')
$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

 

字符串比较时间先后
var a = "2014-08-08";
var b = "2014-09-09";
 
console.log(a>b, a<b); // false true
console.log("21:00"<"09:10");  // false
console.log("21:00"<"9:10");   // true   时间形式注意补0

 

限制input输入值的大小
oninput="if(value > 10000){value=9999}else if(value<0){value=''}"

限制输入整数

  οnkeyup="value=value.replace(/[^\d]/g,'')"