从零开始的JS生活（三）——内置对象

时间：2024-01-03 12:43:50

咱们继续进行我们的正经的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、常用符号

从零开始的JS生活（三）——内置对象

从零开始的JS生活（三）——内置对象

从零开始的JS生活（三）——内置对象

6、下面我们来举个栗子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>博客园注册</title>

    </head>

    <body>

            用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input type="text" name="user" id="user"/>

            <button id="userBtn">验证</button>

            <br /><br />

            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<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 />

            生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:<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 = /^\w+@\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>

相关文章