07JavaScript引用类型
引用类型
在JavaScript中,变量是某个对象的属性,函数是某个对象的方法
在浏览器环境里面,定义的全局变量就是window对象的属性
引用类型的分类
引用类型 | 描述 |
---|---|
Date 类型 | 获取和设置当前日期时间 |
Math 类型 | 用于数学计算 |
Global 类型 | 全局对象,提供全局属性和全局方法 |
Array 类型 | 用于有序的存储多个值 |
RegExp 类型 | 用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具 |
Error 类型 | 用于匹配代码错误并提供对应提示内容 |
Function 类型 | 用于定义 JavaScript 中的函数 |
Object 类型 | 用于定义 JavaScript 中的对象 |
Date类型
创建一个Date
类型的对象
1 | var date1 = new Date() |
Date
提供now()
方法,可以得到一个从 1970 年1月1日 00:00:00 至当前系统时间的毫秒数值。
Date类型初始化时间也可以指定日期,语法
1 | var date = new Date(year, month [, day [, hours [, minutes [, seconds [, milliseconds]]]]]) |
- year 参数:表示年份的整数值。
- month 参数:表示月份的整数值。值范围为 0 ~ 11,表示从 1 月至 12 月。
- day 参数:表示一个月份中的第几天的整数值。值从 1 开始。
- hours 参数:表示一天中的小时数(24 小时制)。0 时表示午夜。
- minutes 参数:表示一个完整时间(如 01:10:00)中的分钟部分的整数值。默认值为 0。
- seconds 参数:表示一个完整时间(如 01:10:00)中的秒部分的整数值。默认值为 0。
- milliseconds 参数:表示一个完整时间的毫秒部分的整数值。默认值为 0。
此外关于Date类型提供的一些方法与设置方法
获取方法 | 设置方法 | 描述 |
---|---|---|
getDate() | setDate() | 返回 Date 对象“日期”部分数值(1 ~ 31) |
getDay() | 返回 Date 对象“星期”部分的数值(0 ~ 6) | |
getFullYear() | setFullYear() | 返回 Date 对象“年份”部分的实际数值 |
getHours() | setHours() | 返回 Date 对象“小时”部分的数值(0 ~ 23) |
getMilliseconds() | setMilliseconds() | 返回 Date 对象“毫秒”部分的数值(0 ~ 999) |
getMinutes() | setMinutes() | 返回 Date 对象“分钟”部分的数值(0 ~ 59) |
getMonth() | setMonth() | 返回 Date 对象“月份”部分的数值(0 ~ 11) |
getSeconds() | setSeconds() | 返回 Date 对象“秒”部分的数值(0 ~ 59) |
getTime() | setTime() | 返回 Date 对象与 UTC 时间 1970 年 1 月 1 日午夜之间相差的毫秒数 |
在Date类型提供的方法中,可以用来做时间戳的方法有两个:
getTime()
方法Date.now()
方法
关于日期格式化方法:
方法 | 描述 |
---|---|
toString() | 返回 Date 对象的字符串形式 |
toDateString() | 返回 Date 对象“日期”部分(年月日)的字符串形式 |
toTimeString() | 返回 Date 对象“时间”部分(时分秒)的字符串形式 |
toLocaleString() | 基于本地时间格式,返回 Date 对象的字符串形式 |
toLocaleDateString() | 基于本地时间格式,返回 Date 对象“ 日期”部分(年月日)的字符串形式 |
toLocaleTimeString() | 基于本地时间格式,返回 Date 对象“时间”部分(时分秒)的字符串形式 |
toGMTString() | 基于 GMT 时间格式,返回 Date 对象的字符串形式 |
toUTCString() | 基于 UTC 时间格式,返回 Date 对象的字符串形式 |
输出当前年月日
1 | console.log( |
Math类型
JavaScript 语言中的 Math 类型,提供了一系列有关数学常数的属性和数学计算的方法。Math 类型与 JavaScript 语言中的其他引用类型不同的是,Math 并不是一个构造函数。换句话讲,我们无法通过 Math 类型创建一个对象。
Math类型的属性包括以下一些:
属性 | 描述 |
---|---|
Math.E | 欧拉常数,自然对数的底数, 约等于 2.718 |
Math.LN2 | 2 的自然对数, 约等于 0.693 |
Math.LN10 | 10 的自然对数, 约等于 2.303 |
Math.LOG2E | 以 2 为底 E 的对数, 约等于 1.443 |
Math.LOG10E | 以 10 为底 E 的对数, 约等于 0.434 |
Math.PI | 圆周率,一个圆的周长和直径之比,约等于 3.14159 |
Math.SQRT1_2 | 1/2 的平方根, 约等于 0.707 |
Math.SORT2 | 2 的平方根,约等于 1.414 |
以上属性均为只读属性,不可更改。但是如果强制修改也不会报错。
这里指的不能修改指的是Math.PI
不可修改,但是如果将其赋予一个变量,然后修改这个变量,那么值还是可以修改的。
1 | var test1 = Math.PI; |
Math类型的方法
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值 |
exp(x) | 返回 e 的指数 |
log(x) | 返回数的自然对数(底为 e) |
pow(x, y) | 返回 x 的 y 次幂 |
ceil(x) | 对数进行向上取整 |
floor(x) | 对数进行向下取整 |
round(x) | 把数四舍五入为最接近的整数 |
max(x, y) | 返回 x 和 y 中的最高值 |
min(x, y) | 返回 x 和 y 中的最低值 |
在JavaScript
中,生成随机数要用到的方法是random()
1 | // 得到一个 0~100 之间的随机整数 |
Array类型
检测数组
即检测一个变量是否为数组。
instanceof
运算符Array.isArray()
方法支持
Array.isArray()
方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+ 和 Chrome。换句话讲,还有一些浏览器版本是不支持Array.isArray()
方法的。Object.prototype.toString.call()
方法用于解决
Array.isArray()
在部分浏览器不支持的问题Array.prototype.isPrototypeOf()
方法
1 | var test = [1, 2, 3, 4, 5]; |
从图中我们可以看到,只有Object.prototype.toString.call()
这种方式返回的是[object Array],其余三种方法都返回的是布尔类型。
转换方法
toString()
方法:将一个数组转换为字符串,数组中的元素之间使用逗号(,
)进行分隔。valueOf()
方法:得到当前对象的原始值。如果是 Array 的话,则得到数组对象本身。
进出栈方法
push()
方法:该方法将一个或多个数据内容添加到指定数组的末尾,并返回该数组的新长度。pop()
方法:该方法将从指定数组的末尾删除一个数据内容,并返回被删除的数据内容。该方法会改变数组的长度。
栈操作的是列表的末尾。
1 | var arr = [100, true, "这是一个字符串"]; |
队列方法
队列即向列表头添加或删除数据。我们使用的方法是
unshift(x)
向列表头添加xshift()
删除列表第一项
1 | var test = [1, 2, 3, 4]; |
排序方法
reverse()
方法:该方法将数组中元素的位置进行颠倒,并将颠倒后的数组返回。sort()
方法:该方法按照升序排列方式将数组中的元素进行重新排序,并将重新排序的数组返回。
值得注意的是:sort()
方法对于数字并不是按照大小排序的,而是按照第一个数字的大小排序的。例如:
1 | var arr = [1, 21, 10, 5, 2]; |
如果我们要按照大小排序,则应传入回调函数array.sort([compareFunction])
1 | var arr = [1, 21, 10, 5, 2] |
连接方法
Aarray 提供了 concat()
方法用来合并两个或者多个数组。该方法不会改变原有数组,返回合并后的新数组。其语法结构如下所示:
1 | var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) |
- value1…valueN 参数:与原有数组合并的数组或值。
如下示例代码展示了使用 concat()
方法合并两个数组的用法:
1 | var arr = [1, 2, 3, 4, 5] |
操作方法
slice()
方法:该方法可以根据开始位置和结束位置从某个数组中截取指定的数据内容,并将其返回。1
var new_arr = arr.slice([begin[, end]])
begin 参数:可选项,表示截取开始的位置(从 0 开始)。
end 参数:可选项,表示截取结束的位置。截取的数据内容不包含 end 位置的数据内容。
此方法并不会影响原来的数组。
1
2
3
4
5var arr = ["ant", "bison", "camel", "duck", "elephant"];
var result = arr.slice(1, 3);
console.log(result, arr);
//结果为 [ 'bison', 'camel' ] [ 'ant', 'bison', 'camel', 'duck', 'elephant' ]如果不写end参数,则截取开始到结束的所有元素。
splice()
方法:该方法可以实现对某个数组的新增、修改以及删除等操作。
新增、修改及删除操作
1 | var arr = array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) |
start 参数:表示修改数组的开始位置(从 0 开始)。
deleteCount 参数:可选项,表示要删除数组中元素的个数。
item1,item2,… 参数:可选项,表示从 start 指定的位置添加的元素。
返回值:由删除的元素组成的数组。如果只删除一个元素,则返回一个只有一个元素的数组。如果没有删除元素,则返回一个空数组。
增加元素
如果将 deleteCount 参数的值设置为 0 的话,则表示
splice()
方法向某个数组的 start 位置新增元素。如下示例代码所示1
2
3
4var arr = [3, 4, 5];
var result = arr.splice(1, 0, "1", "2");
console.log(result, arr);
//返回结果为 [] [ 3, '1', '2', 4, 5 ]我们可以看到由于我们并没有删除 arr 数组中任何一个元素,所以
splice()
方法返回的结果为空数组。并且splice()
方法会改变原有数组。删除元素
如果省略 item1、item2 … 等参数的话,则表示
splice()
方法从某个数组的 start 位置开始删除 deleteCount 个元素。1
2
3
4var arr = [3, 4, 5];
var result = arr.splice(1, 2);
console.log(result, arr);
// 返回结果 [ 4, 5 ] [ 3 ]我们可以看到当省略 item1、item2 … 等参数时,
splice()
方法返回的结果为被删除的元素所组成的数组。如果 deleteCount 参数的值大于
array.length-start
值的话,则将 start 位置之后的所有元素删除(包含 start 位置)修改元素
果 start 参数、deleteCount 参数和 item1、item2 … 等参数全部传递的话,则表示
splice()
方法将某个数组从 start 位置开始的 deleteCount 个元素替换为 item1、item2 … 等新的元素。1
2
3
4var arr = [3, 4, 5];
var result = arr.splice(1, 1, "2");
console.log(result, arr);
//返回结果[ 4 ] [ 3, '2', 5 ]
位置方法
ECMA-262 第 5 版本为 Array 新增了两个有关位置的方法。这两个方法都接收 2 个参数:一个是要查找的元素,一个是开始查找的位置。如下所示:
indexOf()
方法:在某个数组中查找指定元素的第一个索引值。如果存在则返回索引值,如果不存在则返回 -1。lastIndexOf()
方法:在某个数组中查找指定元素的最后一个索引值。如果存在则返回索引值,如果不存在则返回 -1。
迭代方法
ECMA-262 第 5 版本为 Array 新增了 5 个迭代数组的方法,也就是遍历数组中元素的方法。如下所示:
forEach()
方法:遍历数组中每一个元素时,会执行一个给定的函数。该方法没有返回值。every()
方法:遍历数组中每一个元素,判断每一个元素是否满足给定函数的条件。如果满足则返回 true,否则返回 false。filter()
方法:遍历数组中每一个元素,将满足给定函数条件的每一个元素组成一个新数组,并返回。map()
方法:遍历数组中每一个元素,在给定函数中对每一个元素进行处理,并创建一个新数组进行返回。some()
方法:遍历数组中每一个元素,如果有一个元素满足给定函数的条件,则返回 true,否则返回 false。
上述 5 个迭代方法都是接收 2 个参数,一个是给定的函数,一个是调用给定函数时的 this 值(可选项)。而给定的函数还接收 3 个参数,如下所示:
- currentValue 参数:当前遍历数组所得到的元素。
- index 参数:当前遍历数组得到的元素所在的索引值。
- array 参数:正在遍历的数组。
1 | var arr = ['ant', 'bison', 'camel', 'duck', 'elephant'] |
归并方法
ECMA-262 第 5 版本为 Array 新增了 2 个归并方法。所谓的归并,就是指遍历数组中每一个元素,并调用给定的函数,将最终的结果进行返回。
reduce()
方法:从左至右地遍历数组中每一个元素,调用给定的函数,并将最终的结果返回。reduceRight()
方法:从右至左地遍历数组中每一个元素,调用给定的函数,并将最终的结果返回。
上述 2 个归并方法都是接收 2 个参数,一个是给定的函数,一个是第一次调用给定函数传递的给定函数的第一个参数值(可选项)。而给定的函数接收 4 个参数,如下所示:
- accumulator 参数:上一次调用给定函数得到的结果。
- currentValue 参数:当前遍历数组所得到的元素。
- index 参数:当前遍历数组得到的元素所在的索引值。
- array 参数:正在遍历的数组。
1 | var arr = [0, 1, 2, 3, 4, 5] |
RegExp类型
JavaScript 语言提供了 RegExp 类型,该类型的全称为 Regular Expression,译为正则表达式。正则表达式是由一些普通字符和特殊字符组成的,用来描述一种特定的字符规则的表达式。
正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。
很多开发语言都支持正则表达式,而 JavaScript 语言支持正则表达式的方式就是提供了 RegExp 类型。
创建正则表达式
字面量方式
1
/pattern/flags
- pattern 参数:表示正则表达式的文本内容,可以包含字符类、限定符、分组、向前查找以及反向引用等内容。
- flags 参数:可选项,用来表明正则表达式的行为。该参数支持如下 3 个值的匹配模式:
- g:表示全局搜索
- i:表示忽略大小写
- m:表示多行匹配
构造函数方式
1
new RegExp(pattern [, flags])
- pattern 参数:表示正则表达式的文本内容,可以包含字符类、限定符、分组、向前查找以及反向引用等内容。
- flags 参数:可选项,用来表明正则表达式的行为。
RegExp()函数方式
1
RegExp(pattern [, flags])
- pattern 参数:表示正则表达式的文本内容,可以包含字符类、限定符、分组、向前查找以及反向引用等内容。
- flags 参数:可选项,用来表明正则表达式的行为。
注意:上述几种写法中无论是 '[bc]at'
的写法还是 /[bc]at/
的写法,其效果是一致的。
1 | // tag 字面量方式 |
字面量字符
正则表达式是由一些普通字符和特殊字符组成的,其中所有字母和数字都是按照字面含义进行匹配的,而其他字符的匹配需要通过反斜线(\
)作为前缀进行转义。如下表所示:
字符 | 匹配 |
---|---|
字母和数字 | 自身 |
\0 | 匹配 NULL(U+0000)字符, 不要在这后面跟其它小数,因为 \0 是一个八进制转义序列 |
\t | 匹配一个水平制表符(U+0009) |
\n | 匹配一个换行符(U+000A) |
\v | 匹配一个垂直制表符(U+000B) |
\r | 匹配一个回车符(U+000D) |
\xhh | 与代码 hh 匹配字符(两个十六进制数字) |
\uhhhh | 与代码 hhhh 匹配字符(四个十六进制数字) |
例如利用正则表达式来替换字符串里的某个字符,
1 | var str = "这是第一行的内容.\n这是第二行的内容."; |
以上代码的运行结果如图:
字符集合
如果将正则表达式的字面量字符放置在一个方括号([]
)内的话就组成了字符集合。一个字符类可以匹配它所包含的任意字符,同时正则表达式提供了一系列转义字符来表示一些比较常用的字符。如下表所示:
字符 | 匹配 |
---|---|
[…] | 一个字符集合。匹配方括号的中任意字符,包含转义字符。 |
[^…] | 一个反向字符集 |
. | 默认匹配除换行符之外的任何单个字符 |
\w | 匹配一个单字字符(字母、数字或者下划线)。等价于 [A-Za-z0-9_] |
\W | 匹配一个非单字字符。等价于 [^A-Za-z0-9_] |
\s | 匹配一个空白字符,包括空格、制表符、换页符和换行符。等价于 [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] |
\S | 匹配一个非空白字符。等价于 [^\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] |
\d | 匹配一个数字。等价于 [0-9] |
\D | 匹配一个非数字字符。等价于 [^0-9] |
1 | var str = "abc9test"; |
数量词
正则表达式经常需要来匹配某个字符或者某些字符是重复出现,例如 /\d\d/
表示数字连续出现两次。这种匹配重复出现的情况,可以使用正则表达式提供的指定字符重复的标记。如下表所示:
字符 | 匹配 |
---|---|
{n,m} | n 和 m 都是整数,匹配前面的字符至少 n 次,最多 m 次 |
{n} | n 是一个正整数,匹配了前面一个字符刚好出现了 n 次 |
{n,} | n 是一个正整数,匹配前一个字符至少出现了 n 次 |
? | 匹配前面一个表达式 0 次或者 1 次。等价于 {0,1} |
+ | 匹配前面一个表达式 1 次或者多次。等价于 {1,} |
* | 匹配前一个表达式 0 次或多次。等价于 {0,} |
1 | var str = "abc89test"; |
边界与断言
匹配某些字符串时,可能需要完全匹配,或者是以某些字符开始,亦或者是以某些字符结束等。想要满足这些需求,可以通过正则表达式提供的有关指定匹配位置的标记来实现。如下表所示:
字符 | 匹配 |
---|---|
^ | 匹配输入的开始。如果多行标志被设置为 true,那么也匹配换行符后紧跟的位置 |
$ | 匹配输入的结束。如果多行标示被设置为 true,那么也匹配换行符前的位置 |
\b | 匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置 |
\B | 匹配一个非单词边界 |
x(?=y) | 匹配 x 仅仅当 x 后面跟着 y,这种叫做先行断言 |
x(?!y) | 仅仅当 x 后面不跟着 y 时匹配 x,这被称为正向否定查找 |
1 | var str = "JavaScript"; |
修饰符
正则表达式的修饰符,可以实现正则表达式的高级匹配模式的规则。在 JavaScript 语言中支持的修饰符有 3 个,如下表所示:
字符 | 匹配 |
---|---|
i | 不区分大小写搜索 |
g | 全局搜索 |
m | 多行搜索 |
1 | var str = "JavaScript"; |
RegExp对象
JavaScript 语言中的 RegExp 类型同样是一个构造函数,除了可以用来创建一个 RegExp 类型的对象之外,RegExp 类型还提供了一些属性和方法供使用。
RegExp对象的属性
属性名 | 描述 | 是否只读 |
---|---|---|
global | RegExp 对象是否具有 g 修饰符 | √ |
ignoreCase | RegExp 对象是否具有 i 修饰符 | √ |
multiline | RegExp 对象是否具有 m 修饰符 | √ |
lastIndex | 用于设置/获取下次匹配的起始位置 | × |
source | 返回模式匹配所使用的文本 | √ |
1 | var str = /^javascript$/i; |
RegExp对象的方法
RegExp 类型仅提供了 2 个方法以供使用,但这两个方法在正则表达式的使用频率还是很高的。如下所示:
test()
方法:用来查看正则表达式与指定的字符串是否匹配。如果匹配返回 true,否则返回 false。exec()
方法:在一个指定字符串中执行一个搜索匹配。返回结果为数组或 null。
1 | var matches = /(hello \S+)/.exec("This is a hello world!"); |
返回结果的具体含义:
属性/索引 | 描述 |
---|---|
[0] | 匹配的全部字符串 |
[1]...[n] | 括号中的分组捕获 |
index | 匹配到的字符位于原始字符串的基于 0 的索引值 |
input | 原始字符串 |
String类型
无论是 string 基本数据类型,还是 String 引用类型,都可以使用 String 类型提供的属性和方法。
大小写转换
方法 | 描述 |
---|---|
toUpperCase() | 将字符串转换成大写并返回 |
toLowerCase() | 将字符串转换成小写并返回 |
toLocaleUpperCase() | 根据当前区域设置,将字符串中的字符转换成大写 |
toLocaleLowerCase() | 根据当前区域设置,将符串中的字符转换成小写 |
获取指定位置的字符串
方法 | 描述 |
---|---|
charAt() | 返回特定位置的字符 |
charCodeAt() | 返回表示给定索引的字符的 Unicode 值 |
codePointAt() | 返回使用 UTF-16 编码的给定位置的值的非负整数 |
检索字符串
方法 | 描述 |
---|---|
indexOf() | 从字符串中查找首个与给定值一致的首字母的索引值,如果没有找到则返回 -1 |
lastIndexOf() | 从字符串中查找最后一个与给定值一致的首字母的索引值,如果没有找到则返回 -1 |
截取子字符串
方法 | 描述 |
---|---|
slice() | 截取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串 |
substring() | 返回一个字符串在开始索引到结束索引之间的一个子字符串 |
substr() | 返回一个字符串中从指定位置开始到指定字符数的子字符串 |
分割字符串
1 | var str_arr = str.split([separator[, limit]]) |
- separator 参数:表示分割字符串的分割符,可以是一个字符串或正则表达式。
- limit 参数:表示限定返回分割片段的数量。
连接字符串
String 类型提供了 concat()
方法用来将一个或多个字符串与原有字符串连接合并在一起,形成一个新的字符串并返回。
1 | var new_str = str.concat(string1, string2[, ..., stringN]) |
- string1…stringN 参数:表示要与原有字符串连接合并的字符串。
模糊匹配
由于在 JavaScript 语言中正则表达式主要是配合字符串来使用的,而 String 类型提供了 3 个与正则表达式有关的方法,这些方法称为模式匹配方法。
search()
方法:在某个字符串中查找与指定正则表达式匹配的子字符串,并返回首次匹配的字符的索引值。1
2
3
4var data = 'Microsoft is a big Company, Microsoft’s color is red and has MICROSOFT logo like Microsoft'
console.log(data.search(/microsoft/))
console.log(data.search(/microsoft/i))match()
方法:在某个字符串中检索与指定正则表达式匹配的子字符串,并返回匹配的结果。1
2
3
4var data = 'Microsoft is a big Company, Microsoft’s color is red and has MICROSOFT logo like Microsoft'
console.log(data.match(/microsoft/))
console.log(data.match(/microsoft/i))replace()
方法:在某个字符串中检索与指定正则表达式匹配的子字符串,将匹配的子字符串进行替换,并返回替换的新字符串。1
2
3var data = 'Microsoft is a big Company, microsoft’s color is red and has MICROSOFT logo like microsoft';
console.log(data.replace(/microsoft/ig, 'oracle'))