JS 的骚操作

一、强制类型转换

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

 

 

 二、函数

 

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');

　　

五、其他

 

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

//三目运算符结合return使用
return $a ? 1 : 2

//使用jquery结合三目运算符添加样式
$('.js_name')['addClass']('none') == $('.js_name').addClass('none')
所以衍生出
$('.item')[flag ? 'addClass' : 'removeClass']('active')

 

 

 

通过字符串比较时间先后
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=''}"

限制输入整数

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