前端常用功能小计(持续更新)

深拷贝
deepClone(obj){
     let _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);
     return objClone
}
清除火狐浏览器无图片时的边框
img[src=""],img:not([src]){
    opacity:0;
}
获取URL参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r !== null) return decodeURI(r[2]); return null;
}
删除指定字符后的所有字符
var a = "112233-abab"
var b = a.substring(0,a.indexOf('-'))//112233
在指定位置插入字符
var a = "201902"
var b = a.slice(0,4) + "-" + a.slice(4) //"2019-02"
删除字符串中的所有空格
var a = "6221 6223 3221 54200"
var b = a.replace(/\s*/g,"") //"62216223322154200"
校验手机号
var phone = "13622993358"
if (!(/^1[3456789]\d{9}$/.test(phone))){
    console.log("phone error")
}
随机生成1-100数字
var a = Math.floor(Math.random()*100 +1);
复制指定文字到剪切板
function copy(text,callback) {
  if(document.execCommand('Copy')){
    //创建input
    var inputZ = document.createElement('input');
    //添加Id,用于后续操作
    inputZ.setAttribute('id','inputCopy');
    //获取传入的值
    inputZ.value = text;
    //创建的input添加到body
    document.body.appendChild(inputZ);
    //选中input中的值(使用前面的Id)
    document.getElementById('inputCopy').select();
    //把值复制下来
    document.execCommand('Copy')
    alert('複製成功');
    //删除添加的input
    document.body.removeChild(inputZ);
    // 成功回調1
    callback(1);
  }else{
    // 失敗回調2
    callback(2);
  }
}

//必须在触发事件中调用(如点击事件)
copy("www.supersjz.cn",function(type){
    if(type == 1){console.log("复制成功")}
})

用callback做类似装饰器的功能(校验参数必填)
function filter(callback){
    // 把所有校验都放在这个函数中
    name = document.getElementById("name").value
    if(!name){
        console.log("请输入姓名")
        return
    }
    callback()
}

//保存的方法跟下一步的方法调用同个过滤器

document.getElementById('save').onclick = function(){
    // 添加过滤器
    filter(function(){
        console.log("校验通过,继续执行")
    })
}

document.getElementById('next').onclick = function(){
    // 添加过滤器
    filter(function(){
        console.log("校验通过,继续执行")
    })
}
笛卡尔乘积(函ES6语法)
/*
*   参数:
*   单维数组结构 ["红色","蓝色"]
*   多维数组结构 [["红色","蓝色"],["大号","小号"],["圆形","方形"]]
*/ 
function descartes(arr) {
    // 判断是否多维数组结构
    if(typeof arr[0] == 'object'){ 
        return [].reduce.call(arr, function (col, set) {
            let res = [];
            col.forEach(c => {
                set.forEach(s => {
                    let t = [].concat(Array.isArray(c) ? c : [c]);
                    t.push(s);
                    res.push(t);
                })
            });
            return res;
        });
    }else{
        // 单维数组直接返回
        return arr;  
    }
}
var list = [["红色","蓝色"],["大号","小号"],["圆形","方形"]]
var descartesList = descartes(list)
console.log(descartesList)
笛卡尔乘积(原生JS)
/*
*   参数:
*   单维数组结构 ["红色","蓝色"]
*   多维数组结构 [["红色","蓝色"],["大号","小号"],["圆形","方形"]]
*/ 
// 笛卡儿积组合
function descartes(list){
    var point = {};  
    var result = [];  
    var pIndex = null;  
    var tempCount = 0;  
    var temp  = [];  
    for(var index in list){
        if(typeof list[index] == 'object'){  
            point[index] = {'parent':pIndex,'count'
            pIndex = index;  
        }  
    }  
    //单维度数据结构直接返回
    if(pIndex == null){
        return list;  
    }  
    //动态生成笛卡尔积
    while(true){  
        for(var index in list){  
            tempCount = point[index]['count'];  
            temp.push(list[index][tempCount]);  
        }
        result.push(temp);
        temp = [];
        while(true){
            if(point[index]['count']+1 >= list[inde
                point[index]['count'] = 0;
                pIndex = point[index]['parent'];
                if(pIndex == null){
                    return result;
                }
                index = pIndex;
            }else{
                point[index]['count']++;
                break;
            }
        }
    }
}
var list = [["红色","蓝色"],["大号","小号"],["圆形","方形"]]
var descartesList = descartes(list)
console.log(descartesList)
image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容