js编程常用技巧合集
最近看了一些JavaScript的编程技巧，个人觉得特别有用所以把我觉得好的分享给大家。
1. string和Number间的相互转换
- string转化成int
- 可以使用
*1的方式和parseInt -
*1转化实际是调用.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值使用的时候会转化成相应的数值
~~true // 1 ~~false // 0- 在给带小数点的数值使用时会向极端取整,在正数这很像
Math.floor(),在负数上则与其不同。
~~4.5 // 4 Math.floor(4.5) // 4 ~~-4.5 // -4 Math.floor(-4.5) // -5- 对于一个超过31位的大数两次取反后会出现问题
所以对于有可能出现较大数值的情况推荐使用~~2147483647 // 2147483647 ~~2147483648 // -2147483648 ~~4294967296 // 0 ~~4294967295 // -1 ~~4294967297 // 1parseFloat()，反之可以使用~~提高代码效率。 - 在给
3.取整 | 0
取整可以使用num | 0(类似java中的float转化成int的效果，只保留整数位)
1.26 | 0 // 1
-1.56 | 0 // -1
4.判断奇偶数 & 1
对一个数字num & 1可以判断奇偶数，负数也同样适用
const num=3
Boolean(num & 1) // true
Boolean(num % 2) // true
5.一次性函数
第一次做不一样的事，后面都做相同的事情可以这样写
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.精确到指定位数的小数
将数字四舍五入到指定的小数位数。使用 Math.round() 和模板字面量将数字四舍五入为指定的小数位数。 省略第二个参数 decimals ，数字将被四舍五入到一个整数。
// 先平方再开方，仔细看真的精妙
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.数字补0的操作
在很多时候我们需要对时间进行补0操作，这个小技巧也特别巧妙
// 不超过2位的数只取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.统计数组中相同项的个数
// 统计相同个数
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 }
// 常用数组项累加
var nums = [1, 2, 31, 4]
var sum = nums.reduce(function(sum, num){
return sum + num
}, 0)
10.解构交换变量值
交换两个变量值，经常用到，用个临时变量的方法腻了可以试试下面的，好玩的方式
// 第一种
let param1 = 1;
let param2 = 2;
[param1, param2] = [param2, param1];
param1 // => 2
param2 // => 1
// 第二种
param1 = [param1, param1 = param2][0]
11.判断类型
类似我们可能经常问到如何判断一个变量是否是数组类型等问题，我们可以使用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.缓存函数计算结果
眼前一亮。
// 缓存函数
function cached(fn) {
const cache = Object.create(null)
return function (str) {
if (!cache[str]) {
cache[str] = fn(str)
}
return cache[str]
}
}
// 需要执行的耗时函数
function computed() {
// 中间计算过程
console.log('computed')
return 'result'
}
var cachedComputed = cached(computed)
cachedComputed('ss')
// computed
// => result
cachedComputed('ss')
// => result
上面的函数，当传入的str相同时，不再进行运算，直接从缓存里拿结果了，真是妙。
借鉴于 https://juejin.im/post/5b51e5d3f265da0f4861143c