Web开发技术前端学习Web 前端开发

有用的前端代码片段收集

2016-05-01  本文已影响177人  忽如寄

1、数组深复制

function copyArr(arr1,arr2){
        for(var i=0;i<arr1.length;i++){
            arr2[i]=arr1[i];
        }
    }

2、去除字符串的空格

function clearBlank(yourString){
        var arr=[];
        for(var i=0;i<yourString.length;i++){
            if(yourString[i]!=" "){
                arr.push(yourString[i])
            }
        }
        return arr.join("");
    }

3、找出字符串中的数字,并将其转化为数组
(1)

function searchNum(str){
    var arr=[];
    var tmp="";
    for(var i=0;i<str.length;i++){
        if(Number(str[i])){
            tmp+=str[i];
        }
        else{
            if(tmp){
                arr.push(tmp);
                tmp="";
            }
        }
    }
    //字符串中最后一个是数字的情况
    if(tmp){
        arr.push(tmp);
        tmp="";
    }
    return arr;
}

(2)

function searchNum(str){
    var arr=[];
    var tmp="";
    for(var i=0;i<str.length;i++){
        if(str.charAt(i)>=0&&str.charAt(i)<=9){
            tmp+=str[i];
        }
        else{
            if(tmp){
                arr.push(tmp);
                tmp="";
            }
        }
    }
    //字符串中最后一个是数字的情况
    if(tmp){
        arr.push(tmp);
        tmp="";
    }
    return arr;
}

(3)利用正则

function searchNum(str){
    var re=/\d+/g;
    var arr=str.match(re); 
    return arr;
}

4、排除数组中的null、undefined和不存在的元素

function delArr(arr){
        for(var i=0;i<arr.length;i++){
            if(!arr[i]){
                continue;
            }
            //循环体
        }
    }

5、寻找出数组中索引值为偶数的元素,并组成新的数组
(1)迭代器方法

function evenArr(arr){
        return arr.filter(function(x,i){return i%2==0;})
    }

(2)普通方法

function evenArr(arr){
        var arr2=[];
        for(var i=0;i<arr.length;i++){
            if(i%2==0){
            arr2.push(arr[i])
            }
        }
        return arr2;
    }

6、寻找出数组(数字)中的最大值
(1)迭代器方法(将reduce换为reduceRight也行)

function arrMax(arr){
        return arr.reduce(function(x,y){return x>y?x:y});
    }

(2)普通方法

function arrMax(arr){
        var a=0;
        for(var i=0;i<arr.length;i++){
            if(a<arr[i]){
            a=arr[i];
            }
        }
        return a;
    }

(3)利用Math对象的max方法实现1

function arrMax(arr){
        var a=0;
        for(var i=0;i<arr.length;i++){
            a=Math.max(a, arr[i]);
        }
        return a;
    }

(4)利用Math对象中的max方法实现2

function arrMax(arr){
        var a=0;
        for(var i=0;i<arr.length-1;i++){
            a=Math.max(arr[i], arr[i+1]);
        }
        return a;
    }

显然,寻找数组中的最小值如法炮制。
7、简易获得随机颜色

function getColor{
      return "#"+Math.random().toString(16).substring(2,8);
}

8、将一个对象编程为类数组对象,并且遍历

function changeArr(object,length){
        object.length=length;
        for(var i=0;i<object.length;i++){
            //your content
        }
    }

9、使文字超出区域以省略号形式出现

 white-space: nowrap;
 text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 overflow: hidden;
display:block;//针对行内元素

10、将字符串颠倒顺序显示

function recerse(str){
    return str.split("").reverse().join("");
}

11、将函数参数arguments转换为数组

var arr=Array.prototype.slice.call(arguments);

12、模仿jQuery的选择器$

window.$=function(selector){
    var node=document.querySelector(selector);
    if(node){
        return node;
    }else{
        return null;
    }
}

13、将一个对象转换为数组

//一个对象形如下
var a={0:"a",1:"b",length:2};

//使用ES5
var arr=[].slice.call(a);     //[a,b]

//使用ES6
var arr=Array.from(a);    //[a,b]
上一篇下一篇

猜你喜欢

热点阅读