JavaScript中的一些小技巧

JavaScript中的一些小技巧

字符串相关

格式化数字

1
2
3
const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
const number = ThousandNum(20190214)
// number => "20,190,214"

随机字符串

1
2
3
4
5
6
const RandomStr = len =>
Math.random()
.toString(36)
.substr(3, len)
const id = RandomStr(10)
// id => "jg7zpgiqva"

生成星级评分

1
2
3
const StartScore = rate => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate)
const start = StartScore(3)
// start => "★★★☆☆"

操作 URL 查询参数

1
2
3
const params = new URLSearchParams(location.search.replace(/\?/gi, '')) // location.search = "?name=young&sex=male"
params.has('young') // true
params.get('sex') // "male"

数值相关

数字取整

1
2
3
4
const num1 = ~~1.69
const num2 = 1.69 | 0
const num3 = 1.69 >> 0
// num1 num2 num3 => 1 1 1

补零

1
2
3
const FillZero = (num, len) => num.toString().padStart(len, '0')
const num = FillZero(169, 5)
// num => "00169"

相应的 String.prototype.padEnd() 是在字符串后面添加.参数与 padStart 一致.

转数值

1
2
3
4
5
const num1 = +null
const num2 = +''
const num3 = +false
const num4 = +'169'
// num1 num2 num3 num4 => 0 0 0 169

精确到小数点后几位

1
2
3
4
const RoundNum = (num, decimal) =>
Math.round(num * 10 ** decimal) / 10 ** decimal
const num = RoundNum(1.69, 1)
// num => 1.7 (精确到小数点后1位, 要求更高的精度位数的话,会忽略)

判断奇偶的另一种方式

1
2
3
const OddEven = num => (!!(num & 1) ? 'odd' : 'even')
const num = OddEven(2)
// num => "even"

实际上进行了一个什么操作呢?

1
2
3
4
5
6
7
8
9
10
11
12
// 将 num 二进制表示,比如`num=7` :
--
->
0111
// 将 1 用二进制表示, 此处 1 和 num 前面都可以按需添加 0 ,保证二者位数相同
--
->
0001
// 二者按位相与, 得到
--
->
0001

通过上面的操作,其实获取了num的最后一位是否为1(二进制情况下,奇数的尾数为 1)

Boolean 相关

最最短路径计算

1
2
3
const a = d && 1 // 满足条件赋值:取假运算,从左到右依次判断,遇到假值返回假值,后面不再执行,否则返回最后一个真值
const b = d || 1 // 默认赋值:取真运算,从左到右依次判断,遇到真值返回真值,后面不再执行,否则返回最后一个假值
const c = !d // 取假赋值:单个表达式转换为true则返回false,否则返回true

判断数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
function DataType(tgt, type) {
const dataType = Object.prototype.toString
.call(tgt)
.replace(/\[object (\w+)\]/, '$1')
.toLowerCase()
return type ? dataType === type : dataType
}

DataType('young') // "string"
DataType(20190214) // "number"
DataType(true) // "boolean"
DataType([], 'array') // true
DataType({}, 'array') // false

函数退出代替分支条件退出

1
2
3
4
5
6
7
8
if (flag) {
Func()
return false
}
// 换成
if (flag) {
return Func()
}

Switch/Case 逆向使用

其实也谈不上逆向,只是与传统的思维方式不太一样.

参考示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const age = 26
switch (true) {
case isNaN(age):
console.log('not a number')
break
case age < 18:
console.log('under age')
break
case age >= 18:
console.log('adult')
break
default:
console.log('please set your age')
break
}

数组相关

克隆数组

1
2
3
const _arr = [0, 1, 2]
const arr = [..._arr]
// arr => [0, 1, 2]

合并数组

1
2
3
4
const arr1 = [0, 1, 2]
const arr2 = [3, 4, 5]
const arr = [...arr1, ...arr2]
// arr => [0, 1, 2, 3, 4, 5];

数组去重

1
2
const arr = [...new Set([0, 1, 1, null, null])]
// arr => [0, 1, null]

快速打乱一个数组

1
2
const arr = arr => arr.slice().sort(() => Math.random() - 0.5)
// arr => [3, 4, 0, 5, 1, 2]

清空数组

1
2
3
const arr = [0, 1, 2]
arr.length = 0
// arr => []

交换赋值

1
2
3
4
let a = 0
let b = 1
;[a, b] = [b, a]
// a b => 1 0

交换数组中的两个元素

1
arr[i] = [arr[j], (arr[j] = arr[i])][0]

参考示例

过滤空值及 0

1
const arr = [undefined, null, '', 0, false, NaN, 1, 2].filter(Boolean)

filter中本应该填入一个回调函数, 数组中的每一个值按照回调函数的真假来决定留取,此处将Boolean对象构造函数作为回调函数,传入空值和
0,及返回假,否则返回真,以达到过滤的效果

数组首部插入元素

1
2
3
4
5
let arr = [1, 2] // 以下方法任选一种
arr.unshift(0)
arr = [0].concat(arr)
arr = [0, ...arr]
// arr => [0, 1, 2]

关于Array.prototype.unshift()方法,

可以参照:参考示例

统计元素个数

1
2
3
4
5
6
const arr = [0, 1, 1, 2, 2, 2]
const count = arr.reduce((t, v) => {
t[v] = t[v] ? ++t[v] : 1
return t
}, {})
// count => { 0: 1, 1: 2, 2: 3 }

关于Array.prototype.reduce()
的相关内容,请查阅:MDN

基本语法如下:

1
2
3
4
arr.reduce(callback(accumulator, currentValue[, index[, array
]])
[, initialValue]
)

DOM 相关

去除字符串中的 html 标记

1
2
3
4
5
6
7
function FilterXss(content) {
let elem = document.createElement('div')
elem.innerText = content
const result = elem.innerHTML
elem = null
return result
}

参考资料:

前端迷: https://mp.weixin.qq.com/s/uXiXB_AP5HIBnRNFQkH6Rw

JavaScript中的一些小技巧

https://www.borgor.cn/posts/e051982a.html

作者

Cyrusky

发布于

2020-02-26

更新于

2024-11-18

许可协议

评论