01 前言

欢迎来到学习JavaScript的基础教程！在前面的教程中，我们已经学习了HTML和 CSS，它们是构建网页的基本语言。但是，仅仅使用 HTML 和 CSS 还不足以实现交互和动态效果。为此，我们需要学习 JavaScript，它是一种用于创建动态网页和交互式应用程序的脚本语言。

JavaScript 由 Brendan Eich 在 1995 年创建，最初是为了实现网页上的一些简单交互功能而设计的。如今，JavaScript 已经成为了 Web 开发中不可或缺的一部分，它可以用于创建动态效果、表单验证、网页游戏、Web 应用程序等等。同时，JavaScript 也可以在后端运行，使用 Node.js 技术可以编写服务器端应用程序。

在本教程中，我们将介绍 JavaScript 的基础知识，包括语法、数据类型、流程控制、函数、对象等等。我们还将学习如何使用 JavaScript 操纵 HTML 元素、处理事件、进行网络编程等等。本教程旨在让您能够掌握 JavaScript 的基础知识，之后会持续更新教学包括运用 JavaScript 实现各种 Web 应用程序等。

01 JavaScript的概述

1.1 js的背景

JavaScript 是一种广泛应用于 Web 开发的脚本语言，也是目前世界上使用最广泛的编程语言之一。JavaScript 最初是由 Netscape 公司的 Brendan Eich 开发，它于 1995 年首次出现在 Netscape Navigator 2.0 浏览器中。当时，JavaScript 被设计为一种用于网页交互的脚本语言，主要用于实现网页上的简单交互和动态效果。

随着 Web 技术的发展和应用场景的扩大，JavaScript 的功能逐渐变得更加强大和复杂，它也成为了 Web 开发中不可或缺的一部分。如今，JavaScript 被广泛应用于 Web 开发、移动应用开发、桌面应用程序、游戏开发、服务器端编程等众多领域。

JavaScript 是一种解释性语言，它不需要编译即可直接在浏览器中运行。它支持面向对象编程、函数式编程、事件驱动编程等多种编程范式，拥有丰富的内置函数和第三方库，能够快速实现各种功能。

在过去的几年中，JavaScript 生态系统得到了极大的发展，JavaScript 的语言标准也得到了更新，ES6、ES7、ES8、ES9、ES10 等版本的发布，使得 JavaScript 的语言功能更加完备和现代化。同时，JavaScript 框架和库的发展也十分迅猛，如 React、Vue.js、Angular、jQuery 等，这些框架和库极大地提高了 JavaScript 的开发效率和代码质量。

总的来说，JavaScript 是一门非常重要的编程语言，如果您想成为一名 Web 开发工程师，那么 JavaScript 的学习是必不可少的。

1.2 js的特点

JavaScript的主要特点包括：

解释执行：JavaScript是一种解释性语言，不需要编译就可以直接执行。
脚本语言：JavaScript通常用于编写脚本，可以在网页中嵌入代码，与HTML和CSS相结合，使网页变得更加动态和交互。

扫描二维码关注公众号，回复： 15408045 查看本文章
基于对象：JavaScript是一种基于对象的语言，对象是 JavaScript 的基本数据类型之一，可以用来表示数据和行为。
弱类型：JavaScript是一种弱类型语言，变量的类型可以根据上下文自动转换。
事件驱动：JavaScript支持事件驱动编程，可以通过监听事件来响应用户的操作。
跨平台：JavaScript可以在不同的操作系统和浏览器中运行，实现跨平台应用。
开放性：JavaScript是一种开放性语言，拥有庞大的开发者社区和丰富的第三方库和框架，可以方便地扩展和定制。

02 JavaScript语法

2.1 引用

JavaScript可以通过标签引用和文件引用两种方式来使用。

标签引用指的是在HTML文件中使用<script>标签嵌入JavaScript代码，例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>标签引用示例</title>
  </head>
  <body>
    <h1>JavaScript标签引用示例</h1>
    <script>
      // 在这里编写JavaScript代码
    </script>
  </body>
</html>

文件引用则是在HTML文件中使用<script>标签引用外部的JavaScript文件，例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文件引用示例</title>
    <script src="path/to/javascript.js"></script>
  </head>
  <body>
    <h1>JavaScript文件引用示例</h1>
  </body>
</html>

2.2 JavaScript的输出

可以使用 DOM 操作将输出的信息添加到 HTML 页面上，例如通过 innerHTML 修改元素的内容。例如：

    <script>
      document.getElementById("output").innerHTML = "Hello, world!";
    </script>

控制台输出：在浏览器的开发者工具中，可以使用console.log()方法将信息输出到控制台上。例如：

  console.log("Hello, world!");

弹出窗口输出：可以使用alert()方法弹出一个带有消息的窗口。例如：

alert("Hello, world!");

2.3 JavaScript的注释

JavaScript有两种注释方式：

单行注释：以双斜杠（//）开头，后面跟着注释内容。
多行注释：以斜杠和星号（/*）开头，以星号和斜杠（*/）结尾，中间是注释内容。

注释可以用于解释代码、标记代码、调试等目的，对于开发和维护代码非常有帮助。注释不会被 JavaScript 引擎执行，仅供程序员阅读。

2.4 变量声明

在 JavaScript 中，有三种声明变量的方式：

使用 var 声明变量，可以用于声明全局变量或函数作用域内的变量。


var a = 10; // 声明一个全局变量a，值为10
function foo() {
    
    
  var b = 20; // 声明一个函数作用域内的变量b，值为20
}

使用 let 声明变量，用于声明块级作用域内的变量，例如 for 循环中的变量。

function foo() {
    
    
  let a = 10; // 声明一个块级作用域内的变量a，值为10
  if (true) {
    
    
    let b = 20; // 声明一个块级作用域内的变量b，值为20
  }
  console.log(a); // 输出 10
  console.log(b); // 报错，b未定义
}

使用 const 声明常量，用于声明值不变的变量，声明后不可再次赋值。

const PI = 3.1415926; // 声明一个常量 PI，值为 3.1415926
PI = 3.14; // 报错，常量不可再次赋值

需要注意的是，使用 let 和 const 声明的变量和常量只在当前块级作用域中有效，而使用 var 声明的变量作用域为当前函数内部或全局作用域。此外，let 和 const 声明的变量不存在变量提升，必须先声明再使用，而 var 声明的变量存在变量提升。

2.5 数据类型

JavaScript 有七种内置数据类型：

Number（数字）：整数和浮点数，例如 42 或 3.14。
BigInt（大整数）：用于表示更大范围的整数，例如 9007199254740992n。
String（字符串）：一串字符，例如 “hello world”。
Boolean（布尔值）：true 或 false。
Null（空值）：表示没有值，只有一个值 null。
Undefined（未定义）：表示一个变量已声明但未赋值。
Object（对象）：一种复杂数据类型，用于存储各种数据和功能。对象可以包含键值对，也可以包含方法和属性。

具体拓展以下两个：

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

Null
Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

2.6 强制类型转化

2.6.1 转换为String类型

将其它数值转换为字符串有三种方式：toString()、String()、拼串。

方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回。

注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);

方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);

var c = null;
c = String(c);
console.log(c);
console.log(typeof c);

方式三：为任意的数据类型 +""

var a = 123;
a = a + "";
console.log(a);
console.log(typeof a);

2.6.2 转换为Number类型

有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

详细解释：使用Number()函数

字符串 --> 数字

如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

布尔 --> 数字

true 转成 1
false 转成 0

null --> 数字

null 转成 0

undefined --> 数字

undefined 转成 NaN

注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作。

2.6.3 转换为Boolean类型

将其它的数据类型转换为Boolean，只能使用Boolean()函数。

使用Boolean()函数:

数字 —> 布尔
除了0和NaN，其余的都是true
字符串 —> 布尔
除了空串，其余的都是true
null和undefined都会转换为false
对象也会转换为true

2.7 运算符

JavaScript 中的运算符可以分为以下几类：

算术运算符：用于执行基本的数学运算，例如加、减、乘、除、取模等。常见的算术运算符包括 +、-、*、/、% 等。
赋值运算符：用于给变量赋值，例如将 5 赋给变量 x，可以使用 x = 5。常见的赋值运算符包括 =、+=、-=、*=、/=、%= 等。
比较运算符：用于比较两个值之间的大小关系，并返回一个布尔值 true 或 false。常见的比较运算符包括 ==、!=、===、!==、>、<、>=、<= 等。
逻辑运算符：用于组合多个条件并返回一个布尔值 true 或 false。常见的逻辑运算符包括 &&（逻辑与）、||（逻辑或）和 !（逻辑非）。
位运算符：用于对二进制数进行操作。常见的位运算符包括 &（按位与）、|（按位或）、^（按位异或）、~（按位取反）、<<（左移）、>>（带符号右移）和 >>>（无符号右移）。
条件运算符：也称为三元运算符，用于根据一个条件来执行不同的操作。它由一个问号和一个冒号组成，形式为 condition ? expr1 : expr2。
其他运算符：包括 typeof 运算符、instanceof 运算符、delete 运算符等。

2.7.1 逻辑运算符

关于逻辑运算符我们可以具体探讨一下：

&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：

两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值

|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：

两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值

! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：

如果对一个值进行两次取反，它不会变化
非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

2.7.2 运算符优先级

具体可以参考这篇文章：http://c.biancheng.net/view/161.html，这里不做多余解释。

2.8 代码块

代码块是在大括号 {} 中所写的语句，以此将多条语句的集合视为一条语句来使用。例如：

{
    
    
    var a = 123;
    a++;
    alert(a);
}

我们一般使用代码块将需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号。

03 对象基础

Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个键/值对。对象除了可以创建自有属性，还可以通过从一个名为原型 的对象那里继承属性。

注意：除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

3.1 创建对象

在 JavaScript 中，有多种创建对象的方式，包括：

对象字面量
使用对象字面量可以直接创建对象，这是一种简单的方式，如下所示：

const obj = {
    
    
  key1: value1,
  key2: value2,
  // ...
};

构造函数
使用构造函数可以创建对象，这是一种比较常用的方式。首先需要定义一个构造函数，然后通过new关键字调用构造函数来创建对象，如下所示：

function Person(name, age) {
    
    
  this.name = name;
  this.age = age;
}

const person1 = new Person('Alice', 18);
const person2 = new Person('Bob', 20);

Object.create()
使用 Object.create() 方法可以通过指定原型来创建对象，如下所示：

const protoObj = {
    
     x: 1 };
const obj = Object.create(protoObj);

类
ES6 中引入了 class 关键字，可以用来创建类。类本质上是一种特殊的构造函数，如下所示：

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }
}

const person1 = new Person('Alice', 18);
const person2 = new Person('Bob', 20);

这些是 JavaScript 中创建对象的常用方式，根据不同的需求和场景选择合适的方式可以提高代码的可读性和维护性。

3.2 使用方法

增删delete改查，和其他语言一样。主要在讲一下遍历：
案例演示：

var person = {
    
    
    name: "zzc",
    age: 18
}

for (var personKey in person) {
    
    
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}

3.3 对象类型梳理

3.3.1 基本数据类型

JavaScript中的变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

基本数据类型的值是无法修改的，是不可变的。基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

引用类型的值是保存在内存中的对象。当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

栈和堆梳理，JavaScript在运行时数据是保存到栈内存和堆内存当中的。

简单来说栈内存用来保存变量和基本类型，堆内存是用来保存对象。

我们在声明一个变量时，实际上就是在栈内存中创建了一个空间用来保存变量。如果是基本类型则在栈内存中直接保存，如果是引用类型则会在堆内存中保存，变量中保存的实际上对象在堆内存中的地址。

04 函数

JavaScript函数是一段可重复使用的代码块，可以接受参数，进行计算，并返回结果。它可以被定义为一个独立的函数或者作为一个方法定义在对象中。JavaScript函数可以像其他数据类型一样被传递、分配和使用，使得代码更加模块化和灵活。

JavaScript中的函数和Java中的函数在定义和使用上有很多相似之处，使用方法和JAVA几乎一模一样。它们都需要声明函数名、参数和返回值类型。但是JavaScript函数有以下几个特点：

JavaScript函数是第一类对象：JavaScript函数是一等公民，可以像其他数据类型一样被传递、赋值和使用。
JavaScript函数没有重载：Java函数可以有不同的方法名和参数类型，但JavaScript函数只能有一个名称，可以接受不同数量和类型的参数。
JavaScript函数有默认参数：JavaScript函数可以定义默认参数值，方便调用者使用。
JavaScript函数有动态作用域：JavaScript函数的作用域是动态的，它们可以访问定义它们的上下文中的变量。
JavaScript函数可以被调用方式不同：JavaScript函数可以被当作普通函数调用，也可以作为方法被对象调用，甚至可以使用call()和apply()方法来改变函数的作用域。

总之，JavaScript函数和Java函数虽然有些相似之处，但是由于JavaScript是一门动态语言，其函数的特性和使用方式有着更大的灵活性。

4.1 函数创建

使用函数表达式来创建一个函数（比较常用）

语法格式：

var 函数名  = function([形参1,形参2,...,形参N]) {
    
    
    语句....
}

示例代码：

var fun  = function() {
    
    
    console.log("这是我的第三个函数");
}

4.2 函数参数

调用函数时，解析器不会检查实参的类型。所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查，函数的实参可以是任意的数据类型。
调用函数时，解析器也不会检查实参的数量。多余实参不会被赋值，如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

4.3 嵌套函数

嵌套函数：在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

案例演示：

function fu() {
    
    
    function zi() {
    
    
        console.log("我是儿子")
    }

    zi();
}

fu();

4.4 对象中的函数

对象的属性值可以是任何的数据类型，也可以是个函数。

如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用这个函数就说调用对象的方法（method）。

注意：方法和函数只是名称上的区别，没有其它别的区别

案例演示：

var person = {
    
    
    name: "zhangsan",
    age: 18,
    sayHello: function () {
    
    
        console.log(name + " hello")
    }
}

person.sayHello();

05 对象高级使用

5.1 用构造函数去创建对象(最常用)

那构造函数是怎么执行创建对象的过程呢？我再来解释一下：

调用构造函数，它会立刻创建一个新的对象
将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回

// 使用构造函数来创建对象
function Person(name, age) {
    
    
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
    
    
        console.log(this.name);
    };
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

console.log(person1);
console.log(person2);
console.log(person3);

this又出现了一种新的情况，为了不让大家混淆，我再来梳理一下：

当以函数的形式调用时，this是window

当以方法的形式调用时，谁调用方法this就是谁

当以构造函数的形式调用时，this就是新创建的那个对象

我们可以使用instanceof运算符检查一个对象是否是一个类的实例，它返回true或false。案例演示：

console.log(person1 instanceof Person);

5.2 原型

有没有一种方法，我只在Person这个类的全局对象中添加一个函数，然后在类中引用？答案肯定是有的，这就需要原型对象了。

在 JavaScript 中，每个对象都有一个原型对象，它是一个指向其他对象的引用。原型对象可以包含共享属性和方法，这些属性和方法可以被对象继承。

当我们访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会去该对象的原型对象中查找。如果原型对象中也没有，它会继续查找原型对象的原型对象，一直到 Object.prototype 为止。

原型是 JavaScript 实现继承的机制之一，可以通过原型链来继承属性和方法。使用原型可以减少重复代码和内存占用，提高程序的性能。

可以使用构造函数和原型来创建对象并添加变量。例如，我们可以创建一个名为Person的构造函数，并在其原型中添加三个变量名：name、age和gender。案例演示：

function Person(name, age, gender) {
    
    
  this.name = name;
  this.age = age;
  this.gender = gender;
}

Person.prototype.nickname = "";

let person1 = new Person("Alice", 25, "female");
let person2 = new Person("Bob", 30, "male");

person1.nickname = "Ally";

console.log(person1.name); // Output: "Alice"
console.log(person2.age); // Output: 30
console.log(person1.gender); // Output: "female"
console.log(person1.nickname); // Output: "Ally"
console.log(person2.nickname); // Output: ""

那原型（prototype）到底是什么呢？

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过 __ proto__（隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

什么是原型链（Prototype Chain）？

当一个对象访问一个属性或方法时，JavaScript会首先在这个对象本身上查找，如果找不到，就会去对象的原型上查找，然后再去原型的原型上查找，直到找到该属性或方法或者查找到原型链的顶部为止。他主要用于实现类似JAVA里面的继承的功能。

5.3 利用原型链实现组合继承

核心思想：原型链+借用构造函数的组合继承

基本做法：

利用原型链实现对父类型对象的方法继承
利用super()借用父类型构建函数初始化相同属性

缺点描述：

父类中的实例属性和方法既存在于子类的实例中，又存在于子类的原型中，不过仅是内存占用，因此，在使用子类创建实例对象时，其原型中会存在两份相同的属性和方法。

注意：这个方法是JavaScript中最常用的继承模式。

代码示例：

function Person(name, age) {
    
    
    this.name = name;
    this.age = age;
}

Person.prototype.setName = function (name) {
    
    
    this.name = name;
};

function Student(name, age, price) {
    
    
    Person.call(this, name, age); // 为了得到父类型的实例属性和方法
    this.price = price; // 添加子类型私有的属性
}

Student.prototype = new Person(); // 为了得到父类型的原型属性和方法
Student.prototype.constructor = Student; // 修正constructor属性指向
Student.prototype.setPrice = function (price) {
    
     // 添加子类型私有的方法 
    this.price = price;
};

var s = new Student("孙悟空", 24, 15000);
console.log(s.name, s.age, s.price);
s.setName("猪八戒");
s.setPrice(16000);
console.log(s.name, s.age, s.price);

5.4 垃圾回收机制

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。

person1 = null;
person2 = null;
person3 = null;

5.5 作用域（Scope）

在JavaScript中，变量的可见范围称为作用域。在函数中声明的变量只在该函数内部可见，而在函数外部声明的变量则在全局范围内可见。JavaScript采用的是词法作用域，也就是在函数声明时就确定了变量的作用域。在JS中一共有两种作用域：

全局作用域:直接编写在script标签中的JavaScript代码，都在全局作用域,全局作用域在页面打开时创建，在页面关闭时销毁。
函数作用域:调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。

5.6 回调函数

回调函数是指在函数执行时传递到另一个函数中的函数。回调函数在被传递的函数执行特定操作时被调用，以实现更灵活的代码结构和复杂的功能。回调函数可以在异步操作完成时被调用，也可以被用来处理事件。

通常，在JavaScript中回调函数被传递给其他函数，以在异步操作完成时执行。例如，当用户点击一个按钮时，浏览器会在单独的线程中执行事件处理程序函数，并在事件处理程序函数完成时调用回调函数。
回调函数也可以用于处理异步请求和其他需要长时间运行的操作。例如，当我们从服务器请求数据时，由于网络延迟，我们需要等待服务器响应。在这种情况下，我们可以将回调函数传递给请求函数，以在请求完成后执行回调函数并处理响应数据。
回调函数在JavaScript中也可以用于处理事件。例如，当用户单击按钮时，浏览器会调用指定的事件处理程序函数，并在事件处理程序函数完成后调用回调函数。

总的来说，回调函数是一种非常常见的JavaScript编程模式，它提供了一种处理异步操作和事件的方式。在排序算法中，回调函数还可以用来指定排序规则。例如，如果要对一个字符串数组进行排序，可以使用回调函数来指定按字母顺序升序或降序排序。

5.6.1 回调函数实现排序

以下是一个使用回调函数进行排序的示例（使用JavaScript语言）：

function sortArray(arr, callback) {
    
    
  return arr.sort(callback);
}

const arr = ["apple", "banana", "cherry", "date"];
const ascendingOrder = (a, b) => a.localeCompare(b); // 回调函数用于按字母升序排序
const descendingOrder = (a, b) => b.localeCompare(a); // 回调函数用于按字母降序排序

console.log(sortArray(arr, ascendingOrder)); // ["apple", "banana", "cherry", "date"]
console.log(sortArray(arr, descendingOrder)); // ["date", "cherry", "banana", "apple"]

const 是 JavaScript 中用于声明常量的关键字，其名称来源于 constant（常数）一词。使用 const 声明的变量无法被重新赋值，这意味着一旦 const 声明变量被赋予一个值，该值就不能再被更改。const 声明的变量必须在声明时就被赋值，不能在后面的代码中赋值。这与 let 和 var 声明的变量不同，后两者可以在声明后的任何时候被赋值。

5.6.2 简单方法实现排序

var arr = [1, 3, 2, 11, 5, 6];

//如果需要升序排列，则返回 a-b，返回正值，则True实现调换，False实现位置不变
//如果需要降序排列，则返回 b-a
arr.sort(function (a, b) {
    
    
    return a - b;
});
console.log(arr);

06 javascript常用对象

6.1 数组

在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关。使用typeof检查一个数组对象时，会返回object。

6.1.1 数组创建与基本操作

var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

/*增*/
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");

/*删*/
var result = arr.pop();

/* 遍历*/
for (var i = 0; i < arr.length; i++) {
    
    
    console.log(arr[i]);
}

6.1.2 数组的拓展方法

unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度

var result = arr.unshift("牛魔王", "二郎神");

shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var result = arr.shift();

slice()方法演示：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

result = arr.slice(0, -2);

注意：索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
参数：

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");

concat()方法演示：该方法可以连接两个或多个数组

var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主")

join()方法演示：该方法可以将数组转换为一个字符串，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join("@-@");
console.log(result);

6.2 Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。
可以使用 JavaScript 中的 Date 对象来获得当前日期。具体操作如下

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate();

const dateString = `${
      
      year}-${
      
      month.toString().padStart(2, '0')}-${
      
      day.toString().padStart(2, '0')}`;
console.log(dateString); // 输出类似于 "2022-04-05" 的字符串

6.3 String对象

6.3.1 概述

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String()：可以将基本数据类型字符串转换为String对象
Number()：可以将基本数据类型的数字转换为Number对象
Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果，在这一章节中，我们重点介绍String()对象的属性和方法。

6.3.2 方法

slice()方法演示：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

参数：

第一个参数：开始位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的

var str = "Hello,World!";
var result = str.slice(1, 4);

split()方法演示：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

07 JavaScript的拓展

传统的关系型数据库存储方式需要在客户端和服务端之间进行数据转换，这样就需要额外的时间和资源。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，具有简洁、易于阅读、编写和解析等优点，能够有效地减轻网络传输的负担，提高数据传输的效率。

而JavaScript是一种广泛使用的语言，能够方便地解析JSON格式的数据，因此JSON也成为了浏览器中常用的数据格式。随着现代Web应用的发展，JSON格式的应用已经越来越广泛，JavaScript也因此变得更加重要。

JavaScript的构成主要由下：
在这里插入图片描述

接下来的文章主要是讲BOM和DOM，敬请期待~

JavaScript（一）--一文初步了解JavaScript