javascript初探-day09 · javaWEB

>### A.今天學什么？ #### 1.數組 - ##### 1.1 數組構造 - 1.直接創建的方式 --> var arr = [1,2,3]; - 2.構造函數方式 --> var b = new Array(); b[0] = 1; console.log(b); - 數組為一個object對象 --> console.log(typeof b); // object - 檢測一個變量是否為數組的兩種方法 - 1.使用 instanceof 測試b是否為數組對象的一個實例 - instanceof --> 返回boolean值 - console.log(b instanceof Array); // true - 2.使用Array自帶方法isArray() - 2.Array.isArray() --> 返回boolean值 - console.log(Array.isArray(b)); ``` // body <body> <script> // 1.直接創建的方式 var arr = [1,2,3]; // 2.構造函數方式 var b = new Array(); b[0] = 1; console.log(b); // 數組是一個對象 Object console.log(typeof b); // 檢測一個object是否為數組 // 1.使用 instanceof 測試b是否為數組對象的一個實例 // instanceof --> 返回boolean值 console.log(b instanceof Array); // true // 2.Array.isArray() --> 返回boolean值 console.log(Array.isArray(b)); </script> </body> ``` - ##### 1.2 數組添加 --> 改變數組原來的內容 - 1.push() --> 在數組末尾進行添加 - 2.unshift --> 從數組起始進行添加 ``` // body <body> <script> // --> 改變數組原來的內容 // push() --> 在數組末尾進行添加 var arr = [1,2,3]; arr.push(4); console.log(arr); // unshift --> 從數組起始進行添加 arr.unshift(0); console.log(arr); </script> </body> ``` - ##### 1.3 concat數組合并 --> 沒有改變數組的內容，而是產生一個新數組 - 參數可以是數字，也可以是數組，在原數組末尾進行添加 ``` // body <body> <script> // --> 沒有改變數組的內容，而是產生一個新數組 // 參數可以是數字，也可以是數組，在原數組末尾進行添加 var arr = [1,2,3]; var b = arr.concat(4); console.log(arr); console.log(b); </script> </body> ``` - ##### 1.4 數組克隆 - 1.使用for循環+push進行克隆，或者逆序for循環+unshift方法 - 2.使用concat進行克隆 - 2.1 使用空數組進行數組添加 - 2.2 使用要添加的數組直接concat()空參 ``` // body <body> <script> // 數組克隆 var arr = [1,2,3]; var b = []; // 1.使用for循環+push進行克隆，或者逆序for循環+unshift方法 for (var i = 0;i < arr.length;i++){ b.push(arr[i]); } console.log(b); // 2.使用concat進行克隆 var c = [4,5,6]; // var d = c.concat([7,8]); // [4,5,6,7,8] // console.log(d); // 可以使用一個空數組添加c數組，或者使用c.concat();不寫參數 var d = [].concat(c); console.log(d); </script> </body> ``` - ##### 1.5 數組刪除 - 1.從末尾進行刪除 --> pop()，會返回從數組中刪掉的值，就是彈出 - 2.從頭部進行刪除 --> shift()，同樣會返回從數組中刪掉的值 ``` // body <body> <script> // 數組刪除 // 1.從末尾進行刪除 --> pop() // 會返回從數組中刪掉的值，就是彈出 var arr = [1,2,3]; var a = arr.pop(); console.log(a); // 2.從頭部進行刪除 --> shift() // 同樣會返回從數組中刪掉的值 var arr2 = [1,2,3]; var a2 = arr.shift(); console.log(a2); </script> </body> ``` - ##### 1.6 數組修改 - splice(index,number,item); - index --> 下標 - number --> 修改多少個 - item --> 修改的項 ``` // body <body> <script> // splice(index,number,item); // index --> 下標 // number --> 修改多少個 // item --> 修改的項 var arr = [1,2,3]; arr.splice(1,1,"a"); console.log(arr); </script> </body> ``` - ##### 1.7 數組查詢和數組切片 - 數組查詢 - 1.通過下標查詢數組的值 - 2.通過值查詢數組中對應的下標，只返回該值在數組中第一次出現的位置 --> indexOf() - 數組切片 - slice(startIndex,endIndex) --> 不包含endIndex - slice() 只傳一個參數 --> 則從startIndex截取到數組最后，包括最后一個元素。 ``` <body> <script> var arr = [1,2,3,4,4]; // 1.通過下標查詢數組的值 console.log(arr[0]); // 1 // 2.通過值查詢數組中對應的下標，只返回該值在數組中第一次出現的位置 --> indexOf() var a = arr.indexOf(4); console.log(a); // 3 // slice(startIndex,endIndex) --> 不包含endIndex var b = arr.slice(2,4); // [3,4] console.log(b); // slice() 只傳一個參數 --> 則從startIndex截取到數組最后，包括最后一個元素。 // 也可以用slice() 來進行克隆 var c = arr.slice(2); console.log(c); // [3,4,4] </script> </body> ``` - ##### 1.8 Array的splice方法 --> 拼接 - 1.利用splice進行數組指定位置添加 - number傳0，添加的item占據index的位置 - 2.利用splice進行數組刪除 - 刪除時，不寫item值，只傳2個參數，從下標為index的地方開始刪number個元素 ``` // body <body> <script> // splice(index,number,item) // 1.利用splice進行數組指定位置添加 // number傳0，添加的item占據index的位置 var arr = [1,2,3,4]; arr.splice(2,0,"hello"); console.log(arr); // 2.利用splice進行數組刪除 // 刪除時，不寫item值，只傳2個參數，從下標為index的地方開始刪number個元素 var arr2 = [1,2,3,4,5]; arr2.splice(1,2); console.log(arr2) </script> </body> ``` - ##### 1.9 join，將數組拼接為字符串 - join() --> 將數組拼接為字符串，參數為分隔符，默認為"," ``` // body <body> <script> // join() --> 將數組拼接為字符串，參數為分隔符，默認為"," var arr = ["hello","world","good"]; var b = arr.join(); console.log(b); // hello,world,good console.log(typeof b); // string var c = arr.join("-"); console.log(c); // hello-world-good </script> </body> ``` - ##### 1.10 數組排序 - arr.sort(function(a,b){return a-b}); --> 將數組正序排序 - 如果想要逆序排序，則方法體 return b-a ``` // body <body> <script> var arr = [22,1,32,12,15]; var b = arr.sort(); console.log(b); // 只排一部分，不要直接這么寫 var arr2= [22,1,32,12,15]; var c = arr2.sort(function (a, b2) { return a-b2; // 逆序使用b2-a }); console.log(c); </script> </body> ``` - ##### 1.11 數組求和 - 使用reduce(function(){})方法 - 根據方法體的不同，也可以用來計算階層和等 ``` // body <body> <script> var arr = [1,2,3,4,5]; var sum = arr.reduce(function (a,b) { return a+b; // 如果想要求階層積，則使用 a*b }); console.log(sum); </script> </body> ``` - ##### 1.12 數組反轉 - arr.reverse() --> 將數組倒序排列 ``` // body <body> <script> var arr = [1,2,3,4,5]; var b = arr.reverse(); console.log(b); </script> </body> ``` - ##### 1.13 二維數組 - 二維數組，即數組中嵌套數組 ``` // body <body> <script> // 二維數組 var arr = [[1,2],[3,4],"hello"]; console.log(arr[0]); // [1,2]; console.log(arr[0][0]); // 1 </script> </body> ``` #### 2.string-在js中string為基本類型 - ##### 2.1 基本類型的方法，不會改變原來的值，不同于引用類型 - ##### 2.2 獲取字符串長度 - str.length 方法，空格也占用長度 - ##### 2.3 字符串合并 - str.concat(str1) --> 將兩個字符串合并，參數str1在str末尾拼接 - ##### 2.4 字符串查詢 - charAt(index) --> 輸出對應下標的字符 - indexOf(str); --> 返回str在字符串中第一次出現的下標位置的下標，如果不存在于字符串中，則返回-1 - ##### 2.5 字符串截取 - slice()，方法參考數組中的slice()方法 - substr(startIndex,len) --> 截取的起始位置，截取的長度 - substring(startIndex,endIndex) --> 和slice()一樣 ``` // body <body> <script> // 基本類型的方法，不會改變原來的值，不同于引用類型 var str = "hello world"; // 1.獲取字符串長度 var len = str.length; console.log(len); // 11 空格也算字符串 // 2.字符串合并 // concat(str1) --> 將兩個字符串合并，參數str1在str末尾拼接 var add = str.concat(" add"); console.log(add); // hello world add // 3.字符串查詢 // charAt(index) --> 輸出對應下標的字符 var char = str.charAt(0); console.log(char); // h // indexOf(str); --> 返回str在字符串中第一次出現的下標位置的下標，如果不存在于字符串中，則返回-1 var index = str.indexOf("world"); console.log(index); // 6 // 4.字符串截取 // slice() var a = "hello world"; var b = a.slice(1,4); console.log(b); // ell // substr(startIndex,len) --> 截取的起始位置，截取的長度 var subStr = a.substr(1,4); console.log(subStr); // ello // substring(startIndex,endIndex) --> 和slice()一樣 var subString = a.substring(1,4); // ell console.log(subString); </script> </body> ``` - ##### 2.6 split()字符串分割 - split() --> 將字符串按分割符分割成數組 - 不寫參數則為一個長度為1的數組，其中元素為str ``` // body <body> <script> // split() --> 將字符串按分割符分割成數組 // 不寫參數則為一個長度為1的數組，其中元素為str var str = "hello world"; var arr = str.split(" "); console.log(arr); // 如果使用空字符串為分割符，則所有的字符都會被分開 var arr1 = str.split(""); console.log(arr1); </script> </body> ``` - ##### 2.7 字符串的方法 - search(value) --> 返回搜索字符的下標，沒有搜索到則返回-1 - match(value) --> 將匹配的內容返回一個數組，沒有匹配的則返回一個null - replace(value,newValue) --> 將字符串中第一個value替換為newValue，如果要替換所有的value，則要使用正則 ``` // body <body> <script> // search(value) --> 返回搜索字符的下標，沒有搜索到則返回-1 var a = "hello hello world"; var b = a.search("h"); console.log(b); // 0 // match(value) --> 將匹配的內容返回一個數組，沒有匹配的則返回一個null var c = a.match("l"); console.log(c); // ["l", index: 2, input: "hello world"] // replace(value,newValue) --> 將字符串中第一個value替換為newValue // 如果要替換所有的value，則要使用正則 var d = a.replace("hello","good"); console.log(d); // good world </script> </body> ``` #### 3.正則表達式 - ##### 3.1 正則表達式，又稱規則表達式，規則字符串中字符出現規則的表達式 - 1.語法： /pattern/attributes - 2.attributes 為g時，代表全局搜索 - ##### 3.2 備選字符集[abc] --> 特點，必須且只能多選一 - [a-z] [A-Z] [0-9] 連續的備選字符，表示范圍 - ##### 3.3 預定義字符集 - 定義：針對常用的備選字符集提供的簡化符號 - \d --> [0-9] - \w --> [0-9a-zA-Z_] - \s --> 空格，tab，即匹配空白 - . --> 除換行符外所有字符 ``` // body <body> <script> // 正則表達式，又稱規則表達式，規則字符串中字符出現規則的表達式 // 1.語法： /pattern/attributes // attributes 為g時，代表全局搜索 var a = "hello world"; var RE = /l/g; var b = a.replace(RE,"*"); console.log(b); // he**o wor*d // 2.備選字符集[abc] --> 特點，必須且只能多選一 var a2 = "上海，上天，上去，上海都"; var RE2 = /上[海天]/g; var b2 = a2.replace(RE2,"**"); console.log(b2); // **，**，上去，**都 var a3 = "1234322dd"; var RE3 = /[0-9]/g; var b3 = a3.replace(RE3,"*"); console.log(b3); // *******dd // [a-z] [A-Z] [0-9] 連續的備選字符，表示范圍 var a4 = "hello world"; var RE4 = /[a-z]/g; var b4 = a4.replace(RE4,"*"); console.log(b4); // ***** ***** // 3.預定義字符集 // 定義：針對常用的備選字符集提供的簡化符號 // \d --> [0-9] var a5 = "hello 123123"; var RE5 = /\d/g; console.log(a5.replace(RE5,"*")); // hello ****** // \w --> [0-9a-zA-Z_] var a6 = "Hello_World@123"; var RE6 = /\w/g; console.log(a6.replace(RE6,"*")); // ***********@*** // \s --> 空格，tab，即匹配空白 // . --> 除換行符外所有字符 </script> </body> ``` - ##### 3.4 量詞 --> 規定字符出現的次數 - {m}，規定字符最少出現m次 - regEXp.test(str) --> 正則表達式匹配字符串，返回boolean值 - {a,b} --> 代表出現的次數在a-b這個范圍，最少a次，最多b次 - + --> 出現一次或多次 - ? --> 出現0次或一次 - * --> 出現0次或多次 - ^ --> 以什么開頭 - $ --> 以什么結尾 - 固定搭配：^正則表達式$ -->表示從開頭到結尾的完整匹配 - 排除 [^abc] --> 除了abc ``` // body <body> <input type="text" id="txt" /> <button id="btn">確定</button> <input type="text" id="phoneNum" /> <button id="btn2">確定</button> <script> // 4.量詞 --> 規定字符出現的次數 // regEXp.test(str) --> 正則表達式匹配字符串，返回boolean值 var RE = /^\d{6}$/; // 這里如果是全局搜索g 則會一次true 一次false 暫時不知道原因 var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); btn.onclick = function () { var value = txt.value; var result = RE.test(value); console.log(value+":"+result); }; // {a,b} --> 代表出現的次數在a-b這個范圍，最少a次，最多b次 // + --> 出現一次或多次 // ? --> 出現0次或一次 // * --> 出現0次或多次 var a2 = "hello 2323"; var RE2 = /\d+/g; console.log(RE2.test(a2)); // 電話號碼匹配正則 // ^ --> 以什么開頭 // $ --> 以什么結尾 var phoneRE = /^1[3-9]\d{9}$/; var phoneNum = "13111111111"; console.log("是否為手機號碼："+phoneRE.test(phoneNum)); var phone = document.getElementById("phoneNum"); var btn2 = document.getElementById("btn2"); btn2.onclick = function (ev) { var value = phone.value; var result = phoneRE.test(value); console.log(value+"："+result); }; // 指定匹配位置 ^ $ // 固定搭配：^正則表達式$ -->表示從開頭到結尾的完整匹配 // 指定位置 ^開始的值，$結束的位置 var str = " hello"; var RE3 = /^\s+/; // 將開始位置的空格清空 console.log(str.replace(RE3,"")); // 排除 [^abc] --> 除了abc var str4 = "abc232"; var RE4 = /[^abc]/g; console.log(str4.replace(RE4,"*")); // 電話號碼匹配正則2 // 以 +08 或者 0086開頭，可有可無 (\+08|0086)? // 可以有多個空格，或者沒有 \s* // 第一位為1，第二位3-9，后面9位為數字 var RE5 = /^(\+08|0086)?\s*1[3-9]\d{9}$/; </script> </body> ``` - ##### 3.5 字符串方法使用正則 - 字符串中，支持正則的方法，search()，match()，replace()，split() - 正則自帶的方法 test() - str.match(regExp) 返回匹配到的，組成一個數組 - replace 將正則匹配的，替換為指定字符串 - split 按符合正則匹配的分割字符串，返回數組 ``` // body <body> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">過濾</button> <script> // 字符串中，支持正則的方法，search()，match()，replace()，split() // 正則自帶的方法 test() // str.match(regExp) 返回匹配到的，組成一個數組 var str = "hello 13213 121"; var RE = /\d+/g; // 這里不用全局g，則后面的121不會被取到 var arr = str.match(RE); console.log(arr); // replace 將正則匹配的，替換為指定字符串 var RE2 = /天貓|淘寶/g; var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); btn.onclick = function (ev) { var value = txt.value; txt.value = value.replace(RE2,"**"); }; // split 按符合正則匹配的分割字符串，返回數組 var str3 = "hello world"; var RE3 = /l/; console.log(str3.split(RE3)); </script> </body> ``` - ##### 3.6 標簽過濾 ``` // body <body> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">過濾</button> <script> var RE = /<[^<>]*>/g; var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); btn.onclick = function (ev) { var value = txt.value; txt.value = value.replace(RE,""); } </script> </body> ``` - ##### 3.7 郵箱驗證 ``` // body <body> <input type="text" id="txt"> <p id="content"></p> <button id="btn">驗證</button> <script> // 郵箱的規則，一串數字，字母或者下劃線@一串數字英文.一串英文 var RE = /^\w+@[a-z0-9]+\.[a-z]+/; var txt = document.getElementById("txt"); var content = document.getElementById("content"); var btn = document.getElementById("btn"); btn.onclick = function (ev) { var value = txt.value; var result = RE.test(value); console.log(result); if (result){ content.innerHTML = "郵箱正確："+value; content.style.color = "green"; } else{ content.innerHTML = "郵箱格式不合法："+value; content.style.color = "red"; } } </script> </body> ```