关于js的一些小技巧

狂风中的少年 提交于 2020-03-26 18:47:33

小技巧

app_id:gsiprgmilwkjqioo
app_secret:T2NNV005bzVmT3g1RHhKZE1SMkZjQT09

 

 

  • if 简写

if (3>2) log('真')   等于  3>2 && log('真')​+ '3'  等于 Number('3')​
// 数组合并 方法一 Array.contat()var array1 = [1,2,3];var array2 = [4,5,6];console.log(array1.concat(array2)); // [1,2,3,4,5,6];​// 数组合并  方法二 Array.push.apply()  大型数组用方法二、​var array1 = [1,2,3];var array2 = [4,5,6];console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
// 循环大型数组的时候,使用变量转换下,保证性能var length = array.length;for(let i = 0; i < length; i++) {  console.log(array[i]);}​//简写:for(let i = 0, length = array.length;i < length; i++) {  console.log(array[i]);}
// !! 双重否定 布尔值function Account(cash) {  this.cash = cash;  this.hasMoney = !!cash;} var account = new Account(100.50);console.log(account.cash); // 100.50console.log(account.hasMoney); // true var emptyAccount = new Account(0);console.log(emptyAccount.cash); // 0console.log(emptyAccount.hasMoney); // false​
// 数组去重const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]
// ---布尔​const isTrue = !0;const isFalse = !1;const alsoFalse = !!0;const alsoTrue = !!1;console.log(isTrue); // Result: trueconsole.log(isFalse); // Result: falseconsole.log(alsoFalse); // Result: falseconsole.log(alsoTrue); // Result: trueconsole.log(typeof isTrue); // Result: "boolean"    console.log(typeof isFalse); // Result: "boolean"  console.log(typeof alsoFalse); // Result: "boolean"console.log(typeof alsoTrue); // Result: "boolean"    
//  转 string  或者 numberconst val = 1 + "";const a =  + "1";console.log(val); // Result: "1"console.log(a); // Result: 1console.log(typeof val); // Result: "string"console.log(typeof a); // Result: "number"​​//  返回整数  const int = ~~"15.6"console.log(int); // Result: 15console.log(typeof int); Result: "number"console.log('23.9' | 0);  // Result: 23console.log('-23.9' | 0); // Result: -23//去掉后几位数console.log(1553 / 10   | 0)  // Result: 155console.log(1553 / 100  | 0)  // Result: 15console.log(1553 / 1000 | 0)  // Result: 1
// 去空格  兼容// 去掉首尾的空格function trim(str){    return str.replace(/(^\s*)|(\s*$)/g, "");}trim('  hello world    '); //"hello world"​// 去掉全部空格function trimAll(str){    return str.replace(/\s+/g,"");}trimAll('   he ll o  wo  r ld    '); //"helloworld"
function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}
// 换成
function Func() {
    if (a === b) {
        Func = function() {
            console.log("x");
        }
    } else {
        Func = function() {
            console.log("y");
        }
    }
    return Func();
}
  • 惰性载入函数( 函数内判断分支较多较复杂时可大大节约资源开销 )

// 鼠标光标属性  cursor:;
pointer  	// 小手
auto 		// 标准光标
default		// 标准箭头
wait 		// 等待光标
text 		// I形光标
no-drop 	// 不可拖动光标
not-allowed // 无效光标
help 		// ?帮助光标
all-scroll 	// 三角方向标
move 		// 移动标
crosshair 	// 十字标
  • 鼠标光标属性 (cursor)

// 屏蔽功能键 Shift,Alt,Ctrl
function look(){
    if(event.shiftKey) {
        alert("禁止按 Shift键!"); //可以换成 ALT CTRL
    }
}
document.onkeydown = look;
// f12 开发者   Ctrl + U  查看网页源码

<!--屏蔽鼠标右键  oncontextmenu="return(false)"-->  
<body oncontextmenu="return(false)"></body>

<!--取消选取、防止复制  onselectstart="return false"--> 
<body onselectstart="return false"></body>

<!-- JS不允许粘贴 --->
  • 防止粘贴复制等

  • 去空格(前后或全部)

  • 转 string 或 Number 简写

  • 布尔的表示方法

  • 数组去重 ES6 (set)

  • 双重否定 !! (使数据转化布尔值 性能提高)

  • 循环数组(性能提高)

  • 数组合并

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!