重学JavaWeb第三天(四)

简介: 重学JavaWeb第三天

forEach()方法演示:该方法可以用来遍历数组


forEach()方法需要一个函数作为参数,像这种函数,由我们创建但是不由我们调用的,我们称为回调函数。数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素,以实参的形式传递进来,我们可以来定义形参,来读取这些内容,浏览器会在回调函数中传递三个参数:


第一个参数:就是当前正在遍历的元素

第二个参数:就是当前正在遍历的元素的索引

第三个参数:就是正在遍历的数组

注意:这个方法只支持IE8以上的浏览器,IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach(),还是使用for循环来遍历数组。


var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});

77cb4d05c18471d9534b68cf12fb5c8c.png

slice()方法演示:该方法可以用来从数组提取指定元素,该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回


参数:


第一个参数:截取开始的位置的索引,包含开始索引

第二个参数:截取结束的位置的索引,不包含结束索引,第二个参数可以省略不写,此时会截取从开始索引往后的所有元素

注意:索引可以传递一个负值,如果传递一个负值,则从后往前计算,-1代表倒数第一个,-2代表倒数第二个。

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);
1234567

a25ecdc73c9e760c147dd23a4ffc2589.png

concat()方法演示:该方法可以连接两个或多个数组,并将新的数组返回,该方法不会对原数组产生影响

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);
12345

12c0858ad255003ba9ddd66ebb9a0df2.png

join()方法演示:该方法可以将数组转换为一个字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回,在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,则默认使用,作为连接符


var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join("@-@");
console.log(result);

a3ab44e622fee1d7dfc3d0d4e70b6658.png

reverse()方法演示:该方法用来反转数组(前边的去后边,后边的去前边),该方法会直接修改原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr);

098a97530d90f5b71a9a31cd7bfd0545.png

sort()方法演示:该方法可以用来对数组中的元素进行排序,也会影响原数组,默认会按照Unicode编码进行排序

var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);

fd56f4f2168b5ee26f8f6c4108fa461f.png

注意:即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,所以对数字进排序时,可能会得到错误的结果。

var arr = [1, 3, 2, 11, 5, 6];
arr.sort();
console.log(arr);

0f28615fb9c2f9f8407a514fa97fb27f.png

我们可以自己来指定排序的规则,我们可以在sort()添加一个回调函数,来指定排序规则,回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数,使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边,浏览器会根据回调函数的返回值来决定元素的顺序,如下:


如果返回一个大于0的值,则元素会交换位置

如果返回一个小于0的值,则元素位置不变

如果返回一个等于0的值,则认为两个元素相等,也不交换位置

经过上边的规则,我们可以总结下:


如果需要升序排列,则返回 a-b

如果需要降序排列,则返回 b-a

var arr = [1, 3, 2, 11, 5, 6];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);

311ac598a1f0b6976b8bbfca2c609b14.png

3.2、函数对象

3.2.1、call()和apply()

call()和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用,当对函数调用call()和apply()都会调用函数执行,在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this,call()方法可以将实参在对象之后依次传递,apply()方法需要将实参封装到一个数组中统一传递,如下演示:


call()方法演示:

function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}
var obj = {
    name: "obj",
    sayName: function () {
        console.log(this.name);
    }
};
fun(2, 3);
console.log("===============");
fun.call(obj, 2, 3);

9367eeccb7a3dc02fd5827257e5ade96.png

注意:默认fun()函数调用,this指向的是window对象,你可以使用call()调用函数,在调用的时候传入一个对象,这个对象就是this所指向的对象,也就是说,可以自己指定this的指向,然后从第二个参数开始,实参将会依次传递

apply()方法演示:

function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}
var obj = {
    name: "obj",
    sayName: function () {
        console.log(this.name);
    }
};
fun(2, 3);
console.log("===============");
fun.apply(obj, [2, 3]);

23760ffdfa7792bce72a94e90b62c3f1.png

注意:默认fun()函数调用,this指向的是window对象,你可以使用apply()调用函数,在调用的时候传入一个对象,这个对象就是this所指向的对象,也就是说,可以自己指定this的指向,然后从第二个参数开始,需要制定一个实参数组进行参数传递


3.2.2、this指向


以函数形式调用时,this永远都是window

以方法的形式调用时,this是调用方法的对象

以构造函数的形式调用时,this是新创建的那个对象

使用call和apply调用时,this是传入的那个指定对象

3.2.3、arguments参数


在调用函数时,浏览器每次都会传递进两个隐含的参数:


函数的上下文对象: this

封装实参的对象: arguments

this对象我们已经学习过了,那arguments对象是什么呢?


arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度,在调用函数时,我们所传递的实参都会在arguments中保存,比如:arguments.length 可以用来获取实参的长度,我们即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦,例如:


arguments[0]:表示第一个实参

arguments[1]:表示第二个实参

它里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象。


arguments对象演示:

function fun(a, b) {
    // 通过下标获取第一个参数
    console.log(arguments[0]);
    // 通过下标获取第二个参数
    console.log(arguments[1]);
    // 获取实参的个数
    console.log(arguments.length);
    // 看看它的函数对象
    console.log(arguments.callee);
    console.log(arguments.callee == fun);
}
fun("Hello", "World");

47d3210b602f9f44285fe60dd456f733.png

3.3、Date对象

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

案例演示:

var date = new Date();
console.log(date);
console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

ee5fd11e5e77b473d3380597b79a4c29.png

3.4、Math对象

Math和其它的对象不同,它不是一个构造函数,它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法。

案例演示:

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整,小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整,小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整,小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整,小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random():可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数:Math.round(Math.random()*x)
//生成一个x-y之间的随机数:Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y):返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) :返回x的平方根

e533a1267ab2c8fe8d2497baa2cb23fb.png

3.5、String对象

3.5.1、概述

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


String():可以将基本数据类型字符串转换为String对象

Number():可以将基本数据类型的数字转换为Number对象

Boolean():可以将基本数据类型的布尔值转换为Boolean对象

但是注意:我们在实际应用中不会使用基本数据类型的对象,如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果,在这一章节中,我们重点介绍String()对象的属性和方法。


3.5.2、字符串属性

constructor属性演示:返回创建字符串对象的原型函数


var str = "Hello,World!";
console.log(str.constructor);

17df4e1ae6b8659f594b8d81ea4daff0.png

length属性演示:可以用来获取字符串的长度

var str = "Hello,World!";
console.log(str.length);


9c885adc6ab37a4ca03afab0ba02a300.png

3.5.3、字符串方法

charAt()方法演示:该方法可以根据索引获取指定位置的字符

var str = "Hello,World!";
console.log(str.charAt(1));

00c1717b1683d20efcba3d1888a47bdb.png


charCodeAt()方法演示:该方法获取指定位置字符的字符编码(Unicode编码)

var str = "Hello,World!";
console.log(str.charCodeAt(1));


9b1649d6a40fe8fb9267df053c20582c.png


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

var str = "Hello,World!";
console.log(str.indexOf("o"));
console.log(str.indexOf("o", 5));
123

262a661cb0c284a5c3bfaed5fae3cbcd.png

lastIndexOf()方法演示:该方法的用法和indexOf()一样,不同的是indexOf是从前往后找,而lastIndexOf是从后往前找,也可以指定开始查找的位置

var str = "Hello,World!";
console.log(str.lastIndexOf("o"));
console.log(str.lastIndexOf("o", 5));

slice()方法演示:可以从字符串中截取指定的内容,不会影响原字符串,而是将截取到内容返回


参数:


第一个参数:开始位置的索引(包括开始位置)

第二个参数:结束位置的索引(不包括结束位置),如果省略第二个参数,则会截取到后边所有的

注意:也可以传递一个负数作为参数,负数的话将会从后边计算


var str = "Hello,World!";
var result = str.slice(1, 4);
console.log(result);
result = str.slice(1);
console.log(result);
result = str.slice(1, -1);
console.log(result);

ad18e3830df678c4dc642da81b67446a.png

substring()方法演示:可以用来截取一个字符串,它和slice()类似


参数:


第一个参数:开始截取位置的索引(包括开始位置)

第二个参数:结束位置的索引(不包括结束位置),如果省略第二个参数,则会截取到后边所有的

注意:不同的是这个方法不能接受负值作为参数,如果传递了一个负值,则默认使用0,而且它还自动调整参数的位置,如果第二个参数小于第一个,则自动交换


var str = "Hello,World!";
var result = str.substring(1, 4);
console.log(result);
result = str.substring(1);
console.log(result);
result = str.substring(1, -1);
console.log(result);

0c98d495af804c3689c48ec53b2ceb80.png

substr()方法演示:该方法用来截取字符串

参数:

  • 第一个参数:截取开始位置的索引
  • 第二个参数:截取的长度
var str = "Hello,World!";
var result = str.substr(6, 6);
console.log(result);

b638d7cc333f83889b139bb9806909cf.png

split()方法演示:该方法可以将一个字符串拆分为一个数组,需要一个字符串作为参数,将会根据该字符串去拆分数组

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

c571ceeb0fceb5b4e3c0f73b4d82eb15.png

toUpperCase()方法演示:将一个字符串转换为大写并返回

var str = "Hello,World!";
var result = str.toUpperCase();
console.log(result);

fa7d5db2718c49aa6ae05b3e15ee08b5.png

toLowerCase()方法演示:将一个字符串转换为小写并返回

var str = "Hello,World!";
var result = str.toLowerCase();
console.log(result);

6f18be442051c5971cb41c056e1923b2.png

3.6、RegExp对象

3.6.1、概述

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

使用typeof检查正则对象,会返回object。

3.6.2、创建正则对象

3.6.2.1、使用对象创建

语法格式:

var 变量名 = new RegExp("正则表达式","匹配模式");

匹配模式:

  • i:忽略大小写
  • g:全局匹配模式
  • ig:忽略大小写且全局匹配模式

案例演示:

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = new RegExp("ab", "i");
var str = "Abc";
var result = reg.test(str);
console.log(result);

51ae8869a0e9266369ed18cd59336b09.png

3.6.2.2、使用字面量创建

语法格式:

var 变量名 = /正则表达式/匹配模式;


匹配模式:

  • i:忽略大小写
  • g:全局匹配模式
  • m:执行多行匹配

注意:可以为一个正则表达式设置多个匹配模式,且顺序无所谓

案例演示:

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

51ae8869a0e9266369ed18cd59336b09.png

3.6.3、正则进阶

需求信息:创建一个正则表达式,检查一个字符串中是否有a或b

语法格式:使用 | 表示或者的意思

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a|b|c/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

f9588d9cbe991f98ed4d63b83e3105af.png


试想一下,如果我们现在要是想要检查一个字符串是否含有小写字母,那我们是不是可以reg = /a|b|c|d|e|f|g ... /;这么写,但是你会发现,好啰嗦啊,怎么这么麻烦呢,有没有一种更简单的方式,答案是肯定的。


需求信息:创建一个正则表达式,检查一个字符串中是否有字母


语法格式:[ ] 里的内容也是或的关系


// 这个正则表达式可以来检查一个字符串中是否含有字母
var reg = /[A-z]/;
var str = "Abc";
var result = reg.test(str);
console.log(result);


275b7ae9cee2e4174d7edf29de2a3556.png


常见组合:

  • [a-z]:任意小写字母
  • [A-Z]:任意大写字母
  • [A-z]:任意字母
  • [0-9]:任意数字

需求信息:创建一个正则表达式,检查一个字符串中是否含有 abc 或 adc 或 aec

// 这个正则表达式可以来检查一个字符串中是否含有abc或adc或aec
var reg = /a[bde]c/;
var str = "abc123";
var result = reg.test(str);
console.log(result);

那现在我们已经学会了判断是否包含,那要是判断除了某些字符序列该咋整,只需要这么写[^字符序列]


常见组合:


[^a-z]:除了任意小写字母

[^A-Z]:除了任意大写字母

[^A-z]:除了任意字母

[^0-9]:除了任意数字

需求信息:创建一个正则表达式,检查一个字符串中是否除了数字还有其它字母

// 这个正则表达式可以来检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/;
var str = "0123456789";
var result = reg.test(str);
console.log(result);

3.6.4、正则方法

这些正则方法其实都是字符串的方法,但是它的参数需要传递正则表达式,在这里,我就先称为正则方法。


split()方法演示:该方法可以将一个字符串拆分为一个数组,方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串,这个方法即使不指定全局匹配,也会全都插分

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);


8105c3f7300266dfda5cb9d436b87923.png


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

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


2eba1104056a0ba56746ea4ec9421d46.png


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


var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);


e62ea5175340a58418c8c0580a21893e.png


replace()方法演示:该方法可以将字符串中指定内容替换为新的内容,默认只会替换第一个,但是可以设置全局匹配替换全部

参数:

  • 第一个参数:被替换的内容,可以接受一个正则表达式作为参数
  • 第二个参数:新的内容
var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/gi, "@_@");
console.log(result);

27273a3e3e84644896e25d5498cd7fd6.png

3.6.5、正则量词

通过量词可以设置一个内容出现的次数,量词只对它前边的一个内容起作用,如果有多个内容可以使用 () 括起来,常见量词如下:


{n} :正好出现n次

{m,} :出现m次及以上

{m,n} :出现m-n次

+ :至少一个,相当于{1,}

* :0个或多个,相当于{0,}

? :0个或1个,相当于{0,1}

var str = "abbc";
reg = /(ab){3}/;
console.log(reg.test(str));
console.log("===============");
reg = /b{3}/;
console.log(reg.test(str));
console.log("===============");
reg = /ab{1,3}c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab{3,}c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab+c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab*c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab?c/;
console.log(reg.test(str));
console.log("===============");

fdb8c9ee6adea6a14e18374c788f85e7.png

目录
相关文章
|
2月前
|
Web App开发 SQL Java
javaweb实现分页(二)
javaweb实现分页(二)
20 1
|
2月前
|
SQL 关系型数据库 MySQL
javaweb实现分页查询(一)
javaweb实现分页查询(一)
20 0
|
2月前
|
SQL 关系型数据库 MySQL
javaweb中实现分页,持续更新……
javaweb中实现分页,持续更新……
23 1
|
1月前
|
JSON Java 应用服务中间件
JavaWeb项目之乱码问题及如何解决
JavaWeb项目之乱码问题及如何解决
|
2月前
|
Java Spring 容器
[JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别
[JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别
|
2月前
JavaWeb 开发之 ServletContext 的和使用
JavaWeb 开发之 ServletContext 的和使用
23 1
|
2天前
|
Java 程序员 应用服务中间件
JavaWeb之过滤器(Filter)与监听器(Listener)
本文介绍了JavaWeb中的过滤器(Filter)和监听器(Listener)概念及其使用。过滤器主要用于拦截和处理Web资源请求,如进行编码设置、权限验证等,它在Servlet之前和之后执行。监听器则监听域对象(如ServletRequest、HttpSession、ServletContext)状态变化,分为创建/销毁监听和属性变化监听。监听器在Web.xml中注册后会在相应事件发生时自动执行,例如用于统计网站访问人数或初始化配置。
|
1月前
|
JavaScript 前端开发
javaweb文件上传和下载
javaweb文件上传和下载
|
2月前
|
前端开发 NoSQL 应用服务中间件
javaweb单点登录的三种实现方式
javaweb单点登录的三种实现方式
39 0
|
2月前
|
SQL 前端开发 Java
Java后端进阶之路: JavaWeb(四)
Java后端进阶之路: JavaWeb
35 1