JS内置引用类型/内置对象 概述
对象在 JavaScript 中被称为引用类型的值/实例,在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起。它也常被称为类,但这种称呼并不妥当。尽管 ECMAScript 从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构。
有一些内置的引用类型可以用来创建特定的对象,称之为内置对象,这些内置对象供开发者使用,并提供了一些常用的或是最基本而必要的功能 。对于内置对象的学习,建议是:先了解,用到时查阅文档。本文总结了常用的内置对象,对这些内置对象的常用属性和方法进行归纳,目的是为了方便学习、回顾和查阅。
目录
文章目录
- JS内置引用类型/内置对象
-
- 1 基本对象Object
-
- 1.1 创建对象
-
- ① new Object()创建
- ② 使用字面量创建
- ③ 构造函数创建
- 1.2 调用对象
- 1.3 遍历对象属性
- 2 Array数组对象
-
- 2.1 数组的创建
-
- ① 使用Array构造函数创建
- ② 数组字面量表示法
- 2.2 数组的长度length
- 2.3 检测数组
- 2.4 转换方法
- 2.5 栈方法
- 2.6 队列方法
-
- 2.6.1 push()和shift()
- 2.6.2 unshift()和pop()
- 2.7 重排序方法
-
- 2.7.1 reverse()
- 2.7.2 sort()
- 2.8 操作方法
-
- 2.8.1 concat()
- 2.8.2 slice()
- 2.8.3 splice()
- 2.9 位置方法
- 2.10 迭代方法
- 3 Date对象
-
- 3.1 Date创建和初始化
-
- ① Date.parse()
- ② Date.UTC()
- ③ Date.now()
- ④ Date.valueOf()
- 3.2 日期格式化方法
- 3.3 日期/时间组件方法
- 3.4 倒计时效果
- 4 Math对象
-
- 4.1 Math的属性
- 4.2 min()和 max()方法
- 4.3 舍入方法
- 4.4 random()方法
- 4.5 其他方法
- 5 RegExp对象
-
- 5.1 创建正则表达式
-
- ① 使用字面量创建
- ② 使用RegExp构造函数创建
- 5.2 RegExp实例属性
- 5.3 RegExp实例方法
-
- 5.3.1 exec()
- 5.3.2 test()
- 5.4 RegExp构造函数属性
- 6 字符串对象
-
- 6.1 基本包装类型
- 6.2 字符串位置方法
-
- 6.2.1 根据字符返回位置
- 6.2.2 根据位置返回字符
- 6.3 字符串操作方法
- 6.4 replace()方法
- 6.5 split()方法
- 6.6 大小写转换
1 基本对象Object Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为。
1.1 创建对象
① new Object()创建 语法:var 对象名 = new Object();
var person = new Object();
person.name = "Jake";
person.age = 29;
② 使用字面量创建 对象字面量 :就是花括号
{ }
里面包含了表达这个具体事物(对象)的属性和方法{ }
里面采取键值对的形式表示var person = {
name: "Jake",
age: 29,
sayHi : function(){
alert('大家好啊~');
}
};
③ 构造函数创建 构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
- 构造函数用于创建某一类对象,其首字母要大写
- 构造函数要和 new 一起使用才有意义
function Obj(name,type,blood,attackName){
this.name = name;
this.type = type;
this.blood = blood;
this.attack = function() {
alert(attackName);
}
}
var lp = new Obj('廉颇','力量型',500,'近战');
lp.attack();
1.2 调用对象
调用名字属性的两种方法
console.log(star.name)
// 中括号适用于属性名中包含会导致语法错误的字符情况下使用,如'first name'
console.log(star['name'])
// 中括号的另一个好处是可以使用变量访问属性
var propertyName = "name";
person[propertyName]
调用方法
// 调用 sayHi 方法,注意,一定不要忘记带后面的括号
star.sayHi();
1.3 遍历对象属性
for...in
语句用于对数组或者对象的属性进行循环操作var obj = {
name: 'Jack',
age: 18,
sex: '男',
fn:function() {};
};
//for in 遍历我们的对象
//for (变量 in 对象){}
//我们使用for in 里面的变量 我们喜欢写k 或者key
for(var k in obj){
console.log(k);
// k 变量 输出得到的是属性名
console.log(obj[k]);
// obj[k] 得到的是属性值
}
?
2 Array数组对象 Array 类型是一组值的有序列表,同时提供了操作和转换这些值的功能,它是js中最常用的内置对象。
2.1 数组的创建
① 使用Array构造函数创建
var colors = new Array();
var colors = new Array(20);
//创建length值为20的数组
var colors = new Array("red", "blue", "green");
//创建一个包含3个字符串值的数组
② 数组字面量表示法 数组字面量由一对包含数组项的方括号表示,多个数组项之间以逗号隔开
var colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
var names = [];
// 创建一个空数组
var values = [1, 2,];
// 不要这样!这样会创建一个包含 2 或 3 项的数组
var options = [, , , , ,];
// 不要这样!这样会创建一个包含 5 或 6 项的数组
在读取和设置数组的值时,要使用方括号并提供相应值的基于 0 的数字索引
var colors = ["red", "blue", "green"];
// 定义一个字符串数组
alert(colors[0]);
// 显示第一项
colors[2] = "black";
// 修改第三项
colors[3] = "brown";
// 新增第四项
2.2 数组的长度length
- length不是只读的,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项
var colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
alert(colors.length)//3
colors.length = 2;
//将length设置为2
alert(colors[2]);
//undefinedvar colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
colors.length = 4;
alert(colors[3]);
//undefined
- 利用 length 属性也可以方便地在数组末尾添加新项
var colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
colors[colors.length] = "black";
//(在位置 3)添加一种颜色
colors[colors.length] = "brown";
//(在位置 4)再添加一种颜色
- 当把一个值放在超出当前数组大小的位置上时,数组就会重新计算其长度值
var colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
colors[99] = "black";
// (在位置 99)添加一种颜色
alert(colors.length);
// 100
2.3 检测数组
- instanceof 运算符,可以判断一个对象是否属于某种类型
Array.isArray()
用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的 Array 构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。
为了解决这个问题,ECMAScript 5 新增了 Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array);
// true
console.log(obj instanceof Array);
// false
console.log(Array.isArray(arr));
// true
console.log(Array.isArray(obj));
// false
2.4 转换方法
- 数组继承的 toLocaleString()、toString()和 valueOf()方法,在默认情况下都会以逗号分隔的字符串的形式返回数组项。
var colors = ["red", "blue", "green"];
// 创建一个包含 3 个字符串的数组
alert(colors.toString());
// red,blue,green
alert(colors.valueOf());
// red,blue,green
alert(colors.toLocaleString());
alert(colors);
// red,blue,greens
- 使用 join()方法,则可以使用不同的分隔符来构建这个字符串
var colors = ["red", "green", "blue"];
alert(colors.join(","));
//red,green,blue
alert(colors.join("||"));
//red||green||blue
2.5 栈方法
栈是一种 LIFO(Last-In-First-Out, 后进先出)的数据结构,也就是最新添加的项最早被移除。而栈中项的推入和弹出,只发生在一个位置——栈的顶部。ECMAScript 为数组专门提供了 push()和 pop()方法,以便实现类似栈的行为。
① push和pop
- push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
- 而pop()方法则从数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
var colors = new Array();
// 创建一个数组
var count = colors.push("red", "green");
// 推入两项
alert(count);
//2
count = colors.push("black");
// 推入另一项
alert(count);
//3
var item = colors.pop();
// 取得最后一项
alert(item);
//"black"
alert(colors.length);
//2
② 可以将栈方法与其他数组方法连用
var colors = ["red", "blue"];
colors.push("brown");
// 添加另一项
colors[3] = "black";
// 添加一项
alert(colors.length);
// 4
var item = colors.pop();
// 取得最后一项
alert(item);
//"black"
2.6 队列方法
队列数据结构的访问规则是 FIFO(First-In-First-Out, 先进先出)。队列在列表的末端添加项,从列表的前端移除项。
2.6.1 push()和shift()
- 由于push()是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。
- 而shift()它能够移除数组中的第一个项并返回该项,同时将数组长度减 1。
var colors = new Array();
//创建一个数组
var count = colors.push("red", "green");
//推入两项
alert(count);
//2
count = colors.push("black");
//推入另一项
alert(count);
//3
var item = colors.shift();
//取得第一项
alert(item);
//"red"
alert(colors.length);
//2
2.6.2 unshift()和pop()
- unshift() 与 shift()的用途相反:它能在数组前端添加任意个项并返回新数组的长度。
- 同时使用 unshift()和 pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项
var colors = new Array();
//创建一个数组
var count = colors.unshift("red", "green");
//推入两项
alert(count);
//2
count = colors.unshift("black");
//推入另一项
alert(count);
//3
var item = colors.pop();
//取得最后一项
alert(item);
//"green"
alert(colors.length);
//2
这个例子创建了一个数组并使用 unshift()方法先后推入了 3 个值。首先是"red"和"green",然后是"black",数组中各项的顺序为"black"、“red”、“green”。在调用 pop()方法时,移除并返回的是最后一项,即"green"。
2.7 重排序方法
2.7.1 reverse() reverse()方法会反转数组项的顺序
var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);
//5,4,3,2,1
2.7.2 sort() (1) 默认情况下,sort()方法按字符串升序排列数组项。
sort()默认下会调用每个数组项的 toString()转型方法,然后按字符串比较
var values = [0, 1, 5, 10, 15];
values.sort();
alert(values);
//0,1,10,15,5
(2) sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。
比较函数接收两个参数。
- 如果第一个参数应该位于第二个之前则返回一个负数。
- 如果两个参数相等则返回 0。
- 如果第一个参数应该位于第二个之后则返回一个正数。
//升序比较函数
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
//等价于
function compare(value1,value2) {
return value1-value2;
}var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);
//0,1,5,10,15
//降序比较函数
function compare(value1, value
if (value1 < value2) {
return 1;
} else if (value1 > value2){
return -1;
} else {
return 0;
}
}
//等价于
function compare(value1,value2
return value2-value1;
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);
// 15,10,5,1,0
2.8 操作方法
2.8.1 concat() concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
- 在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
- 如果传递给 concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。
- 如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors);
//red,green,blue
alert(colors2);
//red,green,blue,yellow,black,brown
2.8.2 slice() slice() 能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。
- 在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
- 如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2);
//green,blue,yellow,purple
alert(colors3);
//green,blue,yellow
2.8.3 splice() splice()方法,恐怕要算是最强大的数组方法了,它有很多种用法。 splice()的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下 3 种。
删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。 例如,splice(0,2)会删除数组中的前两项。
插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如, splice(2,0,“red”,“green”)会从当前数组的位置 2 开始插入字符串"red"和"green"。
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如, splice (2,1,“red”,“green”)会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串 “red"和"green”。
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
// 删除第一项
alert(colors);
// green,blue
alert(removed);
// red,返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange");
// 从位置 1 开始插入两项
alert(colors);
// green,yellow,orange,blue
alert(removed);
// 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple");
// 插入两项,删除一项
alert(colors);
// green,red,purple,orange,blue
alert(removed);
// yellow,返回的数组中只包含一项
2.9 位置方法
方法名 | 功能描述 |
---|---|
indexOf() | indexOf()方法从数组的开头(位 置 0)开始向后查找 |
lastIndexOf() | lastIndexOf()方法则从数组的末尾开始向前查找 |
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));
//3
alert(numbers.lastIndexOf(4));
//5 alert(numbers.indexOf(4, 4));
//5
alert(numbers.lastIndexOf(4, 4));
//3 var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person));
//-1
alert(morePeople.indexOf(person));
//0
2.10 迭代方法
方法名 | 功能描述 |
---|---|
every() | 对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true |
filter() | 对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组 |
forEach() | 对数组中的每一项运行给定函数。这个方法没有返回值 |
map() | 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组 |
some() | 对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true |
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult);
//false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult);
//true
filter()例子
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult);
//[3,4,5,4,3]
map()例子
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult);
//[2,4,6,8,10,8,6,4,2]
forEach()例子
最后一个方法是 forEach(),它只是对数组中的每一项运行传入的函数。这个方法没有返回值, 本质上与使用 for 循环迭代数组一样。
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
//执行某些操作
});
3 Date对象 3.1 Date创建和初始化
Date类型使用自 UTC(国际协调时间)1970 年 1 月 1 日午夜(零时)开始经过的毫秒数来保存日期。
要创建一个日期对象,使用new操作符和Date操作符即可
var now = new Date();
- 在调用 Date 构造函数而不传递参数的情况下,新创建的对象自动获得当前日期和时间。
- 如果想根据特定的日期和时间创建日期对象,必须传入表示该日期的毫秒数(即从 UTC 时间 1970 年 1 月 1 日午夜起至该日期止经过的毫秒数)。
- 为了简化这一计算过程,ECMAScript 提供了两个方法:Date.parse()和 Date.UTC()。
- “月/日/年”,如 6/13/2004;
- “英文月名 日,年”,如 January 12,2004;
- “英文星期几 英文月名 日 年 时:分:秒 时区”,如 Tue May 25 2004 00:00:00 GMT-0700。
- ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)。只有兼容 ECMAScript 5 的实现支持这种格式。
//可以显式调用Date.parse()
var date = new Date(Date.parse("1/27/2022"))
//也可以向Date构造函数直接传参数
var date = new Date("1/27/2022");
alert(date);
date = new Date("2022-01-27T10:43:00");
alert(date);
② Date.UTC()
- 参数:年,月(基于0的月份,也就是1月时该参数是0),日,时,分,秒。
- 只有前两个参数(年和月)是必须的。
- 如果没有提供月中的天数,则假设天数为 1;如果省略其他参数,则统统假设为 0。
// 显式调用Date.UTC(),参数代表的是GMT时间
// 注意:GMT时间不一定等于本地时间,GMT时间 + 8 = 北京时间
var date2 = new Date(Date.UTC(2022, 0, 27, 10, 43, 55));
alert(date2);
// 输出:Thu Jan 27 2022 18:43:55 GMT+0800 (中国标准时间)// 也可以直接将参数传给Date构造函数,这里的就是本地时间
date2 = new Date(2022, 0, 27, 10, 43, 55, 55);
alert(date2);
// 输出:Thu Jan 27 2022 10:43:55 GMT+0800 (中国标准时间)
注意: 日期对象及其在不同浏览器中的实现有许多奇怪的行为。
其中有一种倾向是将超出范围的值替换成当前的值,以便生成输出。
例如,在解析"January 32, 2007" 时,有的浏览器会将其解释为"February 1, 2007"。
而 Opera 则倾向于插入当前月份的当前日期,返回"January 当前日期,2007"。
也就是说,如果在 2007 年 9 月 21 日运行前面的代码,将会得到"January 21, 2007"(都是 21 日)。
③ Date.now() Date.now()方法,返回表示调用这个方法时的日期和时间的毫秒数。
//取得开始时间
var start = Date.now();
//调用函数
doSomething();
//取得停止时间
var stop = Date.now(),
result = stop - start;
//在不支持它的浏览器中,使用+操作符把 Data 对象转换成字符串,也可以达到同样的目的。
//取得开始时间
var start = +new Date();
//调用函数
doSomething();
//取得停止时间
var stop = +new Date(),
result = stop - start;
④ Date.valueOf() Date 类型的 valueOf()方法,则根本不返回字符串,而是返回日期的毫秒表示。因此,可以方便使用比较操作符(小于或大于)来比较日期值。
var date1 = new Date(2007, 0, 1);
//"January 1, 2007"
var date2 = new Date(2007, 1, 1);
//"February 1, 2007"
alert(date1.valueOf());
//1167580800000
alert(date2.valueOf());
//1170259200000alert(date1 < date2);
//true
alert(date1 > date2);
//false
3.2 日期格式化方法
Date 类型还有一些专门用于将日期格式化为字符串的方法,这些方法如下。
方法名 | 描述 |
---|---|
toDateString() | 以特定于实现的格式显示星期几、月、日和年; |
toTimeString() | 以特定于实现的格式显示时、分、秒和时区; |
toLocaleDateString() | 以特定于地区的格式显示星期几、月、日和年; |
toLocaleTimeString() | 以特定于实现的格式显示时、分、秒; |
toUTCString() | 以特定于实现的格式完整的 UTC 日期。 |
到目前为止,剩下还未介绍的 Date 类型的方法,都是直接取得和设置日期值中特定部分的方法了。
取得如下表所示,设置则将get改为set。
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | dObj.getFullYear() |
getMonth() | 获取当月(0-11) | dObj.getMonth() |
getDate() | 获取当天日期 | dObj.getDate() |
getDay() | 获取星期几(周日0到周六6) | dObj.getDay() |
getHours() | 获取当前小时 | dObj.getHours() |
getMinutes() | 获取当前小时 | dObj.getMinutes() |
getSeconds() | 获取当前秒钟 | dObj.gerSeconds() |
文章图片
//以下是js代码实现
//inputTime设置的是倒计时的截止日期
//nowTime是当前时间
function countDown(time) {
var nowTime = +new Date();
//没有参数,返回的是当前时间总的毫秒数
var inputTime = +new Date(time);
// 有参数,返回的是用户输入时间的总毫秒数
var times = (inputTime - nowTime) / 1000;
//times就是剩余时间的总的秒数var d = parseInt(times / 60 / 60 / 24);
//天数
d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
//小时
h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
//分
m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
//秒
s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-11-09 18:29:00'));
var date = new Date;
console.log(date);
//现在时间
4 Math对象 ECMAScript 还为保存数学公式和信息提供了一个公共位置,即 Math 对象。与我们在 JavaScript 直 接编写的计算功能相比,Math 对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。
4.1 Math的属性
Math 对象包含的属性大都是数学计算中可能会用到的一些特殊值。下表列出了这些属性。
属性 | 说明 |
---|---|
Math.E | 自然对数的底数,即常量e的值 |
Math.LN10 | 自然对数的底数,即常量e的值 |
Math.LN2 | 2的自然对数 |
Math.LOG2E | 以2为底e的对数 |
Math.LOG10E | 以10为底e的对数 |
Math.PI | π的值 |
Math.SQRT1_2 | 1/2的平方根(即2的平方根的倒数) |
Math.SQRT2 | 2的平方根 |
min()和 max()方法用于确定一组数值中的最小值和最大值。
var max = Math.max(3, 54, 32, 16);
alert(max);
//54
var min = Math.min(3, 54, 32, 16);
alert(min);
//3 //要找到数组中的最大或最小值,可以像下面这样使用 apply()方法。
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);
//这个技巧的关键是把 Math 对象作为 apply()的第一个参数,从而正确地设置 this 值。然后,可
//以将任何数组作为第二个参数。
4.3 舍入方法
- Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数;
- Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数;
- Math.round()执行标准舍入,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。
alert(Math.ceil(25.9));
//26
alert(Math.ceil(25.5));
//26
alert(Math.ceil(25.1));
//26 alert(Math.round(25.9));
//26
alert(Math.round(25.5));
//26
alert(Math.round(25.1));
//25
alert(Math.round(-1.5));
// 0.5是往大了舍,所以是-1alert(Math.floor(25.9));
//25
alert(Math.floor(25.5));
//25
alert(Math.floor(25.1));
//25
4.4 random()方法
- random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1
- 得到一个两数之间的随机整数,包括第一个数,不包括第二个数
// 得到两个数之间的随机整数,并且包含这两个整数
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));
4.5 其他方法
文章图片
5 RegExp对象 这里着重介绍的是RegExp对象的使用,以及RegExp提供的属性和方法,关于正则表达式的使用和学习,建议查看菜鸟教程或者其他博客。
菜鸟正则表达式语法
5.1 创建正则表达式
① 使用字面量创建 js可以通过字面量创建正则表达式
var expression = / pattern / flags ;
- 模式(pattern)部分可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、 向前查找以及反向引用。
- 每个正则表达式都可带有一或多个标志(flags)。
- g:表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
- i:表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;
- m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模 式匹配的项。
/*
* 匹配字符串中所有"at"的实例
*/
var pattern1 = /at/g;
/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
var pattern2 = /[bc]at/i;
/*
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
*/
var pattern3 = /.at/gi;
② 使用RegExp构造函数创建
/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
var pattern1 = /[bc]at/i;
/*
* 与 pattern1 相同,只不过是使用构造函数创建的
*/
var pattern2 = new RegExp("[bc]at", "i");
由于 RegExp 构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义。
所有元字符都必须双重转义,那些已经转义过的字符也是如此,例如\n(字符
\
在字符串中通常被转义为\\
,而在正则表达式字符串中就 会变成\\\\
)。下表给出了一些模式,左边是这些模式的字面量形式,右边是使用 RegExp 构造函数定义相同模式时使用的字符串。
文章图片
5.2 RegExp实例属性
RegExp 的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息。
属性名 | 作用 |
---|---|
global | 布尔值,表示是否设置了 g 标志。 |
ignoreCase | 布尔值,表示是否设置了 i 标志。 |
multiline | 布尔值,表示是否设置了 m 标志。 |
lastIndex | 整数,表示开始搜索下一个匹配项的字符位置,从 0 算起。 |
source | 正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。 |
var pattern1 = /\[bc\]at/i;
alert(pattern1.global);
//false
alert(pattern1.ignoreCase);
//true
alert(pattern1.multiline);
//false
alert(pattern1.lastIndex);
//0
alert(pattern1.source);
//"\[bc\]at" var pattern2 = new RegExp("\\[bc\\]at", "i");
alert(pattern2.global);
//false
alert(pattern2.ignoreCase);
//true
alert(pattern2.multiline);
//false
alert(pattern2.lastIndex);
//0
alert(pattern2.source);
//"\[bc\]at"
5.3 RegExp实例方法
5.3.1 exec() RegExp 对象的主要方法是 exec(),该方法是专门为捕获组而设计的。
- exec()接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null。
- 返回的数组虽然是 Array 的实例,但包含两个额外的属性:index 和 input。其中,index 表示匹配项在字符串中的位置,而 input 表示应用正则表达式的字符串。
- 在数组中,第一项是与整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串
var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
alert(matches.index);
// 0
alert(matches.input);
// "mom and dad and baby"
alert(matches[0]);
// "mom and dad and baby"
alert(matches[1]);
// " and dad and baby"
alert(matches[2]);
// " and baby"
- 对于 exec()方法而言,即使在模式中设置了全局标志(g),它每次也只会返回一个匹配项。
- 在不设置全局标志的情况下,在同一个字符串上多次调用 exec()将始终返回第一个匹配项的信息。
- 而在设置全局标志的情况下,每次调用 exec()则都会在字符串中继续查找新匹配项
var text = "cat, bat, sat, fat";
var pattern1 = /.at/;
var matches = pattern1.exec(text);
alert(matches.index);
//0
alert(matches[0]);
//cat
alert(pattern1.lastIndex);
//0
matches = pattern1.exec(text);
alert(matches.index);
//0
alert(matches[0]);
//cat
alert(pattern1.lastIndex);
//0 var pattern2 = /.at/g;
var matches = pattern2.exec(text);
alert(matches.index);
//0
alert(matches[0]);
//cat
alert(pattern2.lastIndex);
//3
matches = pattern2.exec(text);
alert(matches.index);
//5
alert(matches[0]);
//bat
alert(pattern2.lastIndex);
//8
5.3.2 test()
test()
正则对象方法,用于检测字符串是否符合该规则,该对象会返回true
或false
,其参数是测试字符串
regexObj.test(str)
regexObj
写的是正则表达式str
我们要测试的文本- 就是检测
str
文本是否符合我们写的正则表达式规范
>
// 正则表达式在js中的使用// 1. 利用 RegExp对象来创建 正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);
// 2. 利用字面量创建 正则表达式
var rg = /123/;
// 3.test 方法用来检测字符串是否符合正则表达式要求的规范
console.log(rg.test(123));
console.log(rg.test('abc'));
5.4 RegExp构造函数属性
RegExp 构造函数包含一些属性(这些属性在其他语言中被看成是静态属性)。这些属性适用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。
这些属性分别有一个长属性名和一个短属性名 (Opera 是例外,它不支持短属性名)。下表列出了 RegExp 构造函数的属性。
长属性名 | 短属性名 | 说明 |
---|---|---|
input | $_ | 最近一次要匹配的字符串。Opera未实现此属性 |
lastMatch | $& | 最近一次的匹配项。Opera未实现此属性 |
lastParen | $+ | 最近一次匹配的捕获组。Opera未实现此属性 |
leftContext | $` | input字符串中lastMatch之前的文本 |
multiline | $* | 布尔值,表示是否所有表达式都使用多行模式。IE和Opera未实现此属性 |
rightContext | $’ | Input字符串中lastMatch之后的文本 |
var text = "this has been a short summer";
var pattern = /(.)hort/g;
/*
* 注意:Opera 不支持 input、lastMatch、lastParen 和 multiline 属性
* Internet Explorer 不支持 multiline 属性
*/
if (pattern.test(text)){
alert(RegExp.input);
// this has been a short summer
alert(RegExp.lastMatch);
// short
alert(RegExp.leftContext);
// this has been a
alert(RegExp.rightContext);
// summer
alert(RegExp.lastParen);
// s
alert(RegExp.multiline);
// false
}
6 字符串对象 6.1 基本包装类型
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
我们看看下面代码有什么问题吗?
var str = 'andy';
console.log(str.length);
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
// 1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;
6.2 字符串位置方法
6.2.1 根据字符返回位置
方法名 | 说明 |
---|---|
indexOf(‘要查找的字符’,开始的位置) | 返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
// 字符串对象根据字符返回位置str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));
//默认从0开始查找 ,结果为2
console.log(str.indexOf('春', 3));
// 从索引号是 3的位置开始往后查找,结果是8
查找字符串 “abcoefoxyozzopp” 中所有o出现的位置以及次数
- 核心算法:先查找第一个o出现的位置
- 然后 只要 indexOf返回的结果不是 -1 就继续往后查找
- 因为 indexOf 只能查找到第一个,所以后面的查找,一定是当前索引加1,从而继续查找
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);
6.2.2 根据位置返回字符
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML,IE8+支持和charAt()等效 |
- 核心算法:利用 charAt() 遍历这个字符串
- 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
- 遍历对象,得到最大值和该字符
>
// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
age: 18
}
if (o['sex']) {
console.log('里面有该属性');
} else {
console.log('没有该属性');
}//判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
// o.a = 1
// o.b = 1
// o.c = 1
// o.o = 4
// 核心算法:利用 charAt() 遍历这个字符串
// 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
// 遍历对象,得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0;
i < str.length;
i++) {
var chars = str.charAt(i);
// chars 是 字符串的每一个字符
if (o[chars]) { // o[chars] 得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
// 2. 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到是 属性名
// o[k] 得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是' + ch);
6.3 字符串操作方法
方法名 | 说明 |
---|---|
concat(str1,str2,str3…) | concat() 方法用于连接两个或对各字符串。拼接字符串 |
substr(start,length) | 从 start 位置开始(索引号), length 取的个数。 |
slice(start,end) | 从 start 位置开始,截取到 end 位置 ,end 取不到 (两个都是索引号) |
substring(start,end) | 从 start 位置开始,截取到 end 位置 ,end 取不到 (基本和 slice 相同,但是不接受负) |
>
// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));
// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2));
// 第一个2 是索引号的2第二个2 是取几个字符
6.4 replace()方法
replace() 方法用于在字符串中用一些字符替换另一些字符
其使用格式:
replace(被替换的字符,要替换为的字符串)
>
// 1. 替换字符 replace('被替换的字符', '替换为的字符')它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp'要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
6.5 split()方法
【JavaScript|JS内置引用类型/内置对象】split() 方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
var str = 'a,b,c,d';
console.log(str.split(','));
// 返回的是一个数组 ['a', 'b', 'c', 'd']
>
//字符转换为数组 split('分隔符')
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
6.6 大小写转换
toUpperCase()
转换大写toLowerCase()
转换小写
推荐阅读
- Vuejs|Vue全家桶之Vue CLI入门(三)
- 用egg.js+mongodb简单实现CURDAPI
- 笔记|ES6 新特性介绍
- 前端|ES6语法新特性
- JavaScript|Jquery对象、Jquery选择器、Jquery Dom操作及事件
- 前端|ES6新特性总结
- JavaScript|JavaScript — 对象创建模式与继承模式
- JavaScript|JavaScript — 线程机制与事件机制
- javascript|ES6新特性(上)——let及const、解构赋值、模板字符串、Symbol