前端簡潔並實用的工具類
前言
本文主要從日期,數組,對象,axios,promise和字符判斷這幾個方面講工做中經常使用的一些函數進行了封裝,確實能夠在項目中直接引用,提升開發效率.html
1.日期
日期在後臺管理系統仍是用的不少的,通常是做爲數據存貯和管理的一個維度,因此就會涉及到不少對日期的處理vue
1.1 new Date轉化爲yyyy-MM-dd HH:mm:ss
DatePicker日期選擇器默認獲取到的日期默認是Date對象,可是咱們後臺須要用到的是yyyy-MM-dd,因此須要咱們進行轉化android
方法一:將Fri Mar 23 2018 12:19:48 GMT+0800 (國際時間)轉化爲dd-MM-yyyy HH:mm:ssios
export const dateToFormat=(date)=>{
date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
}
方法二:
從element-UI的2.x版本提供了value-format屬性,能夠直接設置選擇器返回的值
ajax
1.2 將yyyy-MM-dd轉化爲new Date()
也就是轉化爲日期控件能夠接受的類型算法
export const forMatToDate=(date)=>{
let dateArr=date.split(':');
return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
}
有個坑,日期中初始化默認比實際設置的值大一
1.3 獲取當前的時間yyyy-MM-dd HH:mm:ss
沒有滿10就補0axios
export default const obtainDate=()=>{
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day=date.getDate();
let hours=date.getHours();
let minu=date.getMinutes();
let second=date.getSeconds();
//判斷是否滿10
let arr=[month,day,hours,minu,second];
arr.forEach(item=>{
item< 10?"0"+item:item;
})
return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]
}
1.4 將時間戳轉化爲yyyy-MM-dd HH:mm:ss
export default const returnTimestamp=(strTime)=>{
let middleDate=new Date(strTime)
return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})
1.5 比較yyyy-MM-dd時間大小
若是單個比較會比較複雜,這裏直接處理成Number比較數組
方法一:利用正則轉化成 Numberpromise
export default const compareTwo=(dateOne,dateTwo)=>{
return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}
方法二:轉化成 Date 對象瀏覽器
export default const compareTwo=(dateOne,dateTwo)=>{
return new Date(dateOne)<new Date(dateTwo)
})
方法三:轉化成時間戳
export default const compareTwo=(dateOne,dateTwo)=>{
return new Date(dateOne).getTime()<new Date(dateTwo).getTime()
})
方法三:直接比較
export default const compareTwo=(dateOne,dateTwo)=>{
return dateOne<dateTwo
})
測試用例:
"2007-2-2 7:30" > "2007-2-2 6:30" //true
"2007-02-02 7:30" > "2007-2-2 6:30" //false
因此直接比較不許確不建議使用
1.6 計算兩個日期格式爲(yyyy-MM-dd)相差幾個月
export default const disparityFewMonth = (dateOne, dateTwo) => {
let datesOne = dateOne.split('-').map(item => Number(item));
let datesTwo = dateTwo.split('-').map(item => Number(item));
const diff = [0, 0, 0].map((value, index) => {
return datesOne[index] - datesTwo[index]
});
return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}
1.7 new Date對象可接受的參數
一、new Date("month dd,yyyy hh:mm:ss");
二、new Date("month dd,yyyy");
三、new Date(yyyy,mth,dd,hh,mm,ss); 注意：這種方式下，必須傳遞整型；
四、new Date(yyyy,mth,dd);
五、new Date(ms); 注意：ms:是須要建立的時間和 GMT時間1970年1月1日之間相差的毫秒數；當前時間與GMT1970.1.1之間的毫秒數：var mills = new Date().getTime();
注意:mth:用整數表示月份，從0（1月）到11（12月）
1.8 獲取某年的某月的天數
export default const monthDay=(year,month)=>{
return new Date(year, month, 0).getDate()
}
1.9 生成標識id
格式爲時間戳的後8位加4位隨機數
export default const disparityFewMonth = (dateOne, dateTwo) => {
let num='';
for (var i = 0; i < 4; i++) {
num += Math.floor(Math.random() * 10);
}
return imgId = String(new Date().getTime()).slice(-8)+String(num);
}
2.數組
2.1 檢測是不是數組
export default const judgeArr=(arr)=>{
if(Array.isArray(arr)){
return true;
}
}
2.2數組去重set方法
1.常見利用循環和indexOf(ES5的數組方法,能夠返回值在數組中第一次出現的位置)這裏就再也不詳寫,這裏介紹一種利用ES6的set實現去重.
2.set是新怎數據結構,似於數組，但它的一大特性就是全部元素都是惟一的.
3.set常見操做
你們能夠參照下面這個:新增數據結構Set的用法
4.set去重代碼
export const changeReArr=(arr)=>{
return Array.from(new Set([1,2,2,3,5,4,5]))//利用set將[1,2,2,3,5,4,5]轉化成set數據,利用array from將set轉化成數組類型
}
或者
export const changeReArr=(arr)=>{
return [...new Set([1,2,2,3,5,4,5])]//利用...擴展運算符將set中的值遍歷出來從新定義一個數組,...是利用for...of遍歷的
}
Array.from能夠把帶有lenght屬性相似數組的對象轉換爲數組，也能夠把字符串等能夠遍歷的對象轉換爲數組，它接收2個參數，轉換對象與回調函數,...和Array.from都是ES6的方法
2.3 純數組排序
常見有冒泡和選擇,這裏我寫一下利用sort排序
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
return a-b //將arr升序排列,若是是倒序return -(a-b)
})
}
2.4 數組對象排序
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
let value1 = a[property];
let value2 = b[property];
return value1 - value2;//sort方法接收一個函數做爲參數，這裏嵌套一層函數用
//來接收對象屬性名，其餘部分代碼與正常使用sort方法相同
})
}
2.5 數組中的最大值
export const maxArr=(arr)=>{
return Math.max(...arr)
}
或者export const maxArr=(arr)=>{
return Math.max.apply(null,arr)
}
2.6 數組的"短路運算"every和some
數組短路運算這個名字是我本身加的,由於通常有這樣一種需求,一個數組裏面某個或者所有知足條件,就返回true
狀況一:所有知足
export const allTrueArr=(arrs)=>{
return arr.every((arr)=>{
return arr>20;//若是數組的每一項都知足則返回true,若是有一項不知足返回false,終止遍歷
})
}
狀況二:有一個知足
export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{
return arr>20;//若是數組有一項知足則返回true,終止遍歷,每一項都不知足則返回false
})
}
以上兩種情景就和||和&&的短路運算很類似,因此我就起了一個名字叫短路運算,固然兩種狀況均可以經過遍歷去判斷每一項而後用break和return false 結束循環和函數.
2.7 數組過濾filter和處理map方法
filter:過濾知足某一條件的數組值,並返回新數組
export const filterArr = (arr, operator, judgeVal) => {
return arr.filter(item => {
if (operator == '>') {
return item > judgeVal;
} else if (operator == '<') {
return item > judgeVal;
} else if (operator == '==') {
return item == judgeVal;
}
})
}
map:對數組進行處理返回一個新數組
export const mapArr = (arr) => {
return arr.map(item => item + 10;)//箭頭函數的{}若是省略,則會默認返回,不用寫return
}
2.8將多維數組轉化爲一維的類
Array.prototype.flat = function() {
var arr = [];
this.forEach((item,idx) => {
if(Array.isArray(item)) {
arr = arr.concat(item.flat()); //遞歸去處理數組元素
} else {
arr.push(item) //非數組直接push進去
}
})
return arr; //遞歸出口
}
測試用例：
arr = [[2],[[2,3,[4,5,[7,8]]],[2]],3,4]
console.log(arr.flat());
3.對象
3.1 對象遍歷
export const traverseObj=(obj)=>{
for(let variable in obj){
//For…in遍歷對象包括全部繼承的屬性,因此若是
//只是想使用對象自己的屬性須要作一個判斷
if(obj.hasOwnProperty(variable)){
console.log(variable,obj[variable])
}
}
}
3.2 對象的數據屬性
1.對象屬性分類:數據屬性和訪問器屬性;
2.數據屬性:包含數據值的位置,可讀寫,包含四個特性包含四個特性：
configurable：表示可否經過delete刪除屬性從而從新定義屬性，可否修改屬性的特性，或可否把屬性修改成訪問器屬性，默認爲true enumerable:表示可否經過for-in循環返回屬性 writable：表示可否修改屬性的值 value：包含該屬性的數據值。默認爲undefined
3.修改數據屬性的默認特性,利用Object.defineProperty()
export const modifyObjAttr=()=>{
let person={name:'張三',age:30};
Object.defineProperty(person,'name',{
writable:false,
value:'李四',
configurable:false,//設置false就不能對該屬性修改
enumerable:false
})
}
3.3 對象的訪問器屬性
1.訪問器屬性的四個特性:
configurable：表示可否經過delete刪除屬性從而從新定義屬性，可否修改屬性的特性，或可否把屬性修改成訪問器屬性，默認爲false enumerable:表示可否經過for-in循環返回屬性,默認爲false Get：在讀取屬性時調用的函數,默認值爲undefined Set：在寫入屬性時調用的函數,默認值爲undefined
2.定義:
訪問器屬性只能經過要經過Object.defineProperty()這個方法來定義
export const defineObjAccess=()=>{
let personAccess={
_name:'張三',//_表示是內部屬性,只能經過對象的方法修改
editor:1
}
Object.defineProperty(personAccess,'name',{
get:function(){
return this._name;
},
set:function(newName){
if(newName!==this._name){
this._name=newName;
this.editor++;
}
}
//若是隻定義了get方法則改對象只能讀
})
}
vue中最核心的響應式原理的核心就是經過defineProperty來劫持數據的getters和setter屬性來改變數據的
3.4對象或對象數組的深度拷貝
原生方法一：
export const deepClone=function(origin,target){
var target = target || {}; //定義target
for(var key in origin) { //遍歷原對象
if(origin.hasOwnProperty(key)) {
if(Array.isArray(origin[key])) { //若是是數組
target[key] = [];
deepClone(origin[key],target[key]) //遞歸
} else if (typeof origin[key] === 'object' && origin[key] !== null) {
target[key] = {};
deepClone(origin[key],target[key]) //遞歸
}
target[key] = origin[key];
}
}
return target;
}
方法二：Object.assign
Object.assign(objOne,objTwo); //該方法是一個僞深度拷貝，若是改變對象裏面的數組值仍是會改變被拷貝的值
方法三：JSON.stringify
let objNew=JSON.parse(JSON.stringify(obj)) ;
//能夠實現深度拷貝
3.5 找出字符中出現頻次最多的字符
export const findMaxStr=(str)=>>{
let o = {};
for (let char of str) {
if (o[char]) { //char就是對象o的一個屬性，o[char]是屬性值，o[char]控制出現的次數
o[char]++; //次數加1
} else {
o[char] = 1; //若第一次出現，次數記爲1
}
}
console.log(o); //輸出的是完整的對象，記錄着每個字符及其出現的次數
//遍歷對象，找到出現次數最多的字符和次數
let max = 0;
let maxChar = null;
for (let key in o) {
if (max < o[key]) {
max = o[key]; //max始終儲存次數最大的那個
maxChar = key; //那麼對應的字符就是當前的key
}
}
console.log("最多的字符是" + maxChar);
console.log("出現的次數是" + max);
}
3.6 連續的對象數組插入其餘類型
1.要求
一個對象數組objArr,相似[{type:'text',content:''},{type:'img',content:''},{type:'img',content:''},],
要求數據結構是一個type爲text和type爲img的項交替出現
2.算法思路:
定義一個新對象數組,比較最後一項的type是否和當前項type相等,不等則push該項
若是相等就插入另外一個類型
export const alternateObj=(objChange)=>{
let objRule = [];
objChange.map((item, index) => {
//判斷是否有連續同類型數據
if (!index) {
objRule.push(item);
} else {
// console.log("objRule值爲", objRule);
// console.log("item值爲", item);
if (objRule[objRule.length - 1].type == item.type) {
if (item.type == "IMG") {
objRule.push({ type: "TEXT", content: "" }, item);
} else {
objRule.push({ type: "IMG", content: "" }, item);
}
} else {
objRule.push(item);
}
}
});
return objRule;
}
4.axios
4.1 axios的get方法
export const getAjax= function (getUrl,getAjaxData) {
return axios.get(getUrl, {
params: {
'getAjaxDataObj1': getAjaxData.obj1,//obj1爲getAjaxData的一個屬性
'getAjaxDataObj2': getAjaxData.obj2
}
}).then(data=>{
//成功返回
}).catch(err=>{
//錯誤返回
})
}
4.2 axios的post方法
export const postAjax= function (getUrl,postAjaxData) {
return axios.post(postUrl, {
'postAjaxDataObj1': postAjaxData.obj1,//obj1爲postAjaxData的一個屬性
'postAjaxDataObj2': postAjaxData.obj2
}).then(data=>{
//成功返回
}).catch(err=>{
//錯誤返回
})
}
4.3 axios的攔截器
主要分爲請求和響應兩種攔截器,請求攔截通常就是配置對應的請求頭信息(適用與常見請求方法,雖然ajax的get方法沒有請求頭,可是axios裏面進行啦封裝),響應通常就是對reponse進行攔截處理,若是返回結果爲[]能夠轉化爲0
1.請求攔截:將當前城市信息放入請求頭中
axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')
return config
}),
2.響應攔截:處理reponse的結果
axios.interceptors.response.use((response) =>{
let data = response.data
if(response.request.responseType === 'arraybuffer'&&!data.length){
reponse.date=0
}
})
5.promise
promise是一種封裝將來值的易於複用的異步任務管理機制,主要解決地獄回調和控制異步的順序
5.1 應用方法一
export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
resolve(()=>{
let a=1;
return ++a;
}).then((data)=>{
console.log(data)//data值爲++a的值
}).catch(()=>{//錯誤執行這個
})
})
}
5.2 應用方法二
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一個Promise並執行resolve方法
console.log(data)//data值爲[1,2,3]
})
}
6.文本框的判斷
6.1 所有爲數字
方法一(最簡單):
export const judgeNum1=(num1)=>{
if(typeof num1=='number'){
return true;
}else{
return false;
}
}
方法二:isNaN
export const judgeNum1=(num1)=>{
if(!isNaN(num1)){
return true;
}else{
return false;
}
}
注:當num1爲[]（空數組）、「」（空字符串)和null會在過程當中轉換爲數字類型的0,因此也會返回false,從而判斷爲數字,因此能夠將用typeof將以上特殊狀況剔除.
方法三:正則
export const judgeNum1=(num1)=>{
let reg=/^[0-9]*$/
if(!reg.test(num1)){
console.log('num1是0-9')
}
}
6.2 只能爲數字或字母
這個用正則判斷
定義一個正則:let reg=/^[0-9a-zA-Z]*$/g
6.3 只能爲數字,字母和英文逗號
由於存在輸入多個編號,以英文逗號分隔的狀況
定義一個正則:let reg=/^[0-9a-zA-Z,]*$/g
6.4 判斷輸入的位數不超過16位
直接利用字符串新加的length屬性來判斷
export const judgeNum1=(num1)=>{
if(num1.length>16){
console.log('num1超過16位')
}
}
6.5 去掉字符左右空格
export const trimLeOrRi=(str)=>{ //刪除左右兩端的空格
return str.replace(/(^s)|(s$)/g, "");
}
7. 檢測是瀏覽器仍是客戶端
其實本質都是利用navigator對象的userAgent屬性
export const checkIosOrAndriod=(appMethod)=>{
let ua_ios = window.navigator.userAgent.toLowerCase().match(/lan1.0_iOS/i),
ua_android = window.navigator.userAgent.toLowerCase().match(/RRJC3.0_Android/i),
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
ios_browser=
if(ua_ios || ua_android){
appMethod;//調用原生的方法
}else if(isAndroid){
return '安卓browser訪問'
}else if(isIOS){
return 'ios的browser訪問'
}
},
8.數字的處理
8.1四捨五入取值
export const getFloat=(molecular,denominator,n){//molecular是分子，denominator是分母，n是保留的小數位
let number=denominator==0?0:molecular/denominator;
n = n ? parseInt(n) : 0;
if (n <= 0) return Math.round(number);
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
return number;
}
9.客戶端類型
9.1 iPhoneX,iPhoneXS
export let checkIphoneX=(function judgeIphone(){
// iPhone X、iPhone XS
let isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
return isIPhoneX || isIPhoneXSMax || isIPhoneXR;
})()
9.2 IOS和Android
export function checkAgent () {
var u = navigator.userAgent,
Agent = '';
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isAndroid) {
Agent = 'Android';
} else if (isiOS) {
Agent = 'IOS';
}
return Agent;
}
9.3 判斷是橫屏
export function judgeHOrV() {
if (window.orientation == 180 || window.orientation == 0) {
return 'landscape'
}
if (window.orientation == 90 || window.orientation == -90) {
return 'portraitScreen'
}
}
10.路由相關
10.1 獲取?後指定 name 值
export const getQueryString=(name)=> {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
let url = window.location.href
let search = url.substring(url.lastIndexOf('?') + 1)
let r = search.match(reg)
if (r != null) return unescape(r[2])
return null
}
結束
很開心你還能看到這裏,這些類可能你如今用不到,但能夠先收藏着.你們能夠一塊兒交流,下次項目開發直接拿過去用,如今3月項目比較趕,這個真的能夠提升開發效率哦!祝你們新年快樂噠.
相關文章
- 1. 前端簡潔並實用的工具類
- 2. 簡潔的工具類函數封裝
- 3. 前端工具類
- 4. Material Design Lite，簡潔驚豔的前端工具箱。
- 5. Material Design Lite ，簡潔驚豔的前端工具箱。
- 6. 前端實用小工具
- 7. 很不錯實用的前端工具
- 8. 前端經常使用工具類
- 9. ubuntu簡潔但實用的截圖工具：Flameshot
- 10. 簡潔靈活的前端框架------BootStrap
- 更多相關文章...
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • MySQL客戶端和服務器端工具集 - MySQL教程
- • PHP開發工具
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章