前端开发(HTML,CSS,VUE,JS)从入门到精通！第三天(JavaScript)

一、JavaScript简介

1．JavaScript 是一种脚本语言

由 LiveScript 改名而来，JavaScript 和 Java 没有任何关系，主要是为了利用 Java 的知名度所以改成 JavaScript。JavaScript 是一种基于客户端浏览器，基于对象，基于驱动的脚本语言，和所有脚本语言一致，JavaScript 是解释执行的。

二、JavaScript 主要用于 HTML 页面中，在页面中使用 JavaScript 主要有如下三种方式：

1．在 HTML 标签中使用 URL 地址的地方使用javascript:"javascript代码"的方式，例如：

2．在 HTML 页面的 <head> 或 <body> 标签中的任意位置使用 <script> 标签来编写 JavaScript 代码

示例：

3．通过 script 标签引入外部的 .js 文件，同样该 script 标签可以用在<head>或<body>中

三、数据类型和变量

1．变量：

在程序执行期间可能发生变化的量，JavaScript 是弱语言类型，同一个变量可以存储不同类型的数据，JavaScript不会严格去区分数据类型，声明变量的方式有两种：

（1）隐式定义：

直接给变量赋值，这种方式定义的变量是全局变量

（2）显式定义：

统一通过 var 关键字定义，注意，JavaScript 是弱语言类型，在JavaScript中定义任意类型的变量统一使用var关键字，不会严格去区分数据类型。

示例：

（3）局部变量和全局变量：

声明在函数内部的变量称为局部变量，不在函数内部的变量称为全局变量，全局变量被所有函数所共享，如果局部变量和全局变量同名，局部变量会覆盖全局变量。

2．基本数据类型

（1）JavaScript 的值保存在内存中时，也是有数据类型的，它的数据类型有以下几种：

① 数值类型：包含整数和浮点数

② 布尔类型：只有 true和 false 两个值

③ 字符串类型：必须使用单引号或双引号括起来

④ undefined 类型：定义一个变量没有给它赋初值，就是 undefined。

⑤ null 类型：表明某个变量（对象）的值为空

1）数值类型和布尔类型和 Java 都类似，我们就不讲了

示例1：JavaScript 允许除 0 操作，除数和被除数都可以是 0，得到的结果是 NaN(Not a Number)，整数除以 0 得到正无穷大 Infinity，负数除以0 得到负无穷大-Infinity。

NaN 表示 Not a Number，即非数的意思，0 除以 0 得到的结果就是NaN，如果算术运算表达式中有一个 NaN 的变量，那么整个算术表达式的值就是 NaN，JavaScript 提供了一个函数 isNaN(x) 来判断某个变量的值是否是NaN，例如：

2）字符串类型：

字符串用单引号或双引号括起来，而且不会去区分单个字符还是字符串，所有的字符都当成字符串来处理，这个和Java 不一样。

a. JavaScript 的字符串都是以 String 这个内建类来表示，这个内建类 String 常用的方法：

a) String()：String 的构造函数，可以构造一个字符串

b) charAt()：获取某个索引对应的字符

c) charCodeAt()：返回指定索引位置的字符对应的Unicode编码值

d) length：字符串长度

e) toUpperCase()：转大写

f) toLowerCase()：转小写

g) indexOf()：返回字符串首次出现的位置

h) lastIndexOf()：返回字符串最后一次出现的位置

i) substring()：截取子字符串

j) slice()：截取子字符串，功能比 substring 强大，支持负的参数

k) match()：匹配正则表达式

l) search()：使用正则搜索

m) split()：通过指定分隔符，将字符串分隔为字符数组

n) replace()：将字符串中某个子串以特定的字符串替换。

示例：

3）布尔类型：取值只有 true 和 false 两种

var b = true;

4）undefined 和 null

如果一个变量没有赋初值，那么它的值就是 undefined，定义一个对象可以赋值 null，表示为 null。

示例：

5）类型转换：

两个变量进行减法运算，那么会发生类型转换，如果拿一个字符串加上一个变量，就成了字符串拼接。

示例：

a. JavaScript 还提供了如下几个函数来进行强制类型转换

a) toString()：将布尔值，数值转换为字符串

b) parseInt()：将字符串，布尔值转换为整数

c) parseFloat()：将字符串，布尔值转换为浮点数

示例：

注意：使用 parseInt() 或 parseFloat() 将各种类型转换为数字类型时，如果字符串是一个数字字符串，则可以转换，否则就会得到 NaN，其中 undefined,null,布尔值以及其他对象通过上面的方法转换后都会得到NaN，例如：

四、复合类型

1．复合类型是由多个基本数据类型（也可以是复合类型）组成的数据体，JavaScript主要包含如下复合类型：

（1）Object 对象

（2）Array 数组

（3）Function 函数

2．对象

（1）JavaScript 也是一门面向对象的语言，但是不是纯的面向对象语言，JavaScript 是基于对象的脚本语言，其内部提供了大量的内置对象给用户使用，除了 Object 对象之外，还有如下对象

① Array：数组类

② Date：日期类

③ Error：错误类

④ Function：函数类

⑤ Math：数学类

⑥ Number：数值类

⑦ Object：自定义对象类

⑧ String：字符串类

（2）数组对象：

JavaScript 的数组对象和其他强语言类型不同，JavaScript 中的数组元素类型可以不同，定义数组有多种方式。

示例：

示例2：声明数组，并赋值

示例3：使用 Array 内建类来创建数组

使用数组的总结：

JavaScript 中的数组长度可变，通过 length 表示数组的长度，同一个数组中的元素类型可以不一致，访问数组的时候不会出现数组越界的问题，如果访问的元素不存在，则返回 undefined，而不会抛出异常，例如：

示例3：其他常用内建类

3．函数：

JavaScript 中的函数可以将一个功能封装到函数中，以便复用代码，函数的语法：

注意：JavaScript 中的函数的形式参数不能使用 var 关键字声明，返回值也不能加 var 关键字，因为 JavaScrip t是弱语言类型。

调用函数的语法：

var res = 函数名(实际参数1,实际参数2,...);

示例：

4．typeof 和 instanceof 运算符

（1）typeof 运算符用于判断某个变量的数据类型，既可以当成函数使用，即 typeof(a)，也可以当成运算符使用，即 typeof a，对于不同的数据类型，typeof 运算符返回的类型不一样，例如：

undefined 值：undefined

null 值：object

布尔值：boolean

数值：number

字符串：string

对象：object

函数：function

示例：

（2）instanceof 运算符：判断某个变量是否是某个类的实例，是返回 true，不是返回 false。

示例：

5．JavaScript中的语句

（1）顺序执行语句：

var a = 10;

var b = a + 20;

document.write(b);

（2）空语句

;//空语句

（3）异常抛出语句

throw new Error(错误描述字符串);

（4）异常捕获语句

try{

}catch(e){

}finally{

}

示例：

五、流程控制：if...else，switch...case，while 循环，do...while 循环，for 循环，break，continue 都和 Java 中类似，我们就不讲了

示例：打印九九乘法表

1．for in循环，和 Java 中的 foreach 类似，但是还是有一些区别

（1）语法：

for(index in object){

循环体

}

说明：index：表示待遍历的数组的下标或对象的属性，object 是数组或对象

示例：

六、函数

1．定义函数的三种方式

（1）定义命名函数

（2）定义匿名函数

（3）使用 Function 类来定义函数

2．命名函数

function 函数名(形参列表){

函数体;

return 返回值;

}

3．匿名函数

var 函数名 = function(形参列表){

函数体;

return 返回值;

}

示例：

4．使用 Function 类声明函数

var 函数名 = new Function(param1,param2,...,statement);//调用 Function 类的构造函数来创建函数

说明：其中 param1,param2,... 为函数的形式参数，最后一个参数 statement 是函数的执行体

示例：

5．函数，方法，对象和类

（1）当使用 JavaScript 定义一个函数之后，实际上可以得到如下 4 项：

1）函数：就像 Java 中的方法一样，可以被调用

2）对象：定义函数时，系统也会创建一个对象，这个对象是 Function 类的实例

3）方法：定义一个函数时，该函数通常都会附加给某个对象，作为某个对象的方法，默认情况下我们定义的函数都归属于 window 对象（同理，全局变量默认情况下也归属于window 对象作为属性）

示例：

4）类：在定义函数的同时，也会得到一个和函数同名的类

JavaScript 的函数不仅仅是一个函数，更是一个类，我们在定义一个函数的同时，也得到了跟该函数同名的类，并且该函数也是这个类的唯一构造器，可以通过 new 关键字来调用该构造函数创建对象。

示例：

第一个是普通的函数调用，第二个是通过这个 test 类的唯一构造器创建了一个自定义的 Object 类的对象。

（2）this 关键字在函数中表示的意思：this 始终代表当前对象本身

示例：通过函数作为构造器来创建 Person 类

（3）函数的实例属性和类属性（类似于 Java 中的非 static 属性和 static 属性）

1）函数中的3种变量

局部变量：在函数内部通过 var 关键字声明的变量

实例变量：在函数中以 this 关键字修饰的变量，比如上面的例子就是

类属性：在函数中以函数名（类名）作为前缀修饰的变量（类似于 Java 中的 static 类型的变量）

示例：

（4）函数参数的处理：

对于函数的参数，由于 JavaScript 是弱语言类型，不会去区分变量的类型，所以函数在使用参数的时候，应该使用 typeof 关键字去进行类型判断之后才使用，例如：

七、面向对象

1．JavaScript 并不是一个纯粹的面向对象的语言，不会像 Java一样通过创建类，然后通过 new 关键字调用类的构造函数来产生对象。

2．JavaScript 中没有 Java 这种严格的语法，JavaScript 中的每个函数都可用于创建对象，返回的对象就是该类的实例，也是 Object 类的实例

示例：

3．对象和关联数组：

JavaScript 中的对象的本质就是一个关联数组，需要访问对象属性时，既可以通过 obj.propName 访问，也可以通过 obj[propName] 访问，例如：

4．JavaScript 中创建对象的方法，大致有 3 种：

使用 new 关键字调用函数作为构造器来创建对象，比如上面的代码
使用 Object 内建类直接创建对象
使用 JSON 语法创建对象

（1）使用函数作为构造器创建对象：见上面的例子

（2）使用 Object 内建类创建对象

示例：

（3）使用 JSON 创建对象

1） JSON（JavaScript Object Notation），JSON 语法提供了更简单的方式来创建对象，JSON创建对象语法：

var obj = {attr1:value1, attr2:value2,...fun:function(){...},...};

其中 attr1 , attr2, ...是 obj 对象的属性名，":"后面的value1 , value2,... 是属性的值，fun 是obj 对象的方法名，":" 后面是指向的匿名函数

示例：

示例2：JSON 数组：由 JSON 对象组成的数组