JavaScript基础（三）——JavaScript高级教程

目录

JavaScript 对象

所有事物都是对象

JavaScript 对象

访问对象的属性

访问对象的方法

创建 JavaScript 对象

创建直接的实例

使用对象构造器（constructor）

创建 JavaScript 对象实例

把属性添加到 JavaScript 对象

把方法添加到 JavaScript 对象

JavaScript 类

JavaScript for...in 循环

JavaScript prototype（原型对象）

prototype 继承

添加属性和方法

JavaScript Number 对象

JavaScript 数字

所有 JavaScript 数字均为 64 位

精度

八进制和十六进制

无穷大（Infinity）

NaN - 非数字值

数字可以是数字或者对象

数字属性

数字方法

JavaScript 字符串（String） 对象

JavaScript 字符串

字符串（String）

在字符串中查找字符串

内容匹配

替换内容

字符串大小写转换

字符串转为数组

特殊字符

字符串属性和方法

JavaScript Date（日期） 对象

创建日期

Date 对象属性

Date 对象方法

设置日期

两个日期比较

JavaScript Array（数组） 对象

什么是数组?

创建一个数组

访问数组

在一个数组中你可以有不同的对象

数组方法和属性

创建新方法

JavaScript Boolean（布尔） 对象

创建 Boolean 对象

JavaScript Math（算数） 对象

Math 对象

算数值

算数方法

JavaScript RegExp 对象  （正则表达式）

什么是 RegExp？

---

---

JavaScript 对象

---

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

• 布尔型可以是一个对象。
• 数字型可以是一个对象。
• 字符串也可以是一个对象
• 日期是一个对象
• 数学和正则表达式也是对象
• 数组是一个对象
• 甚至函数也可以是对象

JavaScript 对象

对象只是一种特殊的数据。对象拥有属性和方法。

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法：

objectName.methodName()

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

• 定义并创建对象的实例
• 使用函数来定义对象，然后创建新的对象实例

创建直接的实例

实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
//替代
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器（constructor）

本例使用函数来构造对象：

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";
x=person.firstname;     //x返回John

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

//changeName() 函数把 name 的值赋给 person 的 lastname 属性。

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法：

for (variable in object)
{
    执行的代码……
}

注意： for...in 循环中的代码块将针对每个属性执行一次。

---

JavaScript prototype（原型对象）

---

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

在一个已存在的对象构造器中是不能添加新的属性的。要添加一个新的属性需要在构造器函数中添加。

prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

• Date 对象从 Date.prototype 继承。
• Array 对象从 Array.prototype 继承。
• Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外，有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性：

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

我们也可以使用 prototype 属性给对象的构造函数添加新的方法：

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

---

JavaScript Number 对象

---

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写，极大或极小的数字可通过科学（指数）计数法来写：

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点
var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324

值 (aka Fraction/Mantissa)	指数	Sign
52 bits (0 - 51)	11 bits (50 - 62)	1 bit (63)

精度

整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，但是浮点运算并不总是 100% 准确。

var x = 999999999999999;   // x 为 999999999999999
var y = 9999999999999999;  // y 为 10000000000000000
var z = 0.2+0.1;    // 输出结果为 0.30000000000000004

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

var y = 0377;      //255
var z = 0xFF;      //255

注意：绝不要在数字前面写零，除非您需要进行八进制转换。 

默认情况下，JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法 输出16进制、8进制、2进制：

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

myNumber=2;
while (myNumber!=Infinity)
{
    myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

var x = 2/0;    //Infinity
var y = -2/0;   //-Infinity

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false
var z = 1000 / 0;
isNaN(z); // 返回 false

数字可以是数字或者对象

数字可以私有数据进行初始化，就像 x = 123;

JavaScript 数字对象初始化数据， var y = new Number(123);

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
(x === y) // 为 false，因为 x 是一个数字，y 是一个对象

数字属性

• MAX_VALUE
• MIN_VALUE
• NEGATIVE_INFINITY
• POSITIVE_INFINITY
• NaN
• prototype
• constructor

数字方法

• toExponential()
• toFixed()
• toPrecision()
• toString()
• valueOf()

---

JavaScript 字符串（String） 对象

---

String 对象用于处理已有的字符块。

JavaScript 字符串

一个字符串用于存储一系列字符就像 "John Doe"。

一个字符串可以使用单引号或双引号，使用位置（索引）可以访问字符串中任何的字符：

var carname="Volvo XC60";
var carname='Volvo XC60';
var character=carname[7];
var answer="It's alright";
var answer="He is called \"Johnny\"";   //He is called "Johnny"

字符串（String）

字符串（String）使用长度属性length来计算字符串的长度：

var txt="Hello World!";
document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);

在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");    //13
//如果没找到对应的字符函数返回-1

内容匹配

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

var str="Hello world!";
document.write(str.match("world") + "
");
document.write(str.match("World") + "
");
document.write(str.match("world!"));

替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");

字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase()：

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

字符串转为数组

字符串使用split()函数转为数组：

txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔 

特殊字符

Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。

下表列出其他特殊字符，可以使用反斜线转义特殊字符：

代码	输出
\'	单引号
\"	双引号
\\	斜杆
\n	换行
\r	回车
\t	tab
\b	空格
\f	换页

字符串属性和方法

属性:

• length
• prototype
• constructor

方法:

• charAt()
• charCodeAt()
• concat()
• fromCharCode()
• indexOf()
• lastIndexOf()
• match()
• replace()
• search()
• slice()
• split()
• substr()
• substring()
• toLowerCase()
• toUpperCase()
• valueOf()

---

JavaScript Date（日期） 对象

---

日期对象用于处理日期和时间。

创建日期

new Date()

以下四种方法同样可以创建 Date 对象：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 对象属性

属性	描述
constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

Date 对象方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
toDateString()	把 Date 对象的日期部分转换为字符串。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

var myDate=new Date();
myDate.setFullYear(2010,0,14);   //为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)
myDate.setDate(myDate.getDate()+5);  //将日期对象设置为 5 天后的日期

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

两个日期比较

日期对象也可用于比较两个日期。

//将当前日期与 2100 年 1 月 14 日进行比较
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

---

JavaScript Array（数组） 对象

---

数组对象的作用是：使用单独的变量名来存储一系列的值。

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

访问myCars数组的第一个值：  var name=myCars[0];

修改数组 myCars 的第一个元素：  myCars[0]="Opel";

注意：[0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

数组方法和属性

使用数组对象预定义属性和方法：

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例：创建一个新的方法。

Array.prototype.myUcase=function(){
    for (i=0;i

---

JavaScript Boolean（布尔） 对象

---

Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

创建 Boolean 对象

Boolean 对象代表两个值：  "true" 或者 "false"

定义了一个名为 myBoolean 的布尔对象：  var myBoolean=new Boolean();

如果布尔对象无初始值或者其值为:

• 0
• -0
• null
• ""
• false
• undefined
• NaN

那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 "false" 时）！

---

JavaScript Math（算数） 对象

---

Math（算数）对象的作用是：执行常见的算数任务。

Math 对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

使用Math的属性/方法的语法：

var x=Math.PI;
var y=Math.sqrt(16);

注意： Math对象无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

你可以参考如下Javascript常量使用方法：

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7));    //5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random());   //0.6147971857468266

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：

document.write(Math.floor(Math.random()*11));   //9

---

JavaScript RegExp 对象  （正则表达式）

---

RegExp：是正则表达式（regular expression）的简写。

什么是 RegExp？

正则表达式描述了字符的模式对象。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

语法

var patt=new RegExp(pattern,modifiers);

或

var patt=/pattern/modifiers;

• 模式描述了一个表达式模型。
• 修饰符(modifiers)描述了检索是否是全局，区分大小写等。

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

var re = new RegExp("\\w+");
var re = /\w+/;