前端經常使用功能小計(持續更新)

深拷貝

function deepClone(obj){
	 var _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)
複製代碼

相關前端文章

vue 自定義右鍵樣式