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'), '替換後的內容')
,