JS开发小技巧汇总中...

有条件地向对象添加属性

const condition = true
const person = {
 name: '周周',
 sex: '女',
 boyfriend: '豆豆',
 fiance: null,
 ...(condition && { age: 18 })
}

判断属性是否存在对象中

const person = { name: '周周', age: 18 }
console.log('name' in person)
console.log(person.hasOwnProperty('name'))
console.log(Object.keys(person).includes('name'))

对象中的动态属性名称

const dynamic = 'sex'
const person2 = {
  name: '周周',
  [dynamic]: '哈哈哈哈哈哈'
}
console.log(person2)

数字分隔符

// 难以阅读
const billion = 1000000000
// 易于阅读
const readableBillion = 1000_000_000
console.log(readableBillion)

数据类型验证

function typeOf(obj) {
  const toString = Object.prototype.toString
  const map = {
    '[object Boolean]'  : 'boolean',
    '[object Number]'   : 'number',
    '[object String]'   : 'string',
    '[object Function]' : 'function',
    '[object Array]'    : 'array',
    '[object Date]'     : 'date',
    '[object RegExp]'   : 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]'     : 'null',
    '[object Object]'   : 'object',
    '[object FormData]' : 'formData'
  }
  return map[toString.call(obj)]
}

const foo = null || 'Hello'
console.log(foo); // 'Hello'
const { name, sex, boyfriend, fiance, like = '豆豆' } = person
console.log(name, sex, boyfriend, fiance || '豆豆', like)

vue重置对象

this.chartData = this.$options.data.call(this).chartData

replaceAll 方法

const str = 'Red-Green-Blue'
console.log(str.replace('-', ' '))
// 使用 RegEx 替换所有匹配项
console.log(str.replace(/\-/g, ' '))
// ES12+
console.log(str.replaceAll('-', ' ')) // Red Green Blue