收藏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;
}

目录
相关文章
|
8天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
23天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
22小时前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
13天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
30 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
18天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
18天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
18天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
13天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
27 0
|
14天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
85 0