一些杂乱问题

渐进增强与优雅降级

渐进增强：针对适配低版本浏览器的项目，对其进行重构，保证基本功能的情况下，对交互等方面的功能进行优化，提升用户体验
优雅降级：针对适配高版本浏览器的项目，一开始就具备完善的功能，对其进行低版本浏览器的兼容

获取字符串长度（支持表情）

正常情况下，获取字符串长度使用str.length即可
但当字符串中存在表情或部分汉字，会识别出两个长度，如😀、𠮷，会识别出两个长度

// 解决方法
let str = '😀、𠮷'
let arr = [...str] // 此时数组为 ['😀', '𠮷']
console.log(Array.from(arr)) // 2

z-index失效原因

父元素为relative
子元素为static（默认为static）
子元素有浮动

正则表达式实现添加括号

例如存在字符串 const str = '11+2-34+5/24+10/5'，现在需要将高优先级运算，用小括号包裹起来，例如结果为 '11+2-(34)+(5/24)+(10/5)'。注意可能会出现连续的乘除运算，需要包裹到一起

let str = '11+2-34+5/24+10/5*5+5*7-8'
str.match(/([0-9]{1,}[/|*]){1,}[0-9]{1,}/g).forEach(item=>{
  str = str.replace(item, `(${item})`)
})
console.log(str) // 11+2-34+(5/24)+(10/5*5)+(5*7)-8

尾递归

递归：即在函数内部调用自己

// 例：斐波那契数列
function getCount(n) {
  if (n <= 1) {
    return 1
  }
  return getCount(n - 1) + getCount(n - 2)
}
// 时间复杂度为O(n)
// 该函数的递归返回值为两个自身的相加，因为相加操作的存在，必须在保留本次调用的基础上进行下次调用
// 所以对于getCount(10)的调用在最后一次调用会将之前的每次调用都保留下来，可能造成“栈溢出”

尾递归

// 使用尾递归计算斐波那契数列
function getCounts(n, count1 = 1, count2 = 1) {
  if (n <= 1) {
    return count2
  }
  return getCounts(n - 1, count2, count1 + count2)
}
// 时间复杂度为O(1)
// 尾递归是指递归时，函数的返回值与函数本身没有什么关联，他最后return出的要执行的部分不属于当前函数的计算部分
// 如列子中求取时，return出的结果仅为一个函数，即该结果可以单独执行，与当前函数无关
// 所以在执行return出的结果时，上一级函数不用放在栈中，节省出空间

判断数据类型的方法

typeof
数组、对象和null会被判断为object类型，其余能准确判断

const test = {
  str: '123',
  num: 123,
  obj: {},
  arr: [],
  boo: true,
  nul: null,
  und: undefined,
  func: () => {}
}
console.log(typeof test.str)    // string
console.log(typeof test.num)    // number
console.log(typeof NaN) // number
console.log(typeof test.boo)    // boolean
console.log(typeof test.und)    // undefined
console.log(typeof test.func)   // function
console.log(typeof test.nul)    // object
console.log(typeof test.obj)    // object
console.log(typeof test.arr)    // object

instanceof
可用于判断对象（函数、数组、对象等）的具体类型

const test = {
      str: '123',
      num: 123,
      obj: {},
      arr: [],
      boo: true,
      nul: null,
      und: undefined,
      func: () => {}
    }
    console.log(test.str instanceof String) // false
    console.log(test.num instanceof Number) // false
    console.log(test.boo instanceof Boolean) // false
    console.log(test.obj instanceof Object) // true
    console.log(test.arr instanceof Array) // true
    console.log(test.func instanceof Function) // true

constructor
object.prototype.tostring.call()

精度计算问题

如 0.1+0.2 !== 0.3

console.log(0.1+0.2 !== 0.3) // true
console.log((0.1+0.2).toFixed(1) === 0.3) // true

object.is()

用于比较两个值是否相等，大部分情况下与全等 === 一样，但能处理一些特殊情况

console.log(-0 === +0)  // true
console.log(Object.is(-0, +0))  // false
console.log(NaN === NaN)    // false
console.log(Object.is(NaN, NaN))    // true

判断空对象

通过转换成字符串来判断

const obj = {}
console.log(JSON.stringify(obj) === '{}')  // true

通过es6的object.key()进行判断

const obj = {}
console.log(Object.keys(obj).length === 0)  // true

最后编辑于：2023.02.09 14:21:28