javascript技巧(一)

JavaScript/前端
531
0
0
2022-09-29

Date

1.自动补充Date单位数前的零

  new Date().getMinutes().toString().padStart(2, '0')

2.比较Date大小

  const date1 = '2020-10-10 23:56:23' 
  const date2 = '2020-10-09 23:56:23'
  
  const diff = date1 > date2

3.获取本月的最后一天

  new Date(year, month, 0)

4.获取本月的第一天

  new Date(year, month - 1, 1)

Array

1.Array.indexOf判断:

我们通常判断数组里是否包含了某一项,会使用indexOf来判断返回的索引值是否大于-1,但是编程思想里通常不建议常量定死,并且-1语义化不够

javascript提供了一个位运算可以用来判断-1: ~

~x = -(x + 1)

当x为-1是, 自动变为0, 而javascript判断数字时只有当0的时候才会是false,其余的都是true

所以我们可以这么做

~array.indexOf(x)

2.数组去重:

  • 基本类型
  Array.filter((item, index, array) => {
  	return array.indexOf(item) === 0
  })
  • NaN

NaN有以下几个特点

1. 是一个非自反类型,NaN !== NaN

2. Array.indexOf(NaN)无法访问

  let HAS_NAN = false 
  Array.filter((item, index, array) => {
    if (item !== item && !HAS_NAN) {
    	HAS_NAN = true
    	return item
    } else {
    	return array.indexOf(item) === 0
    }
  })
  • 引用类型

引用类型例如对象,是有一个唯一的主键用于区分,比如id

  const IDMAPS = {}
  Array.filter((item) => {
  	if (!IDMAPS[item.id]) {
    	IDMAPS[item.id] = true
    	return true
    }
  })

3.类数组转换:

类数组就是一个具有length属性的对象

  1. Array.from(array)
  2. Array.proptotype.slice.call(array)

4.筛选正确的值:

  Array.filter(Boolean)

Object

1.判断Object是否为空:

  1. Object.keys(object).length === 0 
  2. JSON.stringify(object) === '{}' 
  3. Object.getOwnPropertyNames(obj)
    第三种方案是较为完善的,它不仅可以访问当前属性还可以访问非枚举属性

2.检测属性是否存在Object下:

  • 原型链检测
  key in object
  • 非原型链检测
  Object.hasOwnProperty(key)

3.判断两个值是否相等:

Object.is(a, b)

Object.is约等于===

但是它可以检测NaN之间是否相等

Number

1.生成随机数:

  Math.random().toString(36).subStr(2)

2.向下取整:

  1. Math.floor(number)
  2. ~~number

3.取整数:

  Math.trunc(number)
  -1.2 => -1 
  1.2 => 1

4.幂函数:

  1. Math.pow(a, b)
  2. a ** b

5.判断奇数

  number & 1

6.数字变中文

  let number = 2 
  number.toLocalString('zh-Hans-CN-u-nu-hanidec')

String

1.重复:

  string.repeat(3)

2.补充前几位:

  string.padStart(length, str)

3.补充后几位:

  string.padEnd(length, str)

4.转数字:

  +string

5.合并字符串:

  string.concat(str1, [str2], [str3], ...)

注意这里: concat是有降维作用,它会去除掉第一层数组包裹

javascript技巧(二)