web04.JavaScript概述-函数与对象(二)

JavaScript函数

JavaScript函数介绍

​ 一般来说,一个函数是可以通过外部代码调用的一个“子程序”(或在递归的情况下由内部函数调用)。像程序本身一样,一个函数由称为函数体的一系列语句组成。值可以传递给一个函数,函数将返回一个值。

​ 在 JavaScript中,函数是头等(first-class)对象,因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之,它们是Function对象。

JavaScript函数定义

​ 在JavaScript中,函数的定义可以分为三种,分别是函数声明,函数表达式和Function构造函数。

函数声明

  1. 函数声明是直接使用function关键字接一个函数名,函数名后是接收函数的形参

  2. 语法function name([param[, param[, ... param]]]) { statements }

    • name

      函数名.

    • param

      传递给函数的参数的名称,一个函数最多可以有255个参数。

    • statements

      组成函数体的声明语句。

  3. //函数声明式
    function sum(num1,num2){
    return num1+num2;
    }
    

函数表达式

  1. 函数表达式的形式类似于普通变量的初始值,只不过这个变量初始化的值是一个函数

  2. 语法var myFunction = function name([param[, param[, ... param]]]) { statements }

    • name

      函数名,可以省略。当省略函数名的时候,该函数就成为了匿名函数。

    • param

      传递给函数的参数的名称,一个函数最多可以有255个参数.

    • statements

      组成函数体的声明语句。

  3. //在定义时为函数命名
    //命名函数表达式的好处是当我们遇到错误时,堆栈跟踪会显示函数名,容易寻找错误。
    var sum = function(num1,num2){
    return num1+num2;
    }
    //匿名函数
    var myFunction = function() {
        // statements
    }
    

Function()构造函数

  1. 使用new操作符,调用Function()构造函数,传入对应的参数,也可以定义一个函数

  2. 注意: 不推荐使用 Function 构造函数创建函数,因为它需要的函数体作为字符串可能会阻止一些JS引擎优化,也会引起其他问题。

  3. 语法new Function (arg1, arg2, ... argN, functionBody)

    • arg1, arg2, ... arg*N*

      函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的JavaScript标识符规则的字符串或用逗号分隔的字符串列表,例如“x”,“theValue”或“a,b”。

    • functionBody

      一个构成的函数定义的,包含JavaScript声明语句的字符串。

    把Function的构造函数当作函数一样调用(不使用new操作符)的效果与作为Function的构造函数调用一样。

  4. //Function()构造函数
    var sum = new Function("num1","num2","return num1+num2");
    

函数声明和函数表达式和Function()构造函数声明的函数有什么区别?

  1. 使用函数声明的函数的函数必须要有名字,才能调用函数。
  2. 使用函数表达式声明的函数可以有名字,也可以没有。
  3. Function()构造函数声明必须要用固定的写法。
  4. 函数声明的函数可以再程序任意地方调用,函数表达式则不可以。

函数的使用

  1. 没有返回值的函数

    • 没有返回值的函数,指的是函数执行完就算了,不会返回任何值。

      • function 函数名(参数1 , 参数2 ,..., 参数n){ ……}
    • 函数的参数,是可以省略的(即不写),当然也可以是1个、2个或n个。如果是多个参数,则参数 之间用英文逗号(,)隔开。此外,函数参数的个数,一般取决于你实际开发的需要。

      • //定义函数 addSum(a,b) a和b被称为形参
        function addSum(a,b){
        var sum = a + b;
        document.write(sum);
        }
        //调用函数 addSum(1,2,)1和2被称为实参
        addSum(1, 2);
        //函数的调用,其实就是把“实参”(即1和2)传递给“形参”(即a和b),然后把函数执行一遍。
        
  2. 有返回值的函数

    • 有返回值的函数,指的是函数执行完了之后,会返回一个值,这个返回值可以供我们使用。

      • function 函数名(参数1 , 参数2 ,..., 参数n){ …… return 返回值;}
    • 有返回值的函数”相对“没有返回值的函数”来说,只是多了一个return语句。return语句就是用来返回 一个结果。

      • //定义函数
        function addSum(a, b) {
        var sum = a + b;
        return sum;
        }
        //调用函数
        var n = addSum(1, 2) + 100;
        document.write(n);
        
        

JavaScript全局变量与局部变量

JavaScript全局变量与局部变量

全局变量

全局变量一般在主程序中定义,其有效范围是从定义开始,一直到整个程序结束为止。全局变量在 任何地方都可以用。

​ 变量a由于是在主程序中定义的,因此它是全局变量,也就是在程序任何地方(包括函数内)都可以使 用。

var a = "十里";
//定义函数
function getMes(){
var b = a + "桃花";
document.write(b)
}
//调用函数
getMes();

局部变量

局部变量一般在函数中定义,其有效范围只限于在函数之中,函数执行完了就没了。局部变量只能 在函数中使用,函数之外是不能使用函数之内定义的变量的。

​ 为什么没有内容,变量b是局部变量,只能在函数之内使用,不能在函数之外使用,

var a = "十里";
//定义函
function getMes() {
var b = a + "桃花";
}
//调用函数
getMes();
//尝试使用函数内的变量b
var str = "三生三世" + b;
document.write(str);

如果我们想要在函数之外使用函数之内的变量,可以使用return语句返回该变量的值。

var a = "十里";
//定义函数
function getMes(){
var b = a + "桃花";
return b;
}
var str = "三生三世" + getMes();
document.write(str);

JavaScript函数调用的方式

​ 如果一个函数仅仅是定义而没有被调用的话,则函数本身是不会执行的。函数定义之后只有被调用 才有意义。JavaScript函数调用方式很多,常见有4种。

直接调用

  1. 是常见的函数调用方式,一般用于“没有返回值的函数”。

  2. 语法:函数名(实参1, 实参2, … , 实参n);

  3. //定义函数
    function getMes(){
    	document.write("前端学习javascript");
    }
    //调用函数
    getMes()
    

在表达式中调用

  1. 一般用于“有返回值的函数”,然后函数的返回值会参与表达式的计算。

  2. //定义函数
    function addSum(a, b) {
    	var sum = a + b;
    	return sum;
    }
    //调用函数
    var n = addSum(1, 2) + 100;
    document.write(n);
    

在超链接中调用

​ 指的是在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户 点击超链接时,就会调用该函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function talk()
{
	alert("她不爱我,说谎的时候不认真!");
}
</script>
</head>
<body>
	<a href="javascript:talk()">对话</a>
</body>
</html>

在事件中调用

​ JavaScript是基于事件的一门语言,像鼠标移动是一个事件、鼠标单击也是一个事件,类似的事件很 多。当一个事件产生的时候,我们就可以调用某个函数来针对这个事件作出响应。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Mes()
{
	alert("学习前端就是这么的简单");
}
</script>
</head>
<body>
	<input type="button" onclick="Mes()" value="提交" />
</body>
</html>

JavaScript函数嵌套

​ 嵌套函数,简单来说,就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在 内部调用,如果在外部调用,就会出错。

//定义阶乘函数
function func(a){
//嵌套函数定义,计算平方值的函数
function multi (x){
	return x*x;
}
var m=1;
for(var i=1;i<=multi(a);i++){
	m=m*i;
}
	return m;
}
//调用函数
var sum =func(2)+func(3);
document.write(sum);

​ 我们使用了定义了一个函数 func,这个函数有一个参数a,然后在 func()内部定义了 一个函数multi()。其中,multi()作为一个内部函数,只能在函数func()内部使用。对于func(2), 我们把 2作为实参传进去。 从上面我们可以看出,func(2)实现的是1×2×3×4,也就是4的阶乘。同理,func(3)实现的是1×2×… ×9,也就是9的阶乘。

JavaScript内置函数

JavaScript内置函数

函数还可以分为“自定义函数”和“内置函数”。

  1. 自定义函数,指的是需要我们自己定义的 函数,前面学的就是自定义函数。

  2. 内置函数,指的是JavaScript内部已经定义好的函数,也就是说我们不 需要自己写函数体,直接调用就行了

  3. 函数说明
    parseInt()提取字符串中的数字,只限提取整数
    parseFloat()提取字符串中的数字,可以提取小数
    isFinite()判断某一个数是否是一个有限数值
    isNaN()判断一个数是否是NaN值

判断是否是闰年

​ 闰年的判断条件有两个:

  1. 对于普通年,如果能被4整除,且不能被100整除的是闰年。

  2. 对于世纪年,能被400整除的是闰年

  3. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    //定义函数
    function isLeapYear(year)
    {
    	//判断闰年的条件
    	if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0))
    {
    	return year + "年是闰年";
    }
    else
    {
    	return year + "年不是闰年";
    }
    }
    //调用函数
    document.write(isLeapYear(2017));
    </script>
    </head>
    <body>
    </body>
    </html>
    

JavaScript对象

JavaScript的自定义对象

使用new运算符创建对象

var people= new Object(); //new方式
people.name='Head'; //创建属性字段
people.age=18; //创建属性字段

new关键字可以省略

var people = Object(); //省略了new关键字
people.name='Head';
people.age=18;

使用字面量方式创建Object

var people = { //字面量方式
name : '曹老师', //创建属性字段
age : 28 //最后一个属性不要加逗号
};

使用字面量及传统赋值方式

var people ={};
people.name='head', //字面量声明为空对象
people.age=18; //点符号给属性赋

两种属性输出方式

alert(people.age); //点表示法输出
alert(people ['age']); //中括号表示法输出,注意引号

给对象创建方法

var people ={
run:function(){
return '跑步中!!!'; //对象中的方法
}
}
alert(people.run()); //调用对象中的方法

JavaScript中的内置对象

avaScript基础部分我们主要学习内置对象包含以下五种:

  1. 字符串对象:String
  2. 数组对象:Array
  3. 日期对象:Date
  4. 数值对象:Math
  5. 正则对象:RegExp

JavaScript字符串对象

JavaScript字符串对象

length属性

​ 来获取字符串的长度

var str = "I love cao teacher";
document.write("字符串长度是:" + str.length);

toLowerCase()方法

​ 将大写字符串转化为小写字符串,toUpperCase()方法将小写字符串转化为大写字符 串。

var str = "Hello cao teacher";
document.write("正常:" + str + "<br/>");
document.write("小写:" + str.toLowerCase() + "<br/>");
document.write("大写:" + str.toUpperCase());

charAt()

​ 来获取字符串中的某一个字符

var str = "Hello cao teacher";
document.write("第1个字符是:" + str.charAt(0) + "<br/>");
document.write("第7个字符是:" + str.charAt(6));

substring()方法

  1. 来截取字符串的某一部分。

  2. 语法:字符串名.substring(start, end)

    start和end都是整数,一般都是从0开始,其中end大于start。

  3. var str1 = "曹老师讲前端,你爱我也爱!";
    var str2 = str1.substring(5, 7);
    document.write(str2);
    

replace()方法

  1. 来用一个字符串替换另外一个字符串的某一部分

  2. 字符串名.replace(原字符串, 替换字符串)

    字符串名.replace(正则表达式, 替换字符串)

    直接使用字符串替换:

    var str = "I love javascript!";
    var str_new = str.replace("javascript", "cao teacher");
    document.write(str_new);
    

    使用“正则表达式”替换

    var str = "I am hero, you are red, all are red.";
    var str_new = str.replace(/red/g, "teacher");
    document.write(str_new);
    

split()方法

  1. 把一个字符串分割成一个数组,这个数组存放的是原来字符串的所有字符片段。

    var str = "HTML,CSS,JavaScript";
    var arr = str.split(",");
    document.write("数组第1个元素是:" + arr[0] + "<br/>");
    document.write("数组第2个元素是:" + arr[1] + "<br/>");
    document.write("数组第3个元素是:" + arr[2]);
    

indexOf()方法

  1. 找出“某个指定字符串”在字符串中首次出现的下标位置,也可以使用lastIndexOf()来 找出“某个指定字符串”在字符串中最后出现的下标位置。

    var str = "Hello cao teacher!";
    document.write(str.indexOf("cao") + "<br/>");
    document.write(str.indexOf("cao") + "<br/>");
    document.write(str.indexOf("cao"));
    

JavaScript数组对象

数组是什么?

​ 数组是一个数据的集合,可以通过Var声明一个变量,如果需要100个不同的数据,还采用Var的方 法就太麻烦了,所以我们就有了数组的方式。

数组的创建方式

  1. 使用new关键字创建数组

    var box = new Array(); //创建了一个数组
    var box = new Array(10); //创建一个包含10个元素的数组
    var box = new Array('小花','web','js'); //创建一个数组并分配好了元素
    
  2. 以上三种方法,可以省略new关键字。

    var box = Array(); //省略了new关键字
    
  3. 使用字面量方式创建数组

    var box = []; //创建一个空的数组
    var box = ['小花','web','js']; //创建包含元素的数组
    
  4. 创建一个稍微复杂一点的数组

    var box = [
    { //第一个元素是一个对象
    	name : '曹老师',
    	age : 30,
    	run : function () {
    	return 'run了';
    }
    },
    ['马云','李彦宏',new Object()],//第二个元素是数组
    '江苏', //第三个元素是字符串
    25+25, //第四个元素是数值
    new Array(1,2,3) //第五个元素是数组
    ];
    alert(box);
    

数组值的获取

数组都是有下标的,数组的下标从零开始,我们可以通过arr[0]的方法拿取数组中的第一个数据。

var box = ['曹老师','web','js']; //创建包含元素的数组
alert(box[2]); //获取第三个元素
box[2] = '学生'; //修改第三个元素
box[4] = '计算机编程'; //增加第五个元素

数组值的添加

可以通过arr[5] = "铁岭"的方法拿取数组中的第一个数据。如果数组下标相同新数据会覆盖原数据。

var box = ['曹老师','web','js']; //创建包含元素的数组
alert(box[2]); //获取第三个元素
box[2] = '学生'; //修改第三个元素
box[4] = '计算机编程'; //增加第五个元素

length属性来获取数组的长度

var box = ['曹老师','web','js'];
alert(box.length) //获取元素个数
box.length = 10; //强制元素个数
box[box.length] = 'JS技术'; //通过length给数组增加一个元素

JavaScript数组对象操作方法

slice()方法

  1. slice()方法来获取数组的某一部分

  2. 语法:slice(start, end);

  3. 规则:包含start但不包含end。其中,end可以省略。当end省略时,获取的范围为:start到结尾。和 substring()的规则一样。

    var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
    document.write(arr.slice(1, 3));
    

unshift()方法

unshift()方法在数组开头添加新元素,并且可以得到一个新的数组。

var arr = ["JavaScript", "jQuery"];
arr.unshift("HTML", "CSS");
document.write(arr);

push()方法

push()方法在数组结尾添加新元素,并且可以得到一个新的数组。

var arr = ["HTML", "CSS"];
arr.push("JavaScript","jQuery");
document.write(arr);

shift()方法

shift()方法来删除数组中的第一个元素,并且可以得到一个新的数组

var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.shift();
document.write(arr);

pop()方法

pop()方法来删除数组的最后一个元素,并且可以得到一个新数组。

var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.pop();
document.write(arr);

sort()方法

sort()方法来对数组中所有元素进行大小比较,然后按从大到小或者从小到大进行排序。

//定义一个升序函数
function up(a, b) {
return a - b;
}
//定义一个降序函数
function down(a, b) {
return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);
document.write("升序:" + arr.join("、") + "<br/>");
arr.sort(down);
document.write("降序:" + arr.join("、"));

reverse()方法

reverse()方法来实现数组中所有元素的反向排列,也就是颠倒数组元素的顺序。

var arr = [3, 1, 2, 5, 4];
arr.reverse();
document.write("反向排列后的数组:" + arr);

join()方法

join()方法来将数组中的所有元素连接成一个字符串

var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
document.write(arr.join() + "<br/>");
document.write(arr.join("*"));

JavaScript数学对象

​ 凡是涉及动画开发、高级编程、算法研究等,都跟数学有极大的联系。在JavaScript中,我们可以使 用Math对象的属性和方法来实现各种运算

Math对象的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UkpjA64D-1626848388918)(C:\Users\Administrator\OneDrive\笔记\web04.JavaScript概述(二)].assets\image-20210721135536063-1626846938087.png)

​ 在实际开发中,所有角度都是以“弧度”为单位的,例如180°就应该写成Math.PI,而360°就应该写成 Math.PI*2,以此类推。对于角度,在实际开发中推荐这种写法:“度数 * Math.PI/180”,因为这种写法 可以让我们一眼就能看出角度是多少。

例如:
120 * Math.PI/180 //120°
150 * Math.PI/180 //150°

Math对象中的方法

方法 					说明
max(a,b,,n) 		返回一组数中的最大值
min(a,b,,n) 		返回一组数中的最小值
sin(x) 				正弦
cos(x) 				余弦
tan(x) 				正切
asin(x) 			反正弦
acos(x) 			反余弦
atan(x) 			反正切
atan2(y, x) 		反正切(注意y、x顺序)
floor(x) 			向下取整
ceil(x) 			向上取整
random() 			生成随机数
abs(x) 				返回x的绝对值
sqrt(x) 			返回x的平方根
log(x) 				返回x的自然对数(底为e)
pow(x,y) 			返回x的y次幂

最大值和最小值

var a = Math.max(3, 9, 1, 12, 50, 21);
var b = Math.min(3, 9, 1, 12, 50, 21);
document.write("最大值为:" + a + "<br/>");
document.write("最小值为:" + b);

向下取整:Floor()

document.write("Math.floor(3)等于" + Math.floor(3) + "<br/>");
document.write("Math.floor(0.4)等于" + Math.floor(0.4) + "<br/>");

向上取整:ceil()

document.write("Math.ceil(3)等于" + Math.ceil(3) + "<br/>");
document.write("Math.ceil(0.4)等于" + Math.ceil(0.4) + "<br/>");
document.write("Math.ceil(0.6)等于" + Math.ceil(0.6) + "<br/>");

.随机数:random()

document.write(Math.random())

随机生成个范围的”任意数“

Math.ceil(Math.random()*10); // 获取从 1 到 10 的随机整数,取 0 的概率极小。
Math.round(Math.random()); // 可均衡获取 0 到 1 的随机整数。
Math.floor(Math.random()*10); // 可均衡获取 0 到 9 的随机整数。
Math.round(Math.random()*10); // 基本均衡获取 0 到 10 的随机整数,其中获取最小值 0 和
最大值 10 的几率少一半。

随机数生成某个范围内的“整数”

//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
	return parseInt(Math.random()*minNum+1,10);
break;
case 2:
	return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
	return 0;
break;
}
}

JavaScript时间对象

JavaScript时间对象

在JavaScript中,我们可以使用时间对象Date来处理时间。

var 日期对象名 = new Date();

获取时间的getXxx()

方法 					说明
getFullYear() 		获取年份,取值为4位数字
getMonth() 			获取月份,取值为0(一月)到11(十二月)之间的整数
getDate() 			获取日数,取值为1~31之间的整数
getHours() 			获取小时数,取值为0~23之间的整数
getMinutes() 		获取分钟数,取值为0~59之间的整数
getSeconds() 		获取秒数,取值为0~59之间的整数

设置时间的setXxx()

方法 					说明
setFullYear() 		可以设置年、月、日
setMonth() 			可以设置月、日
setDate() 			可以设置日
setHours() 			可以设置时、分、秒、毫秒
setMinutes() 		可以设置分、秒、毫秒
setSeconds()	    可以设置秒、毫秒

获取年月日

在JavaScript中,我们可以使用getFullYear()、getMonth()和getDate()方法分别来获取当前时间的年、 月、日。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
var myYear = d.getFullYear();
var myMonth = d.getMonth() + 1;
var myDay = d.getDate();
document.write("今天是" + myYear + "年" + myMonth + "月" + myDay + "日");
</script>
</head>
<body>
</body>
</html>

注意var myMonth = d.getMonth() + 1;使用了“+1”。其实,getMonth()方法返回值是 0(一月)到11(十二月)之间的整数,所以必须加上1,这样月份才正确。

. 设置年、月、日

在JavaScript中,我们可以使用setFullYear()、setMonth()和setDate()方法来设置对象的年、月、日。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
d.setFullYear(1992, 09, 01);
document.write("我设置的时间是:<br/>" + d);
</script>
</head>
<body>
</body>
</html>

获取时、分、秒

使用getHours()getMinutes()getSeconds()方法分别获取当前的时、分、 秒。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
var myHours = d.getHours();
var myMinutes = d.getMinutes();
var mySeconds = d.getSeconds();
document.write("当前时间是:" + myHours + ":" + myMinutes + ":" +
mySeconds);
</script>
</head>
<body>
</body>
</html>

设置时、分、秒

使用setHours()setMinutes()setSeconds()来设置时、分、秒。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
d.setHours(12, 10, 30);
document.write("我设置的时间是:<br/>" + d);
</script>
</head>
<body>
</body>
</html>

JavaScript正则对象

当检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以 是一个单独的字符,复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

javaScript创建正则表达式

//1.对象的方式创建
var box = new RegExp('box'); //第一个参数字符串
var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符
//2.直接创建
var box = /box/; //直接用两个反斜杠
var box = /box/ig; //在第二个斜杠后面加上模式修饰符

模式修饰符的可选参数

参 数 			含 义
i 				忽略大小写
g 				全局匹配
m 				多行匹配

测试正则表达式

RegExp对象包含两个方法test()exec(),功能基本相似,用于测试字符串匹配。

test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值,如果存在则返回true,不存在则 返回false。

/*使用new运算符的test方法示例*/
var pattern = new RegExp('box', 'i'); //创建正则模式,不区分大小写
var str = 'This is a Box!'; //创建要比对的字符串
alert(pattern.test(str)); //通过test()方法验证是否匹配

exec()方法也用于在字符串中查找指定正则表达式,如果exec()方法执行成功,则返回包含该查找字符 串的相关信息数组。如果执行失败,则返回null。

/*使用new运算符的test方法示例*/
var pattern = new RegExp('box', 'i'); //创建正则模式,不区分大小写
var str = 'This is a Box!'; //创建要比对的字符串
alert(pattern.exec(str)); //通过test()方法验证是否匹配

常用正则

//1.检查邮政编码
var pattern = /[1-9][0-9]{5}/; //共6位数字,第一位不能为0
var str = '224000';
alert(pattern.test(str));
//2.检查手机号码
var pattern = /^1[34578][0-9]{9}$/;
var str = '15123456789';
alert(pattern.test(str));
//3.检查邮箱
var pattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
var str = '151234@qq.com';
alert(pattern.test(str));
//更多正则匹配可以自行搜索。

字符类单个字符数字

元字符/元符号 		匹配情况
. 					匹配除换行符外的任意字符
[a-z0-9] 			匹配括号中的字符集中的任意字符
[^a-z0-9]			匹配任意不在括号中的字符集中的字符
\d 					匹配数字
\D 					匹配非数字,同[^0-9]相同
\w 					匹配字母和数字及_
\W 					匹配非字母和数字及_

字符类空白字符

元字符/元符号 	匹配情况
\0 				匹配null字符
\b 				匹配空格字符
\f 				匹配进纸字符
\n 				匹配换行符
\r 				匹配回车字符
\t 				匹配制表符
\s 				匹配空白字符、空格、制表符和换行符
\S 				匹配非空白字符

字符类锚字符

元字符/元符号 	匹配情况
^ 				行首匹配
$ 				行尾匹配
\A 				只有匹配字符串开始处
\b 				匹配单词边界,词在[]内时无效
\B 				匹配非单词边界
\G 				匹配当前搜索的开始位置
\Z 				匹配字符串结束处或行尾
\z 				只匹配字符串结束处

字符类:重复字符

元字符/元符号 		匹配情况
x? 					匹配0个或1个x
x* 					匹配0个或任意多个x
x+ 					匹配至少一个x
(xyz)+ 				匹配至少一个(xyz)
x{m,n} 				匹配最少m个、最多n个x

0’;
alert(pattern.test(str));
//2.检查手机号码
var pattern = /^1[34578][0-9]{9}KaTeX parse error: Undefined control sequence: \w at position 97: …a-zA-Z]|[0-9])(\̲w̲|\-)+@[a-zA-Z0-…/;
var str = ‘151234@qq.com’;
alert(pattern.test(str));
//更多正则匹配可以自行搜索。


**字符类**:**单个字符**和**数字**

```\
元字符/元符号 		匹配情况
. 					匹配除换行符外的任意字符
[a-z0-9] 			匹配括号中的字符集中的任意字符
[^a-z0-9]			匹配任意不在括号中的字符集中的字符
\d 					匹配数字
\D 					匹配非数字,同[^0-9]相同
\w 					匹配字母和数字及_
\W 					匹配非字母和数字及_

字符类空白字符

元字符/元符号 	匹配情况
\0 				匹配null字符
\b 				匹配空格字符
\f 				匹配进纸字符
\n 				匹配换行符
\r 				匹配回车字符
\t 				匹配制表符
\s 				匹配空白字符、空格、制表符和换行符
\S 				匹配非空白字符

字符类锚字符

元字符/元符号 	匹配情况
^ 				行首匹配
$ 				行尾匹配
\A 				只有匹配字符串开始处
\b 				匹配单词边界,词在[]内时无效
\B 				匹配非单词边界
\G 				匹配当前搜索的开始位置
\Z 				匹配字符串结束处或行尾
\z 				只匹配字符串结束处

字符类:重复字符

元字符/元符号 		匹配情况
x? 					匹配0个或1个x
x* 					匹配0个或任意多个x
x+ 					匹配至少一个x
(xyz)+ 				匹配至少一个(xyz)
x{m,n} 				匹配最少m个、最多n个x
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值