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>