JavaScript（四） --高阶技巧

01 前言

DOM 和 BOM 是 JS 最基础的两个模块，通过这两个模块，我们可以操作 HTML 文档的结构和样式，以及控制浏览器的行为。但是，JS 的高级特性远不止于此，还包括函数式编程、闭包、作用域、原型链等等。这些概念和技巧不仅可以提高 JS 的编程能力，还能让开发者写出更加高效、简洁和易维护的代码。因此，在这篇文章中，我们将深入探讨 JS 的高级特性，以便读者能够更全面地了解和应用 JS 在实际开发中的高阶技巧。

02 异常

2.1 Exception

  JavaScript代码中的错误或异常情况叫做 Exception。从ES3开始，JavaScript也提供了类似的异常处理机制，从而让JavaScript代码变的更健壮，即使执行的过程中出现了异常，也可以让程序具有了一部分的异常恢复能力。

  当JavaScript代码执行时，如果遇到错误或异常情况，它会抛出一个异常。这个异常会打断代码的正常执行流程，并在控制台上输出相应的错误信息，以提示开发人员在代码中进行修正。

  JavaScript中常见的异常类型包括语法错误、类型错误、引用错误、范围错误、空对象引用错误等等。开发人员可以使用try-catch语句来捕捉异常，并在异常发生时执行相应的代码，以便在程序执行时处理这些异常情况。

抛出的错误会返回大概以下几种类型：

错误名	描述
EvalError	已在 eval() 函数中发生的错误
RangeError	已发生超出数字范围的错误
ReferenceError	已发生非法引用
SyntaxError	已发生语法错误
TypeError	已发生类型错误
URIError	在 encodeURI() 中已发生的错误

2.2 抛出异常

在JavaScript中，使用try-catch语句来捕获异常，其基本语法形式如下：

try {
    
    
    // 可能发生异常的代码
} catch (error) {
    
    
    // 发生错误执行的代码
} finally {
    
    
    // 无论是否出错都会执行的代码
}

在这个语法形式中，try后面的代码块包含可能会抛出异常的代码。如果在这个代码块中抛出了异常，程序会立即跳转到catch后面的代码块中，并执行其中的异常处理代码。

catch后面的参数error是一个表示异常对象的变量。开发人员可以在catch代码块中使用这个变量来访问异常的详细信息，例如异常类型、异常消息等。

注意，try-catch语句可以嵌套，以便在程序的不同层次上处理异常。此外，可以在try块中添加finally块，无论是否发生异常，finally块中的代码都会被执行。也就是说，try 中语句不发生错误执行完毕后会执行 finally 中的语句，try 中的语句发生错误，则执行 catch中的语句，catch 中的语句执行完毕后也会执行 finally 中的语句。

在JavaScript中，如果添加了 finally 语句，则 catch 语句可以省略。但是如果没有 catch 语句，则一旦发生错误就无法捕获这个错误，所以在执行完 finally 中的语句后，程序就会立即停止了。所以，在实际使用中，最好一直带着 catch 语句。如果你写了 catch 语句，则finally 语句也是可以省略的。

2.3 主动抛出异常

在JavaScript中，我们可以使用throw语句来主动抛出异常。这意味着，当程序执行到throw语句时，它会立即停止当前的执行流程，并抛出一个指定的异常。

下面是一个抛出异常的简单示例：

function divide(x, y) {
    
    
  if (y === 0) {
    
    
    throw new Error('Division by zero');
  }
  return x / y;
}

try {
    
    
  let result = divide(10, 0);
  console.log(result);
} catch (error) {
    
    
  console.error(error.message);
}

在这个示例中，我们定义了一个名为divide的函数，用于执行两个数的除法操作。如果第二个参数y的值为0，则抛出一个异常，并在异常处理代码块中输出异常的消息。

在try块中，我们调用了divide函数，并将其结果赋值给变量result。由于第二个参数为0，因此divide函数抛出了一个异常，导致程序立即跳转到catch块中，并输出异常的消息。

通过主动抛出异常，我们可以在代码中检测到并处理一些不符合预期的情况。例如，在读取文件时，如果文件不存在，我们可以使用throw语句抛出一个异常，并在异常处理代码块中输出错误信息，以便及时发现和解决这些问题。

03 josn

3.1 概述

JSON是一种轻量级的数据交换格式，全称为JavaScript Object Notation，它以文本的形式来表示数据，并具有良好的可读性和可扩展性。JSON的数据结构是基于键值对的，可以用于存储和传输结构化数据。在Web开发中，JSON通常用于前后端之间的数据交互。

3.2 josn的特点

为什么要使用JSON呢？因为JSON具有以下优点：

• 简单易用：JSON的语法规则简单明了，易于理解和使用。
• 可读性好：JSON的文本格式易于阅读和调试，便于开发人员进行数据解析和处理。
• 跨平台支持：JSON格式的数据可以被多种编程语言和平台支持，便于数据的跨平台传输和共享。
• 数据体积小：相对于其他数据交换格式，JSON的数据体积通常更小，传输速度更快。

与CSV（Comma-Separated Values）相比，JSON的优点在于：

• 结构更清晰：CSV只是用逗号分隔的文本文件，没有明确的结构表示，难以描述复杂的数据结构；而JSON使用键值对表示数据，结构更加清晰，可以存储复杂的数据结构。
• 可扩展性更好：JSON支持嵌套和数组，可以存储任意层次和类型的数据，而CSV只支持一维的表格数据。
• 处理更加灵活：JSON支持JavaScript对象的格式，可以通过JavaScript内置的方法直接进行处理，而CSV需要自己实现解析和处理逻辑。

综上所述，JSON是一种更加灵活、可读性更好、可扩展性更强的数据交换格式，适用于各种数据交换场景。

3.3 josn语法

JSON对象和JavaScript对象有一些区别：

• JSON对象是一种特殊的JavaScript对象，它的属性名必须是双引号括起来的字符串，而JavaScript对象的属性名可以是任何有效的JavaScript标识符。
• JSON对象不支持函数属性，而JavaScript对象可以拥有函数属性。
• JSON对象不能包含循环引用的属性，而JavaScript对象可以包含循环引用的属性。

JSON对象和JavaScript对象之间可以相互转化，可以使用JSON对象提供的
JSON.stringify()和JSON.parse()方法来实现转化。

JSON.stringify()方法可以将JavaScript对象转化为JSON字符串，例如：

let person = {
    
    
  name: 'Alice',
  age: 25,
  address: {
    
    
    city: 'Shanghai',
    street: '123 Main St'
  }
};

let jsonStr = JSON.stringify(person);
console.log(jsonStr);
// 输出：{"name":"Alice","age":25,"address":{"city":"Shanghai","street":"123 Main St"}}

JSON.parse()方法可以将JSON字符串转化为JavaScript对象，例如：

let jsonStr = '{
    
    "name":"Alice","age":25,"address":{
    
    "city":"Shanghai","street":"123 Main St"}}';
let person = JSON.parse(jsonStr);
console.log(person);
// 输出：{ name: 'Alice', age: 25, address: { city: 'Shanghai', street: '123 Main St' } }

04 AJAX

4.1 AJAX概述

AJAX全称为Asynchronous JavaScript And XML，是一种基于JavaScript和XML技术的异步数据交换技术。它可以在不重新加载整个页面的情况下向服务器请求数据，并实时更新页面的局部内容，从而提高页面的响应速度和用户体验。

以下是一些中国的使用 AJAX 技术的动漫影视网站：

嘀哩嘀哩动漫网：https://www.dilidili1.com/
动漫之家：https://www.dmzj.com/
bilibili动画：https://www.bilibili.com/anime/
这些网站都提供了海量的动漫资源，并且使用了 AJAX 技术来实现动态加载和交互，让用户可以更方便地浏览和观看动漫。

05 闭包

5.1 闭包概念

闭包是指一个函数能够访问并操作其外部函数作用域内的变量，即使外部函数已经返回，闭包仍然能够保留对这些变量的访问权限。简单来说，闭包就是在函数执行完毕后，仍然可以访问到函数内部的变量。

5.2 案例说明

闭包的一个典型应用是将一个函数作为另一个函数的返回值，从而形成一个“私有”作用域，防止外部访问内部的变量和函数。

以下是一个 JS 闭包的例子：

function outerFunction() {
    
    
  var outerVariable = "I am outer";
  
  function innerFunction() {
    
    
    var innerVariable = "I am inner";
    console.log(outerVariable + ", " + innerVariable);
  }
  
  return innerFunction;
}

var innerFunc = outerFunction();
innerFunc(); // 输出 "I am outer, I am inner"

在上面的例子中，outerFunction 中定义了一个内部函数 innerFunction，内部函数访问了外部函数的变量 outerVariable。outerFunction 最终将 innerFunction 作为返回值返回，并保存在变量 innerFunc 中。

由于 innerFunc 引用了 outerFunction 中的变量 outerVariable，所以 outerVariable 不会被垃圾回收机制释放，即使 outerFunction 已经执行完毕。当 innerFunc 被调用时，它仍然可以访问到 outerVariable 的值，并输出 “I am outer, I am inner”。

这个例子展示了闭包的一个基本用法，即在一个函数内部定义另一个函数，让内部函数可以访问外部函数的变量和参数，从而实现一些高级的编程技巧。