當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

前端开发：JavaScript---ECMAScript

發布時間：2023/12/15 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发：JavaScript---ECMAScript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript：JavaScript是一種web前端的描述語言，也是一種基于對象（object）和事件驅動（Event?Driven）的腳本語言。它運行在客戶端從而減輕服務器的負擔。

js是一種解釋型語言，邊執行邊解釋，無需另外編譯。

javascript的作用：

　　1.?表單驗證---減輕服務器的壓力；客戶端表單驗證即在數據送達服務端之前進行用戶提交信息即時有效地驗證，減輕服務器壓力。即數據交互。

　　2.?制作頁面特效

　　3.?動態改變頁面內容

JS組成：ECMAScript、DOM、BOM

JS的引入方式和輸出：

引入方式：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>第一個js</title><script src="./index.js"></script> </head> <body><p id="p1" onclick="clickhandler()">123</p></body> <script type="text/javascript">function clickhandler(){// alert表示彈出警告框// 多行注釋用 /* */ alert(1);}</script> </html>

輸出：

JS的變量：

變量是用來儲存信息的容器；由于JS是松散數據類型，所以變量中可以放置任何的數據類型

創建變量? 儲存值和代表值? ?（聲明變量都用 var）

var a;? ?//?聲明?創建，?此時這個變量中什么都沒有，獲取變量中的返回值為undefined；

= ：在JS中是賦值的意義；

+= ：在JS中是保留原來的值?上累加

一次聲明多個變量，每個變量用逗號隔開；一般相同數據類型使用一個聲明，如：

var a = xxx, fn = function(){}, num = 5

如下代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>變量的聲明和定義</title> </head> <body><script type="text/javascript">// 變量的聲明// 1. 先聲明再定義// 聲明var dog;alert(dog); // 返回“undefined”,未定義// 定義 dog = "偉哥";alert(dog);alert(dog);alert(dog);// JS中代碼的執行順序：從上到下// 2. 聲明時就定義var dog2 = "偉哥2"alert(dog2)</script> </body> </html>

JS變量的命名規則：

　　1. 嚴格區分大小寫

　　2.?命名時可以出現字母、數字、下劃線、$，但是不能以數字開頭，也不能純數字

　　3.?不能包含關鍵字和保留字；關鍵字：var number ；除了關鍵字， top name也盡量不要使用

　　4.?推薦駝峰命名法：有多個有意義的單詞組成名稱時，第一個單詞的首字母小寫，其余的單詞首字母大寫

JS的數據類型：

數字? number
字符串? string
布爾 boolean
數組? []
對象? {}
空值? Null
空值? Undefined

基本數據類型：數字 number、字符串 string、布爾 boolean、 null、 undefined

引用數據類型：包括對象數據類型和函數數據類型

　　對象數據類型：數組 array 、對象 object、正則 REGEXP

　　函數數據類型： function

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>5種基本數據類型</title> </head> <body><script type="text/javascript">// js中有兩種數據類型：1. 基本數據類型；2. 引用數據類型// 基本數據類型：number,sting,boolean,null,undefined// 1. 數字類型var a = 123;console.log(a);// 查看a 的數據類型，有兩種寫法，如下： console.log(typeof(a)) // 2. 字符串類型var s="123";console.log(s);console.log(typeof s)// 3. 布爾類型(boolean)var b1 = true;console.log(b1)console.log(typeof b1)// 4. null(null叫空對象，是object類型)var c1 = null;console.log(c1)console.log(typeof c1)// 5. undefined(只聲明了但沒有定義)var d1;console.log(d1)console.log(typeof d1)var e1=5/0; console.log(e1) // Infinity,無限大 console.log(typeof e1) //number類型</script></body> </html>

瀏覽器效果：

?運算符

JS的運算符包括：算數運算符、賦值運算符、比較運算符、邏輯運算符

算數運算符：

賦值運算符：

比較運算符

邏輯運算符：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>運算符</title> </head> <body><script type="text/javascript">// 1. 賦值運算符var money = prompt("請輸入金額：");var saveMoney = money * (1+0.02);console.log(saveMoney)// 2. 算數運算符var a = 10;var b = 4;var c = a % b; // 取余 console.log(c)// 2.1 復合運算符var m=7,n=8; // 同時給多個變量賦值 n += m; // 相當于： n=m+n; console.log(n)// 2.2 自增/自減1// x++; ：表示先賦值后++// y = x++; ：表示先將x的值賦值給y，然后再讓 x 加1（++）var x=2;y = x++; console.log(x)console.log(y)// 所以，此時 y為2,x為3// ++x; ：表示先++后賦值// y = ++x; ：表示先讓x加1（++），再將加完1的x賦值給yvar x=2;y = ++x;console.log(x)console.log(y)// 所以，此時 y為3，x也為3// 3. 比較運算符// ==比較的是值的大小；===是值和類型都進行比較 console.log(5>6)console.log(5 =="5") // 結果為 true；隱式轉換：瀏覽器會將數字轉換成字符串 console.log(5 ==="5") // 結果為 false，因為它們數據類型不一樣// 4. 邏輯運算符// && 表示 and(與)；|| 表示 or (或)；! 表示 not(非) console.log(5>6 || 1<2) // 結果為 true console.log(true&&false)
</script></body> </html>

字符串處理

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>字符串處理</title> </head> <body><script type="text/javascript">// 字符串運算var firstName = "星";var lastName = "Li";// 字符串拼接var fullName = firstName + " " + lastName;console.log(fullName)var product = "化妝品";var reason = "容易增加它的購買幾率";var str = "和購物中心不同，去百貨商場購物，進門先看到的總是" + product + "。通常商場里購買化妝品的人不如購買服裝的多，將化妝品專柜設在人流量大、進入商場的必經之地，" + reason + "。";console.log(str)var a1 = "1";var a2 = "2";console.log(a1+a2) // 輸出結果為： "12"; a1+a2還是字符串類型，不是數字 console.log(parseInt(a1+a2)) // 結果為：12（此12為數字類型）；parseInt 是一個方法：將數據類型轉化為數字類型 console.log(parseInt(a1)+parseInt(a2)) // 結果為：3 （數字類型）// 所以，字符串的 “+” 是拼接的意思// 純數字類型的字符串可以進行算數運算（加減乘除等）var b1 = "one",b2="two";console.log(b1*b2) // 輸出結果為：NaN （全稱 not a number）；但 NaN的數據類型卻是 number 數據類型</script> </body> </html>

數據類型的轉換

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>數據類型的轉換</title> </head> <body><script type="text/javascript">// 1. 將數字類型轉換為字符串類型var n1 = 123;var n2 = "4";var n3 = n1+n2;console.log(n3) // 輸出結果為 "1234" console.log(typeof n3) //數據類型為字符串// 強制類型轉換:1. String() 2. toString()// String() 是一種方法：將數據類型轉換為 string 類型var str1 = String(n1); console.log(str1)console.log(typeof str1)var num = 234;console.log(num.toString()) console.log(typeof num.toString()) // string console.log(typeof num) // number// 2. 將字符串類型轉換成數字類型：1. Number(); 2. parseInt(); 3. parseFloat()var strNum = "789.123bnaoi";var num2 = Number(strNum);console.log(num2) // NaN console.log(typeof num2) // number// parseInt() 可以解析一個字符串，并且返回一個整數 console.log(parseInt(strNum)) // 789 console.log(typeof parseInt(strNum)) //number// parseFloat()可以解析一個字符串并返回一個浮點數 console.log(parseFloat(strNum)) // 789.123 console.log(typeof parseFloat(strNum)) // number// 3. 布爾類型；在JS中，所有的數據類型都可以被歸為布爾類型(boolean)var m1 = "123";console.log(Boolean(m1)) // truevar m2 = 0;console.log(Boolean(m2)) // falsevar m3 = "";console.log(Boolean(m3)) // falsevar m4 = NaN;console.log(Boolean(m4)) // falsevar m5; // 只聲明未賦值；相當于 undefined console.log(Boolean(m5)) // falsevar m6 = null;console.log(Boolean(m6)) // falsevar m7 = undefined;console.log(Boolean(m7)) // falsevar m8 = -1;console.log(Boolean(m8)) // truevar m9 = Infinity;console.log(Boolean(m9)) // true</script></body> </html>

流程控制語句

if語句：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><title>流程控制語句if</title> </head> <body><script type="text/javascript">var goal = 20;if(goal>=20){console.log("吃雞成功，大吉大利")}else{console.log("下次繼續努力")}var n = 10;if (n<5) {console.log("小于5")}else if (n<10) { //此處不能寫成 5<=n<10 console.log("5到10之間")}else if (n<15) { //此處不能寫成 10<=n<15 console.log("10到15之間")}else{console.log("多于15")}// 注意：瀏覽器解析代碼的順序是：從上往下，從左往右var math = 90;var eng = 85;var sum = 485;// 邏輯與if(sum>400 && math>85){console.log("被清華錄取")}else{alert("沒考上清華")}// 邏輯或if (sum>400 || eng >90) {alert("被復旦錄取")}// if語句中能進行運算if (sum>500 || (math+eng)>170) {console.log(233)}</script></body> </html>

switch語句：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>switch語句</title> </head> <body><script type="text/javascript">var gameScore = "666";// gameScore 表示比較對象switch (gameScore) {// case 表示一個條件，滿足這個條件就會走進來執行后面的代碼（類似于打開了開頭）；遇到break跳出case "good":console.log("玩的good")// break 表示退出break;case "better":console.log("玩的better")break;// default 表示不做比較了（相當于if...else...語句中的else）default:console.log("很遺憾，你出局了")break;}</script></body> </html>

while循環語句：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>while循環</title> </head> <body><script type="text/javascript">// while循環：1. 初始化循環變量； 2. 判斷循環條件； 3. 更新循環變量var i = 1;while(i<=9){console.log(i)i += 1;}// 練習：將1-100之間的所有3的倍數輸出出來var n = 1;while(n<=100){if (n%3===0) {console.log(n)}n++;}</script></body> </html>

?do...while...?循環語句

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>do-while語句</title> </head> <body><script type="text/javascript">// do while循環：1. 初始化循環變量；2.判斷循環條件；3.更新循環變量// 不管有沒有滿足while中的條件，do里面的代碼都會執行一遍var i = 3;do{console.log(i)i++;}while(i<10)</script></body> </html>

for?循環語句：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>for循環語句</title> </head> <body><script type="text/javascript">// for(聲明、初始化變量;循環變量;更新循環變量){執行}for(var i=1; i <= 10; i++){console.log(i)}// 輸出1-100之間的偶數for (var i=1;i<=100;i++) {if (i%2 == 0) {console.log(i)}}// 計算1-100之間所有數的和var sum=0;for (var i=1; i<=100; i++){sum += i;}console.log(sum)// 在瀏覽器上輸出如下樣式：（每行6個*，總共3行）// ******// ******// ******// document.write() 表示往瀏覽器上寫for (var i=1; i<=3; i++){ // i表示行，用于換行for(var j=1;j<=6;j++) { // j代表水平方向上的個數 document.write("*")}document.write("<br>") // 寫完一行就換行 }// 兩個for循環的嵌套</script></body> </html>

練習：利用 for?循環?畫出三角形

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>for循環之三角形</title> </head> <body><script type="text/javascript">// 直角三角形for (var i=1; i<=6;i++){for(var j=1;j<=i;j++){document.write("*")}document.write("<br>")}// 等邊三角形for (var i=1;i<=6;i++){for(var k=i;k<6;k++){ // 空格數 document.write(" ")}for (var v=1; v<= 2*i-1; v++){ // 控制 “*” 個數 document.write("*") }document.write("<br>")}</script></body> </html>

常用內置對象

內置對象就是ECMAScript提供出來的一些對象，對象都有相應的屬性和方法

數組：Array

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>數組</title> </head> <body><script type="text/javascript">// 創建數組// 1. 字面量方式創建(推薦使用這種方式)var colors = ["red","color","yellow"];console.log(colors)// 創建空數組（推薦）var emptyArray = [];// 2. 使用構造函數的方式創建：使用關鍵詞 new 對構造函數進行創建對象var color2 = new Array(); // new Array() 也是創建一個空數組var color3 = new Array("black","red","blue");console.log(color3)// 數組賦值var arr = [];arr[0]=123;arr[1]="哈哈"; arr[2]="嘿嘿"; // []中的數即下標（索引），相當于python列表中的索引 console.log(arr)// 數組的取值 console.log(arr[2]) // 通過下標取到相應的值 console.log(arr.length) //通過 lenght 這個屬性取到數組的長度（元素個數）// 遍歷數組for (var i=0;i<arr.length;i++){console.log(arr[i])}</script></body> </html>

瀏覽器效果：

數組常用方法：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>數組常用方法</title> </head> <body><script type="text/javascript">// 1. 數組的合并： concatvar north = ["北京","天津","山東"];var south = ["東莞","深圳","上海"];var newArr = north.concat(south);console.log(newArr)// 2. 將數組轉化成字符串： .toString()var score = [98,76,63,100,0];// toString() : 直接轉化為字符串，每個元素之間會用逗號隔開var str = score.toString();console.log(str)// join() 方法：將數組中的元素使用指定的字符串連接起來，形成一個新的字符串var str2 = score.join("|")console.log(str2)// 3. 通過內容查找下標// 3.1 indexOf() ：正向查找（返回第一個索引）// 如果查找的值在數組中不存在則返回 -1var index = score.indexOf(76);console.log(index) // 輸出：1// 3.2 lastIndexOf() ：反向查找（返回指定元素最后一個的索引）var lasIndex = score.lastIndexOf(76);console.log(lasIndex) // 輸出：1// 4. 數組排序var names = ["alex","neo","ago","egon"];// 4.1 反轉排序： reverse() （對該數組排序，并且有返回值）var reNames = names.reverse(); console.log(reNames) // ?["egon", "ago", "neo", "alex"] console.log(names) // ?["egon", "ago", "neo", "alex"]// 4.2 sort()：按照26個字母排序（從a到z）（對該數組排序，并且有返回值）var sortNames = names.sort();console.log(sortNames) // ["ago", "alex", "egon", "neo"] console.log(names) // ["ago", "alex", "egon", "neo"]// 移除元素和添加元素// 4.1 數組第一個// 4.1.1 移除元素// shift() ：移除數組的第一個元素，并將這個元素返回 (用法類似于python中的 list.pop()方法)var firstName = names.shift() // shift()會將該數組的第一個元素刪除，names.shift()的返回值就是刪除的第一個元素 console.log(firstName) // ago console.log(reNames) // ["alex","egon","neo"] console.log(sortNames) // ["alex","egon","neo"] console.log(names) // ["alex","egon","neo"]// names,reNames,sortNames的關系是： ===// 4.1.2 unshift() ：向數組的開頭添加一個或多個元素，并返回新的長度（length） names2 = ["abc","mike","alice"];var newLength = names2.unshift("shanshan","wxx");console.log(newLength) // 5 console.log(names2)// 4.2 數組最后一個// 4.2.1 push() ：往數組的末尾添加一個或者多個元素，并返回新的長度var newLength2 = names2.push("老村長","丫丫")console.log(newLength2)console.log(names2)// 4.2.2 pop() ：刪除數組的最后一個元素，并將該元素返回var a = names2.pop()console.log(a)console.log(names2)// 練習：把下面的字符串反轉（前端常見面試題）var str = "hello world"console.log(str.split("").reverse().join("")) // 輸出結果：dlrow olleh// str.split() 是 sting 的一種方法：將字符串分裂成數組</script></body> </html>

JavaScript函數

函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>函數</title> </head> <body><script type="text/javascript">// 1. 函數的創建； // 1.1 JS函數的聲明；注意：有函數的聲明就一定有調用function add(){alert("函數被調用了")// 函數體；執行一些操作 }// 1.2 函數的調用 add()// 2. 聲明函數時帶參數function add2(a,b){ // a，b是形參 alert(a+b)}add2(3,4)// 3. 聲明函數時有返回值function add3(x,y){return x+y; // return 返回值 }var sum = add3(4,5) // 有返回值就需要聲明一個變量去接收這個返回值 console.log(sum)</script></body> </html>

對象：object?和?構造函數

<!DOCTYPE html> <html> <head><title>object構造函數</title> </head> <body><script type="text/javascript">// 對象的創建 // 1 字面量方式創建（推薦使用這種方式）// 1.1 key:value形式；value可以是js中的任意的數據類型var stu = {name:"alex",age:"52",fav:"雞湯"}console.log(stu)console.log(window) // window也是個對象// 1.2 點語法：包括 get方法和 set方法var n = stu.name //get方法；get之后需要聲明一個變量去接收這個值 console.log(n)stu.age = 62; // set方法 console.log(stu.age)// 2 使用Object（）創建對象// Object() 表示構造函數；特點：1. 首字母大寫；遇到構造函數，要想創建對象， new 一個var obj = new Object(); // 創建一個新的空對象；Object（）是一個構造函數 console.log(obj) // {}// 賦值 obj.name = "xiaomage";console.log(obj)// 3. 使用自定義的構造函數創建對象// -------------構造函數---------------// 構造函數的注意點：// 1. 函數名要大寫 // 2. 構造函數不需要return// 3. 要為對象添加成員變量（即屬性值）；通過this添加（this表示當前對象），如：this.name = "neo"// 聲明var Stu = function(){ // function()中能傳入形參，因為 function(){}是普通聲明函數的方式； Stu也是一個對象；// 為Stu這個對象添加成員變量（屬性（和方法））this.name = "neo";this.age = 22; // name和age是屬性this.fav = function(){ // fav是一種方法 console.log("泡妹子")}}// 利用new和Stu 去創建對象var s = new Stu(); console.log(s) var s1 = new Stu(); // 聲明時如果function里面帶參數， new的時候也要帶參數 console.log(s1) // s 和 s1 雖然方法和屬性都一樣，但它們的內存空間是不同的// 上述方法的弊端：每次new一個對象，里面的成員變量都一樣；所以上述方法不推薦使用// 推薦使用的構造函數的方式，如下（這種方式很常見）function Animal(){ // Animal()中可傳入參數// 函數體；添加成員變量this.name = "abx"; // this 表示當前的對象this.age = 12;/*this.fav = function(){console.log(this.age)
　　　　　　　}*/ // 方法通常寫在外面，如下所示}Animal.prototype.fav = function(){ // 方法用這種形式寫在外面；給Animal添加了一個fav方法 console.log(this.age)}var a = new Animal(); // 構造函數創建實例 a.fav(); // a 也會有 fav這個方法；因為繼承</script></body> </html>

String_Number對象

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>String_Number</title> </head> <body><script type="text/javascript">// 內置對象// 1. String 字符串對象var str = "hello world";// 1.1 長度 console.log(str.length) // 11；該字符串的長度// 1.2 轉成大寫 var uppperStr = str.toUpperCase() // 將字符串變成大寫 console.log(uppperStr) // HELLO WORLD console.log(str) // hello world； toUpperCase()只是返回了str的全大寫，并沒有對str做任何修改// 1.3 轉成小寫 console.log(uppperStr.toLowerCase()) // hello world// 1.4 分割字符串：split("",number) ：第一個參數表示分割符，第二個表示返回數組的最大長度var newArr = str.split(" ",1)console.log(newArr) // ["hello"]// 1.5 截取字符串： substring(index1,index2) ：截取index1 到 index2 之間的內容，也是顧頭不顧尾var a = str.substring(2,6)console.log(a) //"llo " console.log(str)// 2. Number 數字對象// 2.1 toString() ：將 number類型轉換成字符串類型var num = 123.32456;var numStr = num.toString();console.log(typeof numStr)// 2.2 toFixed(number) ：四舍五入；其中的number表示保留小數點后多少位var numRound = num.toFixed(3)console.log(numRound) // 123.325</script></body> </html>

Date對象

Date對象用于處理日期和時間

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>date的使用</title> </head> <body><script type="text/javascript">// 創建日期對象var myDate = new Date();// dateObject.getDate() ：獲取一個月中的某一天（幾號） console.log(myDate.getDate()) // 3// Date() ：獲取當天的時間（年月日時時分秒） console.log(Date()) // Thu May 03 2018 18:18:46 GMT+0800 (中國標準時間)// dateObject.getMonth() ：獲取一年中的某一個月（0-11，0表示1月） console.log(myDate.getMonth()) // 4 console.log(myDate.getMonth()+1) // 準確的月份; 5// dateObject.getDay() ：獲取一周中的某一天（0-6，0表示周日） console.log(myDate.getDay()) // 4</script></body> </html>

Date其它常用的方法：

Math對象

Math對象用于執行數學任務

注意：Math對象并不像Date和String那樣是對象的類，因此沒有構造函數?Math()，像Math.sin()這樣的函數只是函數，并不是某個對象的方法；通過把Math作為對象使用就可以調用其所有屬性和方法

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Math用法</title> </head> <body><script type="text/javascript">// Math.ceil(x) ：可對一個數進行上舍入；返回值：大于等于x，并且與它最接近的整數 var x = 1.234;var a = Math.ceil(x); // 天花板函數 console.log(a) // 2// Math.floor(x) ：可對一個數進行下舍入；返回值：小于等于x，且與x最接近的整數var b = Math.floor(x); // 地板函數 console.log(b) // 1// 最大值、最小值 console.log(Math.max(2,5))console.log(Math.min(2,5))// Math.random() ： 0~1之間的隨機數（包含0但不包含1）var ran = Math.random();console.log(ran)// 100~200之間的隨機數var c = 100 + (Math.random()*100; // 不能直接寫成： Math.random()*200 console.log(c)// 公式：min ~ max 之間的隨機數// min + Math.random()*(max - min)</script></body> </html>

定時器

1、setInterval()：按照指定?的周期（以毫秒計）來調用函數或計算表達式；

setInterval（）方法會不停地調用函數，直到遇到clearInterval（）被調用或窗口被關閉。由setInterval（）返回的ID值可用作clearInterval（）方法的參數

2、setTimeout() ：?用于在指定的毫秒數后調用函數或計算表達式

提示：setTimeout（）只執持code一次

示例代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>定時器</title> </head> <body><script type="text/javascript">// 定時器是windows的方法// 1. window.setInterval()// 1s = 1000msvar n = 0;var codeId = null; // 先聲明 codeId = null；通過這種方式，讓codeId變成全局變量,這樣在任意函數體里面都能被調用了 codeId = setInterval(function(){ // 返回一個ID n++;console.log(n)},1000);// 2. window.setTimeout() setTimeout(function(){console.log(codeId)window.clearInterval(codeId); // 5秒之后關掉上面的 setInterval() },5000);</script></body> </html>

正則表達式

正則表達式的創建和常用方法：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>正則表達式</title> </head> <body><script type="text/javascript">// 正則：對象：RegExp 正則表達式：檢索字符串，用來規定文本搜索的內容// 1. ----------------------創建正則表達式------------------// 1.1 構造函數創建： new RegExp("檢測的文本","修飾符"); i：不區分大小寫； g：全局匹配var str = "luffy 2018";var reg = new RegExp("l","ig");console.log(reg)// 1.2 字面量方式創建（推薦使用這種方式）var reg1 = /y/ig; // 不區分大小寫，全局匹配；是一種匹配規則 console.log(reg1)// 2.---------------正則對象提供的檢索方式------------// 2.1 test() ：檢測字符串中是否包含定義字符模式，返回布爾值；用于檢測，如檢測郵箱是否正確// 要檢索的字符在字符串中存在：true// console.log(reg1.test(str)) // true// 2.2 exec()：用來檢索字符串中正則表達式的匹配// 如果匹配到了，那么就返回一個存放有結果的數組，如果沒有匹配到就返回一個null console.log(reg1.lastIndex); // 0；reg1.lastIndex ：用于保存一次匹配時開始的下標（匹配到的下一個索引）；lastIndex用于test()和exec()，前提是reg1中有 g(全局匹配) console.log(reg1.exec(str)); // ["y", index: 4, input: "luffy 2018", groups: undefined] console.log(reg1.lastIndex); // 5// 3.---------------常用方法------------------// 3.1 match方法,匹配查找（所有的都找到）：字符串.match(正則)var str = "hello world";var reg = /o/g;// 使用正則表達式模式對字符串執行查找，并將包含查找的結果作為數組返回 console.log(str.match(reg)); // ["o", "o"]// 3.2 replace 替換物：str.replace(被替換的,替換的)// 補充：字符串也有replace方法，如上所示// console.log(str.replace(reg,"*")) // hell* w*rld// 3.3 search() ：返回第一個查詢字符在字符串中所在的位置（索引，下標）； console.log(str.search(reg)); // 4// 3.4 split() 分割：以匹配的規則進行分割 console.log(str.split(reg)); // ["hell", " w", "rld"]</script></body> </html>

瀏覽器效果如下：

lastIndex屬性可參考：http://www.jb51.net/article/120608.htm

正則表達式的匹配規則：元字符

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>元字符</title> </head> <body><script type="text/javascript">window.onload = function(){// 元字符：匹配的規則// 1. 單個字符和數字// 1.1 . (單個點)：匹配除換行符以外的任意單個字符；var str = "luffyCity 2018";var reg = /./g;console.log(reg.exec(str)); // ["l", index: 0, input: "luffyCity 2018", groups: undefined]// 1.2 如果想讓特殊字符不帶語法含義，轉義：\ ；如： \. 表示匹配. ； str = "www.baidu.com";var reg = /www\......\.com/g;console.log(reg.exec(str)) // ["www.baidu.com", index: 0, input: "www.baidu.com", groups: undefined]// 1.3 [] ：匹配[]里面的任意一個字符var str1 = "hello";var reg1 = /[a-zA-Z0-9]/g; // 一個 console.log(reg1.exec(str1)) // ["h", index: 0, input: "hello", groups: undefined]var str2 = "A123456";var reg2 = /[0-9][0-9][0-9]/g; // [0-9][0-9][0-9] 匹配三個，但這三個是一個整體 console.log(reg2.exec(str2)); // ["123", index: 1, input: "A123456", groups: undefined]// 1.4 [^] ：所有不在這個范圍內的字符（非）var str3 = "aBd123";var reg3 = /[^a-z][^A-Z]/g;console.log(reg3.exec(str3)); // ["Bd", index: 1, input: "aBd123", groups: undefined]// 1.5 \d ：匹配數字； \D ：匹配非數字var str4 = "web";var reg4 = /\d/g;var reg5 = /\D/g;console.log(reg4.exec(str4)); // null console.log(reg5.exec(str4)); // w// 1.6 \w ：匹配數字、字母、下劃線； \W ：匹配數字、字母、下劃線以外的任意字符；// 1.7 \s ：匹配空格； \S ：匹配非空格// trim() ：去除字符串前后端的空格；var str5 = "luffy";var reg8 = /\s/g;var reg9 = /\S/g;console.log(reg8.exec(str5)); // " " console.log(reg9.exec(str5)); // l；exec()接著上面exec()的索引往下執行；// 1.8 ^ ：以什么開頭； $ ：以什么結尾var str6 = "www.baidu.com";var reg10 = /^www/g;console.log(reg10.exec(str6)); // wwwvar reg11 = /^www\......\.com$/g;console.log(reg11.exec(str6)) // com// --------------------------------------------------------------------------------------------------------// 2 重復的字符// 2.1 ? ：匹配前面的字符0個或1個；var str7 = "A123webr4456498ere";var reg12 = /[0-9]?/g;console.log(reg12.exec(str7)) // ["", index: 0, input: "a123webr4456498ere", groups: undefined]// 2.2 * ：匹配0個或任意多個字符；var reg13=/[a-z]*/g;console.log(reg13.exec(str7)); // ["", index: 0, input: "A123webr4456498ere", groups: undefined]// 2.3 + ：至少匹配一次；var reg14 = /\d+/g;console.log(reg14.exec(str7)) // 123// 2.4、｛10｝：匹配連續的10個字符var stra = "13249874165";// 以1開頭后面連續匹配10個數字結尾var rega = /^1\d{10}$/g; // so, 總共會有11位 console.log(rega.exec(stra)) // 13249874165// 2.5、 {min,max} ：最少min個，最多max個var strb = "rng";// 以大小寫英文字母開頭并且最少2個最多3個字母結尾var regb = /^[A-Za-z]{2,3}$/g;console.log(regb.exec(strb)); // rng// 2.6、 | ：或者var strc = "www.google";var regc = /www.baidu|google|yahoo/g;console.log(regc.exec(strc)); // ["google", index: 4, input: "www.google", groups: undefined]// 2.7、() ：分組var regc1 = /(baidu)|(google)|(luffycity)/g;console.log(regc1.exec(strc)); // (4)?["google", undefined, "google", undefined, index: 4, input: "www.google", groups: undefined]// 獲取匹配的字符串 console.log(RegExp.$1); // 獲取第一組；// 結果：無 console.log(RegExp.$2); // 獲取第二組；// 結果：google console.log(RegExp.$3); // 獲取第三組；// 結果：無var str8 = "helloworld";var reg15 = /(hello)(world)/g;console.log(reg15.exec(str8)); // helloworld console.log(RegExp.$1); // hello// 將分組后的匹配調換順序 console.log(str8.replace(reg15,"$2 $1")); // world hello// ---------------------------------------------------------------------------------// 練習 // 1. 檢索字符串中是否不包含字母var strt1 = "12";var regt1 = /[^a-zA-Z]/g;if (regt1.test(strt1)){console.log("不包含");}else{console.log("包含");}// 2. 利用正則表達式去除字符串兩端的空格var strt2 = " hello world ";var regt2 = /^\s+/g;var strt3 = strt2.replace(regt2,"") // 把首部的空格替換成空字符串var regt3 = /\s+$/g;var strt4 = strt3.replace(regt3,""); // 把尾部的空格替換成空字符串 console.log(strt4)// 3. 電話號碼// 驗證規則：區號+號碼，區號以0開頭，3位或4位// 號碼由7位或8位數字組成// 區號與號碼之間可以無連接符，也可以“-”連接function checkPhone(str) {var regt4 = /^0\d{3,4}-?\d{7,8}$/;if (regt4.test(str)){console.log("正確")}else{console.log("錯誤")}}checkPhone("01231234567") // 調用函數 }</script></body> </html>

轉載于:https://www.cnblogs.com/neozheng/p/8967755.html

總結

以上是生活随笔為你收集整理的前端开发：JavaScript---ECMAScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：屏幕分辨率、屏幕尺寸、屏幕像素、屏幕密度
下一篇：好莱坞首部全亚裔主演电影上映，华人终于谈