第四章

Posted 2020-09-01 CafeMing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第四章相关的知识，希望对你有一定的参考价值。

1.字符串操作方法

1.charAt

* 作用

* 通过索引找字符

* 语法

* 字符串.charAt(index)

* 参数

* 索引值

* 取值范围：0-(length-1)

* 如果不写参数，那默认为0

* 如果index超出了范围后，它会返回一个空

* 返回值

* 返回取到的那个字符，类型为字符串

			var str=‘kaivon‘;
			
			var s1=str.charAt(1);
			console.log(s1);		//a
			
			var s2=str.charAt();
			console.log(s2);		//k
			
			var s3=str.charAt(10);
			console.log(s3);		//空

2.charCodeAt

* 作用

* 通过索引找字符，找到后转为Unicode编码

* 语法

* 字符串.charCodeAt(index)

* 参数

* 索引

* 取值范围：0-length-1

* 没有参数，默认为第0个

* 如果参数超过了范围，那它就返回NaN

* 返回值

* 返回字符对应的Unicode编码

			var str=‘kaivon‘;
			var s1=str.charCodeAt(1);
			console.log(s1);		//97
			
			var s2=str.charCodeAt();
			console.log(s2);		//107
			
			var s3=str.charCodeAt(10);
			console.log(s3);		//NaN

3.indexOf

* 作用

* 通过字符找下标（从左往右找这个字符首次出现的位置）

* 语法

* 字符串.indexOf(searchValue,fromIndex)

* 参数

* searchValue 要查找的字符

* fromIndex 从哪个位置开始查找，这个参数如果没有默认为0

* 返回值

* 返回一个数字，这个数字代表字符在整个字符串里的真实下标，如果没找到的话就返回-1

			var str=‘kaivaokn‘;
			var s1=str.indexOf(‘a‘);
			console.log(s1);			//1
			
			var s2=str.indexOf(‘k‘,1);
			console.log(s2);			//6
			
			var s3=str.indexOf(‘b‘);
			console.log(s3);			//-1

4.lastIndexOf

* 作用

* 通过字符找下标（从右往左找字符最后出现的位置）

* 语法

* 字符串.lastIndexOf(searchValue,formIndex)

* 参数

* searchValue 要查找的字符串

* formIndex 从哪开始查找，如果没有的话，默认从最后一个字符开始

* 返回值

* 返回一个数字，如果找到的话就返回这个字符的真实下标，如果没找到返回-1

			var str=‘kaivokn‘;
			var s1=str.lastIndexOf(‘a‘);
			console.log(s1);				//1
			
			var s2=str.lastIndexOf(‘k‘,5);
			console.log(s2);				//5
			
			var s3=str.lastIndexOf(‘b‘);
			console.log(s3);				//-1

5.slice

* 作用

* 截取字符串

* 语法

* 字符串.slice(beginSlice,endSlice)

* 参数

* beginSlice 开始的位置

* endSlice 结束的位置

* 如果一个参数都没有的话，直接返回整个字符串

* 如果只有一个参数，代表开始的位置，那结束的位置默认为最后一位字符

* 如果有两个参数，第二个参数为结束位置，但是不包含它

* 参数可以放负数，但是开始位置不能大于结束位置

* 开始的位置是最后一位，代表-1

* 返回值

* 返回截取到的那个字符串，原字符串没有变化

区别：

substring的作用与slice的作用一样，只是参数有区别。

             * 与slice的区别
             *     1、slice起始位置不能大于结束位置，而substring起始位置可以大于结束位置 (会自动调大小)
             *     2、slice可以放负数，而substring是不能放负数的

			var str=‘kaiovn‘;
			var s1=str.slice();
			console.log(s1);		//kaiovn
			
			var s2=str.slice(3);
			console.log(s2);		//ovn
			
			var s3=str.slice(2,4);
			console.log(s3);		//io
			
			var s4=str.slice(-3,-2);
			console.log(s4);		//o
			
			console.log(str);	//kaiovn

6.split

* 作用

* 用指定的分隔符把字符串分隔成数组

* 语法

* 字符串.split(separator,limit)

* 参数

* separator 分隔符

* limit 分隔成数组数据的个数

* 一个参数都没有以及参数是一个空格字符的话，会把整个字符串作为数组中的一个数据

* 如果参数为一个空字符，它会把字符串里的每个字符做为数组中的数据

* 如果参数为两个，分隔后的数组的个数第二个参数的值

* 返回值

* 返回一个数组，原字符串没有变化

			var str=‘kaivon‘;
			var s1=str.split();
			console.log(s1);		//["kaivon"]
			
			var s2=str.split(‘‘);
			console.log(s2);		//["k", "a", "i", "v", "o", "n"]
			
			var s3=str.split(‘ ‘);
			console.log(s3);		//["kaivon"]
			
			var s4=str.split(‘a‘);
			console.log(s4);		//["k", "ivon"]
			
			var s5=str.split(‘i‘,1);
			console.log(s5);		//["ka"]
			
			console.log(str);	//kaivon

7.substr

* 作用

* 截取一段指定开始位置与个数的字符串

* 语法

* 字符串.substr(start,length)

* 参数

* start 开始的位置

* length 截取的个数

* 一个参数都没有，它会把整个字符串全部返回

* 如果有一个参数，那默认会从第一个参数的位置截到最后一位字符

* 返回值

* 返回截取到的字符串，原字符串不变

			var str=‘kaivon‘;
			var s1=str.substr();
			console.log(s1);		//kaivon
			
			var s2=str.substr(2);
			console.log(s2);		//ivon
			
			var s3=str.substr(3,2);
			console.log(s3);		//vo
			
			console.log(str);	//kaivon

8.toLowerCase

* 作用

* 把字符串转成小写

* 语法

* 字符串.toLowerCase()

* 参数

* 没有参数

* 返回值

* 返回字符串转成小写的结果，原来的字符串不有变化

			var str=‘KaiVoN‘;
			var s1=str.toLowerCase();
			console.log(s1);			//kaivon
			
			console.log(str);		//KaiVoN

9.toUpperCase

* 作用

* 把字符串转成大写

* 语法

* 字符串.toUpperCase()

* 参数

* 没有参数

* 返回值

* 返回字符串转成大写的结果，原字符串不变

			var str=‘kaivon‘;
			var s1=str.toUpperCase();
			console.log(s1);		//KAIVON
			console.log(str);	//kaivon

10.trim

* 作用

* 去掉字符串的首发空格

* 语法

* 字符串.trim()

* 参数

* 没有参数

* 返回值

* 返回字符串去掉首尾空格的结果，原字符串不变

			var str=‘    kaivon     ‘;
			var s1=str.trim();
			console.log(s1);		//kaivon
			console.log(str);		//    kaivon

2.JSON

* JSON(javascript Object Notation) 是一种轻量级的数据交换格式

* 一种类似JS中的对象格式的字符串(JSON它是一个字符串，只不过内容长得像对象)

JSON规则

* 数据放在了一对引号当中(可以是单引号，也可以是双)引号嵌套问题，如果外面单引号里面就用双引号，用{}或者[]括起来

* 里面的每个数据都以键值对来表示 key:value

* key必需放双引号

* 每个数据之间用逗号隔开

JSON的用途

用于js与后端进行数据交互

			var j1="[1,2,3]";
			var j2=‘{"name":"老王","age":30}‘;
			
			console.log(j1,typeof j1);		//[1,2,3] string
			console.log(j2,typeof j2);		//{"name":"老王","age":30} string

1.JSON.parse()

* JSON.parse(json字符串)

* 把一个JSON格式的字符串转成对象，返回转过后的对象

			var j1="[1,2,3]";
			var j2=‘{"name":"老王","age":30}‘;
			
			
			var obj1=JSON.parse(j1);
			console.log(obj1,typeof obj1);		//[1, 2, 3]		"object"
			
			var obj2=JSON.parse(j2);
			console.log(obj2,typeof obj2);		//{name: "老王", age: 30} "object"
			
			var j3=‘{name:"kaivon"}‘;
			var obj3=JSON.parse(j3);		//报错	key没有加引号
			
			var j4=‘[‘aow‘,‘shw‘,‘dwn‘]‘;  
			console.log(JOSN.parse(j4));   //报错   因为元素只是单引号，需要改成双引号

2.JSON.stringify()

* JSON.stringify(对象)

* 把一个对象转换成JSON格式的字符串

* 如果对象当中的key没有加引号，也可以转换，转换后的结果会自动给它加上引号

			var obj1=[1,2,3];
			var obj2={"name":‘老王‘,"age":30};
			var obj3={name:‘老王‘,"age":30};
			var obj4=[‘ad‘,‘gf‘,‘fsd‘];
			console.log(JSON.stringify(obj4));  // ["ad","gf","fsd"]
			
			var s1=JSON.stringify(obj1);
			console.log(s1);			//[1,2,3]
			
			var s2=JSON.stringify(obj2);
			console.log(s2);			//{"name":"老王","age":30}
			
			var s3=JSON.stringify(obj3);
			console.log(s3);			//{"name":"老王","age":30}

3.Math

1.Math.ceil()

* 作用

* 把一个数向上取整

* 语法

* Mathi.ceil(数字)

* 参数

* 就是一个数字

* 返回值

* 返回参数向上取整后的结果

			console.log(Math.ceil(0.1));		//1
			console.log(Math.ceil(-10.8));	//-10
			console.log(Math.ceil(10));		//10

2.Math.floor()

* 作用

* 把一个数向下取整

* 语法

* Mathi.floor(数字)

* 参数

* 就是一个数字

* 返回值

* 返回参数向下取整后的结果

			console.log(Math.floor(0.1));		//0
			console.log(Math.floor(-10.8));		//-11
			console.log(Math.floor(10));			//10

3.Math.round()

* 作用

* 把一个数字四舍五入

* 语法

* Math.round(数字)

* 参数

* 就是一个数字

* 返回值

* 返回参数四舍五入后的结果

			console.log(Math.round(3.15));	//3
			console.log(Math.round(4.5));	//5
			console.log(Math.round(-10.87));	//-11

4.Math.abs()

absolute

* 作用

* 求一个数字的绝对值

* 语法

* Math.abs(数字)

* 参数

* 就是一个数字

* 返回值

* 返回参数取绝对值后的结果

			console.log(Math.abs(10));		//10
			console.log(Math.abs(-11));		//11
			console.log(Math.abs(5-7));     ///2

5.Math.random()

* 作用

* 取0-1之间的随机数，包含0但是不包含1

* 语法

* Math.random()

console.log(Math.random()); //获取到0-1之间的任何数据

常用的随机取值方法

x ~ y : Math.round(Math.random()*(y-x) + x)

0 ~ x : Math.round(Math.random()*x)

1 ~ x : Math.ceil(Math.random()*x)||1

0 ~ x-1 : Math.floor(Math.random()*x)

			//0-10
			console.log(Math.round(Math.random()*10));
			//5-7
			console.log(Math.round(Math.random()*(7-5) + 5));

4.array

   1.push

* 作用

* 给数组的末尾添加数据

* 语法

* 数组.push(element1,element2...)

* 参数

* 要添加的数据，一个或者多个数据，可以累加

* 返回值

* 返回数组添加后的长度，原数组变化，变成添加后的数组

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var len=color.push(‘white‘);
			
			console.log(color);  //[‘red‘,‘green‘,‘blue‘,‘pink‘,‘white‘];
			console.log(len);    //5

2.unshift

* 作用

* 给数组的前面添加数据

* 语法

* 数组.unshift(element1,element2...)

* 参数

* 要添加的数据，一个或者多个数据，可以累加

* 返回值

* 返回数组添加后的长度，原数组变化，变成添加后的数组

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var len=color.unshift(‘white‘);
			
			console.log(color);  //[‘white‘,‘red‘,‘green‘,‘blue‘,‘pink‘]
			console.log(len);		//5

3.pop

* 作用

* 删除数组最后一位数据

* 语法

* 数组.pop()

* 参数

* 没有参数

* 返回值

* 返回被删除的那个数据，原数组变化，变成删除后的数组

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var del=color.pop();
			
			console.log(del);		//pink
			console.log(color);		//["red", "green", "blue"]

4.shift

* 作用

* 删除数组的第一位数据

* 语法

* 数组.shift()

* 参数

* 没有参数

* 返回值

* 返回被删除的那个数据，原数组变化，变成删除后的数组

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var del=color.shift();
			
			console.log(del);		//red
			console.log(color);		//["green", "blue", "pink"]

5.forEach

* 作用

* 遍历数组

* 语法

* 数组.forEach(function(currentValue,index,array){

* //每次循环完都会执行这里的代码

* })

* 参数

* forEach里放的参数是一个函数

* 函数里的参数

* currentValue 当前数组中的某个数据

* index 当前数据的索引

* array 数组本身

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			color.forEach(function(currentValue,index,array){
				console.log(currentValue,index,array)
			});

6.sort

* 作用

* 对数组进行排序

* 语法

* 数组.sort(compareFunction)

* 参数

* 用来指定按某种顺序对数组进行排序

* 如果没有参数的话，会按照每个字符对应的Unicode码值进行排序

* 函数里有两个参数

* a,b

* return a-b 按从小到大的顺序去排

* return b-a 按从大到小的顺序去排

* 返回值

* 返回排序后的数组，原数组变了，变成排序后的数组

			var arr=[4,2,7,8,3,1,10];
			arr.sort(function(a,b){
				return a-b;
			})
			console.log(arr);			//[1, 2, 3, 4, 7, 8, 10]
			
			var arr1=[4,2,7,8,3,1,10];
			arr1.sort(function(a,b){
				return b-a;
			});
			console.log(arr1);			//[10, 8, 7, 4, 3, 2, 1]
			
			
			//随机排序
			var arr2=[4,2,7,8,3,1,10];
			arr2.sort(function(){
				return 0.5-Math.random();
			})
			console.log(arr2);
			
			//没有参数
			var arr3=[4,2,7,8,3,1,10];
			arr3.sort();
			console.log(arr3);   //按照字符对应的unicode编码号

7.reverse

* 作用

* 颠倒数组

* 语法

* 数组.reverse()

* 返回值

* 返回颠倒后的数组，原数组变化了，变成颠倒后的数组了

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var a=color.reverse();
			console.log(a);		//["pink", "blue", "green", "red"]
			console.log(color);	//["pink", "blue", "green", "red"]

8.concat

* 作用

* 连接数组，组成一个新数组

* 语法

* 数组.concat(varlue1,value2,value3...)

* 参数

* 需要与原数组进行合并的数据

* 参数可以是数组，也可以是非数组

* 返回值

* 合并后的新数组，原数组是不变的

区别

concat与push一样都是给数组增加数据，

concat添加数据返回值是新数组，并且原数组不变。

push返回值是新数组的长度，原数组变成新数组

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var newColor=color.concat(‘yellow‘);
			console.log(newColor);		//["red", "green", "blue", "pink", "yellow"]
			console.log(color);			//["red", "green", "blue", "pink"]
			
			var newColor2=color.concat([‘yellow‘,‘gold‘]);
			console.log(newColor2);		//["red", "green", "blue", "pink", "yellow", "gold"]
			
			var newColor3=color.concat(1,2,3);
			console.log(newColor3);		//["red", "green", "blue", "pink", 1, 2, 3]

9.join

* 作用

* 将数组中的所有元素都连接成一个字符串

* 语法

* 数组.join(separator)

* 参数

* separator就是一个连接符，用来把数据连成一个字符串

* 没参数的话，默认为一个逗号

* 参数是一个空字符，那么数组中的每个数据将被直接连接

* 返回值

* 返回数组转成的字符串，原数组不变

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘];
			
			var newColor=color.join();
			console.log(newColor);		//red,green,blue,pink
			console.log(color);			//["red", "green", "blue", "pink"]
			
			var new1=color.join(‘‘);
			console.log(new1);			//redgreenbluepink
			
			var new2=color.join(‘ ‘);
			console.log(new2);			//red green blue pink
			
			var new3=color.join(‘&‘);
			console.log(new3);			//red&green&blue&pink

10.slice

* 作用

* 截取数组

* 语法

* 数组.slice(begin,end)

* 参数

* begin 开始的位置

* end 结束的位置(不包含最后一位)

* 一个参数都没有，直接返回原来的数组

* 参数只有一个数字，那从数字开始的位置一直到数组的最全截掉

* 返回值

* 返回截到的数组，原数组不会变

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘];
			var n1=color.slice();
			console.log(n1);		//["red", "green", "blue", "pink", "yellow"]
			
			var n2=color.slice(2);
			console.log(n2);		//["blue", "pink", "yellow"]
			
			var n3=color.slice(3,4);
			console.log(n3);		//["pink"]
			
			console.log(color);		//["red", "green", "blue", "pink", "yellow"]

11.splice

* 作用

* 用新元素替换旧元素，以此修改数组的内容（替换数组）

* 语法

* 数组.splice(start,deleatCount,item)

* 参数

* start 开始的位置

* deleatCount 删除的个数

* item 替换的内容

* 一个参数都不有的话，那直接返回一个空数组

* 如果参数为一个数字，代表截取数组，从传的那个数字开始，一直截到最后一位数据

* 如果参数为两个数字，代表截取数组，从第一个参数开始，截取的个数为第二个参数的值

* 如果参数为三个，代表替换数组，从第一个参数开始，找到第二个参数值的个数，把找到的内容换成第三个以及第三个以后的参数

* 返回值

* 返回删除的数据

* 原数组变化了，变成删除后剩下的内容

			var color=[‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘];
			
			var c1=color.splice();
			console.log(c1);			//[]
			console.log(color);		//["red", "green", "blue", "pink", "yellow"]
			
			var c2=color.splice(3);
			console.log(c2);			//["pink", "yellow"]
			console.log(color);		//["red", "green", "blue"]
			
			var color1=[‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘];
			var c3=color1.splice(1,3);
			console.log(c3);			//["green", "blue", "pink"]
			console.log(color1);		//["red", "yellow"]
			
			
			var color2=[‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘];
			var c4=color2.splice(1,2,‘white‘,‘black‘);
			console.log(c4);		//["green", "blue"]
			console.log(color2);	//["red", "white", "black", "pink", "yellow"]
			
			var color3=[‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘];
			var c5=‘a,b,c‘;
			var c6=color3.splice(3,2,c5);		
			console.log(c6);			//[‘pink‘,yellow]
			console.log(color3);		//["red", "green", "blue", "a,b,c"]

以上是关于第四章的主要内容，如果未能解决你的问题，请参考以下文章

读构建之法第十七章有感（作业四）

Mybatis框架第二篇

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？