关于js的引用类型(第五篇)

1.使用对象 2.创建并操作数组 3.理解基础的js类型 4.使用基本类型和基本包装类型

引用类型的值(对象)就是引用类型的一个实例。引用类型是一种数据结构,用于将数据和功能组织在一起。

对象是某个特定引用类型的实例。新对象是使用new操作符跟一个构造函数来创建的。构造函数本身就是一个函数。

var person = new Object();

创建了Object引用类型的一个新实例,然后把该实例保存在了变量person中。使用构造函数是Object,它只为新对象定义了默认的属性和方法。

5.1Object类型

创建Object实例的方式有两种:

第一种:使用new操作符后跟Object构造函数

var person = new Object();           ------->             var person = {};//与new Object()相同

person,name = "Mike";

person.age = 23;

第二种:对象字面量表示法

var person = {

    name : 'Mike',                         -------->          “name":'Mike",

    age:23                                                          "age":23,

                                                                            5: true   //数值属性名会被自动转变成字符串

}

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

对象字面量也是向函数传递大量可选参数的首选方式。

关于js的引用类型(第五篇)_第1张图片

我们可以使用方括号[]来访问对象的属性,方括号语法的主要优点是可以通过变量来访问属性;一般用于属性名包含会导致语法错误的字符,或者属性名使用了关键字或保留字。

关于js的引用类型(第五篇)_第2张图片

5.2Array类型

虽然js的数组与其他语言中的数组都是有序列表,但是与其他语言不同的是,js的数组每一项可以保存任何类型的数据。而且它数组的大小是可以动态调整的。

创建数组的方法有两种:

第一种:使用Array构造函数

关于js的引用类型(第五篇)_第3张图片

使用Array构造函数是可以省略new操作符

第二种:使用数组字面量

与Object对象一样,使用数组字面量表示法时,不会调用Array构造函数。

数组的length属性,它不是只读的。因此通过这个属性。可以从数组的末尾移除项或者向数组中添加新项。

关于js的引用类型(第五篇)_第4张图片

原本colors数组包含3项,但是通过设置length长度为2,将其最后一项移除。显示出undefined

如果将length值设置比colors数组长度大的值,就会添加新项,显示undefined。

利用length属性可以方便的向数组末尾添加新项:

关于js的引用类型(第五篇)_第5张图片

当把一个值放在超出现在数组长度的位置,这是数组的长度就是这个length+1

上例这个数组3-98位置是没有值的,返回undefined。

5.2.1检测数组

instanceof这个如果不是在同一个框架,存在多个全局作用域时候,这样Array的构造函数可能存在不同版本。

这个如果为true就一定是Array。

为了解决这个问题,不管这个值在哪个全局作用域都能判断其是不是数组。

关于js的引用类型(第五篇)_第6张图片

Array.isArray()这个方法支持的浏览器有IE9+,Safari4+,Opera10.5+和Chrome。如果不支持这个方法的话,

关于js的引用类型(第五篇)_第7张图片

调用Object原生的toString()方法,会返回字符串构造函数属性名[object Array],这个方法也同样可以用来检测正则表达式和原生函数[object RegExp] [object Function],前提是toString()是没有修改的原生版本

5.2.2转换方法

所有对象都有toLocalString(),toString()valueOf()方法。调用数组的toString会返回一个以数组中每个值得字符串形式拼接的以逗号分隔开的字符串。而调用valueOf会返回数组。alert要接收字符串,它就会在后台调用toString。

关于js的引用类型(第五篇)_第8张图片

另外通常toLocaleString方法返回的的值与toString和valueOf相同的值,但是为了取得数组中每一项的值,toLocaleString调用的是每一项的toLocaleString。

关于js的引用类型(第五篇)_第9张图片

数组的toString,toLocaleString,valueOf方法,返回的都是以逗号分隔开的字符串,如果想用其他分隔符的话就要使用join()方法

5.2.3栈方法

后进先出

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

pop()方法是从数组的末尾移除最后一项,减少数组的长度,返回被移除项。

关于js的引用类型(第五篇)_第10张图片

5.2.4队列方法

后进后出

shift()方法,移除数组第一项并返回该项。

unshift()方法,在数组前端添加任意项并返回数组长度。

结合push和shift能将数组像队列一样使用

关于js的引用类型(第五篇)_第11张图片

使用unshift和pop可以实现反向队列

关于js的引用类型(第五篇)_第12张图片

5.2.5重排序方法

数组中已经存在了两个重排序方法reverse(),sort().

reverse()方法会反转数组项的顺序。

关于js的引用类型(第五篇)_第13张图片

默认情况下sort方法是按升序排序,sort方法调用每个数组项的toString()方法,然后比较得到的字符串。

因此sort方法可以接收一个比较函数作为参数,当大于是返回1,小于时返回-1,等于返回0

关于js的引用类型(第五篇)_第14张图片

如果想要降序的话就将返回值调换。

对于数值类型和valueof返回数值的对象类型,可以使用第二个值减第一个值。

5.2.6操作方法

concat()方法可以基于当前的数组所有项创建一个新的数组。创建一个当前数组的副本,然后将所接收到到的参数追加到这个数组末尾,最后返回这个数组。参数可以为空,也可以是一个或多个数组。

关于js的引用类型(第五篇)_第15张图片

slice()方法基于当前数组的一或多个项创建一个新数组。slice可以接收一或两个参数。即返回项的起始位置到结束为止。如果只有一个参数,则返回这个位置到末尾的所有项

splice()方法主要用途是向数组中插入项,但是这个方法的使用方式有3种:

1.删除(delete):可以删除任意数量的项,只需指定两个参数:要删除的第一项的位置,和要删除的项数。

ex:splice(0,2)就是删除数组中的前两项

2.插入(insert):可以向指定位置插入任意数量的项,只需提供3个参数:起始位置,0(要删除的项数)和要插入的项数。如果要插入多项,可以再传入第四,第五以至任意多各项。

ex:splice(3,0,"red","green")就是从当前数组位置3开始插入red,green

3.替换(replace):可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置。要删除的项数和要插入的任意数量的项,二者不必相等。

ex:splice(1,1,"red")就是删除位置1那项并且插入red

关于js的引用类型(第五篇)_第16张图片

5.2.7位置方法

两个位置方法:indexOflastIndexOf。这两个方法都接受两个参数:要查找的项和(可选的)开始查找的位置。

其中indexOf是从数组的开头开始向后查找,lastIndexOf是从数组的末尾开始查找。会使用全等操作符===,没有找到返回-1

关于js的引用类型(第五篇)_第17张图片

5.2.8迭代方法

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

1.every():对数组中每一项运行指定的函数,如果该函数对每一项都返回true,则返回true

2.filter():对数组中的每一项运行指定的函数,返回该函数会返回true的项组成的数组。

3.forEach():对数组中的每一项运行指定的函数,这个方法没有返回值。

4.map():对数组中的每一项运行指定的函数,返回每次函数调用的结果组成的数组。

5.some():对数组中的每一项运行指定的函数,如果函数对任意一项返回true,则返回true。

以上方法均不会改变原来的数组中包含的值。

every和some都是用来查询数组中的项是否满足某个条件

5.2.9归并方法

两个归并方法:reduce()reduceRight().这两个方法都会迭代数组的所有项,然后构建一个最终返回值。reduce是从数组第一项开始,reduceRight是从数组最后一项开始,向前遍历。

接收两个参数:一个是在每一项上面调用的函数和(可选)作为归并基础的初始值。传给函数的接收4个参数:前一个值,当前值,项的索引和数组对象。这个函数返回的任何值都会作为下一个参数自动传给下一项。

关于js的引用类型(第五篇)_第18张图片

5.3Date类型

创建一个日期对象,使用new操作符和Date构造函数即可:

两个可以将格式化的日期转换为毫秒数:Date.parse()Date.UTC() 其中接受的日期格式:

1.“月/日/年”  ex:6/13/2018

2."英文月 日,年" ex:January 4,2018

3."英文星期几 英文月名 日 年 时:分:秒 时区" ex:Tue May 25 2018 00:00:00 GTM-0700

4.ISO 8601扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ ex:2018-5-1T00:00:00

上面两种是等价的,因为Date会在后台调用Date.parse,如果传入的字符串不是Date.parse能解析的,就会返回NaN。

Date.UTC()参数分别是年份,月(0-11),日,小时(0-23),分钟,秒以及毫秒。其中前两个是必需的。

下面的实例是基于美国时间Date.parse同样

关于js的引用类型(第五篇)_第19张图片

基于本地时间

关于js的引用类型(第五篇)_第20张图片

Date.now():返回表示调用这个方法时候的日期和毫秒数

关于js的引用类型(第五篇)_第21张图片

5.3.1继承的方法

Date类型也重写了toString,toLocaleString和valueOf方法。

valueOf方法返回的是日期的毫秒表示,这样可以使用比较操作符来比较日期。

5.3.2日期格式化方法

toDateString()--->星期几 月 日 年

toTimeString()--->时 分 秒 和时区

toLocaleDateString()--->以特定于时区的显示星期几 月 日 年

toLocaleTimeString()--->显示时 分 秒

toUTCString()--->完整的UTC日期

还有很多日期/时间组件方法,ex:setFullYear、getFullYear等等。

5.4RegExp类型

js通过RegExp类型来支持正则表达式。

var expression = /pattern/flags;

其中pattern部分可以使任何简单或者复杂的正则表达式。每个正则表达式均可带一个或多个标志(flags)

1.g(global):表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立刻停止。

2.i(case-insensitive):表示不区分大小写模式,即在确定匹配项时忽略模式和字符串大小写。

3.m(multiline):表示多行模式,即在到达一行文本末尾时还会继续查找下一行是否存在与模式相匹配的项。

关于js的引用类型(第五篇)_第22张图片

/^23.*45$/以23开头45结尾的字符串(正则表达式相关内容之后再整理)

5.4.1RegExp实例属性

global:表示是否设置了g标志

ignoreCase:表示是否设置了i标志

lastIndex:表示开始搜索下一个匹配的字符位置,从0算起

multiline:表示是否设置了m标志。

source:按照字面量形式的正则表达式返回。

5.4.2RegExp实例方法

exec()方法参数是需要执行对应正则表达式的数组。返回的虽然是数组的实例但是多了两个属性,input和index

5.4.3RegExp构造函数属性

input:最近一次要匹配的字符串。Opera未实现这个属性

lastMatch:最近一次的匹配项。Opera未实现这个属性

lastParen:最后一次的捕获组。Opera未实现这个属性

leftContent:input字符串中lastMatch之前的文本

multiline:表示是否所有表达式都使用多行模式。IE和Opera未实现这个属性

rightContent:input字符串中lastMatch之后的文本

5.5Function类型

函数实际上是对象,每个函数相当于Function类型的实例。由于函数是对象,所以函数名实际上是指向函数对象的指针。函数一般使用函数声明和函数表达式

关于js的引用类型(第五篇)_第23张图片

由于函数名是指针,因此一个函数可以有多个函数名。

5.5.1没有重载

将函数名想象为指针,这样就能看出,在创建第二个函数时覆盖了前面的函数。

关于js的引用类型(第五篇)_第24张图片

5.5.2函数声明与函数表达式

解析器会率先读取函数声明,并使其执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被执行。除了这一点之外二者其实是等价的。

5.5.3作为值的函数

因为函数名本身就是变量,所以函数也可以作为值来使用。不仅可以将一个函数作为另一个函数的参数传递,也可以将一个函数作为另一个函数的结果返回。

关于js的引用类型(第五篇)_第25张图片

5.5.4函数内部属性

在函数内部有两个特殊的对象:arguments和this、其中arguments是一个类数组对象,包含着传入函数中的所有参数。虽然arguments的主要用途是保存函数参数,但这个对象有一个属性callee,该属性是一个指针,指向拥有这个arguments对象的函数。

关于js的引用类型(第五篇)_第26张图片

使用arguments.callee可以避免函数内外部耦合。

函数对象的另一个属性caller

关于js的引用类型(第五篇)_第27张图片

5.5.5函数属性和方法。

函数也有属性和方法,每个函数有两个属性length和prototype。

其中length属性表示函数希望接受的参数个数。

prototype属性是保存所有实例方法和属性的真正所在。诸如toString和valueOf等方法实际上都保存在prototype名下,只不过是通过各自对象的实例访问。在创建自定义引用类型以及实现继承是,极为重要。

每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

apply接收两个参数:一个是在其中运行的函数的作用域,另一个是参数数组。

call和apply的区别在于call方法传递给函数的参数必须逐个列举。

bind这个方法会创建一个实例,其this值相当于是绑定到传给bind函数的值。其作用与call和apply方法一样,传递参数与call方法一样,唯一的不同的是使用call()和apply()方法是直接调用并返回结果,而bind()方法返回的是一个函数;需进一步调用。

5.6基本包装类型

js还提供了3中特殊的引用类型,Boolean,String,Number

5.6.1Boolean类型

Boolean类型是与布尔值对应的引用类型。但是Boolean对象和布尔值之前区别也很大。

关于js的引用类型(第五篇)_第28张图片

5.6.2Number类型

toFixed:参数是显示几位小数

toExponential:以指数表示法,参数是显示小数位数

toPrecision:

5.6.3String类型

length属性:会将空格等计入长度

1.字符方法

charAt()和charCodeAt().都是会得到给定位置的那个字符。

2.字符串操作方法

concat(),slice(),substring(),substr()还有+号操作符

slice:第一个参数是起始位置,第二个参数是终止位置(可选),如果为负数则加上字符串长度

substring:第一个参数是起始位置,第二个参数是终止位置(可选),如果为负数转换为0

substr:第一个参数是起始位置,第二个参数是项数,如果为负数,第一个参数加上字符串长度,第二个参数转换为0;

3.字符串位置方法

indexOflastIndexOf 与数组的一样,可以接收两个参数(查找的字符串,起始位置(可选))

4.trim方法

这个方法会创建一个字符串副本,删除前置和后缀的所有空格,然后返回结果。

5.字符串大小写转换方法

toLowerCase(),toLocaleLowerCase(),toUpperCase()和toLocaleUpperCase().

如果不知道自己的代码将会在哪种语言环境中运行,还是使用针对地区的方法更为稳妥toLocaleLowerCase和toLocaleUpperCase().

6.字符串的模式匹配方法

match()方法本质上与调用RegExp的exec()方法相同。match()值接收一个参数,要么是正则表达式,要么是RegExp对象。返回一个数组。

关于js的引用类型(第五篇)_第29张图片

serach()方法与match()方法参数相同,但是返回的是第一个匹配项的索引;如果没有找到返回-1。并且search方法始终是从字符串开头向后查找。

replace()方法接受两个参数,第一个参数是可以使一个RegExp对象或者一个字符串(这个字符串不会被转换为正则表达式),第二个参数是一个字符串或者一个函数。如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有字符串,唯一的办法就是提供一个正则表达式,而且指定全局(g)标志。

关于js的引用类型(第五篇)_第30张图片
关于js的引用类型(第五篇)_第31张图片

在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3个参数:模式匹配符,模式匹配项在字符串的位置和原始字符串。

split()这个方法可以基于指定的分隔符将一个字符串分割成多个子字符串,并且将结果放到一个数组中。分隔符可以使字符串,也可以是一个RegExp对象,(可选)第二个参数,用于指定数组的大小以便确保返回的数组不会超过既定大小。

关于js的引用类型(第五篇)_第32张图片

7.localeCompare()方法(是不是比参数字符串大)

区分时区的,在美国时区字符串比较看大小写的

这个方法比较两个字符串,并且返回下列值:

如果字符串在字母表中应该排在字符串参数之前,返回一个负数(一般是-1);

如果字符串等于字符串参数,返回0;

如果字符串在字母表应该排在字符串参数之后,则返回一个整数(一般是1)

关于js的引用类型(第五篇)_第33张图片
关于js的引用类型(第五篇)_第34张图片

8.fromCharCode()方法

接收一个或多个字符编码,然后将它们转换成一个字符串,从本质上看,这个方法跟实例方法charCodeAt()执行的是相反的操作。

5.7单体内置对象

不依赖宿主环境的对象,在js执行之前就已经存在了。意思就是我们不必显示的实例化内置对象,因为它们已经实例化了。之前的内置对象:Object,Array。String以及两个单体内置对象Global和Math。

5.7.1Global对象

1.URI编码方法

global对象的encodeURI()方法和encodeURIComponent()方法可以对URI(uniform resource indentifiers 资源通配符)进行编码,以便发送给浏览器。有效的URI不能包括一些无效字符,这个两个URI编码方法可以用特殊的UTF-8编码替代所有无效字符,从而让浏览器明白。

encodeURI()主要用于整个URI

encodeURIComponent()主要用于URI中的某一段

它们的主要区别在于,encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号,正斜杠问号和井字号。

encodeURIComponent()则会对它发现的任何非标准字符进行编码。

decodeURI和decodeURIComponent对应解码

2.eval()方法

就像一个完整的js代码解析器。因为其能够解释解释代码字符串的能力非常强大,因此在使用时要极为谨慎。特别是在用它执行用户输入数据的情况下,否则可能会有恶意用户输入威胁你站点和应用程序安全的代码(所谓的代码注入)

5.7.2Math对象

1.Math对象的属性

Math对象的属性大多是数学计算中可能用到的一些特殊值。具体的不介绍了。

2.min()和max()

用来确认一组数值中的最大值和最小值,这两个方法都可以接受多个参数。

关于js的引用类型(第五篇)_第35张图片

3.舍入方法

将小数值舍入为整数的几个方法:Math.ceil(),Math.floor(),Math.round()

Math.ceil():向上舍入,总是将数值向上舍入为整数。

Math.floor():向下舍入,总是将数值向下舍入为整数。

Math.round():标准舍入,就是四舍五入舍入为整数

4.random()方法

Math.random 返回一个大于0小于1的随机数。

值 = Math.floor(Math.random()*可能值的总数 + 第一个可能值)

关于js的引用类型(第五篇)_第36张图片

你可能感兴趣的:(关于js的引用类型(第五篇))