网络安全之web基础js（中篇）（基础入门）

目录

一，数组

1，数组的定义：

2，通过索引值更改里面的数据

二，常用的属性和方法

【1】length属性

【2】push和pop方法

【3】unshift和shift方法

【4】join和reverse方法

【5】 indexOf和includes方法

【6】slice和splice方法

三，字符串属性与方法

【1】length

【2】indexOf和lastIndexOf方法

【3】search与split方法

【4】substring和substr方法

四，JSON

五，正则表达式

1、修饰符和边界符

【1】修饰符：

【2】边界符：

3，预定义类

4，量词

5，正则字符分组和正则中文匹配

【1】正则字符分组

【2】正则中文匹配

6、字符串方法结合正则

【1】split

【2】match

【3】search

【4】replace

【5】exec

【6】test

【7】字符集合用法

1，普通类

2，范围类

3，组合类

---

一，数组

数组可以理解为一个大箱子把数据按顺序装在这个箱子里面，js中的数组用中括号表示。

1，数组的定义：

【1】一维数组

		<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	 console.log(a[0],a[1],a[2],a[3]);//引用从0编号开始
	var b=["good","boy"];
	console.log(b[0],b[1]);
	var c=['1','2','3'];
	console.log(c[0],c[1],c[2]);
		</script>

结果：

【2】二维数组

		<script type="text/javascript">
	var a=[[1,2,3],[5,6,7]];//元素可以是任意类型的
	console.log(a[1][0]);//1为行标，0为列标
		</script>

结果（第二行第一列是5）：

2，通过索引值更改里面的数据

【1】一维数值

		<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
    a[0]=2;
	a[1]="hello";
	a[2]="boy";
	console.log(a[0],a[1],a[2],a[3]);
		</script>

结果：

【2】二维数组

<script type="text/javascript">
	var a=[[1,2,3],[4,5,6]];//元素可以是任意类型的
	a[0][0]="hello";
	a[1][0]="boy";
	console.log(a);
	</script>

结果：

二，常用的属性和方法

【1】length属性

		<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	console.log(a.length);//length用于计算数组元素的个数
		</script>

结果：

【2】push和pop方法

1，push：向数组尾部添加一个或多个元素

		<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	a.push(5,6);
	console.log(a);
		</script>

结果：

2，pop：从数组尾部移除一个元素（一次只能移除一个）

		<script type="text/javascript">
     	var a=[1,2,3,4];//元素可以是任意类型的
     	a.pop();
    	console.log(a);
		</script>

结果：

【3】unshift和shift方法

1，unshitf：在数组头部添加一个或多个元素

	<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	a.unshift(-1,0);
	console.log(a);
	</script>

结果：

2，shift：移除数组的第一个元素（一次只能移除一个）

	<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	a.shift();
	console.log(a);
	</script>

结果：

【4】join和reverse方法

1，join：通过一个字符将数组拼成字符串

	<script type="text/javascript">
	var a=[1,2,3,4];//元素可以是任意类型的
	var b=a.join('+');
	console.log(b);
	var b=a.join('');
	console.log(b);	
	</script>

结果：

2，reverse：将数组倒置（123变321）

	<script type="text/javascript">
	var a=[1,2,3];//元素可以是任意类型的
	console.log(a);
	var b=a.reverse();
	console.log(b);
	</script>

结果：

【5】 indexOf和includes方法

1，indexOf：在数组中找字符，找到就返回索引值，没找到就返回-1

	<script type="text/javascript">
	var a=[1,2,3];//元素可以是任意类型的
	var b=a.indexOf(3);
	console.log(b);
	var b=a.indexOf(4);
	console.log(b);
	</script>

结果：

2，includes：检查字符是不是数组的元素，是为true，不是为false

	<script type="text/javascript">
	var a=[1,2,3];//元素可以是任意类型的
	var b=a.includes(3);
	console.log(b);
	var b=a.includes(4);
	console.log(b);
	</script>

结果：

【6】slice和splice方法

1，slice：从数组中切割一个子数组出来（对原数组没影响）

	<script type="text/javascript">
	var a=["one","two","three","four","five","six","seven"];//元素可以是任意类型的
	var b=a.slice(3);//a.slice(开始切的位置（包括开始的位置）)
	console.log(b);
    var b=a.slice(3,6);//a.slice(开始切的位置，结束位置不包括结束的位置)
	 console.log(b);
     console.log(a);
	</script>

结果：

2，splice：对数组进行切割、替换、插入（对原数组有影响）

	<script type="text/javascript">
	var a=["one","two","three","four"];
	//切割
	var b=a.splice(1);//a.slice(开始切的位置（包括开始的位置）)
	 console.log(b);
	 console.log(a);//对原数组造成了影响
	 
	 var a=["one","two","three","four"];
	 var b=a.splice(2,3);//a.splice(开始切的位置，结束位置包括结束的位置)
	 console.log(b);
	 console.log(a);//对原数组造成了影响
	 //替换
	 var a=["one","two","three","four"];
	 var b=a.splice(2,1,"replace");//a.splice(开始的位置，切割的个数，"替换的字符")
	 console.log(b);
	 console.log(a);
	 //插入
	 var a=["one","two","three","four"];
	 var b=a.splice(2,0,"insert");//a.splice(开始的位置，切割的个数，"插入的字符")
	 console.log(b);
	 console.log(a);
	</script>

结果：

三，字符串属性与方法

【1】length

1，length返回字符的个数

	<script type="text/javascript">
    var a="123456";
    console.log(a.length);
	</script>

结果：

【2】indexOf和lastIndexOf方法

1，indexOf：返回字符第一次出现的位置，没找到就是-1

	<script type="text/javascript">
    var a="123456";
    console.log(a.indexOf('2'));
	</script>

结果：

2，lastIndexOf：返回字符最后一次出现的位置，没找到就是-1

	<script type="text/javascript">
    var a="123452";
    console.log(a.lastIndexOf('2'));
	</script>

结果：

【3】toLowerCase与toUpperCase

1，toLowerCase：把大写英文转换成小写英文

	<script type="text/javascript">
    var a="ABCDEF";
    console.log(a.toLowerCase());
	</script>

结果：

2，toUpperCase：将小写英文转换成大写英文

	<script type="text/javascript">
    var a="abcdef";
    console.log(a.toUpperCase());
	</script>

结果：

【3】search与split方法

1，search从字符串中查找字符并返回位置

	<script type="text/javascript">
    var a="abcdef";
    console.log(a.search('b'));
	</script>

结果：

2，split：通过一个字符将字符串切割为数组

	<script type="text/javascript">
    var a="a+b+c+d+e+f";
    console.log(a.split('+'));
	var a="abcdef"
	console.log(a.split(''));
	</script>

结果：

【4】substring和substr方法

1，substring：从字符串中切割一个子串出来

	<script type="text/javascript">
    var a="大家好我是狗哥";
	console.log(a);
    console.log(a.substring(5,7));//a.substring(开始切的位置，结束的位置（不包括）)
	</script>

结果：

2，substr：从字符串中切割一个子串出来

	<script type="text/javascript">
    var a="大家好我是狗哥";
	console.log(a);
    console.log(a.substr(3,4));//a.substr(开始切的位置，切的个数)
	</script>

结果：

【5】replace与match方法

1，replace：替换字符串中的子串

	<script type="text/javascript">
    var a="大家好我是狗哥";
	console.log(a);
    console.log(a.replace("哥","蛋"));//a.replace("被替换的数"，"替换为的数")
	</script>

结果：

2，match：找到字符串中的子串并以数组的形式返回

	<script type="text/javascript">
    var a="大家好我是狗哥";
	console.log(a);
    console.log(a.match("狗哥"));//a.match("要找的数")
	</script>

结果：

四，JSON

全称（JavaScript Object Notation）是一种轻量级的数据交换格式，用于前端和后台的数据交互，通过“K”:V对数据进行写入、读取、修改、增加。

【1】基本格式

	<script type="text/javascript">
//写入
    var a={"name":"狗哥","age":19,"hobby":"hack"};
//读取
	console.log(a["name"],a["age"],a["hobby"]);
//修改
	a["name"]="狗蛋";
	console.log(a["name"]);
//增加
	a["address"]="China";
	console.log(a["address"]);
	</script>

这里a["k"]等价于a.k哈一样的，把这些替换成a.k形式的也可以

结果：

五，正则表达式

正则表达式（regular expression）是用于匹配字符串的一种模式、方法；格式：/正则符号/

1、修饰符和边界符

【1】修饰符：

g：全局匹配（顾名思义是都找完，不是只找到第一个就不找了）

<script type="text/javascript">
	var a="abcad";
    var c=a.match(/\a/g);match是匹配一个就不匹配了但是因为这里有g所以a都匹配出来了
	console.log(c);
</script>

结果：

i：不区分大小写

<script type="text/javascript">
	var a="abAcadA";
    var c=a.match(/\a/gi);//g全局匹配a又因为有i所以不区分大小写
	console.log(c);
</script>

结果： 

【2】边界符：

^：是以某个字符开头

<script type="text/javascript">
	var a="goudan is good boy";
	var b=/^goudan/;
	console.log(b.test(a));//看a字符串是不是以b字符串开头的，是为true，否为false
</script>

结果：

3，预定义类

\d	:匹配任意数字字符
\D	:匹配任意不是数字的字符
\s	:匹配任意空白符（如空格）
\S	:匹配任意不是空白符的符号
\w	:匹配任意字母，数字，下划线字符
\W	:匹配任意不是字母，数字，下划线的字符

4，量词

{n}:出现0次或n次

{n,}:至少出现n次

{n,m}:至少出现n次不超过m次

?:出现一次或者0次

*:出现任意次

+:至少出现一次可以是多次、

例如： 

5，正则字符分组和正则中文匹配

【1】正则字符分组

<script type="text/javascript">
	var a="eageag";
	console.log(/(eag){2}/.test(a));
</script>

结果：

【2】正则中文匹配

\u4e00-\u9fa5 是一个Unicode字符范围，它表示的是中文字符的基本编码区间。这个区间包含了常用的汉字、标点符号和一些其他的中文字符

<script type="text/javascript">
	var a="我分分钟上百万";
	//最少出现2个中文
	console.log(/[\u4e00-\u9fa5]{2}/.test(a));
</script>

结果：

 

6、字符串方法结合正则

【1】split

通过一个字符将字符串切割为数组

<script type="text/javascript">
	var a="badacae";
	var b=a.split(/a/);//通过a字符切割数组
 	console.log(b);
</script>

解释：正则中/a/意思是a字符，相当于slipt通过字符a来切割

效果：

【2】match

匹配字符，以数组的方式返回匹配的结果

<script type="text/javascript">
	var a="aabaabaab";
	console.log(a.match(/b/g));//g是全局匹配的意思
</script>

结果：

【3】search

寻找给定的字符并返回找到的位置

<script type="text/javascript">
	var a="aabaabaab";
	console.log(a.search(/b/g));//这里的g对search没有用，找到第一个就立即返回
</script>

结果：

 

【4】replace

替换字符方法

<script type="text/javascript">
	var a="aabaabaab";
	//将a字符串中的'b'字符都替换成o字符
	console.log(a.replace(/b/g,'o'));
</script>

结果：

【5】exec

去给定的字符串中去匹配字符，并把匹配结果以数组形式返回

<script type="text/javascript">
	var a="abcddabc";
	b=/abc/;
	console.log(b.exec(a));//去a字符串中去找b字符串
</script>

结果：

【6】test

去字符串中查找指定的字符找到返回true否则返回false

	<script type="text/javascript">
		var a="abcddabc";
		b=/abc/;
		console.log(b.test(a));
	</script>

结果：

【7】字符集合用法

1，普通类

	<script type="text/javascript">
		var a="ac狗蛋bc分钟abc";
		//[ab]c意思是a或b跟c进行匹配
		console.log(a.match(/[ab]c/g));
	</script>

结果：

2，范围类

	<script type="text/javascript">
		var a="ac狗蛋bc分钟ab8c";
//[a-z]是a字符到z字符中的任意一个字符和c字符进行匹配
		console.log(a.match(/[a-z]c/g));
	</script>

结果：

3，组合类

	<script type="text/javascript">
		var a="ac狗蛋bc分钟ab8c";
		//意思是匹配连续的数字和英文
		console.log(a.match(/[0-9a-z]+/g));
	</script>

结果：

以上就是我的学习笔记了，谢谢大家的观看！！