新四季網

javascript必須掌握的基礎知識(JavaScript前端實用主義收藏就完了)

2023-04-13 11:30:12

一向以活好著稱的我給大家來點精華,不搞假大空,直接上實操,不用看懂,收藏就完了,以後你肯定會用到的。

今天帶來的是前端開發中經常碰到的數字問題,解決方式有些過於粗暴,未來還會不斷美化更新。

也歡迎大家關注我的Github(點擊原文連結),共同學習,共同提高。編者不才,如有問題,歡迎雅正,若有收穫,請盡情用star羞辱我。

充分利用JavaScript自帶原生方法解決問題

前端頁面和數據處理雖然看起來簡單,但是一個優秀的前端工程師對於細節的把控也是至關重要的,如何合理處理業務也體現前端工程師對性能優化的功力

獲取數組最大值和最小值

利用sort排序方法 針對數組進行排序,數組第一個和最後一個就是最大值和最小值

let arr = [1,2,3,4,5,6,7];arr.sort(function (a, b) { return a-b;}); //sort傳入一個排序函數,a-b為升序排序,b-a為降序排序let min = arr[0]; // 1let max = arr[arr.length - 1]; //7

使用Math中的max/min方法 可以使用apply來實現。apply傳入的是一個數組

let arr = [1,2,3,4,5,6,7];let max = Math.max.apply(null, arr);let min = Math.min.apply(null, arr);console.log(max, min) // 7,1

浮點數取整

丟棄小數部分,保留整數部分 parseInt(7/2)向上取整,有小數就整數部分加1 Math.ceil(7/2)四捨五入 Math.round(7/2)向下取整 Math.floor(7/2)註:都是JS內置對象

數組去重

ES6

arr2=[1,1,1,2,2,2,3,4]arr1 = Array.from(new Set(arr2)) //arr1=[1,2,3,4]

push( )去重

let arr3 = []; for(var i = 0; i < arr.length; i ) { (function(i) { if(arr3.indexOf(arr[i]) == -1) { //不包含該值則返回-1 arr3.push(arr[i]); } }(i)) } console.log(arr3); //如果當前數組的第i項在當前數組中第一次出現的位置不是i,那麼表示第i項是重複的,忽略掉。否則存入結果數組 let arr4 = [arr[0]]; for(var i = 1; i < arr.length; i ) { (function(i) { if(arr.indexOf(arr[i]) == i) { arr4.push(arr[i]); } }(i)) } console.log(arr4);

sort( )去重

let arrSort = arr.sort; let arr5 = []; for(let i = 0; i< arrSort.length; i ) { if(arrSort[i] != arrSort[i 1]) { arr5.push(arrSort[i]); } } console.log(arr5);

splice( )去重

for(let i = 0, len = arr6.length; i < len; i ) { for(let j = i 1; j arr.filter(Boolean);compact(array);//[3, 4, 5, 2, 3]

判斷用戶是否全部是成年人

const users = [ { name: "Jim", age: 23 }, { name: "Lily", age: 17 }, { name: "Will", age: 35 }];users.every(user => user.age >= 18);//false

判斷用戶中是否有30歲以上的人

const users = [ { name: "Jim", age: 23 }, { name: "Lily", age: 17 }, { name: "Will", age: 35 }];users.find(item => item.age>30);//{name: "Will", age: 35}

JS判斷點擊區域

適用場景:顯示頁面彈窗時,用戶點擊頁面其他地方彈窗自動關閉.

// HTML exitContent.vue 這是個彈窗// JavaScripthandleClick(e) { let facePanel = document.getElementById('facePanel') if(!facePanel.contains(e.target) && this.$refs.editContent.showFace){ this.$refs.editContent.showFace = false }},

合理利用正則表達式解決問題

標籤輸入限制

文本框只能輸入數字代碼(小數點也不能輸入) 只能輸入數字,能輸小數點. 數字和小數點方法二 只能輸入字母和漢字 只能輸入英文字母和數字,不能輸入中文 只能輸入數字和英文

chun

小數點後只能有最多兩位(數字,中文都可輸入),不能輸入字母和運算符號:

<input onKeyPress=" if((event.keyCode57) && event.keyCode!=46 || /\.\d\d$/.test(value)) event.returnValue=false">

小數點後只能有最多兩位(數字,字母,中文都可輸入),可以輸入運算符號: input的type設置為number後可以輸入e

// 匹配郵箱let reg = /^([a-zA-Z]|[0-9])(\w|\-) @[a-zA-Z0-9] \.([a-zA-Z]{2,4})$// (新)匹配手機號let reg = /^1[0-9]{10}$/;// (舊)匹配手機號let reg = /^1[3|4|5|7|8][0-9]{9}$/;// 匹配8-16位數字和字母密碼的正則表達式let reg = /^(?![0-9] $)(?![a-zA-Z] $)[0-9A-Za-z]{8,16}$/;// 匹配國內電話號碼 0510-4305211let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;// 匹配身份證號碼let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;// 匹配騰訊QQ號let reg = /[1-9][0-9]{4,}/;// 匹配ip地址let reg = /\d \.\d \.\d \.\d /;// 匹配中文let reg = /^[\u4e00-\u9fa5]*$/;

JS判斷字符串是否全是空格

let test = " \n ";if(test.match(/^\s $/)){ console.log("all space or \\n")}if(test.match(/^[ ] $/)){ console.log("all space")}if(test.match(/^[ ]*$/)){ console.log("all space or empty")}if(test.match(/^\s*$/)){ console.log("all space or \\n or empty")}

常用正則匹配

/^\\d $/  //非負整數(正整數 0)/^[0-9]*[1-9][0-9]*$/  //正整數/^((-\\d )|(0 ))$/  //非正整數(負整數 0)/^-[0-9]*[1-9][0-9]*$/  //負整數/^-?\\d $/    //整數let reg = /^([^0][0-9] |0)$/; if (reg.test(params.xzd2BorrowRate)) { params.xzd2BorrowRate = '.0'; } //整數/^\\d (\\.\\d )?$/  //非負浮點數(正浮點數 0)/^(([0-9] \\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9] )|([0-9]*[1-9][0-9]*))$/  //正浮點數/^((-\\d (\\.\\d )?)|(0 (\\.0 )?))$/  //非正浮點數(負浮點數 0)/^(-(([0-9] \\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9] )|([0-9]*[1-9][0-9]*)))$/  //負浮點數/^(-?\\d )(\\.\\d )?$/  //浮點數replace(/[^0-9]/ig, "") //只保留數字

JS擴大checkbox的點擊區域

試用場景:在表格中點擊 td 也能選中 ,或者在父節點也能點擊觸發事件做法:為 td 元素添加點擊事件,在點擊事件裡面觸發checkbox的點擊事件:

function clickTd($t){ $t.children("input").click;}

bug浮現:點擊checkbox的時候,因為頁面元素所在區域重疊,點擊事件向上傳遞,會首先觸發checkbox的點擊事件,然後觸發 td 的點擊事件,然後 td 的點擊事件會被再次觸發,就相當於checkbox點擊了兩次,所以需要 checkbox 的點擊事件執行完之後,讓該點擊事件停止傳遞。解決方案:checkbox的點擊事件裡面加入攔截即可:

function oncheckAll(event){ event.stopPropagation;}

計算時間戳間隔時間

let date1=new Date; //開始時間 let date2=new Date; //結束時間 let date3=date2.getTime-date1.getTime //時間差的毫秒數 ------------------------------------------------------------//計算出相差天數 var days=Math.floor(date3/(24*3600*1000)) //計算出小時數 var leave1=date3%(24*3600*1000) //計算天數後剩餘的毫秒數 var hours=Math.floor(leave1/(3600*1000)) //計算相差分鐘數 var leave2=leave1%(3600*1000) //計算小時數後剩餘的毫秒數 var minutes=Math.floor(leave2/(60*1000)) //計算相差秒數 var leave3=leave2%(60*1000) //計算分鐘數後剩餘的毫秒數 var seconds=Math.round(leave3/1000) alert(" 相差 " days "天 " hours "小時 " minutes " 分鐘" seconds " 秒")

JS提取字符串中連續的數字

let str = "013d1we22ewfa33rr4rwq0dsf00dsf9fas999";let getNum = function (Str,isFilter) {   //用來判斷是否把連續的0去掉 isFilter = isFilter || false; if (typeof Str === "string") { // var arr = Str.match(/(0\d{2,})|([1-9]\d )/g); //"/[1-9]\d{1,}/g",表示匹配1到9,一位數以上的數字(不包括一位數). //"/\d{2,}/g", 表示匹配至少二個數字至多無窮位數字 var arr = Str.match( isFilter ? /[1-9]\d{1,}/g : /\d{2,}/g); console.log(arr); return arr.map(function (item) { //轉換為整數, //但是提取出來的數字,如果是連續的多個0會被改為一個0,如000---->0, //或者0開頭的連續非零數字,比如015,會被改為15,這是一個坑 // return parseInt(item); //字符串,連續的多個0也會存在,不會被去掉 return item; }); } else { return []; }}console.log(getNum(str));//默認不加1,即不會把提取出來的0去掉

JS獲取項目根目錄

function getRootPath{ //獲取當前網址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.href; //獲取主機地址之後的目錄,如: uimcardprj/share/meun.jsp var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); //獲取主機地址,如: http://localhost:8083 var localhostPaht=curWwwPath.substring(0,pos); //獲取帶"/"的項目名,如:/uimcardprj var projectName=pathName.substring(0,pathName.substr(1).indexOf('/') 1); return(localhostPaht projectName);}

JS判斷小數點後幾位

num.toString.split(".")[1].length

JS截取數字小數點後N位

利用math.round

var original=28.453// 保留小數點後兩位var result = Math.round(original*100)/100; //returns 28.45// 保留小數點後一位var result = Math.round(original*10)/10; //returns 28.5

利用toFixed

var original=28.453// 保留小數點後兩位var result=original.toFixed(2); //returns 28.45// 保留小數點後一位var result=original.toFixed(1); //returns 28.5

JS控制Input輸入數字和小數點後兩位

function clearNoNum(value) { value = value.replace(/[^\d.]/g, ""); //清除「數字」和「.」以外的字符 value = value.replace(/\.{2,}/g, "."); //只保留第一個. 清除多餘的 value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); value = value.replace(/^(\-)*(\d )\.(\d\d).*$/, '$1$2.$3'); //只能輸入兩個小數 if (value.indexOf(".") < 0 && value != "") { //以上已經過濾,此處控制的是如果沒有小數點,首位不能為類似於 01、02的金額 value = parseFloat(value); }}

JS校驗手機號和座機號的方法

function $isPhoneAvailable(str) { let isMob=/^[1][3,4,5,6,7,8,9][0-9]{9}$/; let isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; if (isPhone.test(str) || isMob.test(str)) { return true; }else { return false; }}

JS indexOf 不區分大小寫實現

使用 str.toLowerCase 或者 str.toUpperCase 將對比字符串全都轉換成 大 (小) 寫

JS replace 如何針對key進行替換

str.replace(new RegExp('要替換的keyword','g'), '替換後的內容')

,
同类文章
葬禮的夢想

葬禮的夢想

夢見葬禮,我得到了這個夢想,五個要素的五個要素,水火只好,主要名字在外面,職業生涯良好,一切都應該對待他人治療誠意,由於小,吉利的冬天夢想,秋天的夢是不吉利的
找到手機是什麼意思?

找到手機是什麼意思?

找到手機是什麼意思?五次選舉的五個要素是兩名士兵的跡象。與他溝通很好。這是非常財富,它擅長運作,職業是仙人的標誌。單身男人有這個夢想,主要生活可以有人幫忙
我不怎麼想?

我不怎麼想?

我做了什麼意味著看到米飯烹飪?我得到了這個夢想,五線的主要土壤,但是Tu Ke水是錢的跡象,職業生涯更加真誠。他真誠地誠實。這是豐富的,這是夏瑞的巨星
夢想你的意思是什麼?

夢想你的意思是什麼?

你是什​​麼意思夢想的夢想?夢想,主要木材的五個要素,水的跡象,主營業務,主營業務,案子應該抓住魅力,不能疏忽,春天夢想的吉利夢想夏天的夢想不幸。詢問學者夢想
拯救夢想

拯救夢想

拯救夢想什麼意思?你夢想著拯救人嗎?拯救人們的夢想有一個現實,也有夢想的主觀想像力,請參閱週宮官方網站拯救人民夢想的詳細解釋。夢想著敵人被拯救出來
2022愛方向和生日是在[質量個性]中

2022愛方向和生日是在[質量個性]中

[救生員]有人說,在出生88天之前,胎兒已經知道哪天的出生,如何有優質的個性,將走在什麼樣的愛情之旅,將與生活生活有什么生活。今天
夢想切割剪裁

夢想切割剪裁

夢想切割剪裁什麼意思?你夢想切你的手是好的嗎?夢想切割手工切割手有一個真正的影響和反應,也有夢想的主觀想像力。請參閱官方網站夢想的細節,以削減手
夢想著親人死了

夢想著親人死了

夢想著親人死了什麼意思?你夢想夢想你的親人死嗎?夢想有一個現實的影響和反應,還有夢想的主觀想像力,請參閱夢想世界夢想死亡的親屬的詳細解釋
夢想搶劫

夢想搶劫

夢想搶劫什麼意思?你夢想搶劫嗎?夢想著搶劫有一個現實的影響和反應,也有夢想的主觀想像力,請參閱週恭吉夢官方網站的詳細解釋。夢想搶劫
夢想缺乏缺乏紊亂

夢想缺乏缺乏紊亂

夢想缺乏缺乏紊亂什麼意思?你夢想缺乏異常藥物嗎?夢想缺乏現實世界的影響和現實,還有夢想的主觀想像,請看官方網站的夢想組織缺乏異常藥物。我覺得有些東西缺失了