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

//三目運算符結合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,'')"