js小技巧

时间:2020-03-26
本文章向大家介绍js小技巧,主要包括js小技巧使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

小技巧

 
  • 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.50
console.log(account.hasMoney); // true
 
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false
  • 数组去重 ES6 (set)

// 数组去重
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: true
console.log(isFalse); // Result: false
console.log(alsoFalse); // Result: false
console.log(alsoTrue); // Result: true
console.log(typeof isTrue); // Result: "boolean"    
console.log(typeof isFalse); // Result: "boolean"  
console.log(typeof alsoFalse); // Result: "boolean"
console.log(typeof alsoTrue); // Result: "boolean"    
  • 转 string 或 Number 简写

// 转 string 或者 number
const val = 1 + "";
const a =  + "1";
console.log(val); // Result: "1"
console.log(a); // Result: 1
console.log(typeof val); // Result: "string"
console.log(typeof a); // Result: "number"


// 返回整数  
const int = ~~"15.6"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
console.log('23.9' | 0);  // Result: 23
console.log('-23.9' | 0); // Result: -23
//去掉后几位数
console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.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"
  • 防止粘贴复制等

// f12 开发者   Ctrl + U  查看网页源码

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

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

<!-- JS不允许粘贴 --->
// 屏蔽功能键 Shift,Alt,Ctrl
function look(){
    if(event.shiftKey) {
        alert("禁止按 Shift键!"); //可以换成 ALT CTRL
    }
}
document.onkeydown = look;
  • 鼠标光标属性 (cursor)

// 鼠标光标属性  cursor:;
pointer  	// 小手
auto 		// 标准光标
default		// 标准箭头
wait 		// 等待光标
text 		// I形光标
no-drop 	// 不可拖动光标
not-allowed // 无效光标
help 		// ?帮助光标
all-scroll 	// 三角方向标
move 		// 移动标
crosshair 	// 十字标
  • 惰性载入函数( 函数内判断分支较多较复杂时可大大节约资源开销 )

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

 

$flag 上一页 下一页