JavaScript 基础学习（三）

最新推荐文章于 2024-09-30 15:23:15 发布
最新推荐文章于 2024-09-30 15:23:15 发布
阅读量186 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/119980183
版权

文章目录

对象

对象分为：
①内建对象
②宿主对象
③自定义对象

数组（Array）

  1. 数组也是一个对象， 它和我们普通对象功能类似，也是用来存储一些值的。
  2. 不同的是普通对象使用字符串作为属性名的，而数组使用数字来作为索引操作元素。
  3. 索引是从0开始的整数。
  4. 数组的存储性能比普通对象好，在开发中我们经常使用数组来存储一些数据
  5. 使用typeof检查一个数组时，会返回object

①创建数组对象

var arr = new Array();

② 向数组中添加元素
语法：数组[索引] = 值;

		arr[0] = 10;
		arr[1] = 20;
		arr[2] = 30;

③ 读取数组中的元素
语法：数组[索引]
注意： 如果读取不存在的索引，它不会报错而是返回undefined

④获取数组的长度
可以使用length属性来获取数组的长度
语法：数组.length

  • 对于连续的数组，使用length可以获取到数组的长度；
  • 对于非连续的数组，使用length会获取到数组的最大索引+1

⑤修改length

  • 如果修改的length大于原长度，则多出的部分会空出来

  • 如果修改的length小于原长度，则多出的元素会被删除

      	arr.length = 2;

⑥向数组的最后 一个位置添加元素
语法：数组[数组.length]=值;

示例：

<script type="text/javascript">	
			//创建数组对象
			var arr = new Array();
			arr[0] = 10;
			arr[1] = 20;
			arr[2] = 30;
			console.log(arr[1]);
			console.log(arr.length);//3
		
			arr.length = 2;
			
			arr[arr.length]=70;
			arr[arr.length]=80;
			arr[arr.length]=90;
			console.log(arr);//10,20,70,80,90
		</script>

数组字面量

①使用字面量来创建数组
语法：[]

	<script type="text/javascript">
		var arr = [];
		console.log(typeof arr);//object
	</script>

②使用字面量创建数组时，可以在创建时就指定数组中的元素。

	<script type="text/javascript">
			var arr = [1,2,4,5,6,10];
			console.log(arr);//1,2,4,5,6,10
	</script>

③使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递，元素之间使用,隔开。

	<script type="text/javascript">
			var arr2 = new Array(10,20,30);
			console.log(arr2);//10,20,30
	</script>

④注意

  • 创建一个数组只有一个元素10
	<script type="text/javascript">	
			
			var arr3 = [10];
			console.log(arr3);
			
		</script>
  • 创建一个数组,一个长度为10的数组
	<script type="text/javascript">	
			
			var arr4 = new Array(10);
			console.log(arr4);
			
		</script>

⑤数组中的元素可以是任意数据类型，也可以是对象，也可以是一个函数，也可以放数组

<script type="text/javascript">

			//数组中的元素可以是任意数据类型
			var arr = ["hello",1,true,null,undefined];
			
			//也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
			
			//也可以是一个函数
			arr = [function(){alert(1)},function(){alert(2)}];
			
			//console.log(arr);
			//arr[0]();
			
			//数组中也可以放数组，如下这种数组我们称为二维数组
			arr = [[1,2,3],[3,4,5],[5,6,7]];
			console.log(arr[1]);
		</script>

数组的方法

① push();

  • 该方法可以向数组的末尾添加一个或多个元素，并返回数组新的长度。
  • 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾。
	<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			var result = arr.push("唐僧","白龙马");
			console.log(arr);
			console.log("result="+result);//result=5
			
		</script>

②pop();

  • 该方法可以删除数组的最后一个元素并将被删除的元素作为返回值返回。
	<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			var result = arr.pop();
			console.log(arr);
			console.log("result="+result);//result=沙和尚
			
		</script>

③unshift();

  • 向数组开头添加一个或多个元素，并返回新的数组。
	<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];

			arr.unshift("牛魔王","玉兔");
			console.log(arr);//牛魔王,玉兔,孙悟空,猪八戒,沙和尚
			
		</script>

④shift();

  • 可以删除数组的第一个元素，并将被删除的元素作为返回值返回。
	<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			var result = arr.shift();
			console.log(arr);
			console.log("result="+result);//result=孙悟空
		</script>

⑤slice(start,end);

  • 从数组中提取指定元素
  • 该方法不会改变原数组，而是将截取到的元素封装到一个新的数组中返回
  • 参数：
    star：截取开始位置索引（包含开始索引位置）；
    end：截取结束位置索引（不包含结束索引位置）
    end参数可以省略不写，此时会截取从开始索引往后的所有元素
  • 索引可以传递一个负值，如果传递一个负值，则从后往前计算。
    如：
    -1 表示 倒数第一个
    -2 表示 倒数第二个
<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白龙马"];
			
			var result = arr.slice(0,2);
			console.log(result);//孙悟空,猪八戒
	
		</script>

⑥splice();

  • 可以用于删除数组中的指定元素
  • 使用splice();会影响到原数组，会将指定元素从原数组中删除并将被删除的元素作为返回值返回
  • 参数：
    第一个，表示开始位置的索引
    第二个，表示删除的数量
    第三个及以后，可以传递一些新元素，这些元素将会自动插入到开始位置索引的前面
	<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白龙马"];
	
			var result = arr.splice(1,2,"牛魔王","白骨精");
			console.log(result);//猪八戒,沙和尚
			console.log(arr); //孙悟空,牛魔王,白骨精,唐僧,白龙马
		</script>

⑦concat();

  • 可以连接两个或多个数组，并将新的数组返回
  • 该方法不会对原数组产生影响
<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚"];
			var arr2 = ["白龙马","玉兔","白骨精"];
			var arr3 = ["二郎神","蜘蛛精","玉皇大帝"];
			
			var result = arr.concat(arr2,arr3,"牛魔王");
			console.log(result);
			//孙悟空,猪八戒,沙和尚,白龙马,玉兔,白骨精,二郎神,蜘蛛精,玉皇大帝,牛魔王	
		</script>

⑧join();

  • 该方法可以将数组转换为一个字符串
  • 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
  • 在join();中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的链接符。若不指定连接符，则默认使用,作为连接符
<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			var result = arr.join("*");
			console.log(result);
			//孙悟空*猪八戒*沙和尚

		</script>

⑨reverse();

  • 该方法用来反转数组
  • 该方法会直接修改原数组
<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			arr.reverse();
			console.log(arr);
			//沙和尚,猪八戒,孙悟空
		</script>

⑩sort();

  • 可以用来对数组中的元素进行排序
  • 也会影响原数组，默认会按照Unicode编码进行排序
<script type="text/javascript">
			var arr = ["b","d","e","a","c"];
			arr.sort();
			console.log(arr);
			//a,b,c,d,e
		</script>
  • 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序， 所以对数字进排序时，可能会得到错误的结果。
  • 我们可以自己来指定排序的规则：
    我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数。
arr.sort(function(a,b){
			
});

使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边。

  • 浏览器会根据回调函数的返回值来决定元素的顺序：
    如果返回一个大于0的值，则元素会交换位置
    如果返回一个小于0的值，则元素位置不变
    如果返回一个0，则认为两个元素相等，也不交换位置
  • 如果需要升序排列，则返回 a-b
    如果需要降序排列，则返回b-a
<script type="text/javascript">
			var arr = [5,4,2,1,3,6,8,7];
			
			arr.sort(function(a,b){
				
				//升序排列
				//return a - b;
				
				//降序排列
				return b - a;
				
			});
			
			console.log(arr);
		</script>

数组的遍历

所谓遍历数组，就是将数组中所有的元素都取出来。

<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			for(var i=0;i<arr.length;i++){
				console.log(arr[i]); 
			}
		</script>

forEach()

forEach();用来遍历数组

  1. 这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach。还是使用for循环来遍历 。

  2. forEach()方法需要一个函数作为参数

  • 像这种函数，由们创建但是不由我们调用的，我们称为回调函数。
  • 数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来读取这些内容。
  • 浏览器会在回调函数中传递三个参数：
    第一个参数，就是当前在遍历的元素
    第二个参数，就是当前在遍历的元素的索引
    第三个参数，就是当前正在遍历的数组
<script type="text/javascript">
			
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白龙马"];
			
			arr.forEach(function(value,index,obj){
				console.log(value);
			});
		</script>

数组去重练习

<script type="text/javascript">
			
			//创建一个数组
			var arr = [1,2,3,2,2,1,3,4,2,5];
			
			//去除数组中重复的数字
			//获取数组中的每一个元素
			for(var i=0 ; i<arr.length ; i++){
				//console.log(arr[i]);
				/*获取当前元素后的所有元素*/
				for(var j=i+1 ; j<arr.length ; j++){
					//console.log("---->"+arr[j]);
					//判断两个元素的值是否相等
					if(arr[i] == arr[j]){
						//如果相等则证明出现了重复的元素，则删除j对应的元素
						arr.splice(j,1);
						//当删除了当前j所在的元素以后，后边的元素会自动补位
						//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
						//使j自减
						j--;
					}
				}
			}
			
			console.log(arr);
	
		</script>

函数的方法

call();和apply();

  • 这两个方法都是函数对象的方法，需要通过函数对象来调用
  • 当对函数调用call();和apply();都会调用函数执行
  • 在调用call();和apply();可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
  • call();方法可以将实参在对象之后依次传递
  • apply();方法需要将实参封装到数组中统一传递
<script type="text/javascript">
			function fun(a,b){
				console.log("a="+a);
				console.log("a="+b);

			}
			
			var obj = {
				name:"obj",
				sayName:function(){
					alert(this.name);
				}
			};
			
			fun.call(obj,2,3);
			fun.apply(obj,[2,3]);
			
		</script>

this的情况

  1. 以函数的形式调用时，this永远都是window
  2. 以方法的形式调用时，this是调用方法的对象
  3. 以构造函数的形式调用时，this是新创建的那个对象
  4. 使用call和apply方法调用时，this是指定的那个对象
<script type="text/javascript">
			function fun(){				
				alert(this);
			}
			
			var obj = {
				name:"obj",
				sayName:function(){
					alert(this.name);
				}
			};
			
			var obj2 = {
				name:"obj2"
			};
			fun.call();//Object
			fun.apply();//Object
			fun();//window
			obj.sayName.apply(obj2);//obj2
		</script>

arguments

  1. 在调用函数时，浏览器每次都会传递进两个隐含的参数：
    ①函数上下文对象this
    ②封装实参的对象arguments
  2. arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度。
  3. 在调用函数时，我们所传递的实参都会在arguments中保存
  4. arguments.length可以用来获取实参的长度
  5. 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
    arguments[0]表示第一个实参
    arguments[1]表示第二个实参
  6. 它里面有一个属性callee，这个属性对应一个函数对象，就是当前正在指向的函数对象。
<script type="text/javascript">
		
			function fun(){
				console.log(arguments.length);
				console.log(arguments[1]);
				console.log(arguments.callee == fun);//true
			}
			fun("hello",true);
			
		</script>

Date对象

在JS中使用Date对象来表示一个时间
①创建一个Date对象
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

var d = new Date();

②创建一个指定的时间对象
需要在构造函数中传递一个表示时间的字符串作为参数
日期的格式：月份/日/年 时:分:秒

var d2 = new Date("12/03/2016 11:10:30");

方法

①getDate();
获取当前日期对象是几日

var date = d2.getDate();

②getDay();
获取当前日期对象时周几，会返回一个0-6的值
0 表示周日
1表示周一
……

var day = d2.getDay();

③getMonth();
获取当前时间对象的月份，会返回一个0-11的值
0 表示1月
1 表示2月
……
11 表示12月

var month = d2.getMonth();

④getFullYear();
获取当前日期对象的年份

var year = d2.getFullYear();

⑤getTime();
获取当前日期对象的时间戳

  • 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒，到当前日期所花费的毫秒数（1秒 = 1000毫秒）
  • 计算机底层在保存时间时使用都是时间戳
<script type="text/javascript">
			
			//利用时间戳来测试代码的执行的性能
			//获取当前的时间戳
			var start = Date.now();
			
			for(var i=0 ; i<100 ; i++){
				console.log(i);
			}
			//获取当前的时间戳
			var end = Date.now();
			
			console.log("执行了："+(end - start)+"毫秒");
			
		</script>

Math

Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性和方法
如： Math.PI表示圆周率

① Math.abs()可以用来计算一个数的绝对值
②Math.ceil()可以对一个数进行向上取整，小数位只要有值就自动进1
③Math.floor()可以对一个数进行向下取整，小数部分会被舍掉
④Math.round()可以对一个数进行四舍五入取整

⑤Math.random()可以用来生成一个0-1之间的随机数

  • 生成一个0-x之间的随机数：
    Math.round(Math.random()*x)
  • 生成一个x-y之间的随机数：
    Math.round(Math.random()*(y-x)+x)
for(var i=0 ; i<100 ; i++){
				
		//生成1-6之间的随机数
		console.log(Math.round(Math.random()*5+1));
}

⑥Math.max()可以获取多个数中的最大值
Math.min()可以获取多个数中的最小值

var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);

⑦Math.pow(x,y)返回x的y次幂
⑧ Math.sqrt()用于对一个数进行开方运算

包装类

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象。

  • String() 可以将基本数据类型字符串转换为String类型对象
  • Number()可以将基本数据类型的数字转换为Number类型对象
  • Boolean()可以将基本数据类型的布尔值转换为Boolean类型对象

但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果。

	<script type="text/javascript">
			
			var num = new Number(3);
			console.log(typeof num);//object
			var str = new String("hello");
			console.log(typeof str);//object
			var bool = new Boolean(true);
			console.log(typeof bool);//object
			
		</script>

方法和属性只能添加给对象，不能添加给基本数据类型。
当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法。调用完以后，在将其转换为基本数据类型。

	<script type="text/javascript">
			var s = 123;		
			s = s.toString();
			s.hello = "你好";
			
			console.log(s.hello);//undefined
		</script>

字符串的方法

在底层字符串是以字符数组的形式保存的
如：“hello” 底层字符串是 ["h","e","l","l","o"]
length属性 可以用来获取字符串的长度

①charAt()

  • 可以返回字符串指定位置的字符
  • 根据索引获取指定的字符
	<script type="text/javascript">

			var str = "hello hello";
	
			var result = str.charAt(0);
			console.log(result);//h
	
		</script>

②charCodeAt()获取指定位置字符的字符编码（Unicode编码）

	<script type="text/javascript">

			var str = "hello hello";
		
			var result = str.charCodeAt(0);
			console.log(result);//104
		
		</script>

③String.formCharCode()可以根据字符编码去获取字符

<script type="text/javascript">

			var result = String.fromCharCode(74);
			console.log(result);//J
		
		</script>

④concat()

  • 可以用来连接两个或多个字符串
  • 作用和+一样
<script type="text/javascript">

			var str = "hello hello";
			var result = str.concat("你好","再见");
			console.log(result);//hello hello你好再见
		</script>

⑤indexOf()

  • 该方法可以检索一个字符串是否含有指定内容
  • 如果字符串中含有该内容，则会返回其第一次出现的索引；如果没有找到指定的内容则返回-1
  • 可以指定第二个参数，表示指定开始查找的位置

lastIndexOf()

  • 该方法的用法和indexOf()一样，不同的是indexOf()是从前往后找，而lastIndexOf()是从后往前找
  • 可以指定第二个参数，表示指定开始查找的位置
<script type="text/javascript">

			var str = "hello hello";
			var result = str.indexOf("h",1);
			result = str.lastIndexOf("h");
			console.log(result);
		</script>

⑥slice()

  • 可以从字符串中截取指定的内容

  • 不会影响原字符串，而是将截取到内容返回

  • 参数：
    第一个，开始位置的索引（包括开始位置）
    第二个，结束位置的索引（不包括结束位置）

    如果省略第二个参数，则会截取到后边所有的
    也可以传递一个负数作为参数，负数的话将会从后边计算。

<script type="text/javascript">

			var str = "abcdefghijk";
			
			var result = str.slice(1,4);
			console.log(result);//bcd
			
			result = str.slice(1,-1);
			console.log(result);//bcdefghij
		</script>

⑦substring()

  • 可以用来截取一个字符串，可以slice()类似
  • 参数：
    第一个：开始截取位置的索引（包括开始位置）
    第二个：结束位置的索引（不包括结束位置）
  • 不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0
  • 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换

⑧substr()

  • 用来截取字符串
  • 参数：
    第一个参数，表示截取开始位置的索引
    第二个参数，表示截取的长度
		<script type="text/javascript">

			var str = "abcdefg";
			var result = str.substr(3,2);
			console.log(result);//de
			
		</script>

⑨split()

  • 可以将一个字符串拆分为一个数组
  • 参数：
    需要一个字符串作为参数，将会根据该字符串去拆分数组
	<script type="text/javascript">

			var str = "abc,bcd,efg,hij";
			
			var result = str.split(",");
			console.log(result[0]);//abc
			
		</script>

如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

<script type="text/javascript">

			var str = "abcbcdefghij";
			var result = str.split("");
			console.log(result);
			
		</script>

⑩toUpperCase()将一个字符串转换为大写并返回
toLowerCase()将一个字符串转换为小写并返回

	<script type="text/javascript">

			var str = "ABCDEFG";
			var result = str.toLowerCase();		
			console.log(result);
			
		</script>

正则表达式

用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。

  1. 创建正则表达式的对象
    语法：
    var 变量 = new RegExp("正则表达式","匹配模式");
    使用typeof检查正则对象，会返回object

    var reg = new RegExp("a");这个正则表达式可以用来检测一个字符串中是否含有a

    在构造函数中可以传递一个匹配模式作为第二个参数，可以是 ：
    i ：忽略大小写
    g ：全局匹配模式

  2. 正则表达式的方法：
    test()使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false

<script type="text/javascript">
			var reg = new RegExp("a","i");		
			var str = "a";
			var result = reg.test(str);
	
			console.log(reg.test("abcAsf"));//true
			console.log(result);//true
		</script>
  1. 使用字面量来创建正则表达式
    语法：
    var 变量 = /正则表达式/匹配模式
var reg = new RegExp("a",'i');

相当于：

var reg = /a/i;

  1. 创建一个正则表达式，检查一个字符串中是否有a或b

    使用 | 表示或者的意思

	<script type="text/javascript">
			
			var reg = /a|b/;
			console.log(reg.test("bcd"));//true
			
		</script>
  1. []里面的内容也是或的关系
    [ab] == a|b
含义
[a-z]任意的小写字母
[A-Z]任意的大写字母
[A-z]任意字母
[0-9]任意数字
[^ ]除了

检查一个字符串中是否含有 abc 或 adc 或 aec

<script type="text/javascript">

			var reg = /a[bde]c/;
			
			console.log(reg.test("abcde"));//true
		</script>

注意：

<script type="text/javascript">

			var reg = /[^0-9]/;//除了数字
			
			console.log(reg.test("12a3456"));//true
		</script>

字符串与正则表达式的相关方法

①split()

  • 可以将一个字符串拆分为一个数组
  • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
  • 这个方法即使不指定全局匹配，也会全都拆分
<script type="text/javascript">

			var str = "1a2b3c4d5e6f7";		
			var result = str.split(/[A-z]/);
			console.log(result);//1,2,3,4,5,6,7
	
		</script>

②search()

  • 可以搜索字符串中是否含有指定内容
  • 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
  • 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
  • serach()只会查找第一个，即使设置全局匹配也没用

示例：搜索字符串中是否含有abc 或 aec 或 afc

<script type="text/javascript">

			var str = "hello abc hello aec afc";			
			var result = str.search(/a[bef]c/);
			console.log(result);//6
	
		</script>

③match()

  • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
  • 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索。我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
  • match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
<script type="text/javascript">

			var str = "1a2b3c4a5e6f7A8B9C";
			
			var result = str.match(/[a-z]/ig);
			
			console.log(result[2]);//c
	
		</script>

④replace()

  • 可以将字符串中指定内容替换为新的内容
  • 参数：
    第一个参数， 被替换的内容，可以接受一个正则表达式作为参数
    第二个参数， 新的内容
    默认只会替换第一个
<script type="text/javascript">

			var str = "1a2b3c4a5e6f7A8B9C";		
			var result = str.replace(/[a-z]/gi , "");	
			console.log(result);//123456789
			
		</script>

正则表达式量词

通过量词可以设置一个内容出现的次数

  • 量词只对{}前的一个内容起作用
含义
{n}正好出现n次
{m,n}出现m到n次
{m,}出现m次以上
+表示至少一个，相当于{1,}
*表示0个或多个，相当于{0,}
?表示0个或1个，相当于{0,1}
^表示开头
$表示结尾
<script type="text/javascript">

			var reg = /a{3}/;
			console.log(reg.test("aaabc"));//true
			
			reg = /ab{3}/;
			console.log(reg.test("ababab"));//false
			console.log(reg.test("abbb"));//true
			
			reg = /(ab){3}/;
			console.log(reg.test("ababab"));//true
			
//			+ 表示至少一个，相当于{1,}
			reg = /ab+c/;
			console.log(reg.test("abbc"));//true
			
//			* 表示0个或多个，相当于{0,}
			reg = /ab*c/;
			console.log(reg.test("ac"));//true
			
//			?表示0个或1个，相当于{0,1}
			reg = /ab?c/;
			console.log(reg.test("ac"));//true
			console.log(reg.test("abc"));//true
			
			/*
			 * 检查一个字符串是否以a开头
			 * ^表示开头
			 * $表示结尾
			 */
			reg = /^a/;//匹配开头的a
			console.log(reg.test("ac"));//true
			
			reg = /a$/;//匹配结尾的a
			console.log(reg.test("cbdfa"));//true
			
	
	</script>

注意： 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式

<script type="text/javascript">

			var reg = /^a$/;
			
			console.log(reg.test("abca"));//false
			console.log(reg.test("a"));//true
		</script>

示例：创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
手机号的规则：1 3 567890123 （11位）
1. 以1开头
2. 第二位3-9任意数字
3. 三位以后任意数字9个
^1 [3-9] [0-9]{9}$

<script type="text/javascript">

			var phoneStr = "13670890123";
			
			var phoneReg = /^1[3-9][0-9]{9}$/;
			
			console.log(phoneReg.test(phoneStr));//true
		</script>

正则表达式语法

.表示任意字符
在正则表达式中使用\作为转义字符
\.来表示.
\\ 表示\

示例：检查一个字符串中是否含有.

	<script type="text/javascript">

			//. 表示任意字符
			var reg = /./;
			console.log(reg.test("abc"));//true
			
			reg = /\./;
			console.log(reg.test("abc."));//true
			
			reg = /\\/;
			console.log(reg.test("abc\\"));//true
			
		</script>

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替

reg = new RegExp("\\.");  //reg = /\./;
reg = new RegExp("\\\\");  //reg = /\\/;
含义
\w任意字母、数字、_ [A-z0-9_]
\W除了字母、数字、_ [^A-z0-9_]
\d任意的数字 [0-9]
\D除了数字 [^0-9]
\s空格
\S除了空格
\b单词边界
\B除了单词边界

示例：创建一个正则表达式检查一个字符串中是否含有单词child

<script type="text/javascript">

			var reg = /child/;
			
			console.log(reg.test("hello children"));//true
			
			reg = /\bchild\b/;
			console.log(reg.test("hello children"));//false
			
			reg = /\bchild\b/;
			console.log(reg.test("hello child"));//true
			
		</script>

示例：

<script type="text/javascript">

			var str = "           he      llo         ";
			//去除开头的空格
			//str = str.replace(/^\s*/, "");
			//去除结尾的空格
			//str = str.replace(/\s*$/, "");
			
			// /^\s*|\s*$/g 匹配开头和结尾的空格
			str = str.replace(/^\s*|\s*$/g,"");
			
			console.log(str);
			
		</script>

邮件正则

<script type="text/javascript">
			/*
			 * 电子邮件
			 * 	hello  .nihao          @     abc  .com.cn
			 * 
			 * 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
			 * 
			 * \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}
			 */
			
			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			
			var email = "abc.hello@163.com";
			
			console.log(emailReg.test(email));
		</script>
Cherry_Zj
关注
专栏目录
JavaScript基础学习
07-10
JavaScript基础学习
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
js数组常用方法
weixin_46385734的博客
03-23 159
JS数组的常用方法 首先给大家介绍一下什么是数组,数组，是可以存储着一些任意类型或者相同类型数据的集合,简单来说就是一组数据的集合。 如：[1, 2, 3, ‘hello’, true, false] 数组的创建： var arr =new Array(); var arr =[]; 或者 var arr =new Array(‘李易峰’,‘宝宝’,‘666’,true); var arr =[‘...
JS 数组按指定长度切割，返回一个新的数组集合，比如按照3的倍数切割，返回结果为每三个一组
王海虎的博客
10-29 9498
let data = [ {name:'小赵',value:'12'}, {name:'小钱',value:'12'}, {name:'小孙',value:'12'}, {name:'小李',value:'12'}, {name:'小周',value:'12'}, {name:'小吴',value:'12'}, {name:'小郑',val...
Javascript 基础知识学习
岳来的博客
11-23 7330
javascript 基础学习
JavaScript学习（基础）
m0_49034593的博客
08-19 1316
js基础
05 JavaScript学习：语法
百锦再的博客
04-19 6万+
在 JavaScript 中，变量定义是指声明一个变量并为其分配一个值。varlet和const。varvar是 JavaScript 最早引入的声明变量的关键字。使用var声明的变量具有函数作用域，而不是块级作用域。var x = 10;// 使用 var 定义变量 xletlet是 ES6（ECMAScript 2015）引入的声明变量的关键字。使用let声明的变量具有块级作用域，只在声明的块内部有效。let y = 20;// 使用 let 定义变量 yconstconst。
针对后端开发者的JavaScript基础学习
XIAO_yux的博客
08-07 1485
黑马程序员课程学习笔记
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 2万+
JavaScript基础入门详细总结
17 JavaScript 学习：正则表达式
百锦再的博客
04-26 8万+
正则表达式模式指的是正则表达式中用于匹配文本的部分，也就是描述要匹配的规则和模式的部分。正则表达式模式由普通字符（例如字母、数字、符号等）和元字符（具有特殊含义的字符）组成，通过这些字符的组合，可以定义出各种复杂的匹配规则。使用这些元字符的组合，可以构建出各种复杂的匹配规则，从简单的匹配数字、字母，到复杂的匹配邮箱地址、URL等。在 JavaScript 的正则表达式中，修饰符通常直接跟在正则表达式的后面，例如。正则表达式中的修饰符是指在正则表达式之后添加的字符，用于指定匹配规则的一些特性。
08 JavaScript学习：数据类型
百锦再的博客
04-20 7万+
由于 JavaScript 是动态类型的语言，变量的数据类型可以随时改变，这使得 JavaScript 在某些情况下更加灵活，但也可能导致一些类型错误。动态类型的特性使得 JavaScript 在编写代码时更加灵活，但也需要开发人员注意变量的数据类型，以避免潜在的类型错误。JavaScript 中的对象是非常灵活和强大的数据结构，可以用来表示复杂的数据关系和结构。通过对象的属性和方法，可以实现丰富的功能和逻辑。在 JavaScript 中，变量的数据类型是在运行时确定的，而不是在编译时确定的。
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
HTML CSS and Javascript 基础学习代码.zip
12-30
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 ...
如何搭建Vue脚手架
w6437286的博客
09-26 476
本文主要讲解如何搭建vue脚手架。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 693
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 445
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
最新发布
ZxVSaccount的博客
09-30 819
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值