收藏JS方法

简介: 收藏JS方法

收藏JS方法

URL参数获取(getQuery)


实现方法


function getQuery(key) {
  if (location.href.indexOf('?') == -1) {
    return '';
  }
  var search = location.href.split('?')[1];
  var arr = search.split('&');
  var res = '';
  for (var i = 0; i < arr.length; i++) {
    var valArr = arr[i].split('=');
    if (valArr[0] == key) {
      res = valArr[1];
      break;
    }
  }
  return decodeURIComponent(res);
}

参数拼接(queryConcatString)


实现方法

function queryConcatString(obj) {
  var str = '';
  if (JSON.stringify(obj) == '{}') return str;
  for (var key in obj) {
    str += (key + '=' + obj[key] + '&')
  }
  str = str.slice(0, str.length - 1)
  return str;
}

深度克隆(deepClone)

下文方法只针对多层对象结构,递归处理


实现方法

function deepClone(obj) {
  var newObj = {};
  for (var key in obj) {
    if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
      newObj[key] = deepClone(obj[key])
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj;
}

防抖函数(debounce)

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

重点在清零clearTimeout(timer)

使用场景:

  • 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
  • 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
  • 文本编辑器实时保存,当无任何更改操作一秒后进行保存


实现方法


function debounce(fn, wait) {
    var timer;
    return function() {
        var _this = this;
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function() {
            fn.apply(_this, arguments)
        }, wait)
    }
}

window.onscroll = debounce(function() {
    console.log('scroll event);
}, 500)

节流函数(throttle)

高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

重点在开锁和关锁

实现方法


function throttle(fn, wait) {
    var timer;
    return function() {
        var _this = this;
        if (timer) return;
        setTimeout(function() {
            fn.apply(_this, arguments)
            timer = null;
        }, wait)
    }
}

函数只执行一次(once)


实现方法

function once (fn) {
    let called = false
    return function () {
        if (!called) {
            called = true
            fn.apply(this, arguments)
        }
    }
}

function test() {
    console.log(1);
}
function test2() {
    console.log(2);
}

var a = once(test);
var c = once(test2);

a(); // 1
a(); // 无输出
c(); // 2
c(); // 无输出  

删除数组中某一项(removeArrayItem)


实现方法

function removeArrayItem(array, item) {
    if (array.length > 0) {
        var index = array.indexOf(item);
        if (index > -1) {
            return array.splice(index, 1)
        }
    }
}

重复某个字符串N次(repeatStr)

时间复杂度O(logN)


实现方法

function repeat (str, n) {
  let result = ''
  if (n > 0) {
    while (true) { // eslint-disable-line
      if (n & 1) result += str
      n >>>= 1
      if (n <= 0) break
      str += str
    }
  }
  return result
}

倒计时(cutdownClass)

适用场景:单个或者多个倒计时

建议:单页面应用切换时,清理掉倒计时


实现方法


class cutdownClass {
  // 参数初始化
  constructor(num, time, callback, overCallback) {
    this.num = num || 0
    this.time = time || 1000
    this.callback = callback || function () {}
    this.overCallback = overCallback || function () {}
    this.timer = null;
  }
  // 倒计时 -- 时,分,秒
  setTimeHMS(num, timer, callback, backOver) {
    this.timer = setTimeout(() => {
      if (this.num > 0) {
        var obj = {};
        var hours = parseInt(this.num / 60 / 60);
        obj.hours = hours > 9 ? hours : "0" + hours;
        var minutes = parseInt(this.num / 60 % 60);
        obj.minutes = minutes > 9 ? minutes : "0" + minutes;
        var seconds = parseInt(this.num % 60);
        obj.seconds = seconds;

        this.num -= 1;
        this.callback(obj);
        this.setTimeHMS(this.num, timer, callback, backOver);
      } else {
          backOver();
      }
    }, timer)
  }
  // 倒计时 -- 天,时,分
  setTimeDHM(num, timer, callback, backOver) {
    this.timer = setTimeout(() => {
      if (num > 0) {
        var obj = {};
        var day = parseInt(num / 60 / 60 / 24);
        obj.day = day > 9 ? day : "0" + day;
        var hours = parseInt(num / 60 / 60 % 24);
        obj.hours = hours > 9 ? hours : "0" + hours;
        var minutes = parseInt(num / 60 % 60);
        obj.minutes = minutes > 9 ? minutes : "0" + minutes;
        num -= 1;
        callback(obj);
        this.setTimeDHM(num, timer, callback, backOver);
      } else {
        backOver();
      }
    }, timer)
  }
  // 清除倒计时
  clearTimer() {
    clearTimeout(this.timer);
  }
}

日期格式化(formatDate)

适用场景:时间戳转换为各种格式

注意:new Date(str),str中如果包含-,ios系统会转换为undefined,建议使用/替代


实现方法

function formatDate(date = new Date(), fmt = 'yyyy-MM-dd HH:mm:ss') {
  if (typeof date !== 'object') {
    date = new Date(date)
  }
  var formatOption = {
    'y': date.getFullYear(), // 年份,注意必须用getFullYear
    'M': date.getMonth() + 1, // 月份,注意是从0-11
    'd': date.getDate(), // 日期
    'q': Math.floor((date.getMonth() + 3) / 3), // 季度
    'w': date.getDay(), // 星期,注意是0-6
    'H': date.getHours(), // 24小时制
    'h': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 12小时制
    'm': date.getMinutes(), // 分钟
    's': date.getSeconds(), // 秒
    'S': date.getMilliseconds() // 毫秒
  };
  var week = ['日', '一', '二', '三', '四', '五', '六'];
  for (var i in formatOption) {
    fmt = fmt.replace(new RegExp(i + '+', 'g'), function (m) {
      var val = formatOption[i] + '';
      if (i == 'w') return (m.length > 2 ? '星期' : '周') + week[val];
      for (var j = 0, len = val.length; j < m.length - len; j++) val = '0' + val;
      return m.length == 1 ? val : val.substring(val.length - m.length);
    });
  }
  return fmt;
}

目录
相关文章
|
15天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
27天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
14天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
14天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
14天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
30 7
|
15天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
20天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
71 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3