js日常方法总结

2018-09-19 本文已影响0人 Mr无愧于心

封装函数 f，使 f 的 this 指向指定的对象

function bindThis(f, oTarget) {
    return f.bind(oTarget)
}

获取 url 中的参数

指定参数名称，返回该参数的值或者空字符串
不指定参数名称，返回全部的参数对象或者 {}
如果存在多个同名参数，则返回数组

var str='http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe'
function getUrlParam(sUrl, sKey) {
   var reg=/([^?&#]+)=([^?&#]+)/g;
   var obj={},ary=[];
   if(sKey==undefined){
       sUrl.replace(reg,function(){
           var ar1=arguments[1],ar2=arguments[2];
           if(!obj[ar1]){
               obj[ar1]=[ar2];
           }else{
               obj[ar1].push(ar2);
           }
       })
       return obj;
   }else{
       sUrl.replace(reg,function(){
           if(arguments[1]==sKey){
               ary.push(arguments[2])
           }
       })
       return ary.length>1?ary:ary.length==1?ary.toString():'';
   }
}
console.log(getUrlParam(str),46);

查找两个节点的最近的一个共同父节点，可以包括节点自身 oNode1 和 oNode2 在同一文档中，且不会为相同的节点

function commonParentNode(oNode1, oNode2) {
    var par1=oNode1.parentNode;
    var par2=oNode2.parentNode;
    var pars1=[oNode1],pars2=[oNode2];
    while(par1){
        pars1.push(par1);
        par1=par1.parentNode;
    }
    while(par2){
        pars2.push(par2);
        par2=par2.parentNode;
    }
    for(var k=0;k<pars1.length;k++){
        for(var i=0;i<pars2.length;i++){
            if(pars1[k]==pars2[i]){
                return pars2[i]||null;
            }
        }
    }
}

根据包名，在指定空间中创建对象
输入描述 namespace({a: {test: 1, b: 2}}, 'a.b.c.d')
输出描述: {a: {test: 1, b: {c: {d: {}}}}}

function namespace(oNamespace, sPackage) {
    var arr = sPackage.split('.');//[a,b,c,d]
    var res = oNamespace;   // 保留对原始对象的引用

    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] in oNamespace) {  // 空间名在对象中
            if(typeof oNamespace[arr[i]] !== "object") {    // 为原始值
                oNamespace[arr[i]] = {};    // 将此属性设为空对象
            }
        } else {    // 空间名不在对象中，建立此空间名属性，赋值为空
            oNamespace[arr[i]] = {};
        }

        oNamespace = oNamespace[arr[i]];    // 将指针指向下一个空间名属性。

    }
    console.log(oNamespace)
    console.log(res,'95')
    return res
}
namespace({a: {test: 1, b: 2}}, 'a.b.c.d');
//[a,b,c,d]=={a:{b:{c:{d:{}}}}};

为 Array 对象添加一个去除重复项的方法

var ary=[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
Array.prototype.uniq=function(){
    var ary=this;
    var flag=true;
    for(var i = 0;i<ary.length-1;i++){//控制比较多少次,控制着起始比较的那一项

        for(var j = i+1;j<ary.length; j++){
            if(ary[i]===ary[j]){
                ary.splice(j,1);//从数组里删除索引是j的这一项 会发生数组的塌陷
                j--; //这样索引就没有发生变化
            }
            if(flag){
                if(ary[j]!==ary[j]){
                    ary.splice(j,1);
                    j--;
                    flag=false;
                }
            }
        }
    }
}
Array.prototype.uniq=function(){
    return [...new Set(this)];
}



console.log(ary.uniq())
console.log(ary);

用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等

function fibonacci0(n) {
    return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
}
function fibonacci(n) {
    var arr=[0],i=0;
    function add(a,b){
        if(i>n){
            return arr[n];
        }
        i++;
        arr.push(a+b);
        add(arr[arr.length-2],arr[arr.length-1]);
    }
    add(0,1);
    return arr[n];
}
console.log(fibonacci(10))
//[0,1,1,2,3,5,8,13,21,34,55]

按所给的时间格式输出指定的时间
格式说明

 对于 2014.09.05 13:14:20
 yyyy: 年份，2014
 yy: 年份，14
 MM: 月份，补满两位，09
 M: 月份, 9
 dd: 日期，补满两位，05
 d: 日期, 5
 HH: 24制小时，补满两位，13
 H: 24制小时，13
 hh: 12制小时，补满两位，01
 h: 12制小时，1
 mm: 分钟，补满两位，14
 m: 分钟，14
 ss: 秒，补满两位，20
 s: 秒，20
 w: 星期，为 ['日', '一', '二', '三', '四', '五', '六'] 中的某一个，本 demo 结果为 五
 formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')
 2014-09-05 13:14:20 星期五

function formatDate(date,format){
    var obj= {
        yyyy:date.getFullYear(),
        yy:(''+date.getFullYear()).slice(-2),
        MM:addZero(date.getMonth()+1),
        M:addZero(date.getMonth()+1),
        dd: addZero(date.getDay()),
        d: addZero(date.getDay()),
        w: ['日', '一', '二', '三', '四', '五', '六'][date.getDate()],//星期
        HH: addZero(date.getHours()),
        H: addZero(date.getHours()),
        hh: addZero(date.getHours()%12),
        h: addZero(date.getHours()%12),
        mm: addZero(date.getMinutes()),
        m: addZero(date.getMinutes()),
        ss: addZero(date.getSeconds()),
        s: addZero(date.getSeconds()),
    }
    function addZero(n){
        return n<10?"0"+n:n;
    }
    console.log(obj)
    format=format.replace(/[a-zA-Z]+/g,function(){
        return obj[arguments[0]]
    })
    return format
}
console.log(formatDate(new Date(1409894060000), 'yy-M-dd hh:mm:s 星期w'))

如果第二个参数 bUnicode255For1 === true，则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2

function strLength(s, bUnicode255For1) {
    if(bUnicode255For1===true){
        return s.length;
    }
    var ary= s.split(''),allL=0;
    for(var i=0;i<ary.length;i++){
        if(ary[i].charCodeAt(0)>255){
            allL+=2
        }else{
            allL+=1
        }
    }
    console.log(allL)
    return allL;
}

function strLength(s, bUnicode255For1) {
    if (bUnicode255For1) {
        return s.length;
    } else {
        var len = s.length;
        for (var i = 0; i < s.length; i++) {
            if (s.charCodeAt(i) > 255) {
                len++;
            }
        }
        return len;
    }
}
strLength('hello world, 牛客', false)

判断输入是否是正确的邮箱格式

function isAvailableEmail(sEmail) {
    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
    return reg.test(sEmail);
}

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

rgb 中每个 , 后面的空格数量不固定
十六进制表达式使用六位小写字母
如果输入不符合 rgb 格式，返回原始输入

function rgb2hex(sRGB) {
    var reg=/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g;
    var res='#';
    var flag=true;
    if(reg.test(sRGB)){
        sRGB.replace(/\d+/g,function(){
            console.log(Number(arguments[0]))
            if(Number(arguments[0])>255||Number(arguments[0])<0){
                flag=false;
            }
            res+= Number(arguments[0])<16 ? '0'+(Number(arguments[0])).toString(16) : Number(arguments[0]).toString(16);
        })
        if(flag===false){
            return sRGB;
        }
        return res;
    }else{
        return sRGB;
    }
}
console.log(rgb2hex('rgb(10       , 255, 254)'))

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能

以 - 为分隔符，将第二个起的非空单词首字母转为大写
-webkit-border-image 转换后的结果为 webkitBorderImage

function cssStyle2DomStyle(sName) {
    var reg=/-([a-z])/g;
    sName = sName.replace(reg,function(){
        return (arguments[1]).toUpperCase();
    })
    sName=(sName.substring(0,1)).toLowerCase()+sName.slice(1);
    console.log(sName)
    return sName;
};
cssStyle2DomStyle('-webkit-border-image')

统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率

不限制 key 的顺序
输入的字符串参数不会为空
忽略空白字符

function count(str) {
    var arr=str.split(''),obj={};
    for(var i=0;i<arr.length;i++){
        var cur=arr[i];
        if(!obj[cur]){
            obj[cur]=1;
        }else{
            obj[cur]++;
        }
    }
    console.log(obj);
    return obj;
}
count('hello world')

移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回

function removeWithoutCopy(arr, item) {
    for(var i=0;i<arr.length;i++){
        if(arr[i]==item){
            arr.splice(i,1);
            i--;
        }

    }
    console.log(arr)
    return arr;
}
removeWithoutCopy([1, 2, 2, 3, 4, 2, 2], 2)

找出数组 arr 中重复出现过的元素

function duplicates(arr) {
    var newArr=[],obj={};
    arr.forEach(function (item) {
        if(!obj[item]){
            obj[item]=1;
        }else{
            obj[item]++
        }
    })
    for(var key in obj){
        if(obj[key]>1){
            newArr.push(Number(key));
        }

    }
    return newArr;
}
console.log(duplicates([1, 2, 4, 4, 3, 3, 1, 5, 3]))

数组每一项都平方原数组不改变

function square(arr) {
    var newArr=arr.map(function(item){
        return Math.pow(item,2)//幂   squre()//开方
    })
    return newArr
}

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

function findAllOccurrences(arr, target) {
    var newArr=[];
   arr.forEach(function(item,index){
       if(item==target)newArr.push(index);
   })
    return newArr;
}

给数字加千分符

function format(num) {
    let [str,sm] = num.toString().split('.');
    console.log(str)
    str=str.split("").reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev;
    })
    return str+'.'+sm;
}
console.log(format(12345678.1234));

数组转化成小时时间段

  //[0,3,4,6,8,9];
  //['0:00-1.00','3:00-5:00','6:00-7:00','8:00-10:00']
  function hourRange(hourAry){
    hourAry=hourAry.map(item=>parseFloat(item));
    let str=','+hourAry[0];
    hourAry.reduce((prev,next,index)=>{
      if(next-prev===1){//连续的
        str+='-'+next;
      }else{
        str+=','+next
      }
      return next;
    });
    str+=',';
    let reg=/(-\d+)*-(\d+),/g;
    str=str.replace(reg,function () {
      return '-'+(parseFloat(arguments[2])+1)+','
    });
    str=str.split(',').map(item=>{
      if(item&&item.indexOf('-')<0){//说明是一个单数
        return item+'-'+(parseFloat(item)+1)
      }
      return item;
    }).join(',');
    str=str.replace(/\d+/g,function () {
      return arguments[0]+':00';
    });
    return str.slice(1,str.length-1)
  }

判断数据类型

  function isType(data, type) {
    type=type[0].toUpperCase()+type.slice(1);
    return Object.prototype.toString.call(data)===`[object ${type}]`;
  }

判断两个一维数组的值是否相等

  function isAryueEqual(a, b) {
    if (a.length !== b.length) {
      return false;
    }
    return a.every((item)=>{
      return b.includes(item);
    });
  }

判断两个对象的值是否相等

function isObjectValueEqual(a, b) {
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);
    if (aProps.length !== bProps.length) {
      return false;
    }
    for (var i = 0; i < aProps.length; i++) {
      var propName = aProps[i];
      var propA = a[propName];
      var propB = b[propName];
      if ( propA !== propB) {
        return false;
      }
    }
    return true;
  }

查找两个元素是否有相同的父元素(可用来判断点击其他位置，搜索提示框消失)

function hasParent(tar,par){
    let parent=tar;
    if(!par.length){return false}
    while (parent){
      if([...par].includes(parent)){
        return true
      }
      parent=parent.parentNode;
    }
    return false;
  }

js日常方法总结

猜你喜欢

热点阅读