2019-07-30

JavaScript 第五章

本章主要讲的是引用类型。引用类型是一种数据结构,它也常被称为“类”。

1:Object类型

1:可使用对象字面量表示法。例:

var A={

name:"qiming",

age:20

};

2:在JavaScript中可使用点表示法和方括号表示法来访问对象的属性。例:

alert(A["name"]);    

alert(A.name);

方括号的优点:可通过变量来访问属性。

2:Array类型

(1)

创建数组的基本方式有三种:

1:使用Array构造函数。

例:

var A=new Arrary();

var A1=new Array("li","si","yun");

注:new可省略不写。

2:使用数组字面量表示法。

例:

var A={"li","si","yun"};                        //创建了个包含三个字符串的数组

var A1={};                                          //空数组

(2)

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

var A={"lin","xiao","yan"};          //定义一个字符串数组。

alert(A[0]);                                  //注意:是显示第一项。

A[2]="yun";                                 //修改第三项。

A[3]="loveyou"                            //新增第四项。

(3)length属性

1:数组的项数保存在length属性中,这个属性会返回0或更大的值。例:

var A1=["xiao","yan"];     //创建一个包含2个字符串的数组。

var A2=[ ];                       //创建一个空数组。

alert(A1[1]);                     //"yan"                        (A[0]是"xiao")

alert(A1.length);             //2

alert(A2.length);             /0

2:length属性可从数组的末尾除去项或新增项。

例1:

var A=["li","si","yun"];

A.length=2;                          //将length属性设置为2,则该数组的最后一项(length[3]                                                              同时也是A[2],即"yun")被移除。

alert(A[2]);                              //undefined(原因:A[2]被移除)

例2:

var A={"qi","ming"};

A[A.length]="xiaoyun";        //在length[3]即A[2]处添加一个字符串

A[A.length]="loveyou";        //在数组末尾再添加一个字符串

A[999]="qiming";                  //在A[999]即length[1000]处添加一字符串

alert(A[998]);                         //undefined          (数组中A[998]处未添加,返回undefined,其                                                                             余未定义部分也是)

(1)检测数组

ECMAScript中可用instanceof操作符来确定某对象是否为数组。例:

if(value insanceof Array){

//数组执行某些操作

}

注:instanceof操作符假定只有一个全局执行环境。

也可用Array.isArray()方法。例:

if(Array.isArray(value)){

//对数组执行某些操作

}

2:转换方法

可用toLocaleString() , toString()valueOf()方法

调用valueOf()方法:返回值是数组本身

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

调用toLocaleString()方法:返回值经常与toString()相同。

toLocalString()与toString()的区别 (例):

var A1={

toLocaleString : function(){

return       "1" ;            },

toString : function(){

return       "2";        }

}

};

var A2={

toLocaleString : function(){

return "3";           },

toString : function(){

return "4";             }

};

var A=[A1,A2];

alert(A);                                            //2,4

alert(A.toLocaleString());                  //1,3

alert(A.toString());                             //2,4 

使用join()方法可使用不同的分隔符来构建字符串。例:

var A=["A1","A2"];

alert(A.join("\\"));            //       A1\\A2

3:栈方法

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

var A=Array();                     //构建数组

var B=A.push("a","b");         // 推入两项

alert(B);                                //2

B=A.push("c");

alert(B);                                  //3

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

var  A=["a","b","c"];

var B=A.pop();

alert(B);                                //"c";

4:队列方法

shift()方法可移除数组中的第一项,返回值为该项。例:

var A=["1","2"];

var B=A.shift();

alert(B);                     //"1"

alert(A.length);           //1

unshift()方法能在数组前端添加任意个项,返回值为新数组的长度。

var A=["si","yun"];

var B=A.unshift("li");        //添加一项"li"字符串在第一项。

alert(B);                            //3

5:重排序方法

重排序的方法:reverse()和sort()

reverse():反转数组项的顺序

例:

var A=[1,2,3];

A.reverse();

alert(A);                             //3,2,1

sort(): 调用每个数组的toString()转型方法

function A(A1,A2){
if(A1<A2){

return 1;     }

even if (A1>A2){

return -1;    }

    else{

     return 0;       }

}

var  B=[1,2,3,4];

B.sort(A);

alert(B);         //4,3,2,1

6:操作方法

concat():将参数传递给数组的末尾。

若所传递值为一或多个数组,则该方法会将这些数组中的每一项添加到结果数组中。若不是,则只是简单的添加。

例:

var A1=["li","si","yun"];

var A2=A1.concat("xiao",["qi","ming"]);

alert(A1);        //li,si,yun

alert(A2);         //li,si,yun,xiao,qi,ming

slice()方法:截取某个数组中的若干项来创建一个新数组。

     用法:rray.slice(start,end) 

 slice()方法是可以提取数组的某个部分,并以新的字符串返回被提取的部分。这部分返回的值,即为被操作的值。例:


var

a=["A","B","C","D"];

var b=a.slice(1,3);

var c=a.slice(3);

alert(b);        //B,C

alert(c);        //D

7:位置方法

indexOf()和lastIndexOf()。这两个方法接受两个参数:要查找的项和(可选的)表示查找起点位置的索引。

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

astIndexOf()方法:从数组的末尾开始向前查找。

注:两个方法使用全等符号进行比较,返回项的位置,若找不到则返回-1。

8: 迭代方法

ECMAScript为数组提供了五个迭代方法,五个方法都有两个传入参数:要运行的函数和运行该函数的作用域对象(可选),而要运行的函数包含三个传入参数:数组项的值,该项的位置,数组对象本身。

every():   对数组每一项运行给定函数,若每一项运行函数都返回true,则返回true

filter():      对每一项运行给定函数,返回运行函数会返回true的项所组成的数组

foreach():运行函数,无返回值

map():     运行函数,返回由函数返回结果所组成的数组

some():    运行函数,若有其中一项回true则返回true

.9 :归并方法

用reduce()和reduceRight()迭代数组所有项,并构建一个返回的值。

而这个函数就受四个参数:前一个值,当前值,项的索引,数组对象。

reduce()方法:

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

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

return prev+cur;

});

alert(sum);                    //15

reduceRight()方法与reduce()方法类似。

3:Date类型

1:使用 new 操作符和 Date 构造函数(调用 Date 构造函数而不传递参数)

var  A=new    Date();

2:Date.parse()和Date.UTC()

(1)Date.parse()方法

1:“月/日/年”,如 6/13/2004

2:“英文月名 日,年”,如 January 12,2004

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

4:ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)

例如,要为 2004 年 5 月 25 日创建一个日期对象

var someDate = new Date(Date.parse("May 25, 2004"));

(2):Date.UTC()

Date.UTC()方法同样也返回表示日期的毫秒数,但它与 Date.parse()在构建值时使用不同的信息

特点

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

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

(3)如果没有提供月中的天数,则假设天数为 1;如果省略其他参数,则统统假设为 0

例如:

// GMT 时间 2000 年 1 月 1 日午夜零时

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

// GMT 时间 2005 年 5 月 5 日下午 5:55:55

var A = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));

// 本地时间 2000 年 1 月 1 日午夜零时

var A = new Date(2000, 0);

// 本地时间 2005 年 5 月 5 日下午 5:55:55

var A = new Date(2005, 4, 5, 17, 55, 55);

(3): Date.now()

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

例:

var start = Date.now();//取得开始时间

doSomething();//调用函数

var stop = Date.now(),   result = stop – start;  //取得停止时间

var start = +new Date();                        //取得开始时间

doSomething();                                      //调用函数

var stop = +new Date(),     result = stop - start;  //取得停止时间

继承:

(1)Date 类型重写了 toLocaleString()、toString()和 valueOf()方法

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

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

日期格式化方法

与 toLocaleString()和 toString()方法一样,以下这些字符串格式方法的输出也是因浏览器而异的,因此没有哪一个方法能够用来在用户界面中显示一致的日期信息

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

toTimeString() :          定于实现的格式显示时、分、秒和时区

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

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

UTCString() :            以特定于实现的格式完整的 UTC 日期

4. RegExp类型

1:使用下面类似 Perl 的语法,就可以创建一个正则表达式

var    expression =/ pattern /flags ;

2:正则表达式的匹配模式支持下列 3 个标志:

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

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

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

3:正则表达式的元字符必须转义,转义使用\即可,元字符有: ( [ { \ ^ $ | ) ? * + . ] }

RegExp实例属性

RegExp 的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息

global:布尔值,表示是否设置了 g 标志

ignoreCase:布尔值,表示是否设置了 i 标志

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

multiline:布尔值,表示是否设置了 m 标志

source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回

 RegExp构造函数属性

下面列出构造函数的属性

5. Function类型

每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

一.函数的声明方式

1.普通的函数声明

functionbox(num1,num2) {

return

num1+num2;

}

alert(box(1,2));             //返回3

2.使用变量初始化函数

varbox=function(num1,num2) {

return

num1+num2;

};

alert(box(1,2));                  //返回3

2 :没有重载

函数名是指针,前面指向一个函数,后面又重新指向另一个函数,所以不会有重载这个东西。例:

function sum(num){

    return    num+20;

}

function sum(num){

    return     num+10;

};

var A=sum(10)               //结果是:20

3: 函数声明与函数表达式

解析器会先读取函数声明,即:

function sum(num1,num2){

return num1+num2;

}

所以下列的例子也可正常执行。

alert(10,10);     

function     sum(num1,num2)

{     return    num1+num2;       }

而下列例子则会报错。

alert(10,10);

var     sum(num1,num2)

{     return    num1+num2;       }

 因为函数表达式,即

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

必须要等解析器运行到这里才会存在这个函数,在这个函数代码出现之前调用都是会出问题的

函数内部属性

函数是对象也有自己的属性和方法,有两个属性:

length:表示函数希望接受参数的个数

prototype:保存函数所有的实例方法,下一章会详细介绍

每个函数包含两个非继承来的方法,都是在特定作用域中调用函数:

apply():接受两个参数,一个是在其中运行的函数的作用域对象,另一个是参数数组,其中第二个可以是array实例也可以是arguments对象,如

function sum(num1,num2){

  return num1+num2;

}

function A(num1,num2){

  return sum.apply(this,arguments);

}

alert(A (10,10) ) ;

上面代码的this指向全局环境的window对象,因为A是在全局环境中运行的,而arguments数组则包含两个参数,num1和num2,因此最后会输出20

call():与apply()作用相同,只是接受参数方式不同,第一个this不变,而后面的参数数组则要变为一个个参数,必须要把传入的参数列出来,如下:

sum.call(this, num1, num2);

两种方法都可以用来扩展作用域。

ECMAScript5还定义了一个方法: bind():这个方法会创建当前函数的一个实例,传入的参数会绑定到当前函数的this值。

window.color="red";

var A={color:"blue"};

functionsayColor(){

    alert(this.color);

    } 

    var B=sayColor.bind(A);

  B();

上面代码会输出blue,传入的A绑定到了B的this里面,所以this.color就是blue

函数的toLocaleString和toString和valueOf方法始终返回函数的代码。

6. 基本包装类型

为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类型:Boolean、Number和String。这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为。

在读取模式中访问字符串时,后台会自动完成这些处理:

1:创建了String类型的一个实例。

2:在实例上再调用指定方法。

3:这个实例被销毁。

如下面的代码:

var s1 =new String("some word");

var s2 =s1.substring(2);

s1=null;

这样做,基本类型值就变得跟对象一样了,且,上述步骤也适用于Boolean和Number类型对应的布尔值和数字值。

注:Object构造函数会根据传入的值来返回相应的基本包装类型实例。

例:

var A=new B("a");

alert(A instanceof String);          //true

1 Boolean类型

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

2:它重写了toString方法,返回字符串"true"或"false" valueOf方法,返回布尔值true或false

用法:

var A=new Boolean(false);

注:Boolean对象不是布尔值;最好别用Boolean对象。

2 :Number类型

调用方法:

var  A=new Number();

toFixed():将数值按照小数位返回为字符串,

例:   

var num=10;   

alert(num.toFixed(2));              //10:00

toExponential():返回以指数表示法(就是用e表示指数)表示数值的字符串形式,接受参数,参数表示小数位数

toPrecision():返回以固定位数表示的字符串,即传入一个参数,确定这个数要有多少位数,如:

var num=99;

  num.toPrecision(1)         //1e+2

  num.toPrecision(2)          //99

  num.toPrecision(3)          //99.0

3 String类型

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

String 对象的方法也可以在所有基本的字符串值中访问到。其中,继承的 valueOf()、toLocale- String()和 toString()方法,都返回对象所表示的基本字符串值。

7、单体内置对象

1、Global对象

所有在全局作用域中定义的属性和函数,都是 Global 对象的属性。诸如 isNaN()、isFinite()、parseInt()以及 parseFloat(),实际上全都是 Global 对象的方法。

7.2、Math对象

Math 对象包含的属性大都是数学计算中可能会用到的一些特殊值。


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

推荐阅读更多精彩内容