Javascript对象与正则表达式完全解析

内容导读

• Javascript对象定义与作用
• 自定义对象
• JS内置对象
• 正则表达式
• 实战练习

一、Javascript对象的定义与作用

1、定义与作用

定义：在 JavaScript （简称JS）中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

作用：保存某个事物的完整信息。保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，保存一个的完整信息，则使用包含了人的特征与行为的对象就非常方便了。

2、对象的种类

JS中的对象有：自定义对象与系统内置对象两种

二、JS自定义对象

创建自定义对象有三种方式

2.1 利用字面量创建对象

1、对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键-值对的形式表示。

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

2、创建对象

var star = {
  name : 'nick',
  age : 18,
  gender : '男',
  say : function(){
    alert('大家好啊!');
  }
};

3、对象的调用

对象名.属性 或 对象名['属性名']

或

对象名.方法名

比如：

console.log(star.name)    // 调用名字属性
console.log(star['name']) // 调用名字属性
star.say();              // 调用 say方法,一定不要忘记带后面的括号

说明：关于变量、属性、函数、方法

变量：单独声明赋值，单独存在

属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

函数：单独存在的，通过“函数名()”的方式调用

方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式调用，方法用来描述该对象的行为和功能。

2.2 利用new Object创建对象

创建格式：var 对象名 = new Object();

对象名.属性 = 值;

对象名.方法 = function(){ }

调用：对象名.属性; 或 对象名.方法(参数);

//创建对象 
var nick = new Obect();
nick.name = 'nick';
nick.age = 19;
nick.gender = '男';
nick.say = function(){
  alert('大家好啊!');
}
//调用对象
console.log(nick.name)
nick.say();

2.3 利用构造函数创建对象

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。

我们可以把一些对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

说明：在 js 中，使用构造函数要时要注意以下两点

（1）构造函数用于创建某一类对象，其首字母要大写

（2）构造函数要和 new一起使用才有意义

function Person(name,gender,age) {
  this.name = name;
  this.gender = gender;
  this.age = age;
  this.say = function() {
    alert('姓名：' + this.name +' 性别：' + this.gender + ' 年龄：' + this.age);
  }
}
//创建对象
var tom = new Person('tom','男',19);
var bean = new Person('bean','男',20);
//调用对象
console.log(tom.name);
console.log(bean.name);
tom.say();
bean.say();

注意：

（1）构造函数约定首字母大写。

（2） 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

（3） 构造函数中不需要 return 返回结果。

（4）当我们创建对象的时候，必须用 new 来调用构造函数。

三、常用内置对象

Javascript语言给我们内置了很多封装好的通用接口，以对象的属性与方法或函数的形式存在。

3.1 Array 数组内置对象

下面对一些常用方法做示例：

1、push()方法

let arr = [55,3,89,9,11];  
arr.push(99);            //向数组中追加一个元素
console.log(arr);        //55,3,89,9,11,99

2、sort()方法

//sort()方法按照字符串规则排序
let arr1 = ['SMITH','WARD','MARTIN','CLARK','TURNER'];
arr1.sort();
console.log(arr1); //"CLARK", "MARTIN", "SMITH", "TURNER", "WARD"
//所以，当对数字进行排序时，就会出现问题，此时，可以自定义排序规则函数进行排序
let arr2 = [55,3,89,9,11];
arr2.sort(rule);
function rule(num1,num2){
  //第一个减第二个升序，第二个减第一个降序
  return num1-num2;
}
console.log(arr2);     //3, 9, 11, 55, 89

3、join()方法

let arr = [2020,08,04];
let result = arr.join('-');
console.log(result);  //2020-8-4

4、splice()方法

//从数组中间删除元素：splice(开始位置,删除元素长度)
let arr1 = [1,2,3,4,5,6,7,8,9];
arr1.splice(2,3);
console.log(arr1);    //运行结果：1,2,6,7,8,9
//在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
let arr2 = [1,2,3,4,5,6,7,8,9];
arr2.splice(2,0,31,32,33);
console.log(arr2);   //运行结果：1,2,31,32,33,3,4,5,6,7,8,9
//替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)
let arr3 = [1,2,3,4,5,6,7,8,9];
arr3.splice(2,1,33);
console.log(arr3);    //运行结果：1,2,33,4,5,6,7,8,9

3.2 var 字符串内置对象

下面对一些常用方法做示例

1、charAt()方法

let str = 'hello';
for(let i=0;i<str.length;i++){
  console.log(str.charAt(i));      //h e l l o
}

2、indexOf()方法

let str = 'hello.js';
console.log(str.indexOf('.'));       //5

3、subvar()方法

let str = 'zhangsan@163.com';
console.log(str.subvar(str.indexOf('@')+1));                    //163.com
console.log(str.subvar(str.indexOf('@')+1,str.indexOf('.')));   //163

4、split()方法

let str = '2020-08-04';
let arr = str.split('-');
console.log(arr);             //"2020", "08", "04"

3.3 Date 日期内置对象

示例：

let mydate = new Date();
console.log(mydate);  //Tue Aug 04 2020 17:15:22 GMT+0800 (中国标准时间)

实战应用：获取当前日期：

function getCurDate() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  return year + "-" + month + "-" + day;
}
console.log(getCurDate());

3.4.Math 数学内置对象

方法	说明	示例
ceil( x )	对数据进行向上取整	Math.ceil( 25.5 ); 返回: 26 Math.ceil( -25.5 ); 返回: -25
floor( x )	对数据进行向下取整	Math.floor( 25.5 ); 返回: 25 Math.floor( -25.5 ); 返回: -26
round( x )	对数据四舍五入为最接近的整数,如果想精确到小数则使用toFixed() (了解)	Math.round( 25.5 ); 返回: 26 Math.round( -25.5 ); 返回: -25 num=12.567; num.toFixed(2); 返回:12.57
random( x )	返回0~1之间的随机数	Math.random( ); 结果例如：0.675847364859643754
abs( x )	返回数据的绝对值	Math.abs( -20 ); 返回：20
sqrt( x )	返回数据的平方根	Math.sqrt( -2 ); 返回：1.41.......
max( x, y )	返回两个数据的最大值	Math.max( 5 , 2 ); 返回：5
min( x, y )	返回两个数据的最小值	Math.min( 5 , 2 ); 返回：2

示例：

//向上取大整数，结果为88
console.log(Math.ceil(87.23));
//向下取小整数，结果为87
console.log(Math.ceil(87.23));
//平方根，结果为5
console.log(Math.sqrt(25);
//四舍五入取整，结果为27            
console.log(Math.round(26.48));
//四舍五入，精确到小数位后几位
var num=56.2375;
//结果为56.24
console.log(num.toFixed(2));
//返回0-9的随机整数
console.log(Math.floor(Math.random()*10));

3.5 Global内置对象

Global（全局）对象是JS中一个特别的对象，此对象不可直接访问。即属性与方法直接调用，不属于任何其他对象的属性和方法都属于Global。

1、parseInt() 将字符串转换成整形

let str = '100';
console.log(parseInt(str)+1); //101

2、parseFloat() 将字符串转换成浮点型

let str = '100.6';
console.log(parseFloat(str)+1);//101.6

3、eval() 将一个字符串解析为Javascript代码并执行

console.log(eval('1+2')); //3

四、正则表达式

4.1 定义与作用

简单地说，也是一种规范与标准，是一种用于验证字符串是否符某种格式的"特殊字符串”，在数据校验中应用非常广泛。

比如：验证字符串是否符合“电话号”、“邮箱地址”、"网址"、“用户名”、“密码”等

说明：JS中的创建正则表达式格式

//^号与$号表示要严格按顺序匹配与长度
var 变量名 = /^正则表达式$/;
//或 无^号与$号则非严格匹配
var 变量名 = /正则表达式/;

4.2 正则表达式使用特殊字符

^：正则表达表字符开始

$：正则表达式字符结束

[ ] ：指定某个位置的字符是什么

{ }：指定前边的字符的长度

. ：表示某个位置可以任意的一个字符

说明：以上是最为常用五个基本符号，可以生成各种正则表达式字符串；下面是扩展符号，用于简化正则表达式。

?：表示前边可以是0个或一个字符

*：表示前边的字符是0个或任意个

+：代表一个或多个

\w：代表所有合法的英文字符

\d：代表数字[0-9]

\. ：转义符，表示原样显示小圆点

说明：

\ 斜杠 用作转义符，显示原始的样子。

比如：复杂正则表达式参考，复杂密码的正则表达式（必须同时包含数字，大写字母，小写字母长度是8-18）

var reg=/^(?=.*[0-9])(?:=.*[a-z])(?=.*[A-Z]).{8,18}$/;

4.3 正则表达式中的方法

用于验证别的字符串是否符合要求的方法test

//验证密码的正则表达式 
var reg=/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,18}$/;
//待测字符串
var str = /a12_ABa123/;
//输出false或true值
console.log(reg.test(str));

4.4 案例解析

<script> 
  //1.基本正则表达式用法:电话，邮箱，地址
  function go() {
    //(1)座机电话：024-23456789
    //[0]:此处为0,[1-9]{2}:此处要有2个1-9的数字,-:原样显示,[2-8]:表此此处是2-8的数字
    //[0-9]{7}:表示此为为0-9的数字，长度是7位
    //有^与$严格匹配：var regTel= /^[0][1-9]{2}-[2-8][0-9]{7}$/;
    var regTel = /[0][1-9]{2}-[2-8][0-9]{7}/;
    //座机号后边为6-8位的
    //var regTel=/[0][1-9]{2}-[2-8][0-9]{5,7}/;
    var tel = '024-23456789';
    console.log('电话格式：'+regTel.test(tel));

    //(2)手机号：13123456789
    var regMobile = /[1][356][0-9]{9}/;
    var mobile = '13123456789';
    console.log('手机格式：'+regMobile.test(mobile));

    //(3)邮箱yhc@sina.com,[0-9a-zA-Z_]用\w代替，[0-9]用\d表示
    //var regMail=/[0-9a-zA-Z_]{1,}@[0-9a-zA-Z_]{1,}\.[0-9a-zA-Z_]{2,3}/;
    //+号代表1或多个
    //简化的正则表达式
    var regMail= /\w+@\\w+\.\w{2,3}/;
    var mail = 'chaodai@sina.com';
    //结果为true
    console.log('邮箱格式：'+regMail.test(main));

    //(4)网络地址
    var regUrl = /http://\w+\.\w+\.\w+/;
    var url = 'http://www.baidu.com';
    console.log('地址格式：'+regUrl.test(url));
  }//go

  //2.复杂密码的正则
  function play() {
    //必须包含0-9,a-z,A-Z,长度为5到20位
    //var regPass = /^((?=.*[a-z])(?=.*[0-9])(?=.*[A-Z])).{5,20}$/;
    var regPass = /^(?=.*[a-z])(?=.*[0-9])(?=.*[A-Z]).{5,20}$/;
    //var regPass = /^(?:(?=.*[a-z])(?=.*[0-9])(?=.*[A-Z])).{5,20}$/;
    var pass = '1A28_2d8';
    console.log('密码格式：' + regPass.test(pass));
  }
  方法调用
  go();
  play();
  <script>

五、实战练习

一、选择题

1. 以下哪个方法可以将参数四舍五入到最接近的整数（ ）

A. round

B. ceil

C. sin

D. min

2. 输出表达式eval(5+3*4)+eval(3+4*5)的值为（ ）

A. 17+23

B. 40

C. 5+3*43+4*5

D. 5+3*4+3+4*5

二、编程题

1. 对数组中元素求和，并输出结果 var attr = [20,12,19,34,21,25,76,42,29,18];

2. 有数组var arr = [11,0,8,9,0,0,2,6,0,13,1,0,18,0];

要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组。

提示：构建一个新的数组存放结果，for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比。

3. 创建一维整型数组，并运用选择排序对数组元素从大到小排序，遍历数组输出元素的值。

4. 创建对象，信息为：姓名：大鹏 性别：男 年龄：19 技能：分身术

5. 定义一个变量，使用正则判断它是否是一个标准的手机号"1开头，11位，纯数字"

6.（选做题）根据系统当前的时间输出

当前时间是本年：第 X 季度，是当月的 X 旬（上旬，中旬，下旬）。

7.（选做题）写出验证复杂密码的正则：字符串必须为有大小中文字母与数字，包含其它字符，长度在7-20之间。

8.（选做题）运用js创建二维数组，存放九九乘法口诀表数字，并遍历此二维数组。

更多精彩内容请关注本站！