资讯专栏INFORMATION COLUMN

js 工具函数

Darkgel / 2619人阅读

摘要:获取中传参的值判断变量的数据类型深度克隆对象或数组多个对象或数组嵌套节流函数生成随机字符串判断对象是否为空判断是否有该改增加生成随机整数打乱数组顺序,洗牌算法深拷贝数组判断是否为纯粹的对象,由或者创建的不是挂在原型上的没有原型对象的对象通

1. 获取url中传参的值
function getParam (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r=window.location.search.substr(1).replace(new RegExp(/(amp;)/g),"").match(reg);
    if (r != null) {
        return r[2];
    }
    return null;
};
2. 判断变量的数据类型
function typeOf(obj) {
    const toString = Object.prototype.toString;
    const map = {
    "[object Boolean]"  : "boolean",
    "[object Number]"   : "number",
    "[object String]"   : "string",
    "[object Function]" : "function",
    "[object Array]"    : "array",
    "[object Date]"     : "date",
    "[object RegExp]"   : "regExp",
    "[object Undefined]": "undefined",
    "[object Null]"     : "null",
    "[object Object]"   : "object"
    };
    return map[toString.call(obj)];
},
3. 深度克隆对象或数组,多个对象或数组嵌套
      deepCopy(data) {
        const t = this.typeOf(data);
        let o;

        if (t === "array") {
          o = [];
        } else if ( t === "object") {
          o = {};
        } else {
          return data;
        }

        if (t === "array") {
          for (let i = 0; i < data.length; i++) {
            o.push(this.deepCopy(data[i]));
          }
        } else if ( t === "object") {
          for (let i in data) {
            o[i] = this.deepCopy(data[i]);
          }
        }
        return o;
      },
4. 节流函数
debounce(func, delay) {

    let timer;

    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }

    timer = window.setTimeout(() => {
        func.apply(this, args);
    }, delay);
    }

},
5. 生成随机字符串
function randomStr (len) {
  len = len || 32;
  var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  var maxPos = chars.length;
  var pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
};
6. 判断对象是否为空
function isEmptyObject (obj) {
    var name;
    for (name in obj) {
        return false;
    }

    return true;
},
7. 判断是否有该class
export function hasClass(el, className){
    let reg = new RegExp("(^|S)"+className+"(s|$)");
    return reg.test(el.className);
}
8. 改dom增加class
export function addClass(el, className){

    if(hasClass(el, className)){
        return;
    }

    let newClass=el.className.split(" ");
    newClass.push(className);
    el.className=newClass.join(" ");
}
9. 生成随机整数
function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1) + min);

}
10. 打乱数组顺序, 洗牌算法
function shuffle(arr) {

    let _arr = arr.slice();        //深拷贝数组
    for (let i = 0; i<_arr.length; i++) {
        let j = getRandomInt(0, i);
        let t = _arr[i];
        _arr[i] = _arr[j];
        _arr[j] = t;
    }

    return _arr;

}
11. 判断是否为纯粹的对象,由 new Object 或者 {} 创建的
    function isPlainObject ( obj ) {
        var proto, Ctor;
        var toString = Object.prototype.toString;
        var getProto = Object.getPrototypeOf;  // 不是挂在原型上的
        var hasOwn = Object.prototype.hasOwnProperty;
        var fnToString = hasOwn.toString;
        var ObjectFunctionString = fnToString.call(Object);
        
        if ( !obj || toString.call( obj ) !== "[object Object]" ) {
            return false;
        }

        proto = getProto( obj );
        
        // 没有原型对象的对象 (`Object.create( null )`)
        if ( !proto ) {
            return true;
        }
        
        // 通过 new Object 出来的对象
        Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
        return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
    }
12. 移动端多次点击事件
var times = 0; // 记录点击次数
var timer;
const CLICK_TIME = 5;  // 比如连续点击5此就触发
document.body.onclick = function () {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    if (times >= CLICK_TIME) {
        // do something
    }
    times++;
   timer = setTimeout(function () {
        times = 0;
   }, 200)
}
---
const REWARD_TICKET = 100
function getRandomArray(count) {
  let arr = [];
  let remainTicket = 0;
  for (let i = 1; i < count; i++) {
    if (i === 1) {
      remainTicket = REWARD_TICKET;
    } else {
      remainTicket = REWARD_TICKET - arr.reduce((prev, curr) => {
        return prev + curr;
      });
    }
    if (remainTicket < 11) {
      arr.push(remainTicket);
      break;
    }
    const randomNumber = parseInt(Math.random() * remainTicket, 10);
    arr.push(randomNumber > 10 ? randomNumber : 10);
  }

  // make sure every number >= 10
  if (arr[arr.length - 1] < 10) {
    const cut = arr.splice(arr.length - 2, 2);
    arr.push(cut[0] + cut[1]);
  }
  return arr;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107651.html

相关文章

  • 【前端构建】RequireJS及其优化工具

    摘要:介绍一款模块加载工具的入门,并且重点介绍其优化工具。发布目录项目源代码工具目录,例如构建工具等。另外,前端代码发布前都会进行压缩,使文件足够小。原来是因为里了,所以优化工具把也合并进来了。而优化工具要用好,要多尝试他们的配置选项。 前端变化太快,如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具:RequireJS的入门,并且重点介绍其优化工具。 一、RequireJS简介...

    Loong_T 评论0 收藏0
  • 前端面试题(3)现代技术

    摘要:什么是单页面应用单页面应用是指用户在浏览器加载单一的页面,后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时,将导航页传输到客户端,其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地...

    EasonTyler 评论0 收藏0
  • 前端面试题(3)现代技术

    摘要:什么是单页面应用单页面应用是指用户在浏览器加载单一的页面,后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时,将导航页传输到客户端,其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地...

    trigkit4 评论0 收藏0
  • 前端周刊第57期:《战争与和平版》的 CSS-IN-JS 黑历史

    摘要:以战争与和平为蓝本回顾了历史,也给出了非常赞的观察视角,程序员应该务实,而不是教条,更重要的是保持好奇心。初版于年前发布的,作者重写整个仓库从到之后,最近发布了版本,新版最大变化是升级到。 showImg(https://segmentfault.com/img/remote/1460000009584813); 不知道大家是否注意到,社区中出现的 CSS 尤其是 CSS-IN-JS...

    zhangqh 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<