js代码优化

95 阅读2分钟
  1. Math.abs()和Math.max()的用法
  // 常规写法
  if (endDate > startDate) {
    return day;
  } else {
    return -day;
  }
  // 高级点的写法
  // 方式1
  reurn endDate > startDate ? day : -day
  // 方式2
  reurn Math.abs(day)
  
  // 常规写法
  if (endDate > startDate) {
    return day
  } else {
    return 0;
  }
  // 高级点的写法
  return Math.max(0,day)
  1. switch的替代方案
const dayOfYear = (date)=>{
  // 常规写法
  // switch (date.getMonth()) {
  //   case 0:
  //     return "一月"
  //   case 1:
  //     return "二月"
  //   case 2:
  //     return "三月"
  //   case 3:
  //     return "四月"
  //   case 4:
  //     return "五月"
  //   case 5:
  //     return "六月"
  //   case 6:
  //     return "七月"
  //   case 7:
  //     return "八月"
  //   case 8:
  //     return "九月"
  //   case 9:
  //     return "十月"
  //   case 10:
  //     return "十一月"
  //   case 11:
  //     return "十二月"
  //   default:
  // }
  
  // 高级点的写法
  return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', ' November', 'December'][date.getMonth()]
}
let res = dayOfYear(new Date());
console.log(res);  // 八月
  1. new Date()的妙用
// 常规写法
// const numberOfDays = (year) => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);

// 高级点的写法
const numberOfDays = (year) => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);
console.log(numberOfDays(2024));//366
  1. document写法
    // 例子:检查用户是否滚动到页面底部
    //document: 该Document界面代表浏览器中加载的任何网页,并作为网页内容的入口点,即DOM 树。
    //document.documentElement: Document.documentElement返回 的 Element根元素document(例如,<html>HTML 文档的元素)。
    document.addEventListener('scroll', () => {
      // console.dir(document); // 代替log打印对应的方法
      const isAtBottom = () => document.documentElement.clientHeight + document.documentElement.scrollTop >= document.documentElement
        .scrollHeight; // document.documentElement 和 window.scrollY等效
      let res = isAtBottom()
      console.log(res);
    })
  1. 二维数组转对象
let arr = [
    ['BIDUPSID', '3009890E002ED3A29A51AE5FCC94FFAD'],
    ['PSTM', '1637992115'],
    ['BD_UPN', '12314753']
]
=>
{
    BIDUPSID: '3009890E002ED3A29A51AE5FCC94FFAD',
    PSTM: '1637992115',
    BD_UPN: '12314753'
}
1、forEach方法
let obj = {}
arr.forEach(([key, val], _) => {
    obj[key] = val
})
console.log(obj);

2、reduce方法
// let res = arr.reduce((preVal, [key, val]) => {
//     preVal[key] = val
//     return preVal
// }, {})
// 简写成
let res = arr.reduce((preVal, [key, val]) => (preVal[key] = val) && preVal, {})
console.log(res);

3、flat方法
let obj = {}
arr = arr.flat()
for (let i = 0; i < arr.length; i++) {
    if (i % 2 == 0) {
        let key = arr[i]
        let val = arr[i + 1]
        obj[key] = val
    }
}
console.log(obj);