JavaScript第五章

JavaScript第五章——引用类型

引用类型是一种数据结构, 用于将数据和功能组织在一起(也常常被称作是类,有时候也被称为对象定义)

Object类型

创建实例方式

new操作符+Object构造函数

var person = new Object();

使用对象字面量表示法

var person = { name : "Nicholas", age : 29 };

对象字面量的开始:{

属性名可以使用字符串:var person = { "name" : "Nicholas", "age" : 29, 5 : true };

通过对象字面量定义对象时,实际上不会调用 Object 构造函数

好的做法是对那些必需值使用命名参数,而使用对象字面量来封装多个可选参数

访问对象属性

JavaScript可以使用方括号表示法和点表示法来访问对象的属性

方括号:alert(person["name"]); //"Nicholas" alert(person.name); //"Nicholas"

方括号语法的主要优点是可以通过变量来访问属性:var propertyName = "name"; alert(person[propertyName]);

属性名中包含会导致语法错误的字符,或者属性名使用的是关键字或保留字,也可以使用方括 号表示法

Array类型

ECMAScript 数组的每一项可以保存任何类型的数据,数组的大小是可以动态调整的

创建数组的方式

使用 Array 构造函数

var colors = new Array(length); (可以省略new操作符)

如果传递的是数 值,则会按照该数值创建包含给定项数的数组;而如果传递的是其他类型的参数,则会创建包含那个值 的只有一项的数组。

数组字面量表示法

由一对包含数组项的方括号表示,多个数组项之间以逗号隔开

访问数组

方括号的索引

length属性

不是只读,可进行修改,可以从数组的末尾移 除项或向数组中添加新项

设置小多余的那一项为undefined,设置大多余的那一项为undefined

当把一个值放在超出当前数组大小的位置上时,数组就会重新计算其长度值,即长度值 等于后一项的索引加 1

数组多可以包含 4 294 967 295个项

创建一个初始大小与这个上限值 接近的数组,则可能会导致运行时间超长的脚本错误

检测数组

instanceof 操作符

只有一个全局执行环境

Array.isArray()方法

目的是终确定某个值到底是不是数组,不管它是在哪个全局执行环境中创建的

转换方法

所有对象都具有 toLocaleString()、toString()和 valueOf()方法

调用 数组的 toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

调用 valueOf()返回的还是数组,实际上,创建这个字符串会调用数组每一项的 toString()方法

调用数组的 toLocaleString()方法时,它也会创建一个数组值的以逗号分隔的字符 串。

join()方法

可以使用不同的分隔符来构建这个字符串。

join()方 法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串

不给 join()方法传入任何值,或者给它传入 undefined,则使用逗号作为分隔 符

如果数组中的某一项的值是 null 或者 undefined,那么该值在 join()、 toLocaleString()、toString()和 valueOf()方法返回的结果中以空字符串表示

栈方法

栈是一种 LIFO(Last-In-First-Out, 后进先出)的数据结构

新添加的项早被移除

栈中项的插入(叫做推入)和移除(叫做 弹出),只发生在一个位置——栈的顶部

ECMAScript

push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度

pop()方法从数组末尾移除后一项,减少数组的 length 值,然后返回移除的项

队列方法

队列数据结构的访问规则是 FIFO(First-In-First-Out, 先进先出)

shift()

能够移除数组中的第一个项并返回该项,同时将数组长度减 1

结合使用 shift()和 push()方法可以像使用队列一样使用数组

ECMAScript提供了一个 unshift()方法

在数组前端添加任意个项并返回新数组的长度

同时使用 unshift()和 pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项

IE7及更早版本对 JavaScript的实现中存在一个偏差,其 unshift()方法总是返 回 undefined 而不是数组的新长度。IE8在非兼容模式下会返回正确的长度值

重排序方法

reverse()和 sort()

sort()方法按升序排列数组项

sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以 确定如何排序

sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面(有效解决无法正常排序)

reverse()和 sort()方法的返回值是经过排序之后的数组

操作方法

concat()方法基于当前数组中的所有项创建一个新数组

先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,后返回新构建的数组

在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本

传递给 concat()方法的是一或多个数组,则该方法会将这些数组中的 每一项都添加到结果数组中

如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。

slice()

基于当前数组中的一或多个项创建一个新数组

slice()方法可以接受一或两个参数,即要返回项的起始和结束位置

只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项

有两个参数,该方法返回起始和结束位置之间的项— —但不包括开始和结束位置的项

slice()方法不会影响原始数组

slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位 置

splice()方法

splice()的主要用途是向数组的中部插入项

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何 项,则返回一个空数组)

位置方法

indexOf():从数组的开头(位 置 0)开始向后查找

lastIndexOf():从数组的末尾开始向前查找

都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引

比较第一个参数与数组中的每一项时,会使用全等操作符

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回

迭代方法

ECMAScript 5为数组定义了 5个迭代方法

每个方法都接收两个参数:要在每一项上运行的函数和 (可选的)运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身

归并方法

reduce():从数组的第一项开始,逐个遍历到后

reduceRight():从数组的后一项开始,向前遍历到第一项

两个方法都会迭 代数组的所有项,然后构建一个终返回的值

都接收 4 个参数:前一个值、当前值、项的索引和数组对象

Date 类型

Date 类型使用自 UTC(Coordinated Universal Time,国际协调时间)1970年 1月 1日午夜(零时)开始经过 的毫秒数来保存日期

创建日期对象

使用 new 操作符和 Date 构造函数

var now = new Date();

在调用 Date 构造函数而不传递参数的情况下,新创建的对象自动获得当前日期和时间

Date.parse()

接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数

传入 Date.parse()方法的字符串不能表示日期,那么它会返回 NaN

直接将表 示日期的字符串传递给 Date 构造函数,也会在后台调用 Date.parse()

Date.UTC()

返回表示日期的毫秒数

Date.UTC()的参数分别是年份、基于 0的月份(一月是 0,二月是 1,以此类推)、月中的哪一天 (1 到 31)、小时数(0 到 23)、分钟、秒以及毫秒数。

前两个参数(年和月)是必 需的

Data.now()

在不支持它的浏览器中,使用+操作符把 Data 对象转换成字符串,也可以达到同样的目的

继承的方法

Date 类型的 toLocaleString()方法会按照与浏览器 设置的地区相适应的格式返回日期和时间

时间格式中会包含 AM或 PM,但不会包含时 区信息

具体的格式会因浏览器而异

toString()方法则通常返回带有时区信息的日期和时间,其中时间一般以军用时间(即小时的范围是 0 到 23)表示

日期格式化方法

用于将日期格式化为字符串的方法

toGMTString()的方法

与 toUTCString()等价的方法,其存在目的在于确保向后兼容

ECMAScript推荐现在编写的代码一律使用 toUTCString()方法

日期 /时间组件方法

直接取得和设置日期值中特定部分的方法

RegExp 类型

是一个正值表达式

var expression = / pattern / flags ;

模式(pattern)部分可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、 向前查找以及反向引用

元字符有( [ { \ ^ $ | ) ? * + .]}

模式中使用的所有元字符都必须转义

每个正则表达式都可带有一或多个标志(flags),用以标明正则表达式的行为

RegExp 构造 函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义

ECMAScript 5明确规定,使用正则表达式字面量必须像直接调用 RegExp 构造函数一样,每次都创 建新的 RegExp实例

RegExp实例属性

source 属性保存的是规范形式的字符串,即字面量形式所用的字符串

RegExp实例方法

主要方法是 exec()

专门为捕获组而设计

exec()接受一个参数,即 要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null(返回的数组包含两个额外的属性:index 和 input)

index 表示匹配 项在字符串中的位置,而 input 表示应用正则表达式的字符串

数组中的第一项是匹配的整个字符串,第二项包含与第一个捕获组匹配的内容,第三项包含与第二个捕获组匹配的内容。

全局情况下

设置了全局标志(g),它每次也只会返回一个匹配项

在设置全局标志的情况下,每次调用 exec()则都会在字符串中继续查找新匹配项

非全局情况

在同一个字符串上多次调用 exec()将始终返回第一个匹配项的信息

注意:IE 的 JavaScript 实现在 lastIndex 属性上存在偏差,即使在非全局模式下, lastIndex 属性每次也会变化。

正则表达式的 valueOf()方法返回正则表达式本身。

RegExp构造函数属性

适用于作用域中的所有正则表达式,并且基于所执行的近一次正则表达式操作而变化

访问方式

长属性名和一个短属性名 (Opera是例外,它不支持短属性名)

模式的局限性

ECMAScript正则表达式不支持的特性

Function 类型

函数实际上是对象。每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法

具有属性和方法,是一个指向函数对象的指针

定义

函数通常使用函数声明语法定义的

function sum (num1, num2) { return num1 + num2; }

函数表达式定义函数

var sum = function(num1, num2){ return num1 + num2; };

使用 Function 构造函数

Function 构造函数可以接收任意数量的参数, 但后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数

一个函数可能会有多个名字

函数名仅仅是指向函数的指针

没有重载

由于函数名是指针

声明了两个同名函数,而结果则是后面的函数覆盖了前面的函数

函数声明与函数表达式

解析器先读取函数声明,并使其在执行 任何代码之前可用;函数表达式必须等到解析器执行到它所在的代码行,才会真正被解释执行

注意:可以同时使用函数声明和函数表达式,例如 var sum = function sum(){}。 不过,这种语法在 Safari中会导致错误

作为值的函数

ECMAScript中的函数名本身就是变量,所以函数也可以作为值来使用

不仅可以 像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回

访问函数的指针而不执行函数的话,必须去掉函数名后 面的那对圆括号

函数内部属性

两个特殊的对象:arguments 和 this

arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数

this行为与 Java和 C#中的 this 大致类似

this 引用的是函数据以执行的环境对象—— this 值(当在网页的全局作用域中调用函数时, this 对象引用的就是 window)

caller

这个属性中保存着调用当前函数的函数的引用, 如果是在全局作用域中调用当前函数,它的值为 null

当函数在严格模式下运行时,访问 arguments.callee 会导致错误

这个属性是为了分清 arguments.caller 和函数的 caller 属性

严格模式下的限制:不能为函数的 caller 属性赋值,否则会导致错误

函数属性和方法

函数都包含两个属性:length 和 prototype

length 属性表示函数希望接收的命名参数的个数

prototype 是保存函数所有实例方法的真正所在

注意:在 ECMAScript 5中,prototype 属性是不可枚举的,因此使用 for-in 无法发现

每个函数都包含两个非继承而来的方法:apply()和 call()

实际上等于设置函数体内 this 对象的值

apply()方法接收两个参数:一个 是在其中运行函数的作用域,另一个是参数数组(可以是 Array 的实例,也可以是 arguments 对象)。

call()方法:第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数(在使用 call()方法时,传递给函数的参数必须逐个列举出来)

使用 call()(或 apply())来扩充作用域的大好处,就是对象不需要与方法有任何耦合关系

注意:在严格模式下,未指定环境对象而调用函数,则 this 值不会转型为 window;除非明确把函数添加到某个对象或者调用 apply()或 call(),否则 this 值将是 undefined

ECMAScript 5还定义了一个方法:bind()

创建一个函数的实例,其 this 值会被绑 定到传给 bind()函数的值

基本包装类型

Boolean、Number 和 String

每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们 能够调用一些方法来操作这些数据

引用类型与基本包装类型的主要区别就是对象的生存期。使用 new 操作符创建的引用类型的实例, 在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一 行代码的执行瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法

使用 new 调用基本包装类型的构造函数,与直接调用同名的转型函数是不一样的

Boolean类型

Boolean 类型是与布尔值对应的引用类型

基本类型与引用类型的布尔值的两个区别

typeof 操作符对基本类型返回"boolean", 而对引用类型返回"object"

由于Boolean对象是Boolean类型的实例,所以使用instanceof 操作符测试 Boolean 对象会返回 true,而测试基本类型的布尔值则返回 false

Number类型

Number 是与数字值对应的引用类型

创建 Number 对象,可以在调用 Number 构造函数时向其 中传递相应的数值

Number 类型也重写了 valueOf()、toLocaleString()和 toString() 方法。重写后的 valueOf()方法返回对象表示的基本类型的数值,另外两个方法则返回字符串形式的数值

toFixed()方法会按照指定的小数位返回数值的字符串表示

能够自动舍入的特性,使得 toFixed()方法很适合处理货币值

toFixed()方法可以表示带有 0 到 20 个小数位的数值。但这只是标准实现的范 围,有些浏览器也可能支持更多位数。

格式化数值的方法是 toExponential(),该方法返回以指数表示法(也称 e表示法) 表示的数值的字符串形式

接收一个参数,该参数指定输出结果中的小数位数

toPrecision()方法可以表现 1到 21位小数。某些浏览器支持的范围更大,但 这是典型实现的范围。

String类型

String 类型是字符串的对象包装类型

字符方法

访问字符串中特定字符的方法是:charAt()和 charCodeAt()

都接收一个参数,即基于 0 的字符位置

字符串操作方法

concat(),用于将一或多个字符串拼接起来, 返回拼接得到的新字符串。

加号操作符(+)

创建新字符串的方法

slice()、substr()和substring()

注意:IE的 JavaScript实现在处理向 substr()方法传递负值的情况时存在问题,它会 返回原始的字符串。IE9修复了这个问题。

字符串位置方法

查找子字符串的方法:indexOf()和 lastIndexOf()

从 一个字符串中搜索给定的子字符串,然后返子字符串的位置(如果没有找到该子字符串,则返回-1)

indexOf()方法从字符串的开头向后搜索子字符串,而 lastIndexOf()方法 是从字符串的末尾向前搜索子字符串

trim()方法

创建一个字符串的副本,删除前置及 后缀的所有空格,然后返回结果

字符串大小写转换方法

toLowerCase()、toLocaleLowerCase()、toUpperCase()和 toLocaleUpperCase()

toLowerCase()和 toUpperCase()是两个经典的方法,借鉴自 java.lang.String 中的同名方法

toLocaleLowerCase()和 toLocaleUpperCase()方法则是针对特定地区的实现

字符串的模式匹配方法

match()

字符串上 调用这个方法,本质上与调用 RegExp 的 exec()方法相同

match()方法只接受一个参数(要么是一 个正则表达式,要么是一个 RegExp 对象)

search()

这个方法的唯一参数与 match()方法的参数相同:由字 符串或 RegExp 对象指定的一个正则表达式。

search()方法返回字符串中第一个匹配项的索引;如果没 有找到匹配项,则返回-1;并且search()方法始终是从字符串开头向后查找模式

replace()方法

这个方法接受两个参数:第 一个参数可以是一个 RegExp 对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以是一个字符串或者一个函数

第一个参数是字符串,那么只会替换第一个子字符串

如果第二个参数是字符串,那么还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入 到结果字符串中

如果第二个参数是一个函数,会向这个函数传递 3个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串

split()

可以基于指定的分隔符将一个字符串分割成 多个子字符串,并将结果放在一个数组中。分隔符可以是字符串,也可以是一个 RegExp 对象(这个方 法不会将字符串看成正则表达式)

可选的第二个参数,用于指定数组的大小, 以便确保返回的数组不会超过既定大小

localeCompare()方法

比较两个字符串,并返回下列值中的一个

实现所支持的地区(国家和语言)决定了这个 方法的行为

fromCharCode()方法

接收一或 多个字符编码,然后将它们转换成一个字符串

HTML方法

单体内置对象

内置对象,例如 Object、Array 和 String。 ECMA-262还定义了两个单体内置对象:Global 和 Math

Global对象

不属于任何其他对象的属性和方法,终都是它的属性和方法

URI编码方法

Global 对象的 encodeURI()和 encodeURIComponent()方法可以对 URI(Uniform Resource Identifiers,通用资源标识符)进行编码,以便发送给浏览器

encodeURI()主要用于整个 URI(例如,http://www.wrox.com/illegal value.htm),而 encode- URIComponent()主要用于对 URI中的某一段(例如前面 URI中的 illegal value.htm)进行编码

encodeURI()不会对本身属于 URI 的特殊字符进行编码,例如冒号、正斜杠、 问号和井字号;而 encodeURIComponent()则会对它发现的任何非标准字符进行编码

与 encodeURI()和 encodeURIComponent()方法对应的两个方法分别是 decodeURI()和 decodeURIComponent()。其中,decodeURI()只能对使用 encodeURI()替换的字符进行解码。例如, 它可将%20 替换成一个空格,但不会对%23 作任何处理,因为%23 表示井字号(#),而井字号不是使用 encodeURI()替换的。同样地,decodeURIComponent()能够解码使用 encodeURIComponent()编码的所有字符,即它可以解码任何特殊字符的编码

eval()方法

eval() 方法就像是一个完整的 ECMAScript解析器,它只接受一个参数,即要执行的 ECMAScript(或 JavaScript) 字符串

注意代码注入情况

Global 对象的属性
window 对象

在全局作用域中声明的所有变量和函数,都成为了 window 对象的属性

Math对象

Math 对象的属性

min()和 max()方法

用于确定一组数值中的小值和大值

舍入方法

random()方法

Math.random()方法返回大于等于 0小于 1的一个随机数

其他方法


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容