字符串相关 格式化数字 1 2 3 const ThousandNum = num => num.toString ().replace (/\B(?=(\d{3})+(?!\d))/g , ',' )const number = ThousandNum (20190214 )
随机字符串 1 2 3 4 5 6 const RandomStr = len => Math .random () .toString (36 ) .substr (3 , len) const id = RandomStr (10 )
生成星级评分 1 2 3 const StartScore = rate => '★★★★★☆☆☆☆☆' .slice (5 - rate, 10 - rate)const start = StartScore (3 )
操作 URL 查询参数 1 2 3 const params = new URLSearchParams (location.search .replace (/\?/gi , '' )) params.has ('young' ) params.get ('sex' )
数值相关 数字取整 1 2 3 4 const num1 = ~~1.69 const num2 = 1.69 | 0 const num3 = 1.69 >> 0
补零 1 2 3 const FillZero = (num, len ) => num.toString ().padStart (len, '0' )const num = FillZero (169 , 5 )
相应的 String.prototype.padEnd()
是在字符串后面添加.参数与 padStart
一致.
转数值 1 2 3 4 5 const num1 = +null const num2 = +'' const num3 = +false const num4 = +'169'
精确到小数点后几位 1 2 3 4 const RoundNum = (num, decimal ) => Math .round (num * 10 ** decimal) / 10 ** decimal const num = RoundNum (1.69 , 1 )
判断奇偶的另一种方式 1 2 3 const OddEven = num => (!!(num & 1 ) ? 'odd' : 'even' )const num = OddEven (2 )
实际上进行了一个什么操作呢?
1 2 3 4 5 6 7 8 9 10 11 12 -- -> 0111 -- -> 0001 -- -> 0001
通过上面的操作,其实获取了num
的最后一位是否为1
(二进制情况下,奇数的尾数为 1)
Boolean 相关 最最短路径计算 1 2 3 const a = d && 1 const b = d || 1 const c = !d
判断数据类型 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' ) DataType (20190214 ) DataType (true ) DataType ([], 'array' ) DataType ({}, 'array' )
函数退出代替分支条件退出 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]
合并数组 1 2 3 4 const arr1 = [0 , 1 , 2 ]const arr2 = [3 , 4 , 5 ]const arr = [...arr1, ...arr2]
数组去重 1 2 const arr = [...new Set ([0 , 1 , 1 , null , null ])]
快速打乱一个数组 1 2 const arr = arr => arr.slice ().sort (() => Math .random () - 0.5 )
清空数组 1 2 3 const arr = [0 , 1 , 2 ]arr.length = 0
交换赋值 1 2 3 4 let a = 0 let b = 1 ;[a, b] = [b, a]
交换数组中的两个元素 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]
关于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 }, {})
关于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