一些杂乱问题

2023-01-31  本文已影响0人  蓝蓝红同学

渐进增强与优雅降级

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

获取字符串长度(支持表情)

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

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

z-index失效原因

  1. 父元素为relative
  2. 子元素为static(默认为static)
  3. 子元素有浮动

正则表达式实现添加括号

例如存在字符串 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出的结果时,上一级函数不用放在栈中,节省出空间

判断数据类型的方法

  1. 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
  1. 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
  1. constructor
  2. 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
上一篇 下一篇

猜你喜欢

热点阅读