引用类型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了引用类型相关的知识,希望对你有一定的参考价值。

引用类型的值时引用类型的一个实例。在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起。有时也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法。

新对象是使用new操作符后跟一个构造函数来创建的。

var person = new Object();

5.1Object类型

创建Object实例有两种方法:

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

var person = new Object();

person.name = "coore";

person.age = 29;

另一种方式是使用对象字面量表示法

var person = {

   name: "coore",

   age:29

};

访问对象属性:

点表示法

person.name

方括号表示法,优点是可以通过变量来访问属性

person["name"]

5.2Array类型

ECMAScript数组的每一项可以保存任何类型的数据,数组的大小可以动态调整,随数据的添加自动增长。

创建数组的基本方法:

第一种是使用Array构造函数

var colors = new Array();

var colors = Array(3);

var colors = new Array("red","blue","green");

可以给构造函数传递数量或包含的项,new操作符可省略;

第二种基本方式是使用数组字面量表示法

var colors = ["red","blue","green"];

在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引,索引表示要访问的值。

colors[2] = "green";

数组的项数保存在其length属性中,通过这个属性可从数组的末尾移除项或向数组中添加新项。

var colors = ["red","blue","green"];

colors.length = 2;

alert(colors[2]);//undefined

colors[colors.length] = "black";

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

var colors = ["red","blue","green"];

colors[99] = "black";

alert(colors.length);//100

5.2.1检测数组

单一的全局执行环境

if (value instanceof Array){//对数组执行某些操作}

ECMAScript5新增Array.isArray()方法,确定某个值到底是不是数组,不管它是在哪个全局执行环境创建的。

if (Array.isArray(value)){//对数组执行某些操作}

5.2.2转换方法

toString(),返回由数组中每个值的字符串形式拼接而成的一个以逗号分割的字符串。

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

valueOf(),返回的还是数组,调用每一项的toString()方法。

join(),接收一个作为分隔符的字符串参数,返回包含所有数组项的字符串。

5.2.3栈方法

栈是一种可以限制插入和删除项的后进先出的数据结构。

push(),接收任意参数,添加到数组末尾,并返回修改后的数组长度。

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

var colors = new Array();
 var count=colors.push("red","blue");
alert(count);//2
var item = colors.pop();
alert(item);//"blue"

5.2.4队列方法

队列数据结构的访问方法是先进先出。

shift(),移除数组的第一项并返回该项,同时将数组的长度减1。

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

5.2.5重排序方法

reverse(),反转数组项的顺序。

sort(),按升序排列数组项。调用每个数组项的toString(),比较得到的字符串。

sort()可以接受一个比较函数作为参数。

function compare(value1,value2) {

    if (value1 < value2) {

        return -1;

    } else if (value1 > value2) {

        return 1;

    } else {

        return 0;

    }

}//从小到大

function compare(value1,value2) {

if (value1 < value2) {

return 1;

} else if (value1 > value2) {

return -1;

} else {

return 0;

}

}//从大到小

function compare(value1,value2) {

    return value2 - value1;

}//对于数值类型

5.2.6操作方法

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

slice(),基于当前数组中的一个或多个项创建一个新数组,可以接受一个或多个项,即要返回项的起始和结束位置,不包括结束项。若参数为负,则用数组长度加上该数。

splice(),向数组的中部插入项。返回从原始数组删除的项。

 删除:可以删除任意数量的项,提供两个参数,要删除的第一项的位置和要删除的项数。

 插入:3个参数:起始位置、0、要插入的任意数量的项。

 替换:3个参数:起始位置、要删除的项数、要插入的任意数量的项。

5.2.7位置方法

indexOf(),两个参数:要查找的项和表示查找起点位置的索引(可选)。从数组的开头向末尾查找。返回查找项在数组中的位置,没找到返回-1。

lastIndexOf(),参数同上,从数组的末尾向开头查找。返回同上。

5.2.8迭代方法


五个方法都接收两个参数:

    1.要在每一项上运行的函数,函数会接收三个参数:

        1.数组项的值item

        2.该项在数组中的位置index

        3.数组对象本身array

    2.运行该函数的作用域对象-影响this的值。(可选)

var number = [1,2,3,4,5,4,3,2,1];

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

var everyResult = number.every(function(item,index,array) {

    return (item > 2);

});

alert(everyResult);//false

filter():对数组中的每一项运行给定函数,确定是否在返回的数组中包含的某一项,返回该函数会返回true的项组成的数组。对于查询符合某些条件的所有数组项非常有用。

var filterResult = number.filter(function(item,index,array) {

return (item > 2);

});

alert(filterResult);//[3,4,5,4,3]

forEach():对数组中的每一项运行给定函数,

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。这个方法适合创建包含的项与另一个数组一一对应的数组。

var mapResult = number.map(function(item,index,array) {

return item * 2;

});

alert(mapResult);//[2,,4,6,8,10,8,6,4,2]

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回ture。

var someResult = number.some(function(item,index,array) {

return (item > 2);

});

alert(someResult);//true

5.2.9缩小方法

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。都接受两个参数:

    1.一个在每一项上调用的函数,接收4个参数:

         1.前一个值prev

         2.当前值cur

         3.项的索引index

         4.数组对象array

    2.作为缩小基础的初始值(可选)。

var values = [1,2,3,4,5];

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

 var sum = values.reduce(function(prev,cur,index,array){

    return prev + cur;

});


alert(sum);//15

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

var sum = values.reduceRight(function(prev,cur,index,array){

return prev + cur;

});

alert(sum);//15

5.3Date类型

var now = new Date();//创建一个日期对象,new+Date构造函数,不传参数自动获得当前日期时间。

根据特定日期和时间创建日期对象:

Date.parse(),接收一个表示日期的字符串参数:

 “月/日/年”,如6/06/2016;

 “英文月名 日,年”,如January 12,2016;

 “英文星期几 英文月 日 年 时:分:秒 时区”,如 Tue May 25 2004 00:00:00 GMT-0700。

  YYYY-MM-DDTHH:mm:ss.sssZ,如2016-06-06T00:00:00。

var someDate = new Date(Date.parse("May 06,2016"));

var someDate = new Date("May 06,2016");//等价

Date.UTC(),参数分别是年份,基于0的月份,天,小时,分钟,秒,毫秒。年和月必须。

var y2k = new Date(Date.UTC(2000,0));

var y2k = new Date(2000,0);

Date.now()(ECMAScript5添加),表示调用这个方法的日期时间的毫秒数,简化了使用Date对象分析代码的工作。

var start = Date.now();

doSomething();

var stop = Date.now(),

    result = stop - start;

5.3.1继承的方法

toLocaleString(),按照与浏览器设置的地区相适应的格式返回日期和时间。

toString(),返回哎呦时区信息的日期和时间,一般用军用时间。

valueOf(),返回日期的毫秒表示。

5.3.2日期格式化方法

toDateString(),以特定于实现的格式显示星期几、月、日和年;

toTimeString(),以特定于实现的格式显示时、分、秒和时区;

toLocaleDateString(),以特定于地区的格式显示星期几、月、日和年;

toLocaleTimeString(),以特定于实现的格式显示时、分、秒;

toUTCString(),以特定于实现的格式完整的UTC日期;

5.3.3日期/时间组件方法

getTime(),setTime(),

getFullYear(),getUTCFullYear(),setFullYear(),setUTCFullYear(),

getMonth(),getUTCMonth(),setMonth(),setUTCMonth(),

getDate(),getUTCDate(),setDate(),setUTCDate(),

getDay(),getUTCDay(),

getHours(),getUTCHours(),setHours(),setUTCHours(),

getMinutes(),getUTCMinutes(),setMinutes(),setUTCMinutes(),

getSeconds(),getUTCSeconds(),setSeconds(),setUTCSeconds(),

getMilliseconds(),getUTCMilliseconds(),setMilliseconds(),setUTCMilliseconds(),

getTimezoneOffset(),返回本地时间与UTC时间相差的分钟数。

5.4RegExp类型

var expression = / pattern / flags;//创建一个正则表达式

flags:g(全局模式)/i(不区分大小写)/m(多行模式);

var pattren1 = / [bc]at/i;//以字面量形式定义,始终共享一个RegExp实例

var pattern2 = new RegExp("[bc]at","i");//使用RegExp构造函数,模式参数是字符串,在某些情况下要对字符串进行双重转义,每一个实例都是一个新实例

5.4.1RegExp实例属性

var pattern1 = /\[bc\]at/i;

alert(pattern1.global);//false

alert(pattern1.ignoreCase);//true

alert(pattern1.multiline);//false

alert(pattern1.lastIndex);//0  表示开始搜索下一个匹配项的字符位置,从0算起。
alert(pattern1.source);//"\[bc\]at" 
//source属性保存的是规范形式的字符串,即字面量形式所用的字符串

5.4.2RegExp实例方法

exec(),捕获组,接收一个参数,即要应用模式的字符串,每次只会返回一个匹配项。

test(),接收一个字符串参数,模式与参数匹配返回true。

RegExp实例继承的toLocaleString()和toString()方法都会返回正则表达式的字面量。

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

5.4.3RegExp构造函数属性

var text = "this has been a short summer";

var pattern = /(.)hort/g;

if(pattern.test(text)) {

alert(RegExp.input);//this has been a short summer

alert(RegExp.leftContext);//this has been a

alert(RegExp.rightContext);//summer
alert(RegExp.lastMatch);//short
alert(RegExp.lastParen);//s
alert(RegExp.miltiline);//false
}

5.4.4模式的局限性

不支持以下特性:

 1.匹配字符串开始和结尾的\A和\Z锚(可用^、$来匹配字符串开头和结尾);

 2.向后查找(支持向前查找);

 3.并集和交集类;

 4.原子组

 5.Unicode支持

 6.命名的捕获组(支持编号的捕获组)

 7.s和x匹配模式

 8.条件匹配

 9.正则表达式注释

5.5Function类型

函数实际上是对象,函数名实际上是一个指向函数对象的指针,不会与某个函数绑定。

5.5.1没有重载

将函数想象为指针,两个同名函数,后面的函数会覆盖前面的函数。

5.5.2函数声明与函数表达式

解释器在向执行环境加载数据时,会先读取函数声明,并使其在执行任何代码前可用;至于函数表达式,必须等到解释器执行到它所在的代码行,才会真正被解释执行。

5.5.3作为值得函数

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

function callSomeFunction(someFunction,someArgument) {

return someFunction(someArgument);

}

5.5.4函数内部的属性

arguments是一个类型组对象,包含着差U纳入函数的所有参数;有一个callee属性指向拥有这个arguments对象的函数。

this引用的是函数据以执行的环境对象,或者说是this值。

(ECMAScript5)caller:保存着调用当前函数的函数引用。

5.5.5函数属性和方法

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

prototype是保存它们所有实例方法的真正所在。

apply()和call(),都是在特定的作用域中调用函数,等于设置函数体内this对象的值。

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

call()参数:this,其余参数都直接传递给函数,传递给函数的参数必须逐个列举出来。

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

函数继承的toLocaleString()和toString()和valueOf()始终返回函数的代码。

5.6基本包装类型

每当读取一个基本类型值的时候,后台会创建一个对应的基本包装类型的对象。

引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。

5.6.1Boolean类型

var booleanObject = new Boolean(true);//创建Boolean对象

Boolean类型的实例重写了valueOf()方法,返回基本数据类型值true/false;重写了toString(),返回字符串"true"、"false"。

5.6.2Number类型

var numberObject = new Number(10);

valueOf(),返回对象表示的基本类型的数值;

toLocaleString()和toString(),返回字符串形式的数值。

toFixed(),按照指定小数位返回数值的字符串表示。

toExponential(),返回以指数表示法表示的数值的字符串形式。

toPrecision(),可能返回固定大小格式,也可能返回指数格式。

5.6.3String类型

var stringObeject = new String("hello world");

继承的valueOf()、toLocaleString()和toString(),都是返回对象所表示的基本字符串值。

length属性表示字符串中包含多少个字符。

1.字符方法

两个用于访问字符串中特定字符的方法是:charAt()和charCodeAt()。都接收一个参数,即基于0的字符位置。

var stringValue = "hello world";

alert(stringValue.charAt(1));//"e"

alert(stringValue.charCodeAt(1));//输出“101”

alert(stringValue[1]);//"e"

2.字符串操作方法

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

var stringValue = "hello ";

var result = stringValue.concat("word","i");

alert(result);//"hello world!"

alert(stringValue);//"hello"

var stringValue = "hello world";

alert(stringValue.slice(3,7));"lo w"

alert(stringValue.substring(3,7));"lo w"

alert(stringValue.substr(3,7));"lo worl"

alert(stringValue.slice(3,-4));"lo w"
alert(stringValue.substring(3,-4));"hel"

alert(stringValue.substr(3,-4));""(空字符串)

3.字符串位置方法

有两个可以从字符串中查找子字符串的方法:indexOf()(从前到后搜索)和lastindexOf()(从后向前搜索)。这两个方法都是从一个字符串中搜索给定的子字符串,然后返子字符串的位置。

var stringValue = "hello world";

alert(stringValue.indexOf("o"));//4

alert(stringValue.indexOf("o",6));//7

4.trim()方法(ES5)

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

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

var atringValue = "hello world";

alert(stringValue.toLocaleUpperCase());//"HELLO WORLD" //针对特定地区的实现

alert(stringValue.toUpperCase());//"HELLO WORLD"

alert(stringValue.toLocaleLowerCase());//"hello world"

alert(stringValue.toLowerCase());//"hello world"

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

var text = "cat, bat, sat, fat";

match() 参数:正则表达式或RegExp对象,本质与调用RegExp的exec()方法相同。

var pattreb = /.at/;

var matches = text.match(pattern);

alert(matches.index);//0

alert(matches[0]);//"cat"

alert(pattern.lastIndex);//0

search(),参数是正则表达式或RegExp对象,返回字符串中第一个匹配的索引。用于查找模式。

var pos = text.search(/at/);

alert(pos);//1

replace(),替换子字符串的操作,两个参数:一个RegExp对象或一个字符串,一个字符串或一个函数。

var result = text.replace("at", "ond");

alert(result);//"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");

alert(result); //"cond,bond,sond,fond"

split(),可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中。分隔符可以是字符串、RegExp对象,第二个参数用于指定数组的大小。

var colorText = "red,blue,green,yellow";

var colors1 = colorText.split(",");//["red","blue","green","yellow"]

var colors2 = colorText.split(",",2);//["red","blue"]

var colors3 = colorText.split(/[^\,]+/)//["", "," ,"," , "," , ""]

7.localeCompare()方法

比较两个值,并返回下列值的一个:

var stringValue = "yellow";

alert(stringValue.localeCompare("brick"));//1 字母在参数后为1

alert(stringValue.localeCompare("yellow"));//0相等为0

alert(stringValue.localeCompare("zoo"));//-1字母表y在z前,为负

8.formCharCode()方法

接收一或多个字符编码,然后将它们转换成字符串,与charCodeAt()执行的相反操作。

alert(String.fromCharCode(104,101,108,111));//"hello"

9.html方法

 anchor(name)   <a name= "name">string</a>

big() <big>string</big>

bold() <b>string</b>

fixed() <tt>string</tt>

fontcolor(color) <font color="color">string</font>

fontsize(size) <font size = "size">string</font>

italics() <i>string</i>

link(url) <a href="url">string</a>

small() <small>string</small>

strike() <strike>string</strike>

sub() <sub>string</sub>

sup() <sup>string</sup>

5.7单体内置对象

由ECMAScript实现提供的、不依赖宿主环境的对象,这些对象在ECMAScript程序执行前已经存在。

5.7.1Globel对象

所有在全局作用域中定义的属性和函数,都是Global对象的属性。

1.URI编码方法

encodeURI(),用于整个URI,不对本身属于URI的特殊字符进行编码;

encodeURIComponent(),用于URI中的某一段,对任何非标准字符进行编码;

decodeURI(),只能对encodeURI()替换的字符进行解码;

decodeURIComponent(),只能对encodeURIComponent()替换的字符进行解码;

2.eval()方法

就像一个完整的ECMAScript解析器,只接受一个参数,即要执行的ECMAScript字符串。

eval("alert(‘hi‘)");等价于alert("hi");

3.Global对象的属性

undefined NaN Infinity Object Array Function Boolean String Number

Date RegExp Error EvalError RangeError ReferenceError SyntaxError TypeError URIError

4.window对象

Web浏览器都是将这个全局对象作为window对象的一部分加以实现的。

5.7.2Math对象

保存数学公式和信息。

1.Math对象的属性

Math.E 自然对数的底数

Math.LN10 10的自然对数

Math.LN2 2的自然对数

Math.LOG2E 以2为底e的对数

Math.LOG10E 以10为底e的对数

Math.PI π的值

Math.SQRT1_2 1/2的平方根

Math.SQRT2 2的平方根

2.min()和max()方法

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

var values = [1,2,3,4,5,6,7,8];

var max = Math.max.apply(Math,values)

3.舍入方法

将小数值舍入为整数的几个方法

alert(Math.ceil(25.9));//26向上舍入

alert(Math.floor(25.9));//25向下舍入

alert(Math.round(25.9));//26标准舍入

4.random()方法

返回介于0和1之间的一个随机数

function selectFrom(lowerValue,upperValue) {

var choices = upperValue - lowerValue + 1;

return Math.floor(Math.random() * choices + lowerValue);

}

5.其他方法

Math.abs(num) 返回num的绝对值

Math.exp(num) 返回Math.E的num次幂

Math.log(num) 返回num的自然对数

Math.pow(num,power) 返回num的power次幂

Math.sqrt(num) 返回num的平方根

Math.acos(x) 返回x的反余弦值

Math.asin(x) 返回x的反正弦值 

Math.atan(x) 返回x的反正切值

Math.atan2(y,x) 返回y/x的反正切值

Math.cos(x) 返回x的余弦值

Math.sin(x) 返回x的正弦值

Math.tan(x) 返回x的正切值

总结

对象在javascript中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象:

    引用类型与传统面向对象程序编程中的类相似,但实现不同;

    Object是一个基础类型,其他所有类型都从Object继承了基本的行为;

    Array类型是一组值的有序列表,同时还提供了操作和转换这些值的功能;

    Date类型提供了有关日期和时间的信息,包括当前日期和时间以及相关的计算功能;

    RegExp类型是ECMAScript支持正则表达式的一个接口,提供了最基本的和一些高级的正则表达式功能。

函数实际上是Function类型的实例,因此函数也是对象;而这一点正是JavaScript最有特色的地方。由于函数是对象,所以函数拥有方法,可以用来增强其行为。

因为有了基本包装类型,所以JavaScript中的基本类型值可以被当作对象来访问。三种基本包装类型分别是:Boolean、Number、String。它们的共同特征是:

    每个包装类型都映射到同名的基本类型;

    在读取模式下访问基本类型时,就会创建对应的基本包装类型的一个对象,从而方便了数据操作;

    操作基本类型值的语句一经执行完毕,就会立即销毁新创建的包装对象。

在所有代码执行前,作用域中就已经存在两个内置对象:Global和Math。在大多数ECMAScript实现中都不能直接访问Global对象;不过,Web浏览器实现了承担该较色的window对象。全局变量和函数都是Global对象的属性。Math对象提供好了很多属性和方法,用于辅助完成复杂的数学计算任务。

以上是关于引用类型的主要内容,如果未能解决你的问题,请参考以下文章

引用类型

JS引用类型——Object类型

5.1引用类型 [Object类型]

JS基本数据类型和引用数据类型

引用类型 Object类型

05 javascript引用类型--Object类型