重新整理JavaScript笔记

This commit is contained in:
yinkanglong
2024-01-13 17:25:31 +08:00
parent 96a49a36de
commit 52d96d354e
109 changed files with 745 additions and 1752 deletions

View File

@@ -0,0 +1,55 @@
## JavaScript 介绍
### 什么是 JavaScript
JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl遗留的速度问题为客户提供更流畅的浏览效果。
当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有 28.8kbps,验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 JavaScript提供了数据验证的基本功能。
JavaScript一种直译式脚本语言是一种动态类型、弱类型、基于原型的语言内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用用来给HTML网页增加动态功能。然而现在 JavaScript 也可被用于网络服务器,如 Node.js。
### JavaScript发展历史
- 在 1995 年由 Netscape (网景)公司推出 LiveScript。在此之前没有所谓的前端技术。所有的处理都需要由服务器端进行操作。当时的目的是同时在客户端和服务器端使用。
- 由 Netscape(网景)公司联合 SUN 公司完善 LiveScrip。此时 Netscape(网景)公司将 LiveScript 更名为 JavaScript。目的是利用 Java 语言的流行。
- 微软在推出 IE3.0 时,使用了 JavaScript 的克隆版本Jscript。
- 在 1997 年JavaScript 1.1 由欧洲计算机制造商协会定义。此举,只为 JavaScript 语言定制统一的语言版本。该全新版本的推出,更名为 ECMAScript。该版本由 Netscape、Sun、微软等共同定义。
### JavaScript 组成部分
- ECMAScript
- ECMAScript是一种脚本语言的标准ECMA-262标准。
- 该标准不仅限于JavaScript语言使用例如ActionScript语言中的标准也为ECMA-262标准。
- ECMAScript 描述了以下内容:语法、类型、语句、关键字、保留字、运算符和对象等。
- BOM全称 Browser Object Model译为浏览器对象模型。
- DOM全称 Document Object Model译为文档对象模型。
## ECMAScript 介绍
### 什么是 ECMAScript
ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会)通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript但实际上后两者是 ECMA-262 标准的实现和扩展。
### ECMAScript 发展历史
- 1995 年 12 月 SUN 公司与 Netscape 公司一起引入了 JavaScript。
- 1996 年 03 月网景通讯公司发表了支持 JavaScript 的网景导航者2.0。
- 1996 年 08 月由于 JavaScript 作为网页的客户面脚本语言非常成功微软将之引入了Internet Explorer 3.0,取名 JScript。
- 1996 年 11 月网景通讯公司将 JavaScript 提交给欧洲计算机制造商协会进行标准化。
- 1997 年 06 月 ECMA-262 的第一个版本被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript。
## 如何使用 JavaScript
可以在HTML页面中的任何位置使用 `<script></script>` 标签来插入 JavaScript。
> **值得注意的是:** 在 HTML 页面中的不同位置,插入 JavaScript。执行地效果各不相同执行顺序是自上而下
`<script>` 标签的属性说明:
| 属性名 | 描述 |
| --- | --- |
| type | text/javascript指定使用的脚本语言。|
| language | JavaScript也是指定使用的脚本语言。弃用|
| src | 载入外部JavaScript脚本代码路径可以是绝对路径和相对路径。|
> **值得注意的是:** 如果编写 DOM 代码时JavaScript 插入在 HTML 页面的位置是有区别的。

View File

@@ -0,0 +1,35 @@
## 区分大小写
JavaScript 是一种区分大小写的语言。这意味着 JavaScript 的关键字、变量名、函数名、以及任何其他的标识符必须使用一致的大小写形式。比如 atguigu、Atguigu 或 ATGUIGU 是不同的变量名。
```javascript
var jinyunlong = "jinyunlong";// 定义jinyunlong变量
console.log(jinyunlong);// 打印jinyunlong变量
var Jinyunlong = "Jinyunlong";// 定义Jinyunlong变量
console.log(Jinyunlong);// 打印Jinyunlong变量
var JINYUNLONG = "JINYUNLONG";// 定义JINYUNLONG变量
console.log(JINYUNLONG);// 打印JINYUNLONG变量
```
> **值得注意的是:** 在 JavaScript 中定义变量名和函数名时应该特别注意。
## 空格和换行
JavaScript 会忽略出现在代码中的空格、制表符和换行符。
由于可以自由地在代码中使用空格、制表符和换行符,所以采用整齐、一致的缩进来形成统一的编码风格,从而提高代码的可读性显得尤为重要。
JavaScript 还可以识别水平制表符、垂直制表符、换页符等JavaScript 将以下字符识别为行结束符:换行符、回车符、行分隔符、段分隔符等。回车符加换行符在一起被解析为一个单行结束符。
## 可选的分号
JavaScript 的语句一般是以一个分号作为结尾。当然JavaScript 也允许忽略这个分号。如果省略分号,则由解释器确定语句的结尾,如下述代码:
```javascript
var sum = a + b// 即使没有分号也是有效的语句 —— 不推荐
var diff = a - b;// 有效的语句 —— 推荐
```
> **值得注意的是:** 在 JavaScript 中,虽然语句结尾的分号不是必需的,但还是建议任何时候都不要省略。使用分号是一个非常好的编程习惯。
## 注释

View File

@@ -0,0 +1,81 @@
## 变量
### 什么是变量
变量是存储数据信息的容器。
变量被认为是有名字的容器。在代码中,使用变量名为值命名,需要遵守一定的规则。
> **值得注意的是:**
>
> - 在 JavaScript 代码中,必须先声明一个变量,这个变量才能被使用。
> - JavaScript 中的变量是弱类型的,也称之为松散类型的。所谓弱类型/松散类型就是可以用来保存任何类型的数据。
```javascript
var v = 100;
v = "string";
```
### 变量的声明
在 JavaScript 代码中,使用变量前应当先声明。变量是使用关键字 `var` 声明的。
#### 只声明未初始化,变量的值自动取值为 undefined
- 一行代码只声明一个变量:
```javascript
var sum;// 值为undefined
var msg;// 值为undefined
```
- 一行代码声明多个变量
```javascript
var x, y, z;// 值为undefined
```
### 将变量的声明和初始化合写在一起
- 一行代码只声明一个变量并赋值:
```javascript
var sum = 100;// 值为 100
var msg = "this is message";// 值为 this is message
```
- 一行代码声明多个变量并赋值:
```javascript
var x = 0, y = 1, z = 2;
```
> **值得注意的是:** 等号(=)是赋值运算符。
### 命名规则
变量的命名需要遵守一定的规则的,具体规则如下:
- 必须以字母、下划线_、美元符号$)开始。
- 不能以数字开头。
- 不能使用关键字和保留字作为名称。
- 由于 JavaScript 是区分大小写的,大写字母与小写字母并不冲突。
- 名称最好有明确的含义。
- 可以采用“下划线命名法”、“小驼峰命名法”或“大驼峰命名法” 之一,在开发团队内进行协调统一。
### 声明的问题
#### 重复的声明
使用 `var` 语句重复声明变量是合法且无害的。但是如果重复声明并初始化的,这就表示重复声明并初始化。由于 JavaScript 变量只能存储一个数据,之前存储的数据会被覆盖。
```javascript
var msg = "this is message";// 值为 this is message
var msg = 100;// 值为 100
```
#### 遗漏的声明
- 直接读取一个没有声明的变量的值JavaScript会报错。
- 为一个没有声明的变量初始化,是合法的,但并不推荐这样使用。

View File

@@ -0,0 +1,46 @@
## 大小写转换
String 对象提供如下方法,用于大小写转换。
| 方法名 | 说明 |
| --- | --- |
| toUpperCase() | 把字符串转换为大写。|
| toLowerCase() | 把字符串转换为小写。|
```javascript
var msg = 'Hello World';
var lowerMsg = msg.toLowerCase();
var upperMsg = msg.toUpperCase();
console.log( msg );// Hello World
console.log( lowerMsg );// hello world
console.log( upperMsg );// HELLO WORLD
```
## 获取指定位置的字符
String 对象提供如下方法,用于获取指定位置的字符。
| 方法名 | 说明 |
| --- | --- |
| charAt() | 返回在指定位置的字符。|
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。|
```javascript
var str = "HELLO WORLD";
console.log( str.charAt(2) );// L
console.log( str.charCodeAt(0) );// 72
```
## 检索字符串
String 对象提供如下方法,用于检索字符串。
| 方法名 | 说明 |
| --- | --- |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。|
| lastIndexOf() | 从后向前搜索字符串。|
```javascript

View File

@@ -0,0 +1,187 @@
数组是值的有序集合。数组中的每个值叫做一个元素,而每个元素在数组中都有一个唯一的位置。这个位置用数字表示,叫做索引数据;用字符串表示,叫做关联数组。
JavaScript 数组是无类型的:数组的元素可以是任何类型,例如字符串、数字值、布尔值等,而且每个数组中的不同元素可能是不同类型。
JavaScript 数组是动态的:根据需要,可以动态地向数组插入新的元素,或者从数组中删除指定的元素。
## 一维数组
### 定义数组
数组的最大作用就是用于存储多个值。定义数组分别两种形式:
- 使用数组字面量方式:
```javascript
var arr1 = [ ];
var arr2 = [ 1, "a", true ];
```
- 使用数组关键字方式:
```javascript
var arr1 = Array( );
var arr2 = Array( 1, "a", true );
```
> **值得注意的是:** 在一个数组中的不同元素可以是不同数据类型。
### 索引数组
索引数组就是存储元素的位置使用数字值来表示,一般称之为下标或角标。具体创建方式如下述代码:
```javascript
var arr = [];
arr[0] = 1;
arr[1] = "a";
arr[2] = true;
```
> **值得注意的是:** 索引数组的下标是从 0 开始的。
### 关联数组
关联数组就是存储元素的位置使用字符串来表示一般称之为名称name或key。具体创建方式如下述代码:
```javascript
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;
```
> **值得注意的是:** 关联数组的名称name或key是字符串必需使用单引号或双引号将其包裹。
### 稀疏数组
稀疏数组就是包含 0 开始的不连续索引的数组。具体创建方式如下述代码:
```javascript
var arr = Array( 10 );// 数组没有任何元素,数组的长度为 10
var arr = [];// 创建一个空数组
arr[100] = "a";// 向下标为 100 的位置添加一个元素 a
```
> **值得注意的是:** 上述代码中的第一行,并不是创建一个数组包含一个元素 10而是创建一个不包含任何元素的数组长度为 10。
### 数组的长度
每个数组都有一个length属性表示数组的长度。
- 如果为非稀疏数组的话length 属性的值表示当前数组包含元素的个数。
```javascript
var arr1 = [ 1, "a", true ];
console.log( arr1.length );// 输出 3
```
- 如果为稀疏数组的话length 属性的值大于当前数组包含元素的个数。
```javascript
var arr2 = [];
arr2[14] = "a";
console.log( arr2.length );// 输出 15
```
### 数组元素的读取
数组的主要作用是用于存储和读取数据信息,之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:
```javascript
var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;
console.log( arr['str'] );// 输出字符串 a
```
### 数组元素的修改
不仅可以从数组中读取指定的元素,还可以根据需求修改数组中指定的元素值。
```javascript
var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a
arr[1] = "b";
console.log( arr[1] );// 输出字符串 b
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
console.log( arr['str'] );// 输出字符串 a
arr['str'] = "b";
console.log( arr['str'] );// 输出字符串 b
```
### 数组元素的删除
不仅可以根据需求修改数组中指定的元素值,也可以删除数组中指定的元素值。数组删除指定元素值使用 delete 关键字。
```javascript
var arr = [ 1, "a", true];
delete arr[1];
console.log( arr[1] );// 输出字符串 undefined
```
> **值得注意的是:** 上述代码使用 delete 关键字执行删除数组元素值的操作时,并不影响数组的长度。
```javascript
var arr = [ 1, "a", true];
delete arr[1];
console.log( arr.length );// 输出 3
```
### 遍历数组元素
使用for语句是遍历数组元素最常见的方法:
```javascript
var arr = [ 1, "a", true];
for( var i = 0; i < arr.length; i++ ){
console.log( arr[i] );
}
```
也可以从数组的最后向前(倒序)进行遍历:
```javascript
var arr = [ 1, "a", true];
for( var i = arr.length-1; i >= 0; i-- ){
console.log( arr[i] );
}
```
### for in 语句
在 ECMAScript 5 中新增了 for in 语句,同样也可以用于遍历数组:
```javascript
var arr = [ 1, "a", true];
for( var i in arr ){
console.log( i + " : " + arr[i] );
}
```
> **值得注意的是:**
>
> - for 关键字后定义的变量 i 表示当前数组的下标。
> - for in 语句不仅会遍历数组的所有元素,还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。
for in 语句还可以用于遍历稀疏数组,循环的每次将一个有效元素返回。不存在的索引将不会遍历到:
```javascript
var arr = [];
arr[100] = "a";
for( var i in arr ){
console.log( i + " : " + arr[i] );
}
```
## 二维数组
数组是可以嵌套的这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript 这个特点,创建二维数组,即数组的数组。

View File

@@ -0,0 +1,176 @@
在 JavaScript 中,语句使用分号(;)进行分隔。可以在每行编写一条语句,也可以在每行编写多条语句。
分类:
- 条件语句: JavaScript 解释器根据一个值判断是执行还是跳过指定语句。
- 循环语句: JavaScript 解释器根据一个值判断是否重复执行指定语句。
- 跳转语句: 使 JavaScript 解释器跳转到指定语句。
> **值得注意的是:**
>
> - 建议每行编写一条语句,便于提高代码的阅读性。
> - JavaScript解释器按照语句的编写顺序依次执行。
### 语句块
JavaScript 中使用一对花括号({})表示一个语句块。使用语句块为语句进行分组,这样使语句的结构清晰明了。如下述代码:
```javascript
{
var arguigu = "arguigu";
console.log(arguigu);
}
```
> **值得注意的是:**
>
> - 语句块的结尾不需要分号。
> - 语句块中的行都有缩进,但并不是必需的。
> - 语句中声明变量是全局变量(后面的课程学习)。
### 空语句
空语句允许包含 0 条语句JavaScript 解释器执行空语句时,不会执行任何动作。空语句如下述代码:
```javascript
;
```
> **值得注意的是:** 如果有特殊目的使用空语句时,最好在代码中添加注释。这样可以更好地说明这条空语句是有用的。
### 流程控制语句
JavaScript 解释器按照语句的编写顺序依次执行,但也可以编写一些复杂的语句块,基本分为下述三种:
![](04.png)
## 条件语句
条件语句就是指通过判断指定的计算结果,来决定是执行还是跳过指定的语句块。
如果说 JavaScript 解释器是按照代码的“路径”执行的话,那条件语句就是这条路径上的分叉点,代码执行到这里时必须选择其中一条路径继续执行。
JavaScript 提供了两种条件语句if else 语句和 switch case 语句。
### if 语句
if 语句是条件判断语句,也是最基本的流程控制语句。
![](05.png)
```javascript
var num = 5;
if( num < 10 ){
console.log( num );
}
```
> **值得注意的是:**
>
> - if 关键字后面的小括号不能被省略。
> - if 关键字后面的条件判断的结果必须是布尔值。如果结果为非布尔值的话JavaScript 会自动转换为布尔值。
> - if 语句中的大括号({})可以被省略,但建议编写,以提高代码阅读性。
### if else 语句
if else 语句是条件判断语句,但与 if 语句的执行流程并不相同。
![](06.png)
```javascript
var score = 68;
if( score < 60 ){
console.log("不及格");
}else{
console.log("及格");
}
```
> **值得注意的是:** if else 语句中的大括号({})可以被省略,但建议编写,以提高代码阅读性。
### if else 语句嵌套
if else 语句支持嵌套写法,也就是说,可以在 if 或 else 后面的语句块中继续编写 if else 语句。如下述代码:
```javascript
var score = 68;
if( score > 90 ){
console.log("优秀");
}else{
if( score >= 80 ){
console.log("良好");
}else{
console.log("一般");
}
}
```
### else if 语句
else if 语句是在 if 语句的基础上,允许提供多个条件判断。
![](07.png)
else if 语句实际上就是简化了的 if else 语句的嵌套写法。如下述代码:
![](08.png)
### switch case 语句
switch case 语句是开关语句,但整体执行流程要比 if else 语句复杂的多。具体参考下述流程图:
![](09.png)
```javascript
var num = 2;
switch( num ){
case 1:
console.log("查询余额");
break;
case 2:
console.log("在线充值");
break;
default:
console.log("转人工服务");
}
```
> **值得注意的是:** 在实际开发中switch case 语句与 break 语句同时使用。
switch case 语句相对于 if else 语句执行性能更优,但也有很多需要注意的地方。
> **值得注意的是:**
>
> - switch 关键字后面的小括号、case 关键字后面的冒号都不能被省略的。
> - default 关键字只能出现在 switch case 语句的最后面default 关键字后面不能再出现 case 关键字)。
> - break 语句是跳出语句,一旦被执行,表示后面所有的 case 和 default 语句都不会被执行。
## 循环语句
循环语句是一系列反复执行到复合特定条件的语句。为了更好地理解循环语句,可以将 JavaScript 代码想象成一条条的分支路径。循环语句就是代码路径中的一个回路,可以让一段代码重复执行。
![](10.png)
### while 语句
while 语句是一个基本循环语句,语法结构与 if 语句很类似。
![](11.png)
```javascript
var num = 0;
while( num < 10 ){
console.log( num );
num = num + 1;
}
```
> **值得注意的是:**
>
> - while 关键字后面的小括号不能被省略。
> - while 关键字后面的条件判断的结果必须是布尔值。如果结果为非布尔值的话JavaScript 会自动转换为布尔值。
> - while 语句中的大括号({})可以被省略,但建议编写,以提高代码阅读性。
### do while 语句
do while 语句也是一个基本循环语句,执行流程与 while 语句很类似。

View File

@@ -0,0 +1,86 @@
函数是这样的一段 JavaScript 代码,它只定义一次,但可能被执行或调用多次。
简单来说,函数就是一组可重用的代码,你可以在你程序的任何地方调用他。
例如下述代码:
```javascript
function fn(){
console.log("this is function");
}
```
## 函数定义
定义函数有两种方式:
- 函数声明方式:
```javascript
function fn(){
console.log("this is function");
}
```
- 字面量方式:
```javascript
var fun = fnction(){
console.log("this is function");
}
```
## 函数调用
定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会真正执行这些动作。
- 定义一个函数fn:
```javascript
function fn(){
console.log("this is function");
}
```
- 调用函数fn:
```javascript
fn();// 输出字符串 this is function
```
## 函数参数
函数的参数就相当于在函数中使用的变量虽然这个比方不是很准确。JavaScript 中的函数定义并未制定函数参数的类型,函数调用时也未对传入的参数做任何的类型检查。
函数的参数可以分为以下两种:
- 形参: 出现在函数定义文法中的参数列表是函数的形式参数,简称形参 。简单来说,就是定义函数时使用的参数就是形参。
- 实参: 函数调用时实际传入的参数是函数的实际参数,简称实参。 简单来说,就是调用函数时使用的参数就是实参。
> **值得注意的是:** 一般情况下,形参与实参的个数是相同的。但在 JavaScript 中并不强求这一点,在特殊情况下,函数的形参和实参的个数可以不相同。
```javascript
function fn( one, two ){
console.log( one + two );
}
fn( 1, 2 );// 输出 3
```
上述代码中,定义函数 fn 时one 和 two 就是函数的形参;调用函数 fn 时1 和 2 就是函数的实参。
## return 语句
函数还可以包含一个返回语句return。当然这并不是必需的。return 语句使函数可以作为一个值来使用。具体用法如下述代码:
```javascript
function fn( msg ){
return "hello" + msg;
}
// 变量 fun 的值为 hello atguigu
var fun = fn("atguigu");
```
> **值得注意的是:** return 默认情况下返回的是 undefined。
## 预定义函数

View File

@@ -0,0 +1,30 @@
## 函数与 Function 对象
函数是这样的一段 JavaScript 代码,它只定义一次,但可能被执行或调用多次。
Function 类型是 JavaScript 提供的引用类型之一,通过 Function 类型创建 Function 对象。
在 JavaScript 中,函数也是以对象的形式存在的。每个函数都是一个 Function 对象。
函数名,本质就是一个变量名,是指向某个 Function 对象的引用。
## 构造函数
在 JavaScript 中,函数除了可以通过函数定义语句或字面量表达式两种方式定义之外,还可以通过 Function 类型进行定义:
```javascript
var add = new Function(
"num1",
"num2",
"var sum = num1+num2; return sum;"
);
```
> **值得注意的是:** 通过 Function 类型定义函数的效率远不如通过函数定义语句或字面量表达式两种方式定义。
目前,定义函数具有三种方式,这三种方式之间存在一定差别:
| 定义方式 | 执行 | 效率 |
| --- | --- | --- |
| 函数定义语句 | 函数名被声明提前 | 不存在效率问题 |
| 字面量表达式 | 函数体固定,无法动态执行 | 不存在效率问题 |

View File

@@ -0,0 +1,51 @@
## 匿名函数
JavaScript 可以将函数作为数据使用。作为函数本体,它像普通的数据一样,不一定要有名字。默认名字的函数被称之为匿名函数。 如下示例:
```javascript
function (a){return a;}
```
匿名函数的两种用法:
- 可以将匿名函数作为参数传递给其他函数。这样,接收方函数就能利用所传递的函数来完成某些事情。
- 可以定义某个匿名函数来执行某些一次性任务。
## 自调函数
所谓自调函数就是在定义函数后自行调用。如下示例:
```javascript
(function(){
alert("javascript");
})();
```
上述代码的含义如下:
- 第一对括号,放置的是一个匿名函数。
- 第二对括号的作用,是“立即调用”。
自调函数只需将匿名函数的定义放进一对括号中,然后外面再跟一对括号即可。
自调函数也可以在调用时接收参数,如下示例:
```javascript
(function(name){
alert("hello " + name + "!");
})("javascript");// hello javascript
```
上述代码的含义如下:
- 第一个括号中的匿名函数接受一个参数。
- 第二个括号,在调用时,向匿名函数传递参数内容。
## 回调函数
当一个函数作为参数传递给另一个函数时,作为参数的函数被称之为回调函数。
```javascript
function add(a, b){
return a() + b();
}

View File

@@ -0,0 +1,196 @@
在 JavaScript 代码中,能够表示并操作值的类型称之为**数据类型**。
数据类型可分为可变类型和不可变类型。可变类型的值是可修改的对象和数据就属于可变类型不可变类型的值是不可修改的数字、布尔值、null 和 undefined 都属于不可变类型。
字符串可以看成由字符组成的数组,可能被误认为是可变的。但在 JavaScript 中,字符串的值是不可变的。
![](03.png)
## 原始类型
原始类型,又称为原始值,是直接代表 JavaScript 语言实现的最底层的数据。
原始类型分别为 boolean 类型、number 类型和 string 类型三种。当然有些资料将undefined 和 null 也归为原始类型(这里表示为特殊类型)。
声明变量并初始化值为原始类型,一般称之为字面量方式定义变量,也可以称之为直接量方式定义变量。
## boolean 类型
布尔boolean类型是指真或假、开或关、是或否。这个类型只有两个值true 和 false。
> **值得注意的是:**
>
> - 由于 JavaScript 是区分大小写的,布尔类型的 true 和 false 全部是小写。
> - JavaScript 也可以将其他类型的数据,自动转换为布尔类型。
| 数据类型 | 转换为 true 的值 | 转换为 false 的值 |
| --- | --- | --- |
| boolean类型 | true | false |
| string类型 | 任何非空字符串 | “”(空字符串)|
| number类型 | 任何非零数字值(包括无穷大)| 0和NaN |
| object类型 | 任何对象 | null |
| undefined | | undefined |
## number 类型
number 类型是指数字JavaScript 不区分整数类型和浮点类型。
- 整数类型: 包括负整数、0和正整数等。
- 浮点类型: 表示小数JavaScript 中的所有数字均用浮点类型表示。
> **值得注意的是:** 八进制或十六进制的数值最终会被转换成十进制数值。
## 浮点类型
浮点类型,就是指该数值包含整数部分、小数点和小数部分。
```javascript
var floatNum1 = 0.1;
var floatNum2 = .1;// 有效,但不推荐
```
> **值得注意的是:**
>
> - JavaScript允许小数点前可以没有整数但不推荐这种写法。
> - 保存浮点类型需要的空间是保存整数类型的两倍。
> - 如果小数点后面没有任何数字,那这个数值作为整数类型保存。
```javascript
var floatNum3 = 1.;// 小数点后面没有数字 —— 解析为 1
var floatNum4 = 10.0;// 整数 —— 解析为 10
```
### 四舍五入误差
整数有无数个但JavaScript通过浮点类型只能表示有限的个数确切地说是 18 437 736 874 454 810 627个。也就是说当在JavaScript中使用浮点类型时常常只是真实值的一个近似表示。如下述代码:
```javascript
var x = .3 - .2;
var y = .2 - .1;
x == y;// 值为false表示两值不相等
x == .1;// 值为false.3-.2 不等于 .1
y = .1;// 值为true.2-.1 等于 .1
```
> **值得注意的是:** 建议使用大整数表示金额。例如使用分作为单位,而不是使用元作为单位。
### NaN
NaNNot a Number即非数值是一个特殊的数值。
特点:
- 任何涉及NaN的操作都会返回NaN。
- NaN与任何值都不相等包括NaN本身。
> **值得注意的是:** 针对上述特点JavaScript提供了isNaN( )函数。该函数用于判断计算结果是否为数值。
```javascript
console.log(isNaN(10));// 输出false10是一个数值
console.log(isNaN("10"));// 输出false可以被转换成数值 10
console.log(isNaN("blue"));// 输出true不能转换成数值
console.log(isNaN(true));// 输出false可以被转换成数值 1
```
## string 类型
string 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列,被称之为字符串。字符串可以由双引号(")或单引号(')表示。
```javascript
var firstString = "Nicholas";
var secondString = 'Zakas';
```
string类型包含一些特殊的转义字符用于表示非打印字符。
| 转义字符 | 含义 |
| --- | --- |
| \n | 换行符 |
| \t | 制表符 |
| \b | 退格符 |
| \r | 回车符 |
| \f | 换页符 |
| \\ | 斜杠 |
| \' | 单引号('),在用单引号表示的字符串中使用。|
| \" | 双引号("),在用双引号表示的字符串中使用。|
## typeof 运算符
由于 JavaScript 是弱类型/松散类型的因此需要有一种手段来检测给定变量的数据类型。typeof 运算符就是负责提供这方面信息,如下述代码:
```javascript
var message = "this is message";
console.log(typeof message);// 输出 string
console.log(typeof(message));// 输出 string
```
> **值得注意的是:** typeof 运算符加上圆括号,会像是函数,而不是运算符,并不建议这种写法。
| 值 | 类型 |
| --- | --- |
| true或false | boolean |
| 任意数字或NaN | number |
| 任意字符串 | string |
| null | object |
## 包装类型
### 包装类型概述
在 JavaScript 中,对应原始类型提供了包装类型。通过包装类型可以创建原始类型的对象(后面的课程学习)。
由于 JavaScript 是区分大小写的,从写法上来说,原始类型是全部小写,包装类型则是全部大写。
一般不建议使用包装类型定义对应的数据类型,但包装类型提供了操作相应值的方法。
> **值得注意的是:** 包装类型涉及到对象的概念,具体技术内容会在后面的课程学习。
### Boolean 类型
Boolean 类型是原始类型 boolean 类型对应的包装类型。
```javascript
var bool = new Boolean(true);
```
boolean 类型与 Bollean 类型的区别:
- typeof 运算符对原始类型返回 "boolean",而对包装类型为 "object"。
- instanceof 运算符测试 Boolean 类型返回 true而测试 boolean 类型返回 false。
> **值得注意的是:** 不建议使用 Boolean 类型。
### Number 类型
Number 类型是原始类型 number 类型对应的包装类型。
```javascript
var num = new Number(10);
```
number 类型与 Number 类型的区别:
- typeof 运算符对原始类型返回 "number",而对包装类型为 "object"。
- instanceof 运算符测试 Number 类型返回 true而测试 number 类型返回 false。
> **值得注意的是:** 不建议使用 Number 类型。
### String 类型
String 类型是原始类型 string 类型对应的包装类型。
```javascript
var str = new String("hello world");
```
string 类型与 String 类型的区别:
- typeof 运算符对原始类型返回 "string",而对包装类型为 "object"。
- instanceof 运算符测试 String 类型返回 true而测试 string 类型返回 false。
> **值得注意的是:** 不建议使用 String 类型。
### instanceof 运算符
instanceof 运算符的左操作数是一个包装类型的变量,右操作数是对应的数据类型。如果左侧的变量是右侧的数据类型,则表达式返回 true否则返回 false。例如下述代码:

View File

@@ -0,0 +1,54 @@
变量和函数都具有作用域。作用域就是变量和函数的可被访问的范围,控制着变量和函数的可见性和生命周期。
变量的作用域可被分为全局作用域和函数作用域(局部作用域)。如果变量是被定义在全局作用域的话,在 JavaScript 代码中的任何位置都可以访问该变量;如果变量是被定义在指定函数内部的话,在 JavaScript 代码中只能在该函数内访问该变量。
函数的作用域也可被分为全局作用域和函数作用域(局部作用域)。被定义在指定函数内部的函数被称之为局部函数或内部函数。
> **值得注意的是:** ECMAScript 6 之前的 JavaScript 没有语句块作用域。
## 变量的作用域
### 全局变量
在所有函数之外声明的变量,叫做全局变量,因为它可被当前文档中的其他代码所访问。具体内容如下述代码所示:
```javascript
var msg = "this is message";// 定义全局变量 msg
// 在全局作用域访问变量 msg
console.log( msg );// 输出 this is message
function fn(){
// 在函数作用域访问变量 msg
console.log( msg );// 输出 this is message
}
fn();
```
除了上述定义全局变量外,还有一种比较特殊的方式定义全局变量(具体用法如下述代码)。但这种特殊用法并不推荐!
```javascript
function fun(){
// 定义变量时没有使用关键字 var
msg = "this is message";
// 在函数作用域访问变量 msg
console.log( msg );// 输出 this is message
}
fun();
// 在全局作用域访问变量 msg
console.log( msg );// 输出 this is message
```
### 局部变量
在函数内部声明的变量,叫做局部变量,因为它只能在该函数内部访问。具体用法如下述代码所示:
```javascript
function fun(){
// 定义局部变量 msg
var msg = "this is message";
// 在函数作用域访问变量 msg
console.log( msg );// 输出 this is message
}
fun();

View File

@@ -0,0 +1,159 @@
JavaScript 中的对象,和其它编程语言中的对象一样,可以比照现实生活中的对象来理解它。 JavaScript 中对象的概念可以比照着现实生活中实实在在的物体来理解。
在 JavaScript 中,一个对象可以是一个单独的拥有属性和类型的实体。拿它和一个杯子做下类比,一个杯子是一个对象,拥有属性。杯子有颜色、图案、重量等等。同样, JavaScript 对象也有属性来定义它的特征。
方法 是关联到某个对象的函数,或者简单地说,一个方法是一个值为某个函数的对象属性。定义方法就象定义普通的函数,除了它们必须被赋给对象的某个属性。
### 对象分类
- 内置对象/原生对象
就是 JavaScript 语言预定义的对象。在 ECMAScript 标准定义,由 JavaScript 解释器/引擎提供具体实现。
- 宿主对象
指的是 JavaScript 运行环境提供的对象。一般是由浏览器厂商提供实现(目前也有独立的 JavaScript 解释器/引擎提供实现),主要分为 BOM 和 DOM。
- 自定义对象
就是由开发人员自主创建的对象。
## 创建对象
### 对象初始化器方式
使用对象初始化器也被称作通过字面值创建对象。通过对象初始化器创建对象的语法如下:
```javascript
var obj = {
property_1: value_1, // property_# 作为一个标示符
property_2: value_2, // 标示符可以是一个数字值
// ...,
"property_n": value_n // 标示符也可以是一个字符串
};
```
- obj 是创建的对象名称。
- 标示符和值都是可选的。
### 构造函数方式
- 通过 JavaScript 提供的预定义类型的构造函数来创建对象,如下示例:
```javascript
var date = new Date();// 创建一个 Date 对象
var str = new String("this is string.");// 创建一个 String 对象
var num = new Number(100);// 创建一个 Number 对象
```
- 通过 JavaScript 提供的 Object 类型的构造函数来创建自定义对象,如下示例:
```javascript
var obj = new Object();// 创建一个自定义对象
```
### Object.create() 方法
Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法如下:
```javascript
Object.create(proto, [ propertiesObject ])
```
参数:
- proto 参数: 一个对象,作为新创建对象的原型。
- propertiesObject 参数: 可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符。
通过 Object.create() 方法创建一个新对象,同时扩展自有属性:
```javascript
var flyer = {
name : "A380",
speed : 1000
}
var plane = Object.create( flyer,{
capacity : {
value : 555,
writable : true,
enumerable : true
}
});
```
Object.create() 方法的一些特殊用法:
- 创建一个原型为 null 的空对象。
```javascript
var obj = Object.create( null );
```
- 实现子类型构造函数的原型继承父类型构造函数的原型。
```javascript
Sub.prototype = Object.create( Super.prototype );
```
- 创建普通空对象。
```javascript
var obj = Object.create( Object.prototype );
// 等效于 var o = {}
```
## 对象的属性
### 定义对象的属性
一个 JavaScript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 JavaScript 变量基本没什么区别,仅仅是属性属于某个对象。
- 可以通过点符号来访问一个对象的属性。
```javascript
var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;
```
- JavaScript 对象的属性也可以通过方括号访问。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
```javascript
var myCar = new Object();
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;
```
### 访问对象的属性
- JavaScript 可以通过点符号来访问一个对象的属性。
```javascript
var emp = { ename : 'Tom', salary : 3500 };
emp.ename = 'Tommy';// 修改属性的值
console.log(emp.ename);// 获取属性的值
```
- JavaScript 对象的属性也可以通过方括号访问。
```javascript
var emp = { ename : 'Tom', salary : 3500 };
emp[ 'ename' ] = 'Tony';// 修改属性的值
console.log(emp[ "ename" ]);// 获取属性的值
```
### 遍历(枚举)属性
JavaScript 提供了三种原生方法用于遍历或枚举对象的属性:
- for…in 循环: 该方法依次访问一个对象及其原型链中所有可枚举的属性。
```javascript
var emp = { ename : 'Tom', salary : 3500 };

View File

@@ -0,0 +1,184 @@
JavaScript 提供了一组用于操作数据值的运算符。
- 算数运算符(+ - * / % ++ --
- 比较运算符(> >= < <= == != === !==
- 逻辑运算符(&& || !
- 赋值运算符(= += -= *= /= %=
- 字符串连接运算符(+
- 三元运算符(? :
- 特殊运算符typeof instanceof delete
## 算数运算符
给定 A=20 B=10 条件,下述表格描述算数运算符:
| 运算符 | 描述 | 例子 |
| --- | --- | --- |
| + | 两个运算数相加 | A + B = 30 |
| - | 第一个运算数减去第二个运算数 | A B = 10 |
| * | 两个运算数相乘 | A * B = 200 |
| / | 第一个运算数除以第二个运算数 | A / B = 2 |
| % | 求余运算符,计算整除后的余数 | A % B = 0 |
| ++ | 增量运算符,整数值逐次加 1 | A++ = 21 |
| -- | 减量运算符,整数值逐次减 1 | A-- = 19 |
算数运算符的基本操作比较简单,但下述情况需要特别注意:
- 如果运算数中的一个或两个是字符串类型JavaScript 会自动转换为数字值,再进行计算。
- 如果运算数中的一个或两个是字符串类型但其中的字符不是数字JavaScript 会自动转换数字值失败,得到 NaN 结果。
- 任何一个运算数是 NaN结果都是 NaN。
- 布尔值 false 和 true 会转换为 0 和 1 进行计算。
### 求余运算符
求余运算符,用于计算两个运算数整除后的余数。
```javascript
console.log( 10 % 3 );// 输出 1
console.log( -10 % 3 );// 输出 -1
console.log( 10 % -3 );// 输出 1
console.log( -10 % -3 );// 输出 -1
```
### 自增运算符
自增运算符,用于整数值逐次加 1。分别具有两种用法:
- 前置型:自增运算符位于运算数之前。先加 1再赋值。
- 后置型:自增运算符位于运算数之后。先赋值,再加 1。
```javascript
var x = 3;
console.log( x++ );// 输出 3
console.log( x );// 输出 4
var y = 3;
console.log( ++y );// 输出 4
console.log( y );// 输出 4
```
### 自减运算符
自减运算符,用于整数值逐次减 1。分别具有两种用法:
- 前置型:自增运算符位于运算数之前。先减 1再赋值。
- 后置型:自增运算符位于运算数之后。先赋值,再减 1。
```javascript
var x = 3;
console.log( x-- );// 输出 3
console.log( x );// 输出 2
var y = 3;
console.log( --y );// 输出 2
console.log( y );// 输出 2
```
## 比较运算符
给定 A=20 B=10条件下述表格描述比较运算符:
| 运算符 | 描述 | 例子 |
| --- | --- | --- |
| == | 检查两个运算数的值是否相等,如果相等则结果为 true | A == B 为 false |
| != | 检查两个运算数的值是否不等,如果不等则结果为 true | A != B 为 true |
| > | 检查左边运算数是否大于右边运算数,如果是则结果为 true | A > B 为 true |
| >= | 检查左边运算数是否大于或等于右边运算数,如果是则结果为 true | A >= B 为 true |
| < | 检查左边运算数是否小于右边运算数,如果是则结果为 true | A < B 为 false |
| <= | 检查左边运算数是否小于或等于右边运算数,如果是则结果为 true | A <= B 为 false |
### 全等与全不等
| 运算符 | 描述 |
| --- | --- |
| === | 两个运算数的值相等并且类型相同时,结果为 true |
| !== | 两个运算数的值不等或者类型不同时,结果为 true |
```javascript
var x = 10;
var y = '10';
console.log( x == y );// 输出 true
console.log( x === y );// 输出 false
console.log( x != y );// 输出 false
console.log( x !== y );// 输出 true
```
### isNaN 函数
isNaN() 函数用于判断其参数是否为 NaN非数字值
多用于检测使用类型转换函数进行数据类型转换后的结果是否为合法的数字值。
> **值得注意的是:** NaN 与任何值(包括自身)进行比较,结果都是 false。不能使用 `==` 或者 `===` 运算符判断某个值是否是 NaN而只能使用isNaN() 函数。
```javascript
console.log(isNaN(parseInt('123.45a')));// 输出 true
console.log(isNaN('123.45a'));// 输出 true
console.log(isNaN(Number('123.45a')));// 输出 true
```
## 逻辑运算符
给定 A=20 B=10条件下述表格描述比较运算符:
| 运算符 | 描述 | 例子 |
| --- | --- | --- |
| `&&` | 逻辑与运算符。如果两个运算数都是 true则返回 true | A && B 为 true |
| `||` | 逻辑或运算符。如果两个运算数中任何一个是 true则返回 true | A || B 为 true |
| `!` | 逻辑非运算符。用于改变运算数的逻辑状态。如果逻辑状态为 true则通过逻辑非运算符是逻辑状态改为 false | !(A && B) 为 false |
### 逻辑与运算符
| B1 | B2 | B1 && B2 |
| --- | --- | --- |
| false | false | false |
| false | true | false |
| true | false | false |
| true | true | true |
```javascript
console.log( false && true );// 输出 false
console.log( true && true );// 输出 true
// 数字值 1 和 0 转换为布尔值 true 和 false
console.log( 1 && 0 );// 输出 false
// 空字符串转换为布尔值 false非空字符串转换为布尔值 true
console.log( "" && "atguigu" );// 输出 false
```
### 逻辑或运算符
| B1 | B2 | B1 或 B2 |
| --- | --- | --- |
| false | false | false |
| false | true | true |
| true | false | true |
| true | true | true |
```javascript
console.log( false || true );// 输出 true
console.log( false || false );// 输出 false
// 数字值 1 和 0 转换为布尔值 true 和 false
console.log( 1 || 0 );// 输出 true
// 空字符串转换为布尔值 false非空字符串转换为布尔值 true
console.log( "" || "atguigu" );// 输出 true
```
### 逻辑非运算符
| B1 | !B1 |
| --- | --- |
| false | true |
| true | false |
```javascript
console.log( !true );// 输出 false

View File

@@ -0,0 +1,53 @@
## 原型链
构造函数或构造器具有 prototype 属性,对象具有 `__proto__` 属性,这就是之前学习的原型。
如果构造函数或对象 A A 的原型指向构造函数或对象 BB 的原型再指向构造函数或对象 C以此类推最终的构造函数或对象的原型指向 Object 的原型。由此形成一条链状结构,被称之为原型链。
按照上述的描述,在 B 中定义的属性或方法,可以直接在 A 中使用并不需要定义。这就是继承,它允许每个对象来访问其原型链上的任何属性或方法。
原型链是 ECMAScript 标准中指定的默认实现继承的方式。
原型链的示意结构图如下:
![](20.png)
### 原型链实现继承
```javascript
function A(){
this.name = "a";
this.toString = function(){return this.name};
}
function B(){
this.name = "b";
}
function C(){
this.name = "c";
this.age = 18;
this.getAge = function(){return this.age};
}
B.prototype = new A();
C.prototype = new B();
```
上述代码实现的示意图如下:
![](21.png)
### 只继承于原型
出于对效率的考虑,尽可能地将属性和方法添加到原型上。可以采取以下方式:
- 不要为继承关系单独创建新对象。
- 尽量减少运行时的方法搜索。
根据上述方式进行更改后,代码如下:
```javascript
function A(){}
A.prototype.name = "a";
A.prototype.toString = function(){return this.name};
function B(){}
B.prototype = A.prototype;

View File

@@ -0,0 +1,35 @@
## 作用域链
很多开发语言中都具有块级作用域,但 JavaScript 中并没有跨级作用域,这经常会导致理解上的困惑。如下示例:
```javascript
if( true ){
var color = "blue";
}
console.log( color );// blue
```
上述代码在 if 语句中定义了变量 color。但该变量的作用域是全局域原因是 JavaScript 中没有块级作用域。
虽然 JavaScript 没有块级作用域,但具有函数作用域。在某个函数内部定义的变量的作用域就是该函数作用域。
```javascript
function fun(){
var javascript = "this is javascript";
}
console.log( javascript );// 输出报错
```
上述代码在函数 fun 内部定义了变量 JavaScript该变量的作用域是 fun 函数作用域。所以在全局域访问该变量时会出错。
每一段 JavaScript 代码(全局代码或函数)都有一个与之关联的作用域链。这个作用域链是一个对象列表或链表,这组对象定义了这段代码“作用域中”的变量。如下示例:
```javascript
var a = 1;
// 在全局域中只能访问变量 a
function f(){
// 在 f 函数作用域中可以访问变量 a 和 b
var b = 2;
}
```

View File

@@ -0,0 +1,44 @@
JSON 全称为 JavaScript Object Notation译为 JavaScript 对象表示法。是一种轻量级的数据交换格式。
官网地址: [http://www.json.org/json-zh.html](http://www.json.org/json-zh.html)
JSON 易于开发者阅读和编写也易于计算机解析和生成。它基于JavaScript Programming LanguageStandard ECMA-262 3rd Edition - December 1999的一个子集。
JSON 采用完全独立于语言的文本格式,被 Java、C#、C++、PHP、OC 等几乎所有主流语言所支持。
JSON 作为一种轻量级的文本数据交换格式,已被广泛使用于存储和交换文本数据领域。
## 语法规则
JSON 构建于两种语法结构:
- “名称 / 值”对的集合。在 JavaScript 中被解释为 对象。
![](16.png)
- 值的有序列表。在 JavaScript 中被解释为 数组。
![](17.png)
JSON 存储数据的类型可以是字符串string、数值(number)、true、false、 null、对象object或者数组array。这些结构可以嵌套。
![](18.png)
## JavaScript 中的 JSON
JavaScript 中使用字符串String来表示 JSON 的两种结构。
- “名称 / 值”对的集合。
```javascript
var jsonTxt = ' {
"ename" : "Tom",
"salary" : 3500,
"isMarried" : true
} ';
```
- 值的有序列表。
```javascript
var jsonTxt =' [ "Tom", "Mary", "John" ] ';

View File

@@ -0,0 +1,93 @@
在 JavaScript 中,函数是一个包含属性和方法的 Function 类型的对象。而原型Prototype就是 Function 类型对象的一个属性。
在函数定义时就包含了 prototype 属性,它的初始值是一个空对象。在 JavaScript 中并没有定义函数的原型类型,所以原型可以是任何类型。
原型是用于保存对象的共享属性和方法的,原型的属性和方法并不会影响函数本身的属性和方法。
```javascript
function foo(a,b){
return a + b;
}
console.log( typeof foo.prototype );// object
```
## 获取原型
通过如下两种方式可以获取对象的原型,从而设置共享的属性和方法:
- 通过构造函数的 prototype 属性。
```javascript
function Person() {
console.log('Person instantiated');
}
console.log( Person.prototype );
```
- 通过 Object 对象的 getPrototypeOf( obj ) 方法。
```javascript
function Person() {
console.log('Person instantiated');
}
console.log( Object.getPrototypeOf( Person ) );
```
## 原型的属性和方法
通过如下两种方式可以设置原型的属性和方法:
- 原型的属性和方法单独进行定义。
```javascript
构造函数.prototype.属性名 = 属性值;
构造函数.prototype.方法名 = function(){}
```
- 直接为原型定义一个新对象。
```javascript
构造函数.prototype = {
属性名 : 属性值,
方法名 : function(){}
}
```
## 自有属性与原型属性
- 自有属性: 通过对象的引用添加的属性。其它对象可能无此属性;即使有,也是彼此独立的属性。
- 原型属性: 从原型对象中继承来的属性,一旦原型对象中属性值改变,所有继承自该原型的对象属性均改变。
```javascript
function Emp( ename, salary ){
this.ename = ename;
this.salary = salary;
}
Emp.prototype = { city : "北京市", dept : "研发部" }
var emp1 = new Emp("Mary",3800);
var emp2 = new Emp("Tom",3000);
```
上述代码的内存结构图如下:
![](19.png)
## 检测自有或原型属性
- 使用 hasOwnPrototype() 方法检测对象是否具有指定的自有属性:
```javascript
function Hero(){}
var hero = new Hero();
console.log( hero.hasOwnPrototype("name") );
```
- 使用 in 关键字检测对象及其原型链中是否具有指定属性:
```javascript
function Hero(){}
var hero = new Hero();
console.log( "name" in hero );

View File

@@ -0,0 +1,146 @@
引用类型通常被叫做类class。但在 ECMAScript 2015 版本之前的 JavaScript 中并没有类的概念,在 JavaScript 中通常叫做对象定义。
也就是说,使用引用类型其实就是使用对象(该内容在后面的章节学习)。
JavaScript 中预定义了很多的引用类型,其中包含之前学习的包装类型 Boolean、Number 和 String。
下述列表罗列了 JavaScript 中所提供的引用类型:
| 引用类型 | 说明 |
| --- | --- |
| Date类型 | 获取和设置当前日期时间。|
| Math类型 | 用于数学计算。 |
| Global类型 | 全局对象,提供全局属性和全局方法。|
| Array类型 | 用于有序的存储多个值。|
| RegExp类型 | 用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。|
| Error类型 | 用于匹配代码错误并提供对应提示内容。|
| Functions类型 | 用于定义 JavaScript 中的函数。|
| Object类型 | 用于定义 JavaScript 中的对象。|
### Date类型
#### 创建 Date 对象
JavaScript 中并没有提供日期的数据类型,而是通过 Date 对象的大量方法对日期和时间进行存储或操作。
```javascript
// 使用指定的年月日[时分秒]进行初始化
var d1 = new Date(2008, 7, 8);
var d2 = new Date(2008, 7, 8, 20, 18, 18);
var d3 = new Date( '2008/8/8' ); // 把string转换为Date
// 初始化为系统时间
var d3 = new Date()
var d4 = new Date;
var d5 = Date(); // 构建一个string值为当前系统时间
// 初始化为距离计算机元年指定毫秒数的时间
var d6 = new Date(0);
var d7 = new Date( 1000*3600*24*365 );
```
#### 获取日期方法
通过使用如下方法,获取日期和时间:
| 方法 | 说明 |
| --- | --- |
| 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( ) | 返回Date对象与UTC时间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( ) | 以毫秒值设置Date对象。|
| setDate( ) | 设置Date对象中“日期”部分的数值(1 ~ 31但不限于)。|
#### 日期格式化方法
通过使用如下方法,对日期和时间进行格式化:
| 方法 | 说明 |
| --- | --- |
| toString() | 返回Date对象的字符串形式。|
| toDateString() | 返回Date对象“日期”部分(年月日)的字符串形式。|
| toTimeString() | 返回Date对象“时间”部分(时分秒)的字符串形式。|
| toLocaleString() | 基于本地时间格式返回Date对象的字符串形式。|
| toLocaleDateString() | 基于本地时间格式返回Date对象“ 日期”部分(年月日)的字符串形式。|
| toLocaleTimeString() | 基于本地时间格式返回Date对象“时间”部分(时分秒)的字符串形式。|
| toGMTString() | 基于GMT时间格式返回Date对象的字符串形式。|
| toUTCString() | 基于UTC时间格式返回Date对象的字符串形式。|
### Math类型
JavaScript 为保存数学公式和信息提供了一个公共位置,即 Math 对象。与直接编写的计算功能相比Math 对象提供的计算功能执行起来要快得多。
Math 对象是 JavaScript 中的一个全局对象,它并没有构造函数,而是直接使用 Math 对象名称即可。如下所示:
```javascript
var m = new Math();// 这种写法是错误的
console.log( Math.PI );// 直接使用对象名调用属性
console.log( Math.random() );// 直接使用对象名调用方法
```
#### Math 对象的属性
Math 对象具有如下成员属性:
| 属性 | 说明 |
| --- | --- |
| E | 返回算术常量 e即自然对数的底数约等于2.718)。|
| LN2 | 返回 2 的自然对数约等于0.693)。|
| LN10 | 返回 10 的自然对数约等于2.302)。|
| LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414)。|
| LOG10E | 返回以 10 为底的 e 的对数约等于0.434)。|
| PI | 返回圆周率约等于3.14159)。|
| SQRT1_2 | 返回2 的平方根的倒数(约等于 0.707)。|
| SQRT2 | 返回 2 的平方根(约等于 1.414)。|
#### Math 对象的方法
Math 对象具有如下方法:
| 方法 | 说明 |
| --- | --- |
| abs(x) | 返回数的绝对值。|
| ceil(x) | 对数进行上舍入。|
| exp(x) | 返回 e 的指数。 |
| log(x) | 返回数的自然对数底为e。|
| floor(x) | 对数进行下舍入。|
| max(x, y) | 返回 x 和 y 中的最高值。|
| min(x, y) | 返回 x 和 y 中的最低值。|
| pow(x, y) | 返回 x 的 y 次幂。|
| round(x) | 把数四舍五入为最接近的整数。|
#### 三角函数
Math 对象提供了常见的三角函数计算的方法:
| 方法 | 说明 |
| --- | --- |
| acos(x) | 返回数的反余弦值。|
| asin(x) | 返回数的反正弦值。|
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。|
| atan2(x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。|
| cos(x) | 返回数的余弦。|
| sin(x) | 返回数的正弦。|
| tan(x) | 返回角的正切。|
#### 随机数

View File

@@ -0,0 +1,121 @@
正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的,用以描述一种特定的字符规则的表达式。
正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如: 词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。
![](23.png)
### 创建正则表达式
JavaScript 中没有正则表达式数据类型,创建正则表达式的语法如下:
```javascript
var expression = / pattern / attributes ;
```
参数:
- pattern 参数: 被称为模式,可以是任何简单或复杂的正则表达式,包含字符类、限定符、分组、向前查找以及反响引用等。
- attributes 参数: 被称为修饰符,用于标明正则表达式的行为。
### 直接量字符
正则表达式中的所有字母和数字都是按照字面含义进行匹配的。JavaScript 正则表达式语法也支持非字母的字符匹配,这些字符需要通过反斜线(\)作为前缀进行转义。
| 字符 | 匹配 |
| --- | --- |
| 字母和数字 | 自身 |
| \0 | 匹配 NULL 字符,不要在这后面跟其它小数。|
| \t | 匹配一个水平制表符。|
| \n | 匹配一个换行符。|
| \v | 匹配一个垂直制表符。|
| \r | 匹配一个回车符。|
| \f | 匹配一个换页符。|
| \xhh | 匹配带有两位小数代码hh的字符。|
| \uhhhh | 匹配带有四位小数代码hh的字符。|
| \cX | 当X是处于A到Z之间的字符的时候匹配字符串中的一个控制符。当X是处于A到Z之间的字符的时候匹配字符串中的一个控制符。例如/\cM/ 匹配字符串中的 control-M (U+000D)。|
在正则表达式中,许多标点符号具有特殊含义,如下:
```
^ $ . * + ? = ! : | \ / ( ) [ ] { }
```
### 字符类
将直接量字符单独放进方括号内就组成了字符类。一个字符类可以匹配它所包含的任意字符。由于某些字符类非常常用JavaScript 的正则表达式中,使用特殊转义字符表示它们。
| 字符 | 匹配 |
| --- | --- |
| […] | 一个字符集合。匹配方括号的中任意字符。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。 |
| [^…] | 一个反向字符集。|
| . | (小数点)匹配除了换行符(\n之外的任何单个字符。|
| \w | 匹配一个单字字符(字母、数字或者下划线)。等价于[A-Za-z0-9_]。|
| \W | 匹配一个非单字字符。等价于[^A-Za-z0-9_]。|
| \s | 匹配一个空白字符,包括空格、制表符、换页符和换行符。|
| \S | 匹配一个非空白字符。|
| \d | 匹配一个数字。等价于[0-9]。|
| \D | 匹配一个非数字字符。等价于[^0-9]。|
| [\b] | 匹配一个退格. (不要和\b混淆了|
> **值得注意的是:** 在方括号之内也可以编写这些特殊转义字符。
### 重复
在 JavaScript 中的正则表达式用来描述任意多位的数字,或者描述由三个字母和一个数字构成的字符串时,可以使用字符重复的标记。
| 字符 | 匹配 |
| --- | --- |
| {n,m} | n 和 m 都是正整数。匹配前面的字符至少n次最多m次。如果 n 或者 m 的值是0 这个值被忽略。|
| {n} | n是一个正整数匹配了前面一个字符刚好发生了n次。|
| ? | 匹配前面一个字符0次或者1次和{0,1}有相同的效果。|
| + | 匹配前面一个字符1次或者多次和{1,}有相同的效果。|
| * | 匹配前一个字符0次或者是多次。|
> **值得注意的是:** “*”和“?”可以匹配 0 个字符,允许什么都不匹配。
### 选择、分组和引用
正则表达式包括指定选择项、子表达式分组和引用前一子表达式的特殊字符。
| 字符 | 匹配 |
| --- | --- |
| x|y | 匹配“x”或者“y”。|
| (x) | 匹配“x”并且记住匹配项。这个被叫做捕获括号。|
| (?:x) | 匹配“x”但是不记住匹配项。这种被叫做非捕获括号。|
| \n | 当 n 是一个正整数一个返回引用到最后一个与有n插入的正值表达式(counting left parentheses)匹配的副字符串。比如 /apple(,)\sorange\1/ 匹配"apple, orange, cherry, peach."中的'apple, orange,'。|
### 指定匹配位置
正则表达式中的多个元素才能够匹配字符串的一个字符,这些元素称之为正则表达式的锚。因为它们将模式定位在搜索字符串的特定位置上。
| 字符 | 匹配 |
| --- | --- |
| ^ | 匹配输入的开始。如果多行标示被设置为true,同时匹配换行后紧跟的字符。|
| $ | 匹配输入的结束如果多行标示被设置为true,同时会匹配换行前紧跟的字符。|
| \b | 匹配一个词的边界。一个词的边界就是一个词不被另外一个词跟随的位置或者不是另一个词汇字符前边的位置。|
| \B | 匹配一个非单词边界。|
| x(?=y) | 匹配“x”仅仅当“x”后面跟着“y”。这种叫做正向肯定查找。|
| x(?!y) | 匹配“x”仅仅当“x”后面不跟着“y”,这个叫做正向否定查找。|
### 修饰符
正则表达式的修饰符,用于说明高级匹配模式的规则。修饰符是放在“/”符号后面的JavaScript 支持三个修饰符。
| 字符 | 匹配 |
| --- | --- |
| i | 不区分大小写搜索。|
| g | 全局搜索。|
| m | 多行搜索。|
## RegExp 对象
JavaScript 可以通过引用类型 RegExp 创建正则表达式对象,语法如下:
```javascript
var pattern =new RegExp( pattern, attributes );
```
参数:
- pattern 参数: 被称为模式,可以是任何简单或复杂的正则表达式,包含字符类、限定符、分组、向前查找以及反响引用等。
- attributes 参数: 被称为修饰符,用于标明正则表达式的行为。

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 513 KiB