motainzhang

motainzhang

【转】灵活运用JS开发技巧

2019-09-26
【转】灵活运用JS开发技巧

String Skill

生成随机 ID

const RandomId = len =>
  Math.random()
    .toString(36)
    .substr(3, len)
const id = RandomId(10)
// id => gkkshs67e3

操作 URL 查询参数

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

格式化金钱

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

生成随机 HEX 色值

const RandomColor = () =>
  '#' +
  Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, '0')
const color = RandomColor()
// color => "#f03665"

Number Skill

取整

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

这个方法比较少见、维护性较差、了解即可,建议还是用

Math.ceil(0.4) // 1 向上取整
Math.floor(0.6) // 0 向下取整

判断奇偶

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

取最小最大值

const arr = [0, 1, 2]
const min = Math.min(...arr)
const max = Math.max(...arr)
// min max => 0 2

生成范围随机数

const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
const num = RandomNum(1, 10)

Boolean Skill

判断数据类型

可判断类型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

function DataType(tgt, type) {
  const dataType = Object.prototype.toString
    .call(tgt)
    .replace(/\[object /g, '')
    .replace(/\]/g, '')
    .toLowerCase()
  return type ? dataType === type : dataType
}
DataType('young') // "string"
DataType(20190214) // "number"
DataType(true) // "boolean"
DataType([], 'array') // true
DataType({}, 'array') // false

是否为空对象

const obj = {}
const flag = DataType(obj, 'object') && !Object.keys(obj).length
// flag => true

switch/case 使用区间

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
}

Array Skill

混淆数组

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

过滤空值

空值:undefined、null、""、0、false、NaN

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

Function Skill

检测非空参数

function IsRequired() {
  throw new Error('param is required')
}
function Func(name = IsRequired()) {
  console.log('I Love ' + name)
}
Func() // "param is required"
Func('You') // "I Love You"

参考

灵活运用 JS 开发技巧