js編程常用技巧合集
最近看了一些JavaScript的編程技巧歼捏，個人覺得特別有用所以把我覺得好的分享給大家残拐。
1. string和Number間的相互轉(zhuǎn)換
- string轉(zhuǎn)化成int
- 可以使用
*1的方式和parseInt -
*1轉(zhuǎn)化實際是調(diào)用.valueOf()方法
- 可以使用
'123' * 1 // 123
'ab' * 1 // NaN
null * 1 // 0
undefined * 1 // NaN
1 * { valueOf: ()=>'2' } // 2
parseInt('123') // 123
parseInt('ab') // NaN
parseInt(null) // NaN
parseInt(undefined) // NaN
parseInt({ valueOf: ()=>'2' }) // NaN
2.雙位運算符~~
-
~在js中表示取反操作，兩次取反表示維持原值不變错沽。- 在給
Boolean值使用的時候會轉(zhuǎn)化成相應的數(shù)值
~~true // 1 ~~false // 0- 在給帶小數(shù)點的數(shù)值使用時會向極端取整,在正數(shù)這很像
Math.floor(),在負數(shù)上則與其不同娜睛。
~~4.5 // 4 Math.floor(4.5) // 4 ~~-4.5 // -4 Math.floor(-4.5) // -5- 對于一個超過31位的大數(shù)兩次取反后會出現(xiàn)問題
所以對于有可能出現(xiàn)較大數(shù)值的情況推薦使用~~2147483647 // 2147483647 ~~2147483648 // -2147483648 ~~4294967296 // 0 ~~4294967295 // -1 ~~4294967297 // 1parseFloat()，反之可以使用~~提高代碼效率罗晕。 - 在給
3.取整 | 0
取整可以使用num | 0(類似java中的float轉(zhuǎn)化成int的效果鸯旁，只保留整數(shù)位)
1.26 | 0 // 1
-1.56 | 0 // -1
4.判斷奇偶數(shù) & 1
對一個數(shù)字num & 1可以判斷奇偶數(shù)，負數(shù)也同樣適用
const num=3
Boolean(num & 1) // true
Boolean(num % 2) // true
5.一次性函數(shù)
第一次做不一樣的事医清，后面都做相同的事情可以這樣寫
var sca = function() {
console.log('one')
sca = function() {
console.log('two')
}
}
sca() // one
sca() // two
sca() // two
6.不同進制表示
ES6中新增了不同進制的書寫格式起暮，需要注意這一點。
29 // 10進制
035 // 8進制29 原來的方式
0o35 // 8進制29 ES6的方式
0x1d // 16進制29
0b11101 // 2進制29
7.精確到指定位數(shù)的小數(shù)
將數(shù)字四舍五入到指定的小數(shù)位數(shù)会烙。使用 Math.round() 和模板字面量將數(shù)字四舍五入為指定的小數(shù)位數(shù)负懦。 省略第二個參數(shù) decimals 筒捺，數(shù)字將被四舍五入到一個整數(shù)。
// 先平方再開方纸厉，仔細看真的精妙
const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(1.345, 2) // 1.35
// 計算理解如下
// Math.round(1.345E2)E-2
// Math.round(1.345x10^2)E-2
// 135E-2
// 135x10^-2
// 1.35
round(1.345, 1) // 1.3
8.數(shù)字補0的操作
在很多時候我們需要對時間進行補0操作系吭，這個小技巧也特別巧妙
// 不超過2位的數(shù)只取2位，超過兩位颗品，不補0
const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
const addZero2 = (num, len = 2) => (`${num}`).padStart(len , '0')
addZero1(3) // 03
addZero2(32,4) // 0032
9.統(tǒng)計數(shù)組中相同項的個數(shù)
// 統(tǒng)計相同個數(shù)
var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) {
obj[name] = obj[name] ? ++obj[name] : 1;
return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }
// 常用數(shù)組項累加
var nums = [1, 2, 31, 4]
var sum = nums.reduce(function(sum, num){
return sum + num
}, 0)
10.解構(gòu)交換變量值
交換兩個變量值肯尺，經(jīng)常用到，用個臨時變量的方法膩了可以試試下面的躯枢，好玩的方式
// 第一種
let param1 = 1;
let param2 = 2;
[param1, param2] = [param2, param1];
param1 // => 2
param2 // => 1
// 第二種
param1 = [param1, param1 = param2][0]
11.判斷類型
類似我們可能經(jīng)常問到如何判斷一個變量是否是數(shù)組類型等問題则吟，我們可以使用Object.prototype.toString.call(arg)來進行判斷(源自vue源碼)。
function showType (value) {
return Object.prototype.toString.call(value).slice(8, -1)
}
showType([]) // => "Array"
showType({}) // => "Object"
showType(null) // => "Null"
showType(Undefined) // => "Undefined"
showType(parseInt) // => "Function"
showType(/\w/) // => "RegExp"
實在巧妙锄蹂，高人果不其然氓仲。
12.緩存函數(shù)計算結(jié)果
眼前一亮。
// 緩存函數(shù)
function cached(fn) {
const cache = Object.create(null)
return function (str) {
if (!cache[str]) {
cache[str] = fn(str)
}
return cache[str]
}
}
// 需要執(zhí)行的耗時函數(shù)
function computed() {
// 中間計算過程
console.log('computed')
return 'result'
}
var cachedComputed = cached(computed)
cachedComputed('ss')
// computed
// => result
cachedComputed('ss')
// => result
上面的函數(shù)败匹，當傳入的str相同時寨昙，不再進行運算，直接從緩存里拿結(jié)果了掀亩，真是妙舔哪。
