【干货分享 建议收藏】2w字爆肝详解 JavaScript对象_请叫我阿ken csdn

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

Math.max(5, 7, 9, 8);// 获取最大值,返回结果:9
Math.min(6, 2, 5, 3);// 获取最小值,返回结果:2
Math.pow(2, 4);// 获取2的4次幂,返回结果:16
Math.sqrt(9);//获取9的平方根,返回结果为:3
Math.ceil(1.1);// 向上取整,返回结果: 2
Math.ceil(1.9);// 向上取整,返回结果:2
Math.floor(1.1);// 向下取整,返回结果:1
Math.floor(1.9);// 向下取整,返回结果:1
Math.round(1.1);// 四舍五入,返回结果: 1
Math.round(1.5);// 四舍五入,返回结果:2
Math.round(1.9);// 四舍五入,返回结果:2
Math.round(-1.5);// 四舍五入,返回结果:-1(取较大值)
Math.round(-1.6);// 四舍五入,返回结果:-2


### 5.3.2\_生成指定范围的随机数


**Math.random() 用来获取随机数,每次调用该方法返回的结果都不同。该方法返回的结果是一个很长的浮点数**,如“0.925045617789475其范围是0~1(不包括1)。


**由于 Math.random() 返回的这个随机数不太常用,我们可以借助一些数学公式来转换成任意范围内的随机数,公式为“Math.random() \* (max - min) + min",表示生成大于或等于 min 且小于 max 的随机值。**


示例代码如下:



Math.random() * (3 - 1) + 1; // 1 ≤ 返回结果 < 3
Math.random() * (20 - 10) + 10; // 10 ≤ 返回结果 < 20
Math.random() * (99 - 88) + 88; // 88 ≤ 返回结果 < 99


上述代码的返回结果是浮点数,当需要获取整数结果时,可以搭配Math.floor()来实现。


案例:演示如何获取1 ~ 3范围内的随机整数,返回结果可能是1、2或3:



function getRandom (min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
console.log(getRandom(1, 3)); // 最小值1,最大值3


上述代码中,第2行用来生成min到max之间的随机整数,包含min和max。另外,还可以使用Math.floor (Math.random() \* (max + 1)) 表示生成0到max之间的随机整数,使用Math.floor (Math.random() \* (max + 1)+ 1)表示生成1到max之间的随机整数。


利用随机数,可以实现在数组中随机获取个元素, 示例代码如下:



var arr = [‘apple’, ‘banana’, ‘orange’, ‘pear’];
//调用前面编写的getRandom()函数获取随机数
console.log( arr[getRandom(0, arr.length-1)] );


### 5.3.3\_[案例] 猜数字游戏


案例: 演示 Math 对象的使用。使程序随机生成个 1 ~ 10 之间的数字、并让用户输人一个数字户输人的数字,判断这两个数的大小,如果用户输入的数字大于随机数,那么提示“你猜大了”,如果用户输入的数字小于随机数,则提示“你猜小了”,如果两个数字相等,就提示“恭喜你,猜对了”,结束程序。


案例:



function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
} //定义了getRandom()函数,利用Math.random()方法求随机数。

var random = getRandom(1, 10); //设置了随机数大小为1~10之间的数
while(true){ //死循环,利用第13行的break来跳出循环
var num = prompt(‘猜数字,范围在1~10之间。’);
if(num > random){
alert(‘你猜大了’);
}else if(num < random){
alert(‘你猜小了’);
}else{
alert(‘恭喜你,猜对了’);
break;//利用while循环语句中利用if…else if多分支语句来判断大于、小于、等于
}
}


### 5.4\_日期对象


JavaScript 中的日期对象用来处理日期和时间。例如,秒杀活动中日期的实时显示、时钟效果、在线日历等。


### 5.4.1\_日期对象的使用


**JavaScript 中的日期对象需要使用 new Date() 实例化对象才能使用,Date() 是日期对象的构造函数。在创建日期对象时,可以为 Date() 构造函数传人一些参数**,来表示具体的日期,其创建方式如下。



// 方式1: 没有参数,使用当前系统的当前时间作为对象保存的时间
var datel = new Date();
// 输出结果: Wed 0ct 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log (datel);

// 方式2: 传人年,月,日、时、分、秒(月的范围是0 ~ 11,即真实月份-1)
var date2 = new Date(2019, 10, 16, 10, 57, 56);
// 输出结果: Sat Nov 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log(date2);

// 方式3: 用字符串表示日期和时间
var date3 = new Date(‘2019-10-16-10:57:56’);
// 输出结果: Wed Oct 16 2019 10:57:56 GMT+0800(中国标准时间)
console.log(date3);


在使用方式1时,其返回的 date1 对象保存的是对象创建时的时间;  
 **在使用方式2时,最少需要指定年、月两个参数,后面的参数在省略时会自动使用默认值;**  
 **在使用方式3时,最少需要指定年份。另外,当传入的数值大于合理范围时,会自动转换成相邻数值(如方式2将月份设为-1表示去年12月,设为12表示明年1月)。**


在获取到日期对象后,直接输出对象得到的是一个字符串表示的日期和时间。如果想要用其他格式来表示这个日期和时间,可以通过调用日期对象的相关方法来实现。日期对象的常用方法分为 get 和 set 两大类。


**Date 对象的常用 get 方法:**




| 方法 | 作用 |
| --- | --- |
| getFullYear() | 获取表示年份的4位数字,如2020 |
| getMonth() | 获取月份,范围为0 ~ 11(0表示一月,1表示二月,依次类推) |
| getDate() | 获取月份中的某一天,范围1 ~ 31 |
| getDay() | 获取星期,范围为0 ~ 6(0表示星期日,1表示星期一,依次类推) |
| getHours() | 获取小时数,范围为0 ~ 23 |
| getMinutes() | 获取分钟数,范围为0 ~ 59 |
| getSeconds() | 获取秒数,范围为0 ~ 59 |
| getMilliseconds() | 获取毫秒数,范围为0 ~ 999 |
| getTime() | 获取从1970-01-01 00:00:00距离 Date 对象所代表时间的毫秒数 |


**Date 对象的常用 set 方法:**




| 方法 | 作用 |
| --- | --- |
| setFullYear(value) | 设置年份 |
| setMonth(value) | 设置月份 |
| setDate(value) | 设置月份中的某一天 |
| setHours(value) | 设置小时数 |
| setMinutes(value) | 设置分钟数 |
| setSeconds(value) | 设置秒数 |
| setMillseconds(value) | 设置亳秒数 |
| setTime(value) | 通过从1970-01-01 00:00:00 计时的毫秒数来设置时间 |


案例:在控制台中输出当前日期。



var date = new Date();//基于当前日期时间创建Date对象
var year = date.getFullYear();//获取年
var month = date.getMonth();// 获取月
var day = date.getDate();//获取日
//通过数组将星期值转换为字符串
var week =[‘星期日’, ‘星期一’, ‘星期二’, ‘星期三’, ‘星期四’, ‘星期五’, ‘星期六’];
//输出date对象保存的时间, 示例:今天是2019年9月16日星期三,
console.log(‘今天是’+ year + ‘年’ + month + ‘月’ + day + ‘日’ + week[date.getDay()]);


在上述代码中,week[ date.getDay() ] 用来从 date 对象中获取星期值,然后作为数值的索引到 week 数组中取出对应的星期字符串。


案例:将日期对象中的时间转换成指定的格式,



//返回当前时间,格式为:时:分:秒,用两位数字表示
function getTime(){

var time = new Date();
var h = time.getHours();
h = h < 10 ? ‘0’+ h : h;
var m = time.getMinutes();
m = m < 10 ? ‘0’ + m : m;
var s = time.getSeconds();
s = s<10?‘0’+s:s;

return h + ‘:’ + m + ‘:’+s;
}
console.log( getTime() ); // 输出结果示例: 10:07:56


在上述代码中,第 5、7、 9 行代码用来判断给定数字是否为一位数, 如果是一位数则在前面加上 “0”。


### 5.4.2\_[案例] 统计代码执行时间


通过日期对象可以获取从1970年1月1日0时0分0秒开始一直到当前 UTC 时间所经过的毫秒数,这个值可以作为时间戳来使用。通过时间戳,可以计算两个时间之间的时间差,还可以用于加密、数字签名等技术中。


获取时间戳常见的方式如下:



//方式1:通过日期对象的valueof()或getTime()方法
var datel = new Date();
console.log( datel.valueOf() );
// 示例结果: 1571196996188
console.log( datel.getTime() );
// 示例结果: 1571196996188

//方式2:使用"+"运算符转换为数值型
var date2 = +new Date();
console.log(date2);
// 示例结果: 1571196996190

// 方式3:使用HIMLS新增的 Date.now()方法
console.log( Date.now() );
// 示例结果: 1571196996190


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020112523080561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


在掌握如何获取到时间戳后,下面我们来完成案例的代码编写,具体代码如下。



var timestamp1 = +new Date();

for(var i = 1, str = ‘’; i <= 90000; i++){
str += i;
}

var timestamp2 = +new Date();
// 示例结果:代码执行时间: 37毫秒
console.log(‘代码执行时间:’ + (timestamp2 - timestamp1) + ‘毫秒’);


从上述代码和输出结果示例可以看出,JavaScript 对字符串变量 str 进行了90000次拼接操作,共花费了37毫秒的执行时间。该时间会根据不同计算机的运算速度而不同。


### 5.4.3\_[案例] 倒计时


在一些电商网站的活动页上会经常出现折扣商品的倒计时标记,显示离活动结束还剩X天X小时X分X秒,像这样的倒计时教果就可以利用日期对象来实现。


倒计时的核心算法是输人的时间减去现在的时间,得出的剩余时间就是要显示的倒计时间。这需要把时间都转化成时间戳(毫秒数)来进行计算,把得到的毫秒数转换为天数、小时、分数、秒数。


具体示例代码如下:



function countDown(time){
var nowTime = +new Date();
//+new Date() 是new Date().getTime() 代码的简写,返回当前时间戳,单位是毫秒。
var inputTime = +new Date(time);
//设置活动的结束时间戳。
var times = (inputTime - nowTime) / 1000;
//计算剩余毫秒数,需要转换为秒数,转换规则为1秒/1000毫秒。
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? ‘0’ + d : d;
var h = parseInt (times / 60 / 60 % 24);
h = h < 10 ? ‘0’ + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? ‘0’ + m : m;
var s = parseInt(times % 60);
s = s < 10 ? ‘0’ + s : s;
return d + ‘天’ + h + ‘时’ + m + ‘分’ + s + ‘秒’;
// 第5 ~ 13 行代码计算天数d、小时h、分时m、秒数s, 并使用returm返回。
}
// 示例结果: 05天23时06分10秒
console.log(countDown(‘2019-10-22 10:56:57’));
// 输出距离指定结束日期2019-10-22 10:56.57还剩多少时间。


### 5.5\_数组对象


**JavaScript 中的数组对象可以使用 new Array 或字面量“[ ]” 来创建。**


### 5.5.1\_数组类型检测


在开发中,有时候需要检测变量的类型是否为数组。~~例如, 在两数中。要求华人的参数必须是一一个数组,不能传入其他类型的值,否则会出错,所以这时候可以在函数中检测参数的类型是否为数组。~~ 数组类型检测有两种常用的方式,分别是使用 instanceof 运算符和使用Array.isArray() 方法。


示例代码如下:



var arr = [];
var obj = { };
// 第1种方式
console.log ( arr instanceof Array );
// 输出结果:true
console.log ( obj instanceof Array );
// 输出结果:false
//第2种方式
console.log ( Array.isArray(arr) );
// 输出结果:true
console.log ( Array.isArray(obj) );
// 输出结果:false


上述代码中,如果检测结果为true,表示给定的变量是一个数组, 如果检测结果为false,则表示给定的变量不是数组。


### 5.5.2\_添加或删除数组元素


JavaScript 数组对象提供了添加或删除元素的方法,**可以实现在在数组的末尾或开头添加新的数组元素,或在数组的末尾或开头移出数组元素。**


添加或删除数组元素:




| 方法名 | 功能描述 | 返回值 |
| --- | --- | --- |
| push( 参数1… ) | 数组末尾添加一个或多个元素, 会修改原数组 | 返回数组的新长度 |
| unshift( 参数1… ) | 数组开头添加一个或多个元素, 会修改原数组 | 返回数组的新长度 |
| pop() | 删除数组的最后一个元素,若是空数组则返回 undefined,会修改原数组 | 返回删除的元素的值 |
| shift() | 删除数组的第一个元素,若是空数组则返回undefined,会修改原数组 | 返回第一个元素的值 |


需要注意的是,push() 和 unshift() 方法的返回值是新数组的长度,而 pop()和 shift()方法返回的是移出的数组元素。


案例: 演示




![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126063100295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


从上述代码可以看出,**push() 和 unshift() 方法可以为指定数组在末尾或开头添加一个或多个元素,而 pop() 和 shift() 方法则只能移出并返回指定数组在未尾或开头的一个元素。**


### 5.5.3\_[案例] 筛选数组


案例:要求在包含工资的数组中,剔除工资达到2000或以上的数据,把小于2000的数重新放到创新的数组里面。 其中数组为[1500,1200,2000, 2100, 1800]。



var arr = (1500, 1200, 2000, 2100, 1800];
var newArr = [];

for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[1);
// 相当于: newArr (newArr.length] = arr[i];
}
}

console.log(newArr);
// 输出结果: (3) [1500, 1200, 1800]


上述代码中,第 1 行代码为原数组 arr。第 2 行代码定义了新数组 newArr,存放工资低于 2000 的数据。第 3 行代码在 for 循环语句中通过 if 语句进行判断,如果符合要求则使用 push() 方法,存储到新数组 newArr 中。


### 5.5.4\_数组排序


**数组排序可以实现数组元素排序或者颠倒数组元素的顺序等。**


排序方法:




| 方法名 | 功能描述 |
| --- | --- |
| reverse() | 颠倒数组中元素的位置,该方法会改变原数组,返回新数组 |
| sort() | 对数组的元素进行排序,该方法会改变原数组,返回新数组 |


需要注意的是,**reverse() 和 sort() 方法的返回值是新数组的长度。**



//反转数组
var arr = [‘red’, ‘green’, ‘blue’];
arr.reverse();
console.log(arr);//输出结果:(3) [“blue”, “green”,“red”]
//上述演示了 reverse() 方法的使用,实现数组元素的反转。
//数组排序
var arr1 = [13, 4, 77, 1, 7];
arrl.sort(function(a, b)
return b - a;//按降序的顺序排列
});
console.log(arr1);//输出结果: (5) [77,13,7,4,1]
//上述演示了 sort() 方法的使用,实现数组元素从大到小进行排序。


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020112606494763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)



return a - b;// 按升序的顺序排列


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126065247753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


### 5.5.5\_数组索引


在开发中,**若要查找指定的元素在数组中的位置,则可以利用 Array 对象提供的检索方法。**


检索方法:




| 方法名 | 功能描述 |
| --- | --- |
| indexOf() | 返回在数组中可以找到到给定值的第一个索引,如果不存在,则返回-1 |
| lastIndexOf() | 返回指定元素在数组中的最后一个的索引,如果不存在则返回-1 |


上述方法中,默认都是从指定数组索引的位置开始检索,并且检索方式与运算符 " === " 相同,即只有全等时才会返回比较成功的结果。


案例:演示,



var arr = [‘red’, ‘green’, ‘blue’, ‘pink’, ‘blue’];
console.log( arr.indexOf(‘blue’) ); //输出结果:2
console.log( arr.lastIndexOf(‘blue’) );//输出结果:4


上述代码中,**lastIndexOf() 方法用于在数组中从指定下标位置检索到最后一个给定值的下标。与 indexOf() 检索方式不同的是,lastIndexOf() 方法默认逆向检索,即从数组的末尾向数组的开头检索。**


### 5.5.6\_[案例] 数组去除重复元素


接下来我们通过一个案例来演示数组索引的使用。 要求在一组数据中,去除重复的元素。其中数组为 [‘blue’, ‘green’, ‘blue’] 。示例代码如下。



function unique(arr) {
var newArr = [];
// 用来存放数组中不重复的元素

// 遍历一遍数组,如果数组内某一元素重复出现则放入新数组中
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}

return newArr;
}

var demo = unique([‘blue’, ‘green’, ‘blue’]);
console.log(demo);
// 输出结果: (4) [“blue”,“green”]


出现过,那么就添加到新数组中,否则不添加。其中第4行代码如果该元素判断如果返回值为-1就说明新数组里面没有该元素。


3利用新数组的在新数组中没有


### 5.5.7\_数组转换为字符串


**若需要将数组转换为字符串,可以利用数组对象的 join() 和 toString() 方法实现。**


数组转换为字符串:




| 方法名称 | 功能描述 |
| --- | --- |
| toString() | 把数组转换为字符串,逗号分隔每一项 |
| join (’ 分隔符 ') | 将数组的所有元素连接到一个字符串中 |


案例:演示,



// 使用toString()
var arr = [‘a’, ‘b’, ‘c’];
console.log ( arr.toString() );
// 输出结果:a,b,c

// 使用join()
console.log ( arr.join() );
// 输出结果:a,b,c
console.log ( arr.join(‘’) );
// 输出结果:abc
console.log ( arr.join(‘-’) );
// 输出结果:a-b-c


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126082519945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


从上述代码可知,**join() 和 toString() 方法可将多维数组转为字符串,默认情况下使用逗号连接。不同的是,join() 方法可以指定连接数组元素的符号。另外,当数组元素为 undefined、null 或空数组时,对应的元素会被转换为空字符串。**


### 5.5.8\_其他方法


JavaScript 还提供了很多其他也比较常用的数组方法。例如,填充数组、连接数组、截取数组元素等。


其他方法:




| 方法名 | 功能描述 |
| --- | --- |
| fill() | 用一个固定值填充数组中指定下标范围内的全部元素 |
| splice() | 数组删除,参数为 splice(第几个开始,要删除个数),返回被删除项目的新数组 |
| slice() | 数组截取,参数为 slice(begin, end),返回被截取项目的新数组 |
| concat() | 连接两个或多个数组,不影响原数组,返回一个新数组 |


**slice() 和 concat() 方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会对原数组产生影响。**


案例:splice() 方法在指定位置添加或删除数组元素,



var arr = [‘sky’, ‘wind’, ‘snow’, ‘sun’];
// 从索引为2的位置开始,删除2个元索
arr.splice(2, 2);
console.log (arr);
// 输出结果: (2) [“sky”, “wind”]

// 从索引为1的位置开始,删除1个元素后,再添加 snow 元素
arr.splice(1, 1, ‘snow’);
// 输出结果: (2) [“sky”, “snow”]
console.log(arr);

// 从索引为1的位置开始,添加数组元素
arr.splice(1.0, ‘hail’, ‘sun’);
console.log(arr);
// 输出结果: (4) [“sky”, “hail”, “sun”, “snow”]


在上述代码中,splice() 方法的第 1 个参数用于指定添加或删除的下标位置;第 2 个参数用于从指定下标位置开始,删除数组元素的个数,将其设置为0,则表示该方法只添加元素;剩余的参数表示要添加的数组元素,若省略则表示删除元素。


### 5.6\_字符串对象


在 JavaScript 中,字符串对象提供了些用于对字符串进行处理的属性和方法,可以很方便地实现字符串的查找、截取、替换、大小写转换等操作。


### 5.6.1\_字符串对象的使用


**字符串对象使用 new String() 来创建,在String 构造函数中传入字符串, 就会在返回的字符串对象中保存这个字符串。**


案例:演示,



//创建字符串对象
var str = new string(‘apple’);
// 创建字符串对象
console.log (str);
// 输出结果: string{“apple”}

// 获取字符串长度,输出结果:5
console.log(str.length);


细心的读者会发现,在前面的学习中,可以使用 “ 字符串变量.length " 的方式进行获取,这种方式很像是在访问一个对象的 length 属性。


案例:演示,



var str = ‘apple’;
console.log (str.length);
// 输出结果: 5


实际上,字符串在 JavaScript 中是一种基本包装类型。JavaScript 中的基本包装类型包括String、Number 和 Boolean ,用来把基本数据类型包装成为复杂数据类型,从而使基本数据类型也有了属性和方法。


**需要注意的是,虽然 Javascript 基本包装类型的机制可以使普通变量也能像对象一样访问属性和方法,但它们并不属于对象类型。**


案例:演示,



var obj = new String(‘Hello’);
console.log (typeof obj);
// 输出结果: object

console.log (obj instanceof String);
//输出结果: true

var str = ‘Hello’;
console.log (typeof str);
// 输出结果: string

console.log (str instanceof String);
// 输出结果: false


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126083754681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


**从上述代码可以看出,使用 new String() 返回的 obj 是一个对象,但是普通的字符串变量并不是一个对象,它只是一个字符串类型的数据。**


### 5.6.2\_根据字符返回位置


**字符串对象提供了用于检索元素的属性和方法**


**字符串对象用于检索元素的属性和方法**:




| 成员 | 作用 |
| --- | --- |
| indexOf( search Value ) | 获取 search Value 在字符串中首次出现的位置 |
| lastIndexOf( search Value ) | 获取 search Value 在字符串中最后出现的位置 |


案例:演示 indexOf() 和 lastIndexOf() 方法的使用,



var str = ‘HelloWorld’ ;

console.log( str.indexOf(‘o’) );
// 获取"o"在字符串中首次出现的位置,返回结果:4
console.log( str.lastIndexOf(‘o’) );
// 获取"o"在字符串中最后出现的位置,返回结果:6


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126084158694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


通过返回结果可以看出,位置从 0 开始计算,字符串第一个字符的位置是 0 , 第2个字符为1,以此类推,最后一个字符的位置是字符串的长度减1。


案例:在一组字符串中,找到所有指定元素出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript ’ 。



var str = ‘Hello World,Hello Javascript’;
var index = str.indexOf(‘o’); // 先找到第一个 o 出现的位置。
var num = 0; // 设置 o 出现的次数初始值为0。
while(index != -1){ // 通过 while 语句判断 indexOf 返回值的结果
//如果不是-1就继续往后进行查找,这是因为 indexOf 只能查找到第1个,
//所以后面的查找需要利用第2个参数来实现,给当前的索引 index 加1,
//从而实现继续查找。
console.log (index);// 依次输出:4、7、17
index = str.indexOf(‘o’, index + 1);
num++;
}
console.log (‘o出现的次数是:’ + num);// o 出现的次数是:3


需要注意的是,字符串中的空格也会被当作一个字符来处理。


### 5.6.3\_根据位置返回字符


在JavaScript中,**字符串对象提供了用于获取字符串中的某一个字符的方法。**


**字符串对象用于获取某一个字符的方法**




| 成员 | 作用 |
| --- | --- |
| charAt(index) | 获取 index 位置的字符,位置从 0 开始计算 |
| charCodeAt(index) | 获取 index 位置的字符的 ASCII 码 |
| str [ index ] | 获取指定位置处的字符( HTML5新增 ) |


案例:了解 charAt()、charCodeAt()、str[ 下标 ]的使用,



var str = ‘Apple’;
console.log (str.charAt(3));// 输出结果:1
console.log (str.charCodeAt(0));// 输出结果: 65(字符A的 ASCII 码为65)
console.log(str[0]);// 输出结果:A


### 5.6.4\_[案例]统计出现最最多的字符和次数


案例:演示 charAt() 方法的使用。通过程序来统计字符串中出现最多的字符和次数



var str = ‘Apple’;
//第1步 统计每个字符的出现次数
var o = { };

for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
// 利用 chars 保存字符串中的每一个字符
if( o[chars] ) {
// 利用对象的属性来方便查找元素
o[chars]++;
}else{
o[chars] = 1;
}
}

console.log(o); // 输出结果:{A: 1, p: 2, 1:1,e:1}

var max = 0; // 保存出现次数最大值
var ch = ‘’; // 保存出现次数最多的字符

for(var k in o){
if (o[k] > max){
max = o[k];
ch = k;
}
}

// 输出结果:“出现最多的字符是:p,共出现了2次”
console.log(‘出现最多的字符是:’ + ch + ‘,共出现了’ + max + ‘次’);


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201126085048411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)


### 5.6.5\_字符串操作方法


**字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法**


**字符串对象用于截取、连接和替换字符串的方法**:




| 成员 | 作用 |
| --- | --- |
| concat(strl, str2, str3…) | 连接多个字符串 |
| slice(start,[ end ]) | 截取从 start 位置到 end 位置之间的一个子字符串 |
| substring(start [,end] ) | 截取从 start 位置到 end 位置之间的一个子字符串,基本和 slice 相同,但是不接收负值 |
| substr(start [, length] ) | 截取从 start 位置开始到 length 长度的子字符串 |
| toLowerCase() | 获取字符串的小写形式 |
| toUpperfCase() | 获取字符串的大写形式 |
| split( [ sparator [, limit] ) | 使用 separator 分隔符将字符串分隔成数组,limit 用于限制数量 |
| replace(str1, str2) | 使用 str2 替换字符串中的 str1 ,返回替换结果,只会替换第一个字符 |


在使用上表中的方法对字符串进行操作时,处理结果是通过方法的返回值直接返回的,并不会改变字符串本身。


案例:演示,



var str = ‘HelloWorld’;
str.concat(‘!’); // 在字符串末尾拼接字符,结果:HelloWorld!
str.slice(1, 3); // 截取从位置1 开始到位置3 范围内的内容,结果:el
str.substring (5); // 截取从位置5 开始到最后的内容,结果: World
str.substring(5, 7); // 截取从位置5 开始到位置7 范围内的内容,结果:Wo
str.substr(5); // 截取从位置5 开始到字符串结尾的内容,结果: World
str.substring(5, 7);// 截取从位置5 开始到位置7 范围内的内容,结果:Wo
str.toLowerCase(); // 将字符串转换为小写,结果:helloworld
str.toUpperCase(); // 将字符串转换为大写,结果:HELLOWORLD
str.split(‘1’); // 使用"1"切割字符串,结果:[“He”,“”,“oWor”,“d”]
str.split(‘1’, 3); // 限制最多切割3次,结果:[“He”,“”,“oWor”]
str.replace(‘World’,‘!’);// 替换字符串,结果:“Hello!”


### 5.6.6\_[案例]判断用户名是否合法


案例:要求用户名长度在 3 ~ 10 范围内,不允许出现敏感词 admin 的任何大小写形式。


![img](https://img-blog.csdnimg.cn/img_convert/8324ed37a1e3e5f3b314d44b2056a644.png)
![img](https://img-blog.csdnimg.cn/img_convert/7371ac9e9684d6d3c7618fb0ba7686fe.png)
![img](https://img-blog.csdnimg.cn/img_convert/f55472c9df269f9ceec423603da79114.png)

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

内容,结果:el
str.substring (5);  // 截取从位置5 开始到最后的内容,结果: World
str.substring(5, 7);  // 截取从位置5 开始到位置7 范围内的内容,结果:Wo
str.substr(5);      // 截取从位置5 开始到字符串结尾的内容,结果: World
str.substring(5, 7);// 截取从位置5 开始到位置7 范围内的内容,结果:Wo
str.toLowerCase();  // 将字符串转换为小写,结果:helloworld
str.toUpperCase();  // 将字符串转换为大写,结果:HELLOWORLD
str.split('1');    // 使用"1"切割字符串,结果:["He","","oWor","d"]
str.split('1', 3);  // 限制最多切割3次,结果:["He","","oWor"]
str.replace('World','!');// 替换字符串,结果:"Hello!"

5.6.6_[案例]判断用户名是否合法

案例:要求用户名长度在 3 ~ 10 范围内,不允许出现敏感词 admin 的任何大小写形式。

[外链图片转存中…(img-P96AiUcI-1715712890013)]
[外链图片转存中…(img-XHdPgidh-1715712890013)]
[外链图片转存中…(img-ODAhatKn-1715712890013)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

  • 15
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值