JavaScript數組對象 , 正則對象 , String對象以及自定義對象介紹

1. Array數組對象

數組對象是使用單獨的變量名來存儲一系列的值。

1.1創建一個數組

創建一個數組，有三種方法。

【1】常規方式:

let 數組名 = new Array();

在這里插入圖片描述

【2】簡潔方式: 推薦使用

let 數組名 = new Array(數值1,數值2,...);

在這里插入圖片描述

【3】字面:在js中創建數組使用中括號推薦使用

let 數組名 = [數值1,數值2,...];

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript">/*創建數組對象方式一：*/let arr = new Array(10, 1.2, true, '鎖哥');//獲取數據1.2// console.log(arr[1]);//1 表示數組索引//遍歷數組//length 數組數組對象中的屬性，表示數組長度/* for (let i = 0; i < arr.length; i++) {//獲取數組數據let x = arr[i];console.log(x);}*///采用方式一即上述方式定義數組 let arr = new Array(10, 1.2, true, '鎖哥');注意：如果只給一個number類型的值，那么此時數值表示數組長度，數組中的數據都是emptylet arr2 = new Array(5);//報錯：Invalid array length 無效的數組長度//采用方式一即上述方式定義數組 let arr = new Array(10, 1.2, true, '鎖哥');注意：如果只給一個number類型的值，// 那么此時數值表示數組長度，要求不能給小數，數組長度不能是小數// let arr3 = new Array(1.2);//采用方式一即上述方式定義數組 let arr = new Array(10, 1.2, true, '鎖哥');注意：如果只給一個非number類型的值，// 那么此時數值表示數組的元素let arr4 = new Array('2');//向arr數組中存false// arr[4] = false;// console.log(arr[4]);//false//js中的數組長度是可變的//向數組中添加數據// arr[7] = 100;//[10, 1.2, true, '鎖哥', empty × 3, 100]console.log(arr.length);//修改前：長度是4//修改數組長度//修改數組長度arr.length = 2;console.log(arr.length);//修改前：長度是2,數據是 10 1.2
</script>
</body>
</html>

小結：

創建數組有三種方式：

1.常規方式:let arr=new Array();

2.簡寫方式：let arr=new Array(數據1,數據2.。。);

? 注意：如果小括號中只有一個number類型的值，表示數組長度，不能是小數。

在這里插入圖片描述

3.字面：let myCars=[數據1,數據2,數據3,…];

在這里插入圖片描述

4.js中的數組定義使用中括號，并且可以存儲不同類型的數據

1.2數組的特點

1.js中的數組可以存儲不同類型的數據

2.js中的數組長度是可變的

在這里插入圖片描述

3.可以使用數組名[索引]操作數組的數據

4.可以使用循環遍歷數組

在這里插入圖片描述

1.3數組中的函數

方法名	功能
concat()	用于拼接一個或多個數組
reverse()	用于數組的反轉
join(separator)	用于將整個數組使用分隔符拼接成一個字符串。相當于split()反操作
sort()	對數組進行排序，不帶參數是按照編碼值進行排序。如果不是按照編碼值排序,那么必須指定比較器。說明：由于字符串都是按照編碼值比較大小的，所以也可以將這個方法這樣理解使用：如果要對數字進行排序，必須指定比較器。如果是按字符串進行排序，那么就是無參。
pop()	刪除并返回數組的最后一個元素
push()	添加一個或者多個元素到數組的最后面

【1】代碼演示1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">/*數組中的函數：1.concat()用于拼接一個或多個數組2.reverse()用于數組的反轉3.join(separator)用于將整個數組使用分隔符拼接成一個字符串。相當于split()反操作4.pop()刪除并返回數組的最后一個元素5.push()添加一個或者多個元素到數組的最后面*///1.concat()用于拼接一個或多個數組//定義數組let a1=[10,20,30];let a2=[1.1,200,false];let a3=['柳巖',3.14,true];//拼接 [10, 20, 30, 1.1, 200, false, "柳巖", 3.14, true]let a4 = a1.concat(a2,a3);//2.reverse()用于數組的反轉let a5 = a1.reverse();//[30, 20, 10]  此時a1的數據也是[30, 20, 10]，a1和a5共享一個數空間//3.join(separator)用于將整個數組使用分隔符拼接成一個字符串。相當于split()反操作let str = a2.join("_");console.log(str);//1.1_200_false//4.pop()刪除并返回數組的最后一個元素console.log(a3.pop());//a3數組的數據是：["柳巖", 3.14]   pop函數返回的是true//5.push()添加一個或者多個元素到數組的最后面a2.push(10,'楊冪');//[1.1, 200, false, 10, "楊冪"]//splice(index,n) 從數組中刪除元素  。index表示從哪個索引刪除，n表示刪除數據個數let arr = [10,20,30,40];arr.splice(1, 2);console.log(arr);</script>
</body>
</html>

【2】代碼演示2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">/*6.sort()對數組進行排序，不帶參數是按照編碼值進行排序。如果不是按照編碼值排序,那么必須指定比較器。說明：由于字符串都是按照編碼值比較大小的，所以也可以將這個方法這樣理解使用：如果要對數字進行排序，必須指定比較器。如果是按字符串進行排序，那么就是無參。*///定義數組let a1=['kaja','aha','abclaja','0aa','abcde','ahd','AKAJA'];//使用數組對象中的函數對上述數組進行排序a1.sort();//["0aa", "AKAJA", "abcde", "abclaja", "aha", "ahd", "kaja"] 默認是大小升序，按照編碼值升序排序let a2=[10,108,2,9,99,34,345,200];/*[10, 108, 2, 200, 34, 345, 9, 99] 這里是按照編碼值升序排序*/// a2.sort();/*對上述數組a2進行大小降序排序。分析：這里的需求不是按照編碼值排序了，是按照數值大小排序，那么我們在sort函數的參數位置必須傳遞一個比較器，即匿名函數function(o1,o2){代碼}升序：o1 - o2降序：o2 - o1最后結果：[345, 200, 108, 99, 34, 10, 9, 2] 數值大小降序*/a2.sort(function (o1,o2) {return o2 - o1;});</script>
</body>
</html>

小結：

? 對于排序函數sort如果操作的數組存儲的是字符串，那么就是無參的。按照編碼值升序排序。

? 對于排序函數sort如果操作的數組存儲的是數值，那么就是有參的。按照大小排序。

a2.sort(function (o1,o2) {//降序排序：o2 - o1return o2 - o1;//[456, 123, 100, 30, 9, 8, 2]});

2. RegExp正則對象（重點）

1.創建正則對象

有兩種方式：

【1】方式一

let 正則對象 = new RegExp("正則表達式");

【2】方式二推薦使用

let 正則對象 = /正則表達式/;
說明：這種寫法在雙斜杠中不用書寫引號

注意：

1.方式二在//中直接書寫正則表達式，不用書寫單引號 ^0-9$

2.在js中由于一些瀏覽器兼容問題，書寫正則符號的時候最好加上邊界詞：

以什么開始：^

以什么結尾：$

2.驗證函數

使用RegExp中的test函數，使用格式：

let result = 正則對象.test(被驗證的字符串);說明：如果被驗證的字符串滿足正則表達式則test函數返回true,否則返回false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">/*需求：使用正則表達式驗證指定的字符串是否滿足長度是6.*///1.創建正則對象/*1.在正則表達式中任意字符使用符號： .2.在正則中表示出現的次數：{n,m} 最少出現n次，最多出現m次{n,} 最少出現n次{n} 正好出現n次3.   .{6}  表示正好出現6位任意字符4.  ^  表示以什么開始    $ 表示以什么結尾*/// let reg = new RegExp("^.{6}$");let reg =/^.{6}$/;//2.使用正則對象調用test函數驗證字符串let result = reg.test("abj1a9");console.log(result);</script>
</body>
</html>

小結：

1.創建正則表達式對象：

1)let reg = new RegExp('正則表達式');
2)let reg = /正則表達式/;
注意：別忘記在正則表達式中加上邊界詞：^  表示以什么開始$  表示以什么結尾

2.使用正則調用test函數驗證字符串是否滿足正則：

  let result = reg.test(字符串);

3.String對象

在js中string屬于基本類型(原始數據類型)，然后js將其包裝成了引用類型(復合數據類型)。

【1】創建String對象方式
1.let txt = new String(“string”); 使用構造方法創建對象了解
2.let 對象名 = “字符串”; 使用雙引號理解
3.let 對象名 = ‘字符串’; 使用單引號掌握
4.let 對象名 = 字符串; 使用反單引號(鍵盤上的波浪線，在esc下面) 掌握從es6開始的目的是為了簡化字符串的拼接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">/*【1】創建String對象方式:1.let txt = new String("string"); 使用構造方法創建對象 了解2.let 對象名 = "字符串"; 使用雙引號 理解3.let 對象名 = '字符串'; 使用單引號 掌握4.let 對象名 = `字符串`; 使用反單引號(鍵盤上的波浪線，在esc下面) 掌握  從es6開始的目的是為了簡化字符串的拼接*///1.let txt = new String("string"); 使用構造方法創建對象 了解let s = new String("柳巖");//s保存地址值console.log(s.toString());//柳巖// 2.let 對象名 = "字符串"; 使用雙引號 理解let s1 = "楊冪";console.log(s1);//楊冪//3.let 對象名 = '字符串'; 使用單引號 掌握let s2 = '趙麗穎';console.log(s2);//趙麗穎// 4.let 對象名 = `字符串`; 使用反單引號(鍵盤上的波浪線，在esc下面) 掌握  從es6開始的目的是為了簡化字符串的拼接let i = 10;let s3 = '哈哈' + i + '呵呵';//+是拼接console.log(s3); //哈哈10呵呵//在反單引號中${獲取數據的變量名}let s4=`嘿嘿${i}嘻嘻`;//es6的新語法console.log(s4);//嘿嘿10嘻嘻</script>
</body>
</html>

小結：

創建String對象方法：

1.雙引號
2.構造方法 了解 let s1=new String("abc");
3.單引號 推薦  let s2='def';
4.反單引號：let s3 = `efg`;注意：使用反單引號主要目的為了方便字符串的拼接，省去了字符串+拼接的麻煩let s3 = `efg`;`${s3}鎖哥` 結果是  efg鎖哥${變量}這種寫法只能書寫在反單引號中，${變量}大括號中的變量不一定是反單引號定義的，可以是單引號定義的

4.自定義對象(重要)

格式

let 對象名稱 = {屬性名稱1:屬性值1,屬性名稱2:屬性值2,...函數名稱:function (形參列表){}...};

代碼實現

<!-- 文檔類型聲明標簽，告知瀏覽器這個頁面采取html版本來顯示頁面 -->
<!DOCTYPE html>
<!-- 告訴瀏覽器這是一個英文網站，本頁面采取英文顯示，單也可以書寫中文 -->
<html lang="en"><head><!-- 必須書寫，告知瀏覽器以UTF-8編碼表編解碼中文，如果不書寫就會亂碼 --><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 標題標簽 --><title>Title</title>
</head>
<body>
<script type="text/javascript">/*自定義對象：************************************很重要let 對象名稱 = {屬性名稱1:屬性值1,屬性名稱2:屬性值2,...函數名稱:function (形參列表){}...};*///自定義對象 person表示對象名let person ={username:"柳巖",age:20,//定義函數eat:function(a){//a=100//在自定義對象的函數中不能直接使用自定義對象中的屬性，否則報錯：selfObjectDemo06.html:32 Uncaught ReferenceError: username is not defined// console.log(username+"干飯人，干飯魂,a="+a);//使用對象person調用屬性名可以獲取屬性值// console.log(person.username+"干飯人，干飯魂,a="+a);//后期經常使用的方式：這里的this表示當前自定義對象personconsole.log(this.username+"干飯人，干飯魂,a="+a);}};//如果在自定義對象外部獲取自定義對象中的屬性值，那么格式：對象名.屬性名// console.log(person.username);//"柳巖"// console.log(person.age);//20//調用自定義對象中的函數：對象名.函數名(實參);person.eat(100);//干飯人，干飯魂,a=100
</script>
</body>
</html>