Web全栈~12.引用数据类型

ゞ浴缸里的玫瑰 2023-01-06 05:45 44阅读 0赞

# Web基本笔记~12.引用数据类型 #

## [上一期][Link 1] ##

引用类型的值（对象）是引用类型的一个实例。在JavaScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。尽管JavaScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

## Object ##

JavaScript中对象其实就是一组数据和功能的集合。对象可以通过执行new操作符跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性或者方法就可以创建自定义对象。

##### 使用构造函数的方法创建 #####

function fun(){ 
       var obj = new Object();
       obj.name = "alvin";
       obj.age = 12;
       obj.score = 98;
       alert("姓名: " + obj.name + " 年龄: " + obj.age + " 成绩: " + obj.score);
     }

##### 使用对象字面量的方法创建 #####

var person = { 
       name : "bob",
       age : 18,
       score : 98
     };
     alert("姓名: " + person.name + " 年龄: " + person.age + " 成绩: " + person.score);

##### 还可以直接 = \{\},此类操作和 new Object() 是相同的 #####

var person = { };
    person.name = "alvin";
    person.age = 18;
    person.score = 78;
    alert("姓名: " + person.name + " 年龄: " + person.age + " 成绩: " + person.score);

## Object练习 ##

使用输入框对学生的 姓名 年龄 成绩进行赋值然后使用JavaScript接受到这些值,并且打印到标签为 data的输入框并且弹窗弹出来

<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript"> function but(){ var student = { //获得 id 为name的input标签的值(value) name : document.getElementById("name").value, //获得 id 为age的input标签的值(value) age : document.getElementById("age").value, //获得 id 为score的input标签的值(value) score : document.getElementById("score").value }; //一次性打印赋值给 id 为 data标签 document.getElementById("data").value = student.name + " " + student.age + " " + student.score; //并且弹窗 alert(student.name + student.age + student.score); } </script>
    	</head>
    	<body>
    		<p>
    			姓名<input type="text" id="name"/>
    		</p>
    		<p>
    			年龄<input type="text" id="age"/>
    		</p>
    		<p>
    			成绩<input type="text" id="score"/>
    		</p>
    		<p>
    			<button onclick="but()">提交</button>
    		</p>
    		
    		<span>结果 : <input id="data"/></span>
    	</body>
    </html>

## Array类型 ##

Array类型也就是数组类型,数组是一种数据结构。JavaScript数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，JavaScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

var arr = new Array();
      arr[0] = "hello";
      arr[1] = 123;
      arr[2] = 9.9;
      arr[3] = true;
      alert(arr);

数组的创建方法还有一种,就是前面说过的字面量表示法

var arr = [1,2,3,4,5,6,7];
      alert(arr);

检测数组

var arr = [1,2,3,4,5];
      if(arr instanceof Array){ 
       alert("是数组");
      }else{ 
       alert("不是数组");
      }

## 数组练习案例 ##

##### 案例一:求数组中的最大值 #####

//定义一个数组
    var arr = [1,5,6,9,3,2,4,7,8];
    //假如最大值是 0
    var max = 0;
    //循环从0开始,因为数组的下标就是从0开始
    for(var i = 0; i < arr.length; i++){ 
    	//如果max不是最大值,就把比它大的赋值给max
    	if(max < arr[i]){ 
    		max = arr[i];
    	}
    }
    //因此求出最大值
    console.log("最大值 : " + max);

##### 案例二 : 数组元素求和 #####

var arr = [1,2,3,4,5,6,7,8,9,10];
    var sum = 0;
    for(var i = 0; i < arr.length; i++){ 
    	sum = sum + arr[i];
    }
    console.log("总和 : " + sum);

## Data类型 ##

JavaScript中的Data类型是在早期Java语言中util包中的Date基础上构建的。方法比较多,使用的时候可以看手册或者API。

//获得当前的时间
    	var now = new Date();
    	alert(now);
    	//设置时间
    	now = new Date("2018-9-12");
    	alert(now);

<table> 
 <tbody> 
  <tr> 
   <td>toDateString()</td> 
   <td>以特定的格式显示年,月,日,周</td> 
  </tr> 
  <tr> 
   <td>toTimeString()</td> 
   <td>以特定的格式显示时,分,秒,地区</td> 
  </tr> 
  <tr> 
   <td>toLocaleDateString()</td> 
   <td>以特定地区的格式显示年,月,日,周</td> 
  </tr> 
  <tr> 
   <td>toLocaleTimeString()</td> 
   <td>以特定地区的格式显示年,月,日,周</td> 
  </tr> 
  <tr> 
   <td>toUTCString()</td> 
   <td>以特定的格式完整的UTC日期</td> 
  </tr> 
 </tbody> 
</table>

## RegExp ##

JavaScript通过RegEXp类型来支持正则表达式

var patt=/pattern/modifiers;

pattern（模式） 描述了表达式的模式

modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \\）。比如，以下是等价的：

var re = new RegExp("\\w+");
    	var re = /\w+/;

每个正则表达式都可带有一或多个标志(flags),用来表明正则表达式的行为。正则表达式的匹配模式支持三种标志。

g : 表示全局模式。这个模式将被应用于所有字符串,而不是在发现第一个匹配项的时候就立即停止。

i : 表示不区分大小写模式。也就是确定匹配项时忽略模式和字符串的大小写。

m :表示多行模式,就是在到达一行文本末尾时还会继续查找下一行中是否与模式匹配的项。

所以说一个正则表达式就是一个模式和三个标志的组合体。不同的组合产生不同的效果。

//匹配字符串中所有good 实例
    	var pattern = /good/g;
    	//匹配第一个bat或cat 不区分大小写
    	var pattern2 = /[bc]at/i;
    	//匹配所有以at结尾的三个字符的组合,不区分大小写
    	var pattern3 = / .at/gi;

<table> 
 <tbody> 
  <tr> 
   <td>字面量模式</td> 
   <td>等价的字符串</td> 
  </tr> 
  <tr> 
   <td>/\[bc\]at/</td> 
   <td>"\ \[bc\\]at"</td> 
  </tr> 
  <tr> 
   <td>/\.at/</td> 
   <td>"\\.at"</td> 
  </tr> 
  <tr> 
   <td>/name\/age/</td> 
   <td>"name\\/age"</td> 
  </tr> 
  <tr> 
   <td>/\d. \d{1,2}/</td> 
   <td>"\\d. \\d{1,2}"</td> 
  </tr> 
  <tr> 
   <td>/\w\\hello\\123/</td> 
   <td>"\\w\\\\hello\\\\123"</td> 
  </tr> 
 </tbody> 
</table>

使用正则表达式字面量和使用RegExp构造函数创建的正则表达式不太一样。在JavaScript中正则表达式字面量始终会共享同一个RegExp实例,而使用构造函数创建的每一个RegExp实例都是一个新的实例。

##### RegExp实例属性 #####

<table> 
 <tbody> 
  <tr> 
   <td>global</td> 
   <td>布尔值,表示是否设置了g的标志</td> 
  </tr> 
  <tr> 
   <td>ignoreCase</td> 
   <td>布尔值,表示是否设置了i的标志</td> 
  </tr> 
  <tr> 
   <td>lastIndex</td> 
   <td>整数,表示开始搜索下一个匹配项的字符位置,从0算起。</td> 
  </tr> 
  <tr> 
   <td>multiline</td> 
   <td>布尔值,表示是否设置了m的标志</td> 
  </tr> 
  <tr> 
   <td>source</td> 
   <td>正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。</td> 
  </tr> 
 </tbody> 
</table>

通过这些属性可以获知一个正则表达式的各方面信息

var pattern = /\[bc\]at/i;
    	//false
    	alert(pattern.global);
    	//true
    	alert(pattern.ignoreCase);
    	//false
    	alert(pattern.multiline);
    	//0
    	alert(pattern.lastIndex);
    	//\[bc\]at
    	alert(pattern.source);

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112599535