前端開發常用的函式
阿新 • • 發佈:2018-12-13
實用的函式集合總結
基本型別的判斷
在專案例項中,難免要做一些容錯處理或者是對例項的型別判斷,那麼就可以把這部分的判斷整理成公共的js檔案,供全域性使用。
利用object.prototype.toString.call
可以判斷物件的型別
變數的兩種型別值:
1、基本型別:String,Number,Boolean,undefined,null,按值訪問
2、引用型別:Object,Array, 物件儲存在記憶體中
可以作為專案的工具類,比如命名為tool.js
export default isNumber(value) { return Object.prototype.toString.call(value) == '[object Number]' } export default isString(value) { return Object.prototype.toString.call(value) == '[object String]' } export default isArray(value) { return Object.prototype.toString.call(value) == '[object Array]' } export default isBoolean(value) { return Object.prototype.toString.call(value) == '[object Boolean]' } export default isUndefined(value) { return value === undefined } export default isNull(value) { return value === null } export default isSymbol(value) { return Object.prototype.toString.call(value) == '[object Symbol]' } export default isObject(value) { return ( Object.prototype.toString.call(value) == '[object Object]' || // if it isn't a primitive value, then it is a common object ( !isNumber(value) && !isString(value) && !isBoolean(value) && !isArray(value) && !isNull(value) && !isFunction(value) && !isUndefined(value) && !isSymbol(value) ) ) } //是否是一個空物件 export function isEmptyObject(obj) { if(!isObject(obj)) { return false } if(var key in obj) { return false } return true } //是否是一個空陣列 export function isEmptyArray(array) { if(!isArray(array)) { return false } return array.length > 0 ? false : true } export function isFunction(value) { return Object.prototype.toString.call(value) == '[object Function]'; }
引用型別克隆合併
Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果拷貝後的結果是兩個物件指向同一引用地址,修改其中一個物件的屬性,則另一個物件的屬性也會改變
所以改變引用型別值時會影響到拷貝的值
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
下面extend
函式就是解決上面的問題
/* 深度合併內容 引用型別克隆合併 arguments[0] = target arguments type is Object Or Array 多內容合併覆蓋優先順序: arguments[0]<arguments[1]<arguments[2].. 如果sources 不是陣列或者物件 則直接忽略 使用 extend(target, ...source) */ export function extend(){ var args = Array.prototype.slice.call(arguments); if(args.length === 0){ console.error('extends params is undefined') return {}; } if(args.length === 1){ return args[0] } //要合併的目標物件 var target = args[0]; //要合併的內容 var sources = args.slice(1,args.length) if(!isObject(target) && !isArray(target)){ target = {}; } sources.map(function(item){ //防止死迴圈 if(target === item){ return false; } //如果內容是物件 if(isObject(item)){ //開始遍歷 for(var key in item){ //如果內容是物件 if(isObject(item[key])){ //修正資料 target[key] = (target[key] && isObject(target[key]))?target[key]:{}; target[key] = extend(target[key],item[key]) }else if(isArray(item[key])){ //修正資料 target[key] = (target[key] && isArray(target[key]))?target[key]:[]; target[key] = extend(target[key],item[key]) }else{ //基本型別直接賦值 target[key] = item[key] } } }else if(isArray(item)){ for(var i = 0; i<item.length ;i++){ //如果內容是物件 if(isObject(item[i])){ //修正資料 target[i] = (target[i] && isObject(target[i]))?target[i]:{} target[i] = extend(target[i],item[i]) }else if(isArray(item[i])){ //修正資料 target[i] = (target[i] && isArray(target[i]))?target[i]:[]; target[i] = extend(target[i],item[i]) }else{ //基本型別直接賦值 target[i] = item[i] } } } //其他型別直接忽略 }) return target }
此時引用型別克隆出來的物件就是完全獨立的物件了,源物件修改屬性不會影響到克隆的物件
var obj1 = {a: {b: 1}};
var obj2 = extend({}, obj1)
obj1.a.b = 2;
obj2.a.b // 1
可以合併 物件與物件,陣列與陣列,物件與陣列等
不同時間形式的輸出
時間戳是一樣的,有時需要根據需求輸出不一樣格式的時間形式
- yyyy年MM月dd日 hh:mm:ss
- yyyy年MM月dd日
- yyyy-mm-dd
/*@param date 時間戳*/ /*@param format 時間格式*/ function dateFormat(date,format){ if(!format || typeof format !== 'string'){ console.error('format is undefiend or type is Error'); return ''; } date = date instanceof Date? date : (typeof date === 'number'|| typeof date === 'string')? new Date(date): new Date(); //解析 var formatReg = { 'y+': date.getFullYear(), 'M+': date.getMonth()+1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } for(var reg in formatReg){ if(new RegExp(reg).test(format)){ var match = RegExp.lastMatch; format = format.replace(match, formatReg[reg]< 10 ? '0'+formatReg[reg]: formatReg[reg].toString() ); } } return format; }
這樣,把你想要的時間的格式和時間戳傳入即可。
dateFormat(new Date().getTime(),'yyyy-MM-dd hh:mm:ss')
dateFormat(new Date().getTime(),'MM-dd-yy hh:mm:ss')
...
原文地址:https://segmentfault.com/a/1190000017137331