【JavaScript】基础教程

逃离我推掉我的手 2023-10-05 17:27 47阅读 0赞

## JS简介 ##

JavaScript 是 WEB 开发者必学的三种语言之一：

*  HTML 定义网页的内容
 *  CSS 规定网页的布局
 *  JavaScript 对网页行为进行编程

JavaScript对其它两种语言的影响：

*  JavaScript能够改变HTML内容
 *  JavaScript能够改变HTML属性
 *  JavaScript能够改变HTML样式（CSS）
 *  JavaScript能够隐藏HTML元素
 *  JavaScript能够显示HTML元素

在HTML中，JavaScript代码必须位于<script>与</script>标签之间，脚本可被放置于HTML页面的<body>或<head> 部分中，或兼而有之。把脚本置于<body>元素的底部，可改善显示速度，因为脚本编译会拖慢显示。脚本可放置与外部文件中，如需使用外部脚本，需要在<script>标签的src属性中声明脚本的名称（下面的例子中有三种放置形式，分别对应当前页面相同文件夹下，当前页面指定文件夹下，完整URL）。

在外部文件中放置脚本有如下优势：

*  分离了HTML和代码
 *  使HTML和JavaScript更易于阅读和维护
 *  已缓存的JavaScript文件可加速页面加载

## JS输出 ##

JavaScript能够以不同方式“显示”数据：

*  使用window.alert()弹出警告框
 *  使用document.write()写入HTML输出
 *  使用innerHTML写入HTML元素
 *  使用console.log()写入浏览器控制台

如需访问HTML元素，JavaScript可使用document.getElementById(id)方法。id属性定义HTML元素。innerHTML属性定义HTML内容，更改HTML元素的innerHTML属性是在HTML中显示数据的常用方法。

document.write()方法仅用于测试。

使用window.alert()将弹出警告框来显示数据。

在浏览器中，您可使用console.log()方法来显示数据。通过F12来激活浏览器控制台，并在菜单中选择“控制台”，比如Chrome下的控制台：

![b92700eceaa6900a876173678a3a81b6.png][]

## JS关键词 ##

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 关键词 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> break </td> 
 <td colspan="1" style="vertical-align:text-top;"> 终止 switch 或循环。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> continue </td> 
 <td colspan="1" style="vertical-align:text-top;"> 跳出循环并在顶端开始。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> debugger </td> 
 <td colspan="1" style="vertical-align:text-top;"> 停止执行 JavaScript，并调用调试函数（如果可用）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> do ... while </td> 
 <td colspan="1" style="vertical-align:text-top;"> 执行语句块，并在条件为真时重复代码块。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> for </td> 
 <td colspan="1" style="vertical-align:text-top;"> 标记需被执行的语句块，只要条件为真。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> function </td> 
 <td colspan="1" style="vertical-align:text-top;"> 声明函数。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> if ... else </td> 
 <td colspan="1" style="vertical-align:text-top;"> 标记需被执行的语句块，根据某个条件。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> return </td> 
 <td colspan="1" style="vertical-align:text-top;"> 退出函数。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> switch </td> 
 <td colspan="1" style="vertical-align:text-top;"> 标记需被执行的语句块，根据不同的情况。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> try ... catch </td> 
 <td colspan="1" style="vertical-align:text-top;"> 对语句块实现错误处理。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> var </td> 
 <td colspan="1" style="vertical-align:text-top;"> 声明变量。 </td> 
 </tr> 
 </tbody> 
</table>

## JS基本语法 ##

双斜杠//或/\*与\*/之间的代码被视为注释。

所有JavaScript变量必须以唯一的名称的标识，JavaScript 标识符对大小写敏感。构造变量名称（唯一标识符）的通用规则是：

*  名称可包含字母、数字、下划线和美元符号
 *  名称可以以字母开头
 *  名称也可以$和\_开头
 *  名称对大小写敏感（y和Y是不同的变量）

使用var关键词声明变量：

var carName;

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。不带有值的变量，它的值将是undefined。变量carName在这条语句执行后的值是undefined。

保留字（比如JavaScript的关键词）无法用作变量名称

JavaScript程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity

JavaScript使用Unicode字符集。

函数使用function关键词：

function myFunction(a, b) {
        return a * b;
    }

JavaScript的比较有一些特殊，主要是===和!==：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 运算符 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> == </td> 
 <td colspan="1" style="vertical-align:text-top;"> 值相等 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> === </td> 
 <td colspan="1" style="vertical-align:text-top;"> 类型和值都相等 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> != </td> 
 <td colspan="1" style="vertical-align:text-top;"> 值不相等 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> !== </td> 
 <td colspan="1" style="vertical-align:text-top;"> 不等值或不等型 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> &gt; </td> 
 <td colspan="1" style="vertical-align:text-top;"> 大于 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> &lt; </td> 
 <td colspan="1" style="vertical-align:text-top;"> 小于 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> &gt;= </td> 
 <td colspan="1" style="vertical-align:text-top;"> 大于或等于 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> &lt;= </td> 
 <td colspan="1" style="vertical-align:text-top;"> 小于或等于 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> ? </td> 
 <td colspan="1" style="vertical-align:text-top;"> 三元运算符 </td> 
 </tr> 
 </tbody> 
</table>

JavaScript的类型运算符：

typeof的例子：

typeof "Bill"                // 返回 "string"
    typeof 3.14                  // 返回 "number"
    typeof true                  // 返回 "boolean"
    typeof false                 // 返回 "boolean"
    typeof x                     // 返回 "undefined" (假如 x 没有值)
    typeof {name:'Bill', age:62} // 返回 "object"
    typeof [1,2,3,4]             // 返回 "object" (并非 "array")
    typeof null                  // 返回 "object"
    typeof function myFunc(){}   // 返回 "function"

JavaScript的算数运算符也由一个特殊的\*\*来表示幂：

JavaScript变量能够保存多种数据类型：数值、字符串值、数组、对象等等。JavaScript对象用花括号来书写，对象属性是name:value对，由逗号分隔：

var person = {
    	firstName:"Bill",
    	lastName:"Gates",
    	age:62,
    	eyeColor:"blue"
    };

在JavaScript中，没有值的变量，其值是undefined。typeof也返回 undefined。任何变量均可通过设置值为undefined进行清空。其类型也将是 undefined。在JavaScript中，null是 "nothing"，它被看做不存在的事物。在 JavaScript中，null的数据类型是对象。

![162f80c388800107f73b4852071f4bda.png][]

undefined与null 的值相等，但类型不相等：

typeof undefined              // undefined
    typeof null                   // object
    null === undefined            // false
    null == undefined             // true

JavaScript对象示例：

var person = {
      firstName: "Bill",
      lastName : "Gates",
      id       : 678,
      fullName : function() {
        return this.firstName + " " + this.lastName;
      }
    };

在函数定义中，this引用该函数的“拥有者”。如果通过关键词"new"来声明JavaScript变量，则该变量会被创建为对象。

JavaScript对象无法进行对比，比较两个JavaScript将始终返回false：

var x = new String("Bill");             
    var y = new String("Bill");
    // (x === y) 为 false，因为 x 和 y 是不同的对象

## JS事件 ##

HTML事件是发生在HTML元素上的“事情”。当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。HTML事件可以是浏览器或用户做的某些事情。比如：

*  HTML网页完成加载
 *  HTML输入字段被修改
 *  HTML按钮被点击

当事件发生时，用户会希望做某件事。JavaScript在事件被侦测到时执行代码：

<!DOCTYPE html>
 <html>
 <body>
 <h1>JavaScript 事件</h1>
 点击按钮来显示日期。
 <button onclick="displayDate()">时间是？</button>
 <script>
 function displayDate() {
 document.getElementById("demo").innerHTML = Date();
 }
 </script>
 
 </body>
 </html>

常见的HTML事件：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 事件 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onchange </td> 
 <td colspan="1" style="vertical-align:text-top;"> HTML 元素已被改变 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onclick </td> 
 <td colspan="1" style="vertical-align:text-top;"> 用户点击了 HTML 元素 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onmouseover </td> 
 <td colspan="1" style="vertical-align:text-top;"> 用户把鼠标移动到 HTML 元素上 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onmouseout </td> 
 <td colspan="1" style="vertical-align:text-top;"> 用户把鼠标移开 HTML 元素 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onkeydown </td> 
 <td colspan="1" style="vertical-align:text-top;"> 用户按下键盘按键 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> onload </td> 
 <td colspan="1" style="vertical-align:text-top;"> 浏览器已经完成页面加载 </td> 
 </tr> 
 </tbody> 
</table>

## JS字符串方法 ##

## JS数字 ##

JavaScript数值始终是64位的浮点数。如果对一个数和一个字符串相加，结果也是字符串级联。NaN属于JavaScript保留词，指示某个数不是合法数。尝试用一个非数字字符串进行除法会得到NaN（Not a Number）：

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

可使用全局JavaScript函数isNaN()来确定某个值是否是数。

Infinity（或-Infinity）是JavaScript在计算数时超出最大可能数范围时返回的值。

数字属于原始值，本身不能由属性或者方法，但是JavaScript可以通过将原始值当成对象的方式增加方法和属性。

数字的方法：

JavaScript方法可用于将变量转换为数字：

下面是一些例子：

x = "10"
    Number(x);               // 返回 10
    parseInt("10.33");       // 返回 10
    parseFloat("10.33");     // 返回 10.33

数值的属性：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 属性 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> MAX_VALUE </td> 
 <td colspan="1" style="vertical-align:text-top;"> 返回 JavaScript 中可能的最大数。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> MIN_VALUE </td> 
 <td colspan="1" style="vertical-align:text-top;"> 返回 JavaScript 中可能的最小数。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> NEGATIVE_INFINITY </td> 
 <td colspan="1" style="vertical-align:text-top;"> 表示负的无穷大（溢出返回）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> NaN </td> 
 <td colspan="1" style="vertical-align:text-top;"> 表示非数字值（"Not-a-Number"）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> POSITIVE_INFINITY </td> 
 <td colspan="1" style="vertical-align:text-top;"> 表示无穷大（溢出返回）。 </td> 
 </tr> 
 </tbody> 
</table>

下面是一个例子：

var x = Number.MIN_VALUE;

## JS数组 ##

数组的示例：

var cars = ["Saab", "Volvo", "BMW"];
    var cars = new Array("Saab", "Volvo", "BMW");

数组的访问使用下标：

![481579a7f11ad933cd2bafa7a3c1aefb.png][]

JavaScript不支持命名索引的数组。在JavaScript中，数组只能使用数字索引。

数组是一种特殊类型的对象。可以在相同数组中存放不同类型的变量：

![37ec05e6c320f5239477b9be0bf84832.png][]

数组有一个属性length：

![a8c5bdad5bd894cc8f1b53a43bf85cdd.png][]

数组和对象的区别：数组使用数字索引，对象使用命名索引；数组是特殊类型的对象，具有数字索引。没有必要使用JavaScript的内建数组构造器new Array()。请使用\[\]取而代之！

判断一个变量是不是数组，不能使用typeof因为返回的是object，可以使用如下的方式：

![fd09be52e57372beab07640192b72ae2.png][]

数组方法：

既然JavaScript数组属于对象，其中的元素就可以使用JavaScript的delete运算符来删除，但是使用delete会在数组留下未定义的空洞，最好使用pop()或 shift()取而代之。

splice()的使用示例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。第二个参数（0）定义应删除多少元素。其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。splice()方法返回一个包含已删除项的数组。通过聪明的参数设定，能够使用splice()在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(0, 1);        // 删除fruits中的第一个元素

对于sort()函数，默认是按照字符串顺序队值进行排序。但是它接受一个比值函数来更改默认的方式：

![1de0153ea1d0afc6978d72877247c008.png][]

数组的迭代是对每个数组项进行操作的方式：

## JS日期 ##

JavaScript的日期示例：

![c07a0a848093ae537bee7cbb059a2cf4.png][]

总共由四种创建的方式：

new Date()
    new Date(year, month, day, hours, minutes, seconds, milliseconds)
    new Date(milliseconds)
    new Date(date string)

JavaScript将日期存储为毫秒。JavaScript将日期存储为自1970年1月1日00:00:00 UTC（协调世界时）以来的毫秒数。日期对象可以转换为字符串：

![1c4b0d7748bc0348bf0ee9f31e9aa866.png][]

日期的方法：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 方法 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getDate() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 以数值返回天（1-31）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getDay() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 以数值获取周名（0-6）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getFullYear() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取四位的年（yyyy）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getHours() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取小时（0-23）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getMilliseconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取毫秒（0-999）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getMinutes() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取分（0-59）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getMonth() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取月（0-11）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getSeconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取秒（0-59）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getTime() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 获取时间（从 1970 年 1 月 1 日至今）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCDate() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getDate()，但返回 UTC 日期。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCDay() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getDay()，但返回 UTC 日。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCFullYear() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getFullYear()，但返回 UTC 年。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCHours() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getHours()，但返回 UTC 小时。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCMilliseconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getMilliseconds()，但返回 UTC 毫秒。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCMinutes() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getMinutes()，但返回 UTC 分。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCMonth() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getMonth()，但返回 UTC 月。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> getUTCSeconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 等于 getSeconds()，但返回 UTC 秒。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setDate() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 以数值（1-31）设置日。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setFullYear() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置年（可选月和日）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setHours() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置小时（0-23）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setMilliseconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置毫秒（0-999）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setMinutes() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置分（0-59）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setMonth() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置月（0-11）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> &nbsp;setSeconds() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置秒（0-59）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> setTime() </td> 
 <td colspan="1" style="vertical-align:text-top;"> 设置时间（从 1970 年 1 月 1 日至今的毫秒数）。 </td> 
 </tr> 
 </tbody> 
</table>

## JS逻辑 ##

JavaScript中使用true和false作为布尔值。

*  0（零）的布尔值为false
 *  \-0（负零）的布尔值为 false
 *  ""（空值）的布尔值为 false
 *  undefined的布尔值是 false
 *  null的布尔值是 false
 *  NaN的布尔值是 false
 *  其余的都是true

## JS条件语句 ##

if语句：

if (条件) {
        如果条件为 true 时执行的代码
    } 
    
    if (条件) {
        条件为 true 时执行的代码块
    } else { 
        条件为 false 时执行的代码块
    }
    
    if (条件 1) {
        条件 1 为 true 时执行的代码块
    } else if (条件 2) {
        条件 1 为 false 而条件 2 为 true 时执行的代码块
     } else {
        条件 1 和条件 2 同时为 false 时执行的代码块
    }

switch语句：

switch(表达式) {
         case n:
            代码块
            break;
         case n:
            代码块
            break;
         default:
            默认代码块
    }

switch case使用严格比较（===）。

for语句：

for (语句 1; 语句 2; 语句 3) {
         要执行的代码块
    }

for/in语句：

for (属性 in 对象) {
        要执行的代码块
    }

while语句：

while (条件) {
        要执行的代码块
    }
    
    do {
        要执行的代码块
    }
    while (条件);

## JS正则表达式 ##

格式：

/pattern/modifiers;

修饰符的类型：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 修饰符 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> i </td> 
 <td colspan="1" style="vertical-align:text-top;"> 执行对大小写不敏感的匹配。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> g </td> 
 <td colspan="1" style="vertical-align:text-top;"> 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> m </td> 
 <td colspan="1" style="vertical-align:text-top;"> 执行多行匹配。 </td> 
 </tr> 
 </tbody> 
</table>

模式的可能：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 表达式 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> [abc] </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找方括号之间的任何字符。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> [0-9] </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找任何从 0 至 9 的数字。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> (x|y) </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找由 | 分隔的任何选项。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> \d </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找数字。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> \s </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找空白字符。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> \b </td> 
 <td colspan="1" style="vertical-align:text-top;"> 匹配单词边界。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> \uxxxx </td> 
 <td colspan="1" style="vertical-align:text-top;"> 查找以十六进制数 xxxx 规定的 Unicode 字符。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> n+ </td> 
 <td colspan="1" style="vertical-align:text-top;"> 匹配任何包含至少一个 n 的字符串。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> n* </td> 
 <td colspan="1" style="vertical-align:text-top;"> 匹配任何包含零个或多个 n 的字符串。 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> n? </td> 
 <td colspan="1" style="vertical-align:text-top;"> 匹配任何包含零个或一个 n 的字符串。 </td> 
 </tr> 
 </tbody> 
</table>

示例：

var patt = /w3school/i;

w3school是模式（pattern）（在搜索中使用）。i是修饰符（把搜索修改为大小写不敏感）。比如在字符串的search函数中使用正则表达式：

var str = "Visit W3School";
    var n = str.search(/w3school/i);

## JS异常 ##

格式：

try {
         供测试的代码块
    }
     catch(err) {
         处理错误的代码块
    } 
    finally {
         无论 try / catch 结果如何都执行的代码块
    }

当发生错误时，JavaScript通常会停止并产生错误消息。技术术语是这样描述的：JavaScript将抛出异常（抛出错误）。JavaScript实际上会创建带有两个属性的Error对象，属性分别是name和message：

name属性可返回6个不同的值：

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 错误名 </td> 
 <td colspan="1" style="vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> EvalError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 已在eval()函数中发生的错误 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> RangeError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 已发生超出数字范围的错误 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> ReferenceError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 已发生非法引用 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> SyntaxError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 已发生语法错误 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> TypeError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 已发生类型错误 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> URIError </td> 
 <td colspan="1" style="vertical-align:text-top;"> 在encodeURI()中已发生的错误 </td> 
 </tr> 
 </tbody> 
</table>

throw语句允许创建自定义错误。从技术上讲能够抛出异常（抛出错误）。异常可以是JavaScript字符串、数字、布尔或对象：

throw "Too big";    // 抛出文本
    throw 500;          //抛出数字

如果把throw与try和catch一同使用，就可以控制程序流并生成自定义错误消息。

## JS提升（Hoisting） ##

提升（Hoisting）是JavaScript将声明移至顶部的默认行为。在JavaScript中，可以在使用变量之后对其进行声明。换句话说，可以在声明变量之前使用它。下述两种情况结果相同：

// 示例一：
    x = 5; // 把 5 赋值给 x
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x;                     // 在元素中显示 x
    var x; // 声明 x
    
    // 示例二：
    var x; // 声明 x
    x = 5; // 把 5 赋值给 x
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x;

用let或const声明的变量和常量不会被提升！

JavaScript 只提升声明，而非初始化。下面的例子有差异：

// 示例一，正常情况：
    var x = 5; // 初始化 x
    var y = 7; // 初始化 y
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    
    // 示例二：第一个y是undefined：
    var x = 5; // 初始化 x
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    var y = 7; // 初始化 y

Hoisting（对很多开发者来说）是JavaScript的一种未知的或被忽视的行为。如果开发者不理解Hoisting，程序也许会包含bug。为了避免bug，始终在每个作用域的开头声明所有变量。

## JS对象 ##

在JavaScript中，几乎“所有事物”都是对象：

*  布尔是对象（如果用new关键词定义）
 *  数字是对象（如果用new关键词定义）
 *  字符串是对象（如果用new关键词定义）
 *  日期永远都是对象
 *  算术永远都是对象
 *  正则表达式永远都是对象
 *  数组永远都是对象
 *  函数永远都是对象
 *  对象永远都是对象

所有JavaScript值，除了原始值，都是对象。原始值指的是没有属性或方法的值。原始数据类型指的是拥有原始值的数据。JavaScript定义了5种原始数据类型：

*  string
 *  number
 *  boolean
 *  null
 *  undefined

对象也是变量。但是对象能够包含很多值。值按照名称:值对的形式编写（名称和值以冒号分隔）：

var person = {
    	firstName:"Bill",
    	lastName:"Gates",
    	age:62,
    	eyeColor:"blue"
    };

JavaScript对象是命名值的集合。JavaScript对象中的命名值，被称为属性。

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 属性 </td> 
 <td colspan="1" style="vertical-align:middle;"> 值 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> firstName </td> 
 <td colspan="1" style="vertical-align:text-top;"> Bill </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> lastName </td> 
 <td colspan="1" style="vertical-align:text-top;"> Gates </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> age </td> 
 <td colspan="1" style="vertical-align:text-top;"> 62 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> eyeColor </td> 
 <td colspan="1" style="vertical-align:text-top;"> blue </td> 
 </tr> 
 </tbody> 
</table>

方法是可以在对象上执行的动作。对象属性可以是原始值、其他对象以及函数。对象方法是包含函数定义的对象属性。

<table> 
 <tbody> 
 <tr> 
 <td colspan="1" style="vertical-align:middle;"> 属性 </td> 
 <td colspan="1" style="vertical-align:middle;"> 值 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> firstName </td> 
 <td colspan="1" style="vertical-align:text-top;"> Bill </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> lastName </td> 
 <td colspan="1" style="vertical-align:text-top;"> Gates </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> age </td> 
 <td colspan="1" style="vertical-align:text-top;"> 62 </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> eyeColor </td> 
 <td colspan="1" style="vertical-align:text-top;"> blue </td> 
 </tr> 
 <tr> 
 <td colspan="1" style="vertical-align:text-top;"> fullName </td> 
 <td colspan="1" style="vertical-align:text-top;"> function() {return this.firstName + " " + this.lastName;} </td> 
 </tr> 
 </tbody> 
</table>

JavaScript对象是被称为属性和方法的命名值的容器。

对象是易变的：它们通过引用来寻址，而非值。如果person是一个对象，下面的语句不会创建person的副本：

var x = person;  // 这不会创建person的副本。

对象x并非person的副本。它就是person。x和person是同一个对象。对x的任何改变都将改变person，因为x和person是相同的对象。

通过JavaScript，可以定义和创建自己的对象。有不同的方法来创建对象：

*  定义和创建单个对象，使用对象文字
 *  定义和创建单个对象，通过关键词 new
 *  定义对象构造器，然后创建构造类型的对象

第一种方法：

var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:62,
        eyeColor:"blue"
    };

第二种方法（这种最好不要用）：

var person = new Object();
    person.firstName = "Bill";
    person.lastName = "Gates";
    person.age = 50;
    person.eyeColor = "blue";

第三种声明对象构造器函数，然后通过new关键词调用构造器函数可以创建相同类型的对象：

function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }
    var myFather = new Person("Bill", "Gates", 62, "blue");
    var myMother = new Person("Steve", "Jobs", 56, "green");

在JavaScript中，被称为this的事物是代码的“拥有者”。this的值，在对象中使用时，就是对象本身。在构造器函数中，this是没有值的。它是新对象的替代物。 当一个新对象被创建时，this的值会成为这个新对象。注意this并不是变量。它是关键词。所以无法改变this的值。

新创建的对象可以额外添加属性和方法：

myFather.nationality = "English";
    myFather.name = function () {
        return this.firstName + " " + this.lastName;
    };

需要注意这里的添加对象是实例myFather，所以myMother中还是没有新添加的属性和方法的，同样新new Person()出来的也没有。也不能直接使用原型增加属性和方法，需要使用prototype属性，它允许为对象构造器添加新属性和新方法：

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

JavaScript提供用于原始对象的构造器：

var x1 = new Object();    // 一个新的 Object 对象
    var x2 = new String();    // 一个新的 String 对象
    var x3 = new Number();    // 一个新的 Number 对象
    var x4 = new Boolean();   // 一个新的 Boolean 对象
    var x5 = new Array();     // 一个新的 Array 对象
    var x6 = new RegExp();    // 一个新的 RegExp 对象
    var x7 = new Function();  // 一个新的 Function 对象
    var x8 = new Date();      // 一个新的 Date 对象

由于速度上的原因，最好：

*  使用对象字面量\{\}代替new Object()
 *  使用字符串字面量""代替new String()
 *  使用数值字面量代替new Number()
 *  使用布尔字面量代替new Boolean()
 *  使用数组字面量\[\]代替new Array()
 *  使用模式字面量代替new RexExp()
 *  使用函数表达式()\{\}代替new Function()

for...in循环中的代码块会为每个属性执行一次：

var person = {fname:"Bill", lname:"Gates", age:62}; 
    for (x in person) {
        txt += person[x];
    }

delete关键词从对象中删除属性：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
    delete person.age;   // 或 delete person["age"];

delete关键词会同时删除属性的值和属性本身。删除完成后，属性在被添加回来之前是无法使用的。delete操作符被设计用于对象属性。它对变量或函数没有影响。delete操作符不应被用于预定义的JavaScript对象属性。这样做会使应用程序崩溃。

JavaScript访问器（Getter和Setter），Getter和Setter允许定义对象访问器（被计算的属性）：

为什么使用Getter和Setter：

*  它提供了更简洁的语法
 *  它允许属性和方法的语法相同
 *  它可以确保更好的数据质量
 *  有利于后台工作

## JS函数 ##

JavaScript函数是通过function关键词定义的：

function functionName(parameters) {
       要执行的代码
    }

JavaScript函数能够在声明之前被调用，即也可以“提升”（hoisting）：

myFunction(5);
    function myFunction(y) {
         return y * y;
    }

以上函数不属于任何对象。但是在JavaScript中，始终存在一种默认的全局对象。在HTML中，默认全局对象是HTML页面本身，所有上面的函数“属于”HTML页面。在浏览器中，这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。myFunction()和 window.myFunction()是同一个函数。所以，在JavaScript中，函数是对象的方法。如果一个函数不是JavaScript对象的方法，那么它就是全局对象的方法。

JavaScript中的typeof运算符会为函数返回"function"。但是最好是把JavaScript函数描述为对象。JavaScript函数都有属性和方法。arguments.length会返回函数被调用时收到的参数数目：

function myFunction(a, b) {
        return arguments.length;
    }

toString()方法以字符串返回函数：

function myFunction(a, b) {
        return a * b;
    }
    var txt = myFunction.toString();

定义为对象属性的函数，被称为对象的方法。

JavaScript函数定义不会为参数（parameter）规定数据类型。JavaScript函数不会对所传递的参数（argument）实行类型检查。JavaScript函数不会检查所接收参数（argument）的数量。

如果函数调用的参数太多（超过声明），则可以使用arguments对象来达到这些参数。JavaScript函数有一个名为arguments对象的内置对象。arguments对象包含函数调用时使用的参数数组。这样就可以简单地使用函数来查找（例如）数字列表中的最高值：

x = findMax(1, 123, 500, 115, 44, 88);
 
 function findMax() {
 var i;
 var max = -Infinity;
 for (i = 0; i < arguments.length; i++) {
 if (arguments[i] > max) {
 max = arguments[i];
 }
 }
 return max;
 }

如果函数改变了参数的值，它不会改变参数的原始值。如果函数改变了对象属性，它也改变了原始值。

call()方法是预定义的JavaScript方法。它可以用来调用所有者对象作为参数的方法。通过call()能够使用属于另一个对象的方法：

var person = {
        fullName: function() {
            return this.firstName + " " + this.lastName;
        }
    }
    var person1 = {
        firstName:"Bill",
        lastName: "Gates",
    }
    var person2 = {
        firstName:"Steve",
        lastName: "Jobs",
    }
    person.fullName.call(person1);  // 将返回 "Bill Gates"

另一个例子：

var person = {
      fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = {
      firstName:"Bill",
      lastName: "Gates"
    }
    person.fullName.call(person1, "Seattle", "USA");

通过apply()方法，也能够编写用于不同对象的方法。

var person = {
        fullName: function() {
            return this.firstName + " " + this.lastName;
        }
    }
    var person1 = {
        firstName: "Bill",
        lastName: "Gates",
    }
    person.fullName.apply(person1);  // 将返回 "Bill Gates"

call()和apply()之间的区别：

*  call()方法分别接受参数
 *  apply()方法接受数组形式的参数。如果要使用数组而不是参数列表，则 apply() 方法非常方便（注意下面的\["Oslo", "Norway"\]）：

var person = {
      fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = {
      firstName:"John",
      lastName: "Doe"
    }
    person.fullName.apply(person1, ["Oslo", "Norway"]);

不通过关键词var创建的变量总是全局的，即使它们在函数中创建。闭包的例子：

var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    
    add();
    add();
    add();
    
    // 计数器目前是 3

这里的第二个counter就是全局的。

[b92700eceaa6900a876173678a3a81b6.png]: https://img-blog.csdnimg.cn/img_convert/b92700eceaa6900a876173678a3a81b6.png
[162f80c388800107f73b4852071f4bda.png]: https://img-blog.csdnimg.cn/img_convert/162f80c388800107f73b4852071f4bda.png
[481579a7f11ad933cd2bafa7a3c1aefb.png]: https://img-blog.csdnimg.cn/img_convert/481579a7f11ad933cd2bafa7a3c1aefb.png
[37ec05e6c320f5239477b9be0bf84832.png]: https://img-blog.csdnimg.cn/img_convert/37ec05e6c320f5239477b9be0bf84832.png
[a8c5bdad5bd894cc8f1b53a43bf85cdd.png]: https://img-blog.csdnimg.cn/img_convert/a8c5bdad5bd894cc8f1b53a43bf85cdd.png
[fd09be52e57372beab07640192b72ae2.png]: https://img-blog.csdnimg.cn/img_convert/fd09be52e57372beab07640192b72ae2.png
[1de0153ea1d0afc6978d72877247c008.png]: https://img-blog.csdnimg.cn/img_convert/1de0153ea1d0afc6978d72877247c008.png
[c07a0a848093ae537bee7cbb059a2cf4.png]: https://img-blog.csdnimg.cn/img_convert/c07a0a848093ae537bee7cbb059a2cf4.png
[1c4b0d7748bc0348bf0ee9f31e9aa866.png]: https://img-blog.csdnimg.cn/img_convert/1c4b0d7748bc0348bf0ee9f31e9aa866.png