咱们继续进行我们的正经的JS介绍。今天所要跟大家讲述的是JS中十分常用、十分常用、十分常用的内置对象。
一、世界上最熟悉的陌生就是，当你看着数组、而我看着你... — 数组对象
1、数组的概念
在内存中 连续存储 多个 有序 元素的结构（元素的顺序称为下标，通过下标查找对应元素）；
2、数组的声明
2.1 通过字面量声明
JS中同一数组可以储存多种不同数据类型（但一般同一数组只用于存放同种数据类型）
2.2 new关键字声明：var arr2 = new Array(参数);
>>>参数可以是
① 空->声明一个没有指定长度的数组：var arr2 = new Array()；
② 数组的长度->声明一个指定长度的数组：var arr2 = new Array(5);【但是数组的长度随时可变可追加，长度为0-(2^32-1)】；
③ 数组默认的n个值：var arr2 = new Array(1,2,3);相当于var arr2 = [1,2,3]; ；
3、数组中元素的读写/增删
3.1 读写：通过下表来访问元素，例如arr[2]；
3.2 增删
① delete arr[n];删除数组的第n+1个值，但数组长度不变，对应位置值为Undefined，相当于delete(arr3[4]);；
② arr.push(值); 数组最后增加一个值，返回新的长度，相当于arr3[arr3.length] = 7;
③ arr.unshift(值);数组的第0位插入一个值，返回新的长度，其余位数顺延；
④ arr.pop();删除数组最后一位，返回被删掉的数值，不同与delete的是pop执行后数组长度也会减少一个，相当于arr.length-=1；
⑤ arr.shift(值);删除数组第0位，返回被删掉的数值，长度也会减1；
4、数组中常用的方法
① join("分隔符");将数组用指定分隔符分隔，链接为字符串，参数为空时，默认用逗号分隔；
② concat();（原数组不会改变，需要重新定义并接受）将数组与多个数组的值链接为新的数组：
[1,2].concat[3,4] = [1,2,3,4] //连接时，中括号至多拆一层；
[1,2].concat[1,2,[3,4]] = [1,2,1,2,[3,4]] //多层中括号，以二维数组形式存在；
③ push();数组最后增加一个数/unshift();数组开始增加一个数 -> 返回新的长度，原数组会改变；
④ pop();删除数组最后一位/arr.shift(值);删除数组第0位 -> 返回被删掉的值，原数组会改变；
⑤ reverse();数组翻转，逆序排列，原数组会改变；
⑥ slice(begin,end);原数组不会改变，截取数组中的某一部分，成为新数组
//传递一个参数：默认为begin index，从这个开始，截到最后一个；
//传递两个参数：截取从begin index到end index区间，左闭右开（包含begin，不含end）；
//参数可以为负数，-1表示最后一个；
⑦ sort(function);原数组会被改变，对数组进行排序
//不指定排序function，默认按首字母的Ascii码值进行排列；
//传入排序函数，默认两个参数a,b，如果返回值>0，则a>b，反之a<b；
// console.log(arr4.sort(function func(a,b){
// return a-b ; //如果>0 b在a前，其他同理（升序排列）
// return b-a ; //如果>0 a在b前，其他同理（降序排列）
// }));
⑧ indexOf(value,index);返回第一个value值对应的索引位置，若未找到，返回-1
⑨ lastIndexOf(value,index);返回最后一个value值对应的索引位置，若未找到，返回-1
//若未指定index参数，默认在所有元素中查询；
//若指定index参数，则从index开始，向后查询；
5、二维数组与稀疏数组
5.1 稀疏数组：数组并不含有从0开始到length-1的所有索引（length值比实际元素个数多）；
5.2 二维数组：var arr = [[1,2],[3,4],[5,6]]; 相当于三行两列的矩阵
//如何取出二维数组中的元素？arr[行号][列号];可是用循环嵌套遍历
6、引用数据类型与基本数据类型
6.1 常见引用数据类型：（数组，对象）赋值时，是将原变量的地址，赋给新变量，两个变量。实际操作的是同一份数据，所以，修改其中一个变量，另一个跟着变化；
6.2 基本数据类型：赋值时，是将原变量的值，赋值给新变量，两个变量属于不同的内存空间，修改其中一个，互不干扰。
7、下面我们来举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>杨辉三角</title>
<script type="text/javascript">
// var row =
// [
// [1],
// [1,1],
// [1,2,1],
// [1,3,3,1],
// [1,4,6,4,1],
// [1,5,10,10,5,1]
// ];
//—————————确定二维数组框架———————————
var num = parseInt(prompt("请输入行数："));
var arr = new Array(num);
for (var i = 0 ; i < num ; i ++) {
arr[i] = new Array(i+1);
}
//—————————二维数组中每个元素的确定———————
for ( var i = 0 ; i < num ; i ++) {
for (var j = 0 ; j < arr[i].length ; j ++) {
if(j==0||j==i){
arr[i][j] = 1 ;
}else{
arr[i][j] = arr[i-1][j-1]+arr[i-1][j] ;
}
}
}
//—————————打印————————————————
for ( var i = 0 ; i < num ; i ++) {
console.log(arr[i].toString());
}
</script>
</head>
<body>
二、数组头上青青草，其他对象都来搞 — 其他JS支持对象
1、Boolean类型
var isTrue = true ; // 单纯的变量
var isTrue1 = new Boolean(true); // 一个Boolean类型的对象
console.log(isTrue);
console.log(isTrue1);
2、Number类型
var num = 100000 ;
var num1 = new Number(1);
console.log(num);
console.log(num1);
//常用属性与方法
① console.log(Number.MAX_VALUE);// 可表示的最大数
② console.log(Number.MIN_VALUE);// 可表示的最小数
③ console.log(Number.NaN);
④ console.log(num.toString());// ★将数字转为字符串，相当于num+"";
⑤ console.log(num.toFixed(2));// ★将数字转为字符串，保留n位小数，且会四舍五入
⑥ console.log(num.valueOf());// ★返回Number对象的基本数字值
⑦ console.log(num.toLocaleString());// 将数字按照本地格式的顺序转为字符串。一般，三个为一组加逗号
⑧ console.log(num.toExponential());
⑨ console.log(num.toPrecision(7));// 将数字格式化为指定长度，n等于不含小数点的所有位数的和
3、String类型
var str = "This is Javascript";
① console.log(str.length);//属性：返回字符串的长度
② console.log(str.toLowerCase());//方法：将所有字符转为小写
③ console.log(str.toUpperCase());//方法：将所有字符转为大写
④ console.log(str.charAt(2));//方法：截取字符串中的第几个字符
⑤ console.log(str.indexOf("is",3));//方法：查询从index开始的第一个子串的索引，未找到返回-1，同数组的indexOf()方法
⑥ console.log(str.substring(2,6));//方法：截取子串->只写一个参数：从begin开始，到最后；写两个参数：从begin开始，到end，左闭右开
⑦ console.log(str.replace(" ","-"));//方法：将字符串中第一个old替换为new，第一个参数可以为普通字符串、也可以为正则表达式，普通字符串将只匹配第一个、正则表达式则根据具体情况区分
⑧ console.log(str.split(""));//方法：将字符串通过制定分隔符分为数组，传入""空字符串，将把单个字符存入数组
4、Date类型
4.1 new Date(); 拿到当前最新时间；
new Date("2008,8,8,20:08:08") 设置最指定时间；
4.2 方法
document.write(today);
document.write(today.getFullYear());//获取4位年份
document.write(today.getMonth()+1);//获取月份0-11，需要+1
document.write(today.getDate());//获取一月中的某一天
document.write(today.getDay())//获取一周中的某一天0-6
var day = today.getDay();
var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
document.write(week[day]);
document.write(today.getHours());
document.write(today.getMinutes());
document.write(today.getSeconds());
三、嘿、你的对象...不、这是你的对象！ — 自定义对象
1、基本概念
① 对象：包含一系列无序属性和方法的集合
② 键值对：对象中的数据是以键值对形式存在的，以键取值；
③ 属性：描述对象特征的一系列变量（对象中的变量）；
④ 方法：描述对象行为的一系列方法（对象中的函数）；
2、声明对象
① 字面量声明
var obj = {
key1:"value1", //属性
key2:"value2"
func:function(){} //方法
}
对象中的键，可以是任何数据类型。但，一般用作普通变量名（不需要""双引号）即可
对象中的值，可以是任何数据类型。但，字符串的话必须用""双引号包裹
多组键值对之间用,英文逗号分割，键值对的键与值之间用:英文冒号分割
② new关键字
var lisi = new Object();
lisi.name = "李四";
lisi.say = function(){
console.log("我爱敲代码！");
}
3、对象中属性和方法的读写
① .运算符：
对象内部->this.属性名 this.方法名()；
对象外部->对象名.属性名 对象名.方法名()；
>>>对象中，直接写变量名，默认为调用全局变量，如果需要调用对象自身属性，则需要通过this关键字
② 通过["key"]调用：对象名["属性名"] 对象名["方法名"]()
如果key中包含特殊字符，则无法使用第①种方式，必须使用第②种；
③ 删除对象的属性方法：delete 对象名.属性/方法名
4、下面我们来举个栗子
四、话不投机半句多，一堆乱码扔上桌 — 正则表达式
1、正则表达式包括两部分
①定义的正则表达式规则 ②正则表达式的模式（g/i/m）
2、正则表达式的声明
字面量声明： var reg = /表达式规则/表达式模式 /white/g
使用new关键字声明： var reg = new RegExp("表达式规则","表达式模式"); var reg = new RegExp("white","g");
3、正则表达式的常用方法
.text()方法：检测一个字符串是否匹配某个正则模式，返回true、false
.exec()方法：
4、正则表达式的常用模式
g：全局匹配；不加默认非全局，只匹配第一个
"www".replace(/w/,"#") -> #ww
"www".replace(/w/g,"#") -> ###
i：忽略大小写；不加默认需要匹配大小写
"wWw".replace(/W/,"#") -> w#w
"wWw".replace(/W/i,"#") -> #Ww
m：匹配多行模式（字符串分多行显示，每行都有开头结尾）；
"abc "#bc
abc".replace(/^a/g,"#") -> abc"
"abc "#bc
abc".replace(/^a/gm,"#") -> #bc"
5、常用符号
6、下面我们来举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客园注册</title>
</head>
<body>
用 户 名:<input type="text" name="user" id="user"/>
<button id="userBtn">验证</button>
<br /><br />
密 码:<input type="password" name="psw" id="psw"/>
<button id="pswBtn">验证</button>
<br /><br />
电子邮箱:<input type="text" name="mail" id="mail"/>
<button id="mailBtn">验证</button>
<br /><br />
手机号码:<input type="tel" name="tel" id="tel"/>
<button id="telBtn">验证</button>
<br /><br />
生 日:<input type="text" name="birth" id="birth"/>
<button id="birthBtn">验证</button>
</body>
<script type="text/javascript">
var userVa = document.getElementById("user").value;
var userBtn = document.getElementById("userBtn");
var pswVa = document.getElementById("psw").value;
var pswBtn = document.getElementById("pswBtn");
var mailVa = document.getElementById("mail").value;
var mailBtn = document.getElementById("mailBtn");
var telVa = document.getElementById("tel").value;
var telBtn = document.getElementById("telBtn");
var birthVa = document.getElementById("birth").value;
var birthBtn = document.getElementById("birthBtn");
userBtn.onclick = function(){
var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
if(reg.test(userVa)){
alert("验证成功！");
}else{
alert("验证失败！");
}
}
pswBtn.onclick = function(){
var reg = /^[a-zA-Z0-9]{4,10}$/;
if(reg.test(pswVa)){
alert("验证成功！");
}else{
alert("验证失败！");
}
}
mailBtn.onclick = function(){
var reg = /^\[email protected]\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
if(reg.test(mailVa)){
alert("验证成功！");
}else{
alert("验证失败！");
}
}
telBtn.onclick = function(){
var reg = /^1[34578]\d{9}$/;
if(reg.test(telVa)){
alert("验证成功！");
}else{
alert("验证失败！");
}
}
birthBtn.onclick = function(){
var reg = /^(\d{4}-((2|02)-(0[1-9]|1[0-9]|2[0-8])|((0?[469]|11)-(0[1-9]|[1-2][0-9]|30))|((0?[13578]|10|12)-(0[1-9]|[1-2][0-9]|30|31))))|(([0-9]{2})(0[48]|[2468][048]|[13579][26])|(0[48]|[2468][048]|[3579][26])00)-0?2-29$/;
if(reg.test(birthVa)){
alert("验证成功！");
}else{
alert("验证失败！");
}
}
</script>
</html>