js常用小技巧

持续更新中……

判断对象是否为空

Obeject.keys(obj) 返回不包括原型上的可枚举属性，即自身的可枚举属性

JSON.stringify(obj) 也是只能读取对象本身的可枚举属性

Object.getOwnPropertyNames(obj) symbol 作为 key 无法检测

for...in 会返回继承的属性

Object.keys(obj).length === 0 && Object.getOwnPropertySymbols(obj).length === 0

一般来说 Object.keys(obj).length === 0 就够了

格式化JSON字符串

node写文件时如果直接把JSON数据转为字符串，数据会全在一行比较丑，不方便阅读

{"code":200,"message":"success","pagination":{"currentPage":1,"pageSize":2,"total":26},"sentences":[{"copyright":"[email protected]","createdDate":"2021-07-27T06:00:46.123Z","_id":"610119e3a85b362b16bacffa","sentence":"“你觉得爱情是什么？” “舒适且不尴尬的沉默”","__v":0},{"copyright":"[email protected]","createdDate":"2021-07-27T06:00:46.123Z","_id":"60ffa341a85b362b16bacff0","sentence":"音乐老师说：“我不喜欢小苹果那类歌曲，但我不会去诋毁他，因为音乐没有好不好，只有合不合适。”音乐的低俗高雅之别，只不过是人们觉得自己高雅，应该享用特别一点的东西，对于不适合自己，自己不喜欢的东西，便嗤之以鼻，以显示自己的与众不同","__v":0}]}

使用JSON.stringify(data, null, '\t')将数据格式化

{
	"code": 200,
	"message": "success",
	"pagination": {
		"currentPage": 1,
		"pageSize": 2,
		"total": 26
	},
	"sentences": [
		{
			"copyright": "[email protected]",
			"createdDate": "2021-07-27T06:00:46.123Z",
			"_id": "610119e3a85b362b16bacffa",
			"sentence": "“你觉得爱情是什么？” “舒适且不尴尬的沉默”",
			"__v": 0
		},
		{
			"copyright": "[email protected]",
			"createdDate": "2021-07-27T06:00:46.123Z",
			"_id": "60ffa341a85b362b16bacff0",
			"sentence": "音乐老师说：“我不喜欢小苹果那类歌曲，但我不会去诋毁他，因为音乐没有好不好，只有合不合适。”音乐的低俗高雅之别，只不过是人们觉得自己高雅，应该享用特别一点的东西，对于不适合自己，自己不喜欢的东西，便嗤之以鼻，以显示自己的与众不同",
			"__v": 0
		}
	]
}

获取文件扩展名

const filename = 'see you again.mp3'
const suffix = filename.split('.').pop()
console.log(suffix) // mp3

格式化时间

补全时间前面的0

方法1：使用padStart方法

const date = new Date()
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDay().toString().padStart(2, '0')
const hour = date.getHours().toString().padStart(2, '0')
const minute = date.getMinutes().toString().padStart(2, '0')
const second = date.getSeconds().toString().padStart(2, '0')

方法2，使用substr方法

const day = '6'
('00' + day).substr(day.length) // 06

借此封装一个简易的格式化日期函数

const formatDate = (date, fmt) => {
  let o = {
    "M+": date.getMonth() + 1,
    "D+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds()
  }

  if (/(Y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, date.getFullYear() + '').substr(4 - RegExp.$1.length)
  }
  for (let k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : o[k].toString().padStart(2, '0'))
      // fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr((o[k] + '').length))
    }
  }
  return fmt
}

console.log(formatDate(new Date(), 'YYYY-MM-DD hh:mm:ss')) // 2022-01-23 20:01:41

获取数组最后一个元素

1. 根据索引

const arr = ['html', 'css', 'js', 'vue']
console.log(arr[arr.length - 1]) // 'vue'

2. pop() 方法

pop() 方法用于删除并返回数组的最后一个元素，会改变原数组长度，可以配合 slice() 方法获取

const arr = ['html', 'css', 'js', 'vue']
console.log(arr.pop()) // 'vue'   arr = ['html', 'css', 'js']
console.log(arr.slice().pop()) // 'vue'

3. splice() 方法

同样会改变原数组，并且返回的格式是 array ，可以用 splice(-1)[0] 获取

const arr = ['html', 'css', 'js', 'vue']
console.log(arr.splice(-1)) // ['vue']   arr = ['html', 'css', 'js']
console.log(arr.slice().splice(-1)[0]) // ''

统计字符串中每个字符出现的次数

const countNumber = (s) => {
  let map = new Map()
  for (let i of s) {
    map.set(i, (map.get(i) || 0) + 1)
  }
  return map
}

console.log(countNumber('aabcddeff'))  // Map(6) { 'a' => 2, 'b' => 1, 'c' => 1, 'd' => 2, 'e' => 1, 'f' => 2 }

类比：统计出现次数做多的字符以及次数

const str = 'aabbbccd'
let map = new Map()
for (let i of str) {
  map.set(i, (map.get(i) | 0) + 1)
}
map = new Map([...map].sort((a, b) => b[1] - a[1]))
console.log(Array.from(map.keys())[0]) // b
console.log(Array.from(map.values())[0]) // 3

数字排序 & 字符串排序

const numSort = (numArr) => {
  return numArr.sort((a, b) => {
    return a - b
  })
}
console.log(numSort([4, 99, 3, 8, 4])) // [ 3, 4, 4, 8, 99 ]

const strSort = (s) => {
  return  [...s].sort().join('')
}
console.log(strSort('bgdhaavtz')) // aabdghtvz

字符串转数组

1. split() 方法
2. es6 中的扩展运算符 …
3. es6 中的 Array.from 方法
4. for…of 遍历字符串然后 push 进空数组

let str = 'ILoveYou'

console.log(str.split('')) // 不建议
// https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string
console.log([...str])
console.log(Array.from(str))

生成随机数

值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)

数组去重

let arr = [1, 2, 3, 3, 4]

console.log(Array.from(new Set(arr)))
console.log([...new Set(arr)])

判断数组对象

1. Object.prototype.toString.call()

> arr = []
[]
> obj = {}
{}
> Object.prototype.toString.call(arr)
'[object Array]'
> Object.prototype.toString.call(obj)
'[object Object]'

2. constructor

> arr.constructor()
[]
> obj.constructor()
{}