1045 lines
50 KiB
Markdown
1045 lines
50 KiB
Markdown
---
|
||
title: JavaScript
|
||
description: JavaScript 入门及 ES6
|
||
keywords:
|
||
- JavaScript
|
||
- ES6
|
||
tags:
|
||
- FormalSciences/ComputerScience
|
||
- Webdevelopment/JavaScript
|
||
author: 7Wate
|
||
date: 2023-10-13
|
||
---
|
||
|
||
**网页的心跳，使静态的网页获得了动态的脉搏。**
|
||
|
||
## JavaScript
|
||
|
||
JavaScript 是一种动态的、解释的编程语言，广泛应用于 Web 开发中。JavaScript 通过 BOM（浏览器对象模型）和 DOM（文档对象模型）与浏览器进行交互。
|
||
|
||
BOM 提供了访问和操作浏览器窗口的能力，包括窗口大小、导航、定时器、对话框等。DOM 则是对网页内容的抽象，它将网页文档结构化为一个节点树，允许开发者查询和操作页面内容。
|
||
|
||
简单来说，JavaScript 是语言，DOM 是这个语言可以操作的对象之一（网页内容），BOM 也是这个语言可以操作的对象之一（浏览器窗口及其相关属性和方法）。
|
||
|
||
```mermaid
|
||
graph TB
|
||
A[JavaScript] -- Interacts with --> B[BOM]
|
||
A -- Interacts with --> C[DOM]
|
||
B -- Manages --> D[Browser Window]
|
||
C -- Manages --> E[Web Page Content]
|
||
```
|
||
|
||
这个图展示了 JavaScript、BOM、DOM 之间的关系。**其中，JavaScript 与 BOM 和 DOM 进行交互，BOM 管理浏览器窗口，DOM 管理网页内容。**
|
||
|
||
### 基础语法
|
||
|
||
JavaScript 的基础语法相对简单,主要包含变量、数据类型、运算符、语句与注释等。
|
||
|
||
#### 变量
|
||
|
||
JavaScript 通过 `var`、`let` 和 `const` 关键词来声明变量，它们之间存在明显的区别：
|
||
|
||
- **`var` 是函数作用域的变量**，也就是说，如果你在一个函数内部声明了一个 `var` 变量，那么它只能在这个函数内部被访问。
|
||
- **`let` 和 `const` 都是块级作用域的变量**，它们只能在声明它们的代码块或者更小的作用域内被访问。
|
||
|
||
`var` 存在变量提升的特性，即在声明之前使用变量不会报错，但是值为 `undefined`。而 `let` 和 `const` 不存在变量提升，它们具有所谓的暂时性死区特性。
|
||
|
||
```js
|
||
// var 声明的变量可以重复声明,会发生变量提升
|
||
var name = 'John';
|
||
var name = 'Peter';
|
||
|
||
// let 声明的变量不可以重复声明,有块级作用域
|
||
let age = 25;
|
||
let age = 30; // 报错
|
||
|
||
// const 声明的是常量,初始化后值不可修改
|
||
const pi = 3.14;
|
||
pi = 3; // 报错
|
||
```
|
||
|
||
#### 数据类型
|
||
|
||
JavaScript 中有七种数据类型:
|
||
|
||
| 数据类型 | 说明 | 示例 |
|
||
| :-------- | :---------------------------- | :---------------- |
|
||
| Number | 包括整数和浮点数 | 123, 3.14 |
|
||
| String | 字符串,使用单引号或双引号包裹 | 'hello', "world" |
|
||
| Boolean | true 和 false | true, false |
|
||
| Null | 表示无值 | null |
|
||
| Undefined | 表示值未定义 | undefined |
|
||
| Symbol | 表示独一无二的值 | Symbol('id') |
|
||
| BigInt | 可表示任意大的整数 | 9007199254740991n |
|
||
|
||
JavaScript 中还有一种复杂数据类型 Object，表示由多个键值对组成的对象。可以使用 `typeof` 来判断一个变量的类型：
|
||
|
||
```js
|
||
let n = 123;
|
||
let s = 'Hello';
|
||
let b = true;
|
||
|
||
typeof n; // 'number'
|
||
typeof s; // 'string'
|
||
typeof b; // 'boolean'
|
||
```
|
||
|
||
#### 运算符
|
||
|
||
JavaScript 支持多种运算符，包括：
|
||
|
||
| 运算符类型 | 运算符 | 说明 | 示例 |
|
||
| :--------- | :---------------------- | :--------------- | :---------------------- |
|
||
| 算术运算符 | + - * / % ++ -- | 用于执行算术运算 | x + y |
|
||
| 赋值运算符 | = += -= *= /= %= **= | 用于给变量赋值 | x += 1 |
|
||
| 比较运算符 | == === != !== > < >= <= | 用于比较两个值 | x == y |
|
||
| 逻辑运算符 | && \|\| ! | 用于组合条件 | x > 0 && y < 0 |
|
||
| 条件运算符 | ? : | 根据条件选择值 | condition ? val1 : val2 |
|
||
| 位运算符 | & \| ^ ~ << >> >>> | 用于位运算 | x & y |
|
||
|
||
```js
|
||
let a = 1 + 2; // 3
|
||
let b = 'Hello' + ' ' + 'World!'; // 'Hello World!'
|
||
|
||
console.log(a == b); // false
|
||
console.log(a != b); // true
|
||
|
||
console.log(a > 0 && b.includes('Hello')); // true
|
||
```
|
||
|
||
#### 语句
|
||
|
||
JavaScript 提供了多种控制结构，包括条件语句、循环语句、分支语句和跳转语句。
|
||
|
||
##### 条件语句
|
||
|
||
使用 `if/else` 语句进行条件判断：
|
||
|
||
```js
|
||
if (condition) {
|
||
// 条件为真时执行
|
||
} else {
|
||
// 条件为假时执行
|
||
}
|
||
```
|
||
|
||
`if/else` 语句可以进行多重条件判断：
|
||
|
||
```js
|
||
if (n > 0) {
|
||
// n 大于 0
|
||
} else if (n < 0) {
|
||
// n 小于 0
|
||
} else {
|
||
// n 等于 0
|
||
}
|
||
```
|
||
|
||
##### 循环语句
|
||
|
||
使用 `for` 循环和 `while` 循环进行迭代操作：
|
||
|
||
```js
|
||
// for 循环
|
||
for (let i = 0; i < 5; i++) {
|
||
console.log(i);
|
||
}
|
||
|
||
// while 循环
|
||
let j = 0;
|
||
while (j < 5) {
|
||
console.log(j);
|
||
j++;
|
||
}
|
||
```
|
||
|
||
##### 分支语句
|
||
|
||
使用 `switch` 语句进行多分支判断：
|
||
|
||
```js
|
||
switch(fruit) {
|
||
case 'apple':
|
||
console.log('苹果');
|
||
break;
|
||
case 'banana':
|
||
console.log('香蕉');
|
||
break;
|
||
default:
|
||
console.log('其他水果');
|
||
}
|
||
```
|
||
|
||
##### 跳转语句
|
||
|
||
`break` 用于退出循环，`continue` 用于跳过当前循环：
|
||
|
||
```js
|
||
for (let i = 0; i < 10; i++) {
|
||
if (i % 2 === 0) {
|
||
continue; // 跳过偶数
|
||
}
|
||
console.log(i);
|
||
|
||
if (i > 5) {
|
||
break; // 当 i 大于 5 时退出循环
|
||
}
|
||
}
|
||
```
|
||
|
||
另外，JavaScript 支持使用注释来增加代码的可读性：
|
||
|
||
```js
|
||
// 这是单行注释
|
||
|
||
/*
|
||
这是多行注释，可以注释一段代码
|
||
*/
|
||
```
|
||
|
||
#### 函数
|
||
|
||
函数是 JavaScript 中组织代码的基本单元，可以封装一段可以重复执行的代码块：
|
||
|
||
```js
|
||
// 函数声明
|
||
function add(x, y) {
|
||
return x + y;
|
||
}
|
||
|
||
// 函数表达式
|
||
const subtract = function(x, y) {
|
||
return x - y;
|
||
};
|
||
|
||
// 箭头函数（ES6 新增）
|
||
const multiply = (x, y) => {
|
||
return x * y;
|
||
};
|
||
```
|
||
|
||
函数可以有参数，也可以有返回值。在 JavaScript 中，函数也是一种对象，可以被赋值给变量，也可以作为其他函数的参数或返回值。
|
||
|
||
#### 数组
|
||
|
||
数组是一种特殊的对象，用于存储一系列的值：
|
||
|
||
```js
|
||
let nums = [1, 2, 3];
|
||
let fruits = ['Apple', 'Banana', 'Orange'];
|
||
|
||
nums.push(4); // 添加元素
|
||
nums.pop(); // 删除最后一个元素
|
||
nums.includes(2); // 检查是否包含某个元素
|
||
```
|
||
|
||
在 JavaScript 中，数组是动态的，可以随时添加或删除元素。数组的长度可以通过其 `length` 属性获取。
|
||
|
||
#### 对象
|
||
|
||
对象是 JavaScript 的核心概念，它是由一组键值对构成的数据集合：
|
||
|
||
```js
|
||
let person = {
|
||
name: 'John',
|
||
age: 20,
|
||
sayHi: function() {
|
||
console.log('Hi!');
|
||
}
|
||
};
|
||
|
||
console.log(person.name); // 访问属性
|
||
person.sayHi(); // 调用方法
|
||
```
|
||
|
||
**在 JavaScript 中，几乎所有的东西都是对象。**函数、数组、日期和正则表达式等都是特殊的对象。对象的属性和方法可以被动态创建和删除，非常灵活。
|
||
|
||
#### 其他特性
|
||
|
||
JavaScript 还有许多其他高级特性，例如原型和继承、闭包、异步处理和模块等。
|
||
|
||
##### 原型和继承
|
||
|
||
JavaScript 是基于原型的语言，每个对象都有一个指向它的原型（prototype）的链接。当试图访问一个对象的属性时，JavaScript 会首先在对象本身的属性中搜索，如果找不到，就会在它的原型对象中搜索。
|
||
|
||
```js
|
||
function Person(name) {
|
||
this.name = name;
|
||
}
|
||
|
||
Person.prototype.sayName = function() {
|
||
console.log(this.name);
|
||
};
|
||
|
||
let person1 = new Person('John');
|
||
person1.sayName(); // 'John'
|
||
```
|
||
|
||
JavaScript 的继承机制是基于原型的。我们可以通过设置一个类型的原型为另一个类型的实例，来实现继承。
|
||
|
||
```js
|
||
function Student(name, grade) {
|
||
Person.call(this, name); // 继承属性
|
||
this.grade = grade;
|
||
}
|
||
|
||
Student.prototype = Object.create(Person.prototype); // 继承方法
|
||
Student.prototype.constructor = Student;
|
||
|
||
let student1 = new Student('Tom', 5);
|
||
console.log(student1.name); // Tom
|
||
console.log(student1.grade); // 5
|
||
student1.sayName(); // Tom
|
||
```
|
||
|
||
##### 闭包
|
||
|
||
闭包（closure）是 JavaScript 中一个重要的概念。在 JavaScript 中，函数可以形成闭包。闭包是指有权访问另一个函数作用域中的变量的函数。
|
||
|
||
```js
|
||
function createCounter() {
|
||
let count = 0;
|
||
return function() {
|
||
return ++count;
|
||
};
|
||
}
|
||
|
||
let counter = createCounter();
|
||
console.log(counter()); // 1
|
||
console.log(counter()); // 2
|
||
```
|
||
|
||
闭包的一个常见应用是使函数有私有变量。在上面的例子中，变量 `count` 就像 `createCounter` 函数的私有变量，外部无法访问，只能通过闭包来操作。
|
||
|
||
##### 异步处理
|
||
|
||
JavaScript 是单线程的，但是它可以通过事件和回调函数来处理异步操作。例如，我们可以使用 `setTimeout` 函数来延迟执行一段代码：
|
||
|
||
```js
|
||
console.log('Hello');
|
||
setTimeout(function() {
|
||
console.log('World');
|
||
}, 1000);
|
||
console.log('!');
|
||
```
|
||
|
||
这段代码会首先输出 'Hello' 和 '!'，然后等待一秒钟后，再输出 'World'。虽然 `setTimeout` 函数在 '!' 之前调用，但是它不会阻塞代码的执行。
|
||
|
||
在 ES6 中，JavaScript 引入了 Promise 和 async/await，使得异步编程更加方便和强大。
|
||
|
||
##### 模块
|
||
|
||
在现代的 JavaScript 开发中，我们通常会把代码分成多个模块（module），每个模块负责一部分功能。模块可以导入（import）其他模块，也可以导出（export）自己的接口给其他模块使用。
|
||
|
||
```js
|
||
// math.js
|
||
export function add(x, y) {
|
||
return x + y;
|
||
}
|
||
|
||
// main.js
|
||
import { add } from './math.js';
|
||
console.log(add(1, 2)); // 3
|
||
```
|
||
|
||
模块可以使我们的代码更加结构化和可维护。
|
||
|
||
### BOM 模型
|
||
|
||
**浏览器对象模型（Browser Object Model，BOM）是用于与浏览器交互的模型。**它提供了一种方式，使开发者能够通过 JavaScript 访问和操作浏览器的窗口。
|
||
|
||
BOM 主要由一系列的对象组成，这些对象提供了许多方法和属性，使得开发者能够处理浏览器窗口和文档的加载、大小、位置等各种情况，以及进行网络通信等操作。
|
||
|
||
BOM 的核心对象是 `window`，它代表了浏览器的窗口，也是 JavaScript 的全局对象。除此之外，BOM 还包括了其他一些对象，例如：
|
||
|
||
- `location` 对象：提供了当前窗口中加载的文档的 URL 信息，以及用于导航的方法。
|
||
- `navigator` 对象：提供了当前浏览器的信息，比如版本、名称等。
|
||
- `history` 对象：提供了浏览器历史的信息，以及用于导航的方法。
|
||
- `document` 对象：提供了当前加载在窗口中的 HTML 文档的访问和操作的方式。
|
||
|
||
```mermaid
|
||
classDiagram
|
||
Window --|> Document: "document"
|
||
Window --|> Navigator: "navigator"
|
||
Window --|> History: "history"
|
||
Window --|> Location: "location"
|
||
Window --|> Screen: "screen"
|
||
Window --|> Frames: "frames"
|
||
Window --|> Performance: "performance"
|
||
Window --|> localStorage: "localStorage"
|
||
Window --|> sessionStorage: "sessionStorage"
|
||
Window --|> console: "console"
|
||
class Window {
|
||
+open()
|
||
+close()
|
||
+getComputedStyle()
|
||
+setTimeout()
|
||
+setInterval()
|
||
+clearTimeout()
|
||
+clearInterval()
|
||
+fetch()
|
||
}
|
||
class Document {
|
||
+getElementById(id)
|
||
+getElementsByClassName(name)
|
||
+getElementsByTagName(name)
|
||
+querySelector(selector)
|
||
+querySelectorAll(selector)
|
||
+createElement(tagName)
|
||
+createTextNode(data)
|
||
}
|
||
class Navigator {
|
||
+appName
|
||
+appVersion
|
||
+userAgent
|
||
+platform
|
||
+language
|
||
+onLine
|
||
+geolocation
|
||
+cookieEnabled
|
||
+javaEnabled()
|
||
}
|
||
class History {
|
||
+back()
|
||
+forward()
|
||
+go(n)
|
||
+pushState()
|
||
+replaceState()
|
||
}
|
||
class Location {
|
||
+href
|
||
+protocol
|
||
+host
|
||
+hostname
|
||
+port
|
||
+pathname
|
||
+search
|
||
+hash
|
||
+reload()
|
||
+assign(URL)
|
||
+replace(URL)
|
||
}
|
||
class Screen {
|
||
+availWidth
|
||
+availHeight
|
||
+width
|
||
+height
|
||
+colorDepth
|
||
+pixelDepth
|
||
}
|
||
class Frames
|
||
class Performance
|
||
class localStorage {
|
||
+setItem()
|
||
+getItem()
|
||
+removeItem()
|
||
+clear()
|
||
}
|
||
class sessionStorage {
|
||
+setItem()
|
||
+getItem()
|
||
+removeItem()
|
||
+clear()
|
||
}
|
||
class console {
|
||
+log()
|
||
+info()
|
||
+warn()
|
||
+error()
|
||
}
|
||
```
|
||
|
||
需要注意的是，**BOM 并没有一个标准的定义，不同的浏览器可能实现了不同的 BOM。**但是，现代的浏览器已经在很大程度上实现了 BOM 的兼容性。
|
||
|
||
#### 窗口对象
|
||
|
||
窗口对象（Window Object）是 BOM 的核心对象，它代表了浏览器的窗口。所有的全局变量，函数都是它的方法和属性。例如，我们可以获取窗口的尺寸：
|
||
|
||
```javascript
|
||
let width = window.innerWidth;
|
||
let height = window.innerHeight;
|
||
```
|
||
|
||
我们也可以使用 `setTimeout` 和 `setInterval` 方法来执行定时操作：
|
||
|
||
```javascript
|
||
// 打印 "Hello, world!" 然后 2 秒后关闭窗口
|
||
window.setTimeout(function() {
|
||
console.log("Hello, world!");
|
||
window.close();
|
||
}, 2000);
|
||
```
|
||
|
||
以下是 `window` 对象的一些常用属性和方法的表格形式：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | ------------------------ | ------------------------------------------------------ |
|
||
| 属性 | `window.innerWidth` | 浏览器窗口的视口（viewport）的宽度（包括滚动条） |
|
||
| 属性 | `window.innerHeight` | 浏览器窗口的视口（viewport）的高度（包括滚动条） |
|
||
| 属性 | `window.outerWidth` | 浏览器窗口的外部宽度 |
|
||
| 属性 | `window.outerHeight` | 浏览器窗口的外部高度 |
|
||
| 属性 | `window.location` | 当前窗口的 `Location` 对象，包含了当前页面的 URL 信息 |
|
||
| 属性 | `window.document` | 当前窗口加载的 `Document` 对象，即 DOM（文档对象模型） |
|
||
| 属性 | `window.history` | 当前窗口的 `History` 对象，提供了浏览历史的访问和操作 |
|
||
| 属性 | `window.screen` | 当前屏幕的 `Screen` 对象，提供了屏幕的信息 |
|
||
| 方法 | `window.alert()` | 显示一个警告对话框 |
|
||
| 方法 | `window.prompt()` | 显示一个提示对话框，并请求用户输入 |
|
||
| 方法 | `window.confirm()` | 显示一个确认对话框，并请求用户确认 |
|
||
| 方法 | `window.open()` | 打开一个新的浏览器窗口或标签页 |
|
||
| 方法 | `window.close()` | 关闭当前的浏览器窗口或标签页 |
|
||
| 方法 | `window.setTimeout()` | 设置一个定时器，在指定的毫秒数后执行一个函数或代码 |
|
||
| 方法 | `window.setInterval()` | 设置一个定时器，每隔指定的毫秒数重复执行一个函数或代码 |
|
||
| 方法 | `window.clearTimeout()` | 清除由 `setTimeout` 设置的定时器 |
|
||
| 方法 | `window.clearInterval()` | 清除由 `setInterval` 设置的定时器 |
|
||
|
||
#### 文档对象
|
||
|
||
文档对象（Document Object）是 HTML 文档的根节点，用于访问和操作网页内容。`document` 对象允许你访问和操作页面的内容，包括元素节点、属性节点和文本节点。
|
||
|
||
以下是 `document` 对象的一些常见属性和方法：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | --------------------------------------- | ---------------------------------------------------- |
|
||
| 属性 | `document.documentElement` | 返回文档的根元素（在 HTML 中，通常是 `<html>` 元素） |
|
||
| 属性 | `document.body` | 返回文档的 `<body>` 元素 |
|
||
| 属性 | `document.head` | 返回文档的 `<head>` 元素 |
|
||
| 属性 | `document.title` | 获取或设置文档的标题 |
|
||
| 方法 | `document.getElementById(id)` | 返回具有指定 ID 的元素 |
|
||
| 方法 | `document.getElementsByClassName(name)` | 返回所有具有指定类名的元素的集合 |
|
||
| 方法 | `document.getElementsByTagName(name)` | 返回所有具有指定标签名的元素的集合 |
|
||
| 方法 | `document.querySelector(selector)` | 返回匹配指定 CSS 选择器的第一个元素 |
|
||
| 方法 | `document.querySelectorAll(selector)` | 返回匹配指定 CSS 选择器的所有元素的集合 |
|
||
| 方法 | `document.createElement(tagName)` | 创建一个新的元素节点 |
|
||
| 方法 | `document.createTextNode(data)` | 创建一个新的文本节点 |
|
||
|
||
这些只是 `document` 对象的基本属性和方法。实际上，DOM 提供了非常多的 API 来查询和操作文档，包括添加、删除和修改元素，添加事件监听器，修改 CSS 样式等等。
|
||
|
||
例如，我们可以使用 `document.getElementById()` 来获取具有特定 ID 的元素，或者使用 `document.createElement()` 来创建新的元素：
|
||
|
||
```javascript
|
||
// 获取 ID 为 "myElement" 的元素
|
||
let myElement = document.getElementById("myElement");
|
||
|
||
// 创建一个新的 <p> 元素
|
||
let newElement = document.createElement("p");
|
||
newElement.textContent = "This is a new paragraph.";
|
||
document.body.appendChild(newElement);
|
||
```
|
||
|
||
#### 导航对象
|
||
|
||
导航对象（Navigator Object）提供了关于浏览器的信息。下面是一些常见的 `navigator` 对象的属性：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | ---------------------- | ------------------------------------------------------------ |
|
||
| 属性 | `navigator.appName` | 返回浏览器的名称 |
|
||
| 属性 | `navigator.appVersion` | 返回浏览器的版本信息 |
|
||
| 属性 | `navigator.userAgent` | 返回用户代理头的字符串表示（包含浏览器名称、版本、操作系统等信息） |
|
||
| 属性 | `navigator.platform` | 返回运行浏览器的操作系统平台 |
|
||
| 属性 | `navigator.language` | 返回浏览器的默认语言 |
|
||
| 属性 | `navigator.onLine` | 返回浏览器的在线状态，如果浏览器在线则返回 `true`，否则返回 `false` |
|
||
|
||
另外，`navigator` 对象还包含一些用于特定功能的方法和对象，例如：
|
||
|
||
- `navigator.geolocation`：用于获取用户的地理位置信息。
|
||
- `navigator.cookieEnabled`：返回一个布尔值，表示是否启用了 cookie。
|
||
- `navigator.javaEnabled()`：返回一个布尔值，表示是否启用了 Java。
|
||
|
||
请注意，`navigator` 对象的一些属性和方法可能会因浏览器的不同而有所差异。而且，由于隐私和安全的考虑，某些信息可能需要用户的许可才能访问。
|
||
|
||
```javascript
|
||
console.log(navigator.userAgent);
|
||
```
|
||
|
||
#### 历史对象
|
||
|
||
历史对象（History Object）提供了浏览器历史记录的操作方法。然而，由于隐私原因，您不能获取到用户的浏览历史具体细节，但可以用 `history` 对象来操作当前窗口的浏览历史。
|
||
|
||
以下是 `history` 对象的一些常见方法：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | ------------------------ | ------------------------------------------------------------ |
|
||
| 方法 | `history.back()` | 和点击浏览器后退按钮一样，加载历史列表中的前一个 URL |
|
||
| 方法 | `history.forward()` | 和点击浏览器前进按钮一样，加载历史列表中的下一个 URL |
|
||
| 方法 | `history.go(n)` | 加载历史列表中的某个具体页面，通过参数 `n` 指定。`n` 为正数时前进，`n` 为负数时后退，`n` 为 0 时刷新当前页面 |
|
||
| 方法 | `history.pushState()` | 在历史记录中添加一个状态，但不触发页面刷新 |
|
||
| 方法 | `history.replaceState()` | 在历史记录中替换当前状态，但不触发页面刷新 |
|
||
|
||
注意，`pushState()` 和 `replaceState()` 方法可以改变 URL 并添加历史记录，但并不会重新加载页面。这对于创建 AJAX 驱动的动态页面非常有用。
|
||
|
||
还有一个 `history.length` 属性，它返回当前窗口历史堆栈中的 URL 数量。由于安全和隐私原因，您无法访问堆栈中的实际 URL。
|
||
|
||
例如，我们可以使用 `history.back()` 和 `history.forward()` 方法来模拟用户点击浏览器的后退和前进按钮：
|
||
|
||
```javascript
|
||
// 后退到上一个页面
|
||
history.back();
|
||
|
||
// 前进到下一个页面
|
||
history.forward();
|
||
```
|
||
|
||
#### 位置对象
|
||
|
||
位置对象（Location Object）提供了当前窗口或标签的 URL 信息，以及一些方法来操作 URL。
|
||
|
||
以下是 `location` 对象的一些常见属性和方法：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | ----------------------- | ---------------------------------------------- |
|
||
| 属性 | `location.href` | 获取或设置整个 URL |
|
||
| 属性 | `location.protocol` | 返回 URL 的协议部分（如："http:" 或 "https:"） |
|
||
| 属性 | `location.host` | 返回 URL 的主机名和端口（如果有的话） |
|
||
| 属性 | `location.hostname` | 返回 URL 的主机名 |
|
||
| 属性 | `location.port` | 返回 URL 的端口号 |
|
||
| 属性 | `location.pathname` | 返回 URL 的路径名 |
|
||
| 属性 | `location.search` | 返回 URL 的查询字符串（包括 "?"） |
|
||
| 属性 | `location.hash` | 返回 URL 的片段标识符（包括 "#"） |
|
||
| 方法 | `location.reload()` | 重新加载当前页面 |
|
||
| 方法 | `location.assign(URL)` | 加载新的页面 |
|
||
| 方法 | `location.replace(URL)` | 替换当前页面 |
|
||
|
||
这些属性和方法使我们可以从 JavaScript 中读取和操作 URL 的各个部分。例如，我们可以使用 `location.href` 来获取当前页面的 URL，或者使用 `location.assign()` 来加载一个新的页面。还要注意的是，使用 `location.replace()` 方法不会在历史记录中留下记录，所以用户不能使用 " 后退 " 按钮返回。
|
||
|
||
例如，我们可以使用 `location.href` 来获取或设置当前页面的 URL，或者使用 `location.reload()` 来重载当前页面：
|
||
|
||
```javascript
|
||
// 打印当前页面的 URL
|
||
console.log(location.href);
|
||
|
||
// 重载当前页面
|
||
location.reload();
|
||
```
|
||
|
||
#### 屏幕对象
|
||
|
||
屏幕对象（Screen Object）提供了关于用户的屏幕信息。这些信息包括屏幕的宽度、高度、颜色深度和像素深度等。以下是 `screen` 对象的一些常见属性：
|
||
|
||
| 类型 | 名称 | 描述 |
|
||
| ---- | -------------------- | ------------------------------------------------------------ |
|
||
| 属性 | `screen.availWidth` | 返回屏幕的可用宽度，以像素为单位（减去界面特性，如 Windows 任务栏） |
|
||
| 属性 | `screen.availHeight` | 返回屏幕的可用高度，以像素为单位（减去界面特性，如 Windows 任务栏） |
|
||
| 属性 | `screen.width` | 返回屏幕的总宽度，以像素为单位 |
|
||
| 属性 | `screen.height` | 返回屏幕的总高度，以像素为单位 |
|
||
| 属性 | `screen.colorDepth` | 返回目标设备或缓冲器上的颜色深度，以位为单位 |
|
||
| 属性 | `screen.pixelDepth` | 返回屏幕的像素深度 |
|
||
|
||
这些属性可以帮助你了解用户的屏幕信息，并据此调整网页的布局或设计。例如，你可以根据 `screen.width` 和 `screen.height` 来调整网页的大小，以最佳地适应用户的屏幕。
|
||
|
||
注意，`screen` 对象的属性是只读的，你不能修改它们的值。我们可以使用 `screen.width` 和 `screen.height` 来获取屏幕的宽度和高度：
|
||
|
||
```javascript
|
||
console.log("Screen width: " + screen.width);
|
||
console.log("Screen height: " + screen.height);
|
||
```
|
||
|
||
### DOM 模型
|
||
|
||
**文档对象模型（Document Object Model，DOM）是一种编程接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。**DOM 将文档解析为一个由节点和对象（包括属性和方法）构成的结构集合，这样就可以使用脚本语言（如 JavaScript）来操作这些节点和对象。
|
||
|
||
在 Web 中，最常见的文档类型是 HTML 或 XML 文档。对于这种类型的文档，DOM 表示它们为一个树状结构，其中每个节点都是一个对象，代表了文档的一部分。例如，HTML 文档中的每个元素、属性和文本都会被表示为一个 DOM 节点。
|
||
|
||
一个简单的 HTML DOM 结构可能会像下面这样：
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>My Page</title>
|
||
</head>
|
||
<body>
|
||
<h1>Welcome to My Page</h1>
|
||
<p>Content here</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
在这个 HTML 文档中，`<html>`、`<head>`、`<title>`、`<body>`、`<h1>` 和 `<p>` 元素都是 DOM 节点。`My Page` 和 `Welcome to My Page` 以及 `Content here` 这些文本也是 DOM 节点，它们是元素节点的子节点。
|
||
|
||
```mermaid
|
||
classDiagram
|
||
Document --|> HTMLElement: "elements"
|
||
HTMLElement --|> HTMLDivElement
|
||
HTMLElement --|> HTMLSpanElement
|
||
HTMLElement --|> HTMLAnchorElement
|
||
HTMLElement --|> HTMLImageElement
|
||
HTMLElement --|> HTMLParagraphElement
|
||
HTMLElement --|> HTMLInputElement
|
||
HTMLElement --|> HTMLButtonElement
|
||
HTMLElement --|> HTMLCanvasElement
|
||
HTMLElement --|> HTMLTableElement
|
||
class Document {
|
||
+getElementById(id)
|
||
+getElementsByClassName(name)
|
||
+getElementsByTagName(name)
|
||
+querySelector(selector)
|
||
+querySelectorAll(selector)
|
||
+createElement(tagName)
|
||
+createTextNode(data)
|
||
}
|
||
class HTMLElement {
|
||
+innerHTML
|
||
+outerHTML
|
||
+textContent
|
||
+id
|
||
+className
|
||
+setAttribute(name, value)
|
||
+getAttribute(name)
|
||
+removeAttribute(name)
|
||
+addEventListener(type, listener)
|
||
+removeEventListener(type, listener)
|
||
}
|
||
class HTMLDivElement
|
||
class HTMLSpanElement
|
||
class HTMLAnchorElement {
|
||
+href
|
||
}
|
||
class HTMLImageElement {
|
||
+src
|
||
+alt
|
||
}
|
||
class HTMLParagraphElement
|
||
class HTMLInputElement {
|
||
+value
|
||
+checked
|
||
}
|
||
class HTMLButtonElement {
|
||
+disabled
|
||
}
|
||
class HTMLCanvasElement
|
||
class HTMLTableElement
|
||
```
|
||
|
||
开发者可以使用 DOM API 来获取、创建、修改或删除这些节点，从而实现对网页内容和结构的动态控制。这是现代网页交互性的基础。
|
||
|
||
#### 获取元素
|
||
|
||
| 方法 | 描述 | 示例 |
|
||
| :-------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||
| `document.getElementById(id)` | 通过元素 ID 获取元素。此方法返回一个对象，表示带有指定 ID 的元素。 | `document.getElementById('myId')` |
|
||
| `document.getElementsByClassName(name)` | 通过类名获取元素。此方法返回一个 HTMLCollection 对象，包含了文档中所有具有指定类名的元素。 | `document.getElementsByClassName('myClass')` |
|
||
| `document.getElementsByTagName(name)` | 通过标签名获取元素。此方法返回一个 HTMLCollection 对象，包含了文档中所有具有指定标签名的元素。 | `document.getElementsByTagName('div')` |
|
||
| `document.querySelector(selector)` | 返回文档中匹配指定 CSS 选择器的第一个元素。 | `document.querySelector('.myClass')` |
|
||
| `document.querySelectorAll(selector)` | 返回文档中匹配指定 CSS 选择器的所有元素。此方法返回一个 NodeList 对象。 | `document.querySelectorAll('.myClass')` |
|
||
| `document.getElementsByName(name)` | 通过元素的 Name 属性获取元素。此方法返回一个 NodeList 对象，包含了文档中所有具有指定 Name 属性的元素。 | `document.getElementsByName('myName')` |
|
||
| `Element.querySelector(selector)` | 返回元素内部匹配指定 CSS 选择器的第一个元素。 | `document.getElementById('myId').querySelector('.myClass')` |
|
||
| `Element.querySelectorAll(selector)` | 返回元素内部匹配指定 CSS 选择器的所有元素。此方法返回一个 NodeList 对象。 | `document.getElementById('myId').querySelectorAll('.myClass')` |
|
||
|
||
请注意，`Element.querySelector` 和 `Element.querySelectorAll` 与 `document.querySelector` 和 `document.querySelectorAll` 类似，但它们只在指定元素的后代中查找，而不是在整个文档中查找。
|
||
|
||
例如:
|
||
|
||
```js
|
||
// 获取 id 为 title 的元素
|
||
const title = document.getElementById('title');
|
||
|
||
// 获取所有 <p> 元素
|
||
const ps = document.getElementsByTagName('p');
|
||
|
||
// 获取所有 class 为 content 的元素
|
||
const contents = document.getElementsByClassName('content');
|
||
|
||
// 获取第一个 class 为 content 的元素
|
||
const content = document.querySelector('.content');
|
||
```
|
||
|
||
#### 改变元素
|
||
|
||
| 方法 | 描述 | 示例 |
|
||
| ----------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------- |
|
||
| `element.setAttribute(name, value)` | 设置元素的属性。此方法会设置或更新元素的属性。 | `element.setAttribute('class', 'myClass')` |
|
||
| `element.getAttribute(name)` | 获取元素的属性值。此方法返回指定属性的值，如果该属性不存在，则返回 `null`。 | `element.getAttribute('class')` |
|
||
| `element.removeAttribute(name)` | 删除元素的属性。此方法会完全移除元素的指定属性。 | `element.removeAttribute('class')` |
|
||
| `element.classList.add(class1, class2, ...)` | 向元素添加一个或多个类。此方法会向元素的类列表添加一个或多个类名。如果指定的类名已存在，则不会添加。 | `element.classList.add('myClass')` |
|
||
| `element.classList.remove(class1, class2, ...)` | 从元素中删除一个或多个类。此方法会从元素的类列表中删除一个或多个类名。 | `element.classList.remove('myClass')` |
|
||
| `element.classList.toggle(class, true/false)` | 切换元素的类。如果类名存在，则删除它；如果类名不存在，则添加它。 | `element.classList.toggle('myClass')` |
|
||
| `element.style.cssText` | 设置或返回元素的样式属性。此属性返回一个 CSSStyleDeclaration 对象，代表元素的 `style` 属性。 | `element.style.cssText = 'color: red; background: blue;'` |
|
||
| `element.style.property` | 设置或返回元素的指定样式属性。此属性会设置或返回元素的指定样式属性。 | `element.style.color = 'red'` |
|
||
| `element.innerHTML` | 设置或返回元素的 HTML 内容。此属性会设置或返回元素的内部 HTML。 | `element.innerHTML = '<b>Hello</b>'` |
|
||
| `element.outerHTML` | 设置或返回元素的外部 HTML。此属性会设置或返回元素的开头和结尾标签，包括元素的所有后代。 | `console.log(element.outerHTML)` |
|
||
| `element.textContent` | 设置或返回元素的文本内容。此属性会设置或返回元素的所有文本内容，包括它的所有后代。 | `element.textContent = 'Hello'` |
|
||
|
||
请注意，每个属性和方法可能有其适用性和局限性。在使用它们的时候，需要考虑到你的需求和它们的特性。
|
||
|
||
```js
|
||
// 改变内容
|
||
title.innerHTML = 'New title';
|
||
|
||
// 改变样式
|
||
title.style.color = 'red';
|
||
|
||
// 显示/隐藏
|
||
content.style.display = 'none';
|
||
|
||
// 添加类
|
||
content.classList.add('hidden');
|
||
|
||
// 删除类
|
||
content.classList.remove('hidden');
|
||
```
|
||
|
||
#### 创建元素
|
||
|
||
| 方法 | 描述 | 示例 |
|
||
| -------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||
| `document.createElement(tagName)` | 创建一个新元素。此方法创建一个具有指定标签名的新元素。 | `let div = document.createElement('div')` |
|
||
| `document.createTextNode(data)` | 创建一个新的文本节点。此方法创建一个包含指定文本的新 Text 节点。 | `let text = document.createTextNode('Hello')` |
|
||
| `Node.appendChild(child)` | 向元素添加一个新的子节点。此方法将指定的节点添加到指定节点的子节点列表的末尾。 | `div.appendChild(text)` |
|
||
| `Node.insertBefore(newNode, referenceNode)` | 在参考节点之前插入一个新节点。此方法将指定的节点插入到参考节点之前。如果参考节点为 `null`，则新节点将被添加到子节点的末尾。 | `document.body.insertBefore(div, document.body.firstChild)` |
|
||
| `Element.insertAdjacentHTML(position, text)` | 解析指定的文本作为 HTML 或 XML，并将生成的节点插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。 | `div.insertAdjacentHTML('beforeend', '<span>Hello</span>')` |
|
||
| `Element.insertAdjacentText(position, text)` | 将指定的文本插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。 | `div.insertAdjacentText('beforeend', 'Hello')` |
|
||
| `Element.insertAdjacentElement(position, element)` | 将指定的元素插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。 | `let span = document.createElement('span'); div.insertAdjacentElement('beforeend', span)` |
|
||
| `Node.cloneNode(deep)` | 创建指定节点的副本。此方法创建一个新的节点，这个节点是调用此方法的节点的副本。如果 deep 参数为 true，则复制包括整个子 DOM 树，否则只复制节点本身。 | `let divClone = div.cloneNode(true)` |
|
||
| `Node.replaceChild(newChild, oldChild)` | 替换一个子节点。此方法将 oldChild 替换为 newChild。 | `div.replaceChild(newSpan, oldSpan)` |
|
||
|
||
这些方法为您提供了创建和操纵 DOM 元素的强大工具。在实际开发中，您可能会经常使用它们来动态地更新页面内容。
|
||
|
||
```js
|
||
// 创建新元素
|
||
const div = document.createElement('div');
|
||
|
||
// 设置属性
|
||
div.innerHTML = 'Hello World';
|
||
div.style.color = 'blue';
|
||
|
||
// 插入到文档中
|
||
document.body.appendChild(div);
|
||
```
|
||
|
||
#### 事件处理
|
||
|
||
| 方法 | 描述 | 示例 |
|
||
| ---------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------- |
|
||
| `element.addEventListener(event, function, useCapture)` | 为元素添加事件监听器。此方法在指定元素上添加一个事件处理程序。 | `element.addEventListener('click', myFunction)` |
|
||
| `element.removeEventListener(event, function, useCapture)` | 从元素中移除事件监听器。此方法从指定元素中移除事件处理程序。 | `element.removeEventListener('click', myFunction)` |
|
||
| `element.onclick` | 为元素设置 click 事件处理程序。此属性返回当前元素的 onclick 事件处理程序代码，或设置一个新的 onclick 事件处理程序代码。 | `element.onclick = myFunction` |
|
||
| `event.preventDefault()` | 取消事件的默认动作。此方法阻止事件的默认动作。例如，点击链接的默认动作是跳转到链接的 URL，当调用此方法后，点击链接不会跳转。 | `event.preventDefault()` |
|
||
| `event.stopPropagation()` | 阻止事件冒泡。此方法阻止事件向上冒泡到 DOM 树。 | `event.stopPropagation()` |
|
||
| `event.stopImmediatePropagation()` | 阻止剩余的事件处理程序被执行并阻止事件冒泡到 DOM 树。 | `event.stopImmediatePropagation()` |
|
||
| `event.target` | 返回触发事件的元素。此属性返回触发事件的元素。 | `let targetElement = event.target` |
|
||
| `event.type` | 返回事件的名称。此属性返回表示事件名称的字符串。 | `let eventType = event.type` |
|
||
| `event.clientX` and `event.clientY` | 返回鼠标事件发生时鼠标指针的位置。这两个属性返回鼠标指针相对于浏览器窗口的水平和垂直坐标。 | `let x = event.clientX; let y = event.clientY` |
|
||
|
||
这些都是最常用的事件处理方法和属性。实际上，还有更多的事件类型和与事件相关的方法和属性，它们可以用来处理键盘事件、触摸事件、拖放事件等等。请查阅相关文档以获取更多信息。
|
||
|
||
```js
|
||
// 点击事件
|
||
btn.addEventListener('click', () => {
|
||
// 点击时运行的代码
|
||
});
|
||
|
||
// 加载事件
|
||
window.addEventListener('load', () => {
|
||
// 页面加载完成后运行的代码
|
||
});
|
||
```
|
||
|
||
### 事件处理
|
||
|
||
JavaScript 可以对各种事件做出响应。
|
||
|
||
#### 鼠标事件
|
||
|
||
常见的鼠标事件:
|
||
|
||
| 事件类型 | 描述 | 示例 |
|
||
| ---------------------- | -------------------------------------------------------- | ----------------------------------------------------- |
|
||
| `click` | 鼠标点击一个元素时触发。 | `element.addEventListener('click', myFunction)` |
|
||
| `dblclick` | 鼠标双击一个元素时触发。 | `element.addEventListener('dblclick', myFunction)` |
|
||
| `mousedown` | 鼠标按钮被按下时触发。 | `element.addEventListener('mousedown', myFunction)` |
|
||
| `mouseup` | 鼠标按钮被松开时触发。 | `element.addEventListener('mouseup', myFunction)` |
|
||
| `mousemove` | 鼠标被移动时触发。 | `element.addEventListener('mousemove', myFunction)` |
|
||
| `mouseover` | 鼠标指针移动到元素上时触发。 | `element.addEventListener('mouseover', myFunction)` |
|
||
| `mouseout` | 鼠标指针移动出元素时触发。 | `element.addEventListener('mouseout', myFunction)` |
|
||
| `mouseenter` | 鼠标指针移动到元素上时触发，不冒泡。 | `element.addEventListener('mouseenter', myFunction)` |
|
||
| `mouseleave` | 鼠标指针移动出元素时触发，不冒泡。 | `element.addEventListener('mouseleave', myFunction)` |
|
||
| `contextmenu` | 当尝试在元素上打开上下文菜单时（通常通过右键点击）触发。 | `element.addEventListener('contextmenu', myFunction)` |
|
||
| `mousewheel` / `wheel` | 当鼠标滚轮被滚动时触发。 | `element.addEventListener('wheel', myFunction)` |
|
||
|
||
在这些事件处理程序中，你可以使用 `event` 对象来访问事件的相关信息，比如触发事件的元素 (`event.target`)，鼠标的位置 (`event.clientX` 和 `event.clientY`)，以及鼠标按钮的状态 (`event.button`) 等等。
|
||
|
||
例如:
|
||
|
||
```js
|
||
// 点击事件
|
||
btn.addEventListener('click', () => {
|
||
console.log('Button clicked');
|
||
})
|
||
|
||
// 移动事件
|
||
window.addEventListener('mousemove', (event) => {
|
||
console.log('鼠标坐标:' + event.clientX + ', ' + event.clientY);
|
||
})
|
||
```
|
||
|
||
#### 键盘事件
|
||
|
||
常见的键盘事件:
|
||
|
||
| 事件类型 | 描述 | 示例 |
|
||
| ---------- | -------------------------------- | ------------------------------------------------- |
|
||
| `keydown` | 当用户按下键盘按键时触发。 | `window.addEventListener('keydown', myFunction)` |
|
||
| `keyup` | 当用户释放键盘按键时触发。 | `window.addEventListener('keyup', myFunction)` |
|
||
| `keypress` | 当用户按下并释放键盘按键时触发。 | `window.addEventListener('keypress', myFunction)` |
|
||
|
||
在这些事件处理程序中，你可以使用 `event` 对象来访问事件的相关信息，例如：
|
||
|
||
| 属性 | 描述 | 示例 |
|
||
| ---------------- | ------------------------------------------------------------ | -------------------------------------- |
|
||
| `event.key` | 返回被按下的键的字符。 | `let key = event.key` |
|
||
| `event.code` | 返回被按下的物理键的代码。 | `let code = event.code` |
|
||
| `event.altKey` | 如果 Alt 键被按下时返回 `true`，否则返回 `false`。 | `let altKeyPressed = event.altKey` |
|
||
| `event.ctrlKey` | 如果 Ctrl 键被按下时返回 `true`，否则返回 `false`。 | `let ctrlKeyPressed = event.ctrlKey` |
|
||
| `event.shiftKey` | 如果 Shift 键被按下时返回 `true`，否则返回 `false`。 | `let shiftKeyPressed = event.shiftKey` |
|
||
| `event.metaKey` | 如果 Meta 键（在 Windows 键盘上通常是 Windows 键，在 Apple 键盘上通常是 Command 键）被按下时返回 `true`，否则返回 `false`。 | `let metaKeyPressed = event.metaKey` |
|
||
|
||
请注意，键盘事件通常在 `window` 对象上监听，而不是特定的元素上，因为键盘输入通常是全局的。例如:
|
||
|
||
```js
|
||
// 按下任意键时打印
|
||
document.addEventListener('keydown', (event) => {
|
||
console.log('Pressed key: ' + event.key);
|
||
});
|
||
```
|
||
|
||
#### 其他事件
|
||
|
||
还有一些其他常用的事件:
|
||
|
||
| 事件类型 | 描述 | 示例 |
|
||
| -------------- | ------------------------------------------------------------ | ----------------------------------------------------- |
|
||
| `load` | 当页面完全加载后（包括所有图像、脚本文件、CSS 文件等）触发。 | `window.addEventListener('load', myFunction)` |
|
||
| `unload` | 当页面即将被卸载（或关闭）时触发。 | `window.addEventListener('unload', myFunction)` |
|
||
| `beforeunload` | 当窗口即将卸载新的页面时触发。这个事件可以用来提示用户是否真的要离开当前页面（例如，如果有未保存的更改）。 | `window.addEventListener('beforeunload', myFunction)` |
|
||
| `resize` | 当浏览器窗口被调整大小时触发。 | `window.addEventListener('resize', myFunction)` |
|
||
| `scroll` | 当用户滚动指定的元素或页面时触发。 | `window.addEventListener('scroll', myFunction)` |
|
||
| `focus` | 当元素获得焦点时触发。 | `element.addEventListener('focus', myFunction)` |
|
||
| `blur` | 当元素失去焦点时触发。 | `element.addEventListener('blur', myFunction)` |
|
||
| `input` | 当 `<input>`、`<select>` 或 `<textarea>` 元素的值改变时触发。 | `element.addEventListener('input', myFunction)` |
|
||
| `change` | 当用户改变 `<input>`、`<select>` 或 `<textarea>` 元素的值并且失去焦点时触发。 | `element.addEventListener('change', myFunction)` |
|
||
| `submit` | 当表单提交时触发。 | `element.addEventListener('submit', myFunction)` |
|
||
| `touchstart` | 当用户触摸屏幕时触发。 | `element.addEventListener('touchstart', myFunction)` |
|
||
| `touchmove` | 当用户在屏幕上移动触摸点时触发。 | `element.addEventListener('touchmove', myFunction)` |
|
||
| `touchend` | 当用户停止触摸屏幕时触发。 | `element.addEventListener('touchend', myFunction)` |
|
||
|
||
这只是可能发生的事件类型的一部分。实际上，HTML DOM API 定义了很多不同的事件类型，可以用来处理各种各样的用户交互和页面生命周期事件。
|
||
|
||
### ES6+ 新特性
|
||
|
||
ES6 开始 JavaScript 引入了许多新特性,极大地丰富了语言本身。
|
||
|
||
#### Let 和 Const
|
||
|
||
- let 声明的变量有块级作用域，这意味着 let 声明的变量只在其声明的块或子块中可用，而在外部不可访问。这与 var 不同，var 声明的变量是函数作用域或全局作用域。
|
||
- const 声明的是不可修改的常量，一旦声明，其值就不能改变。这并不意味着它指向的对象不可改变，例如，const 声明的对象，我们仍然可以修改其属性。
|
||
|
||
#### 箭头函数
|
||
|
||
箭头函数提供了一种更简洁的函数定义方式，它有几个特点：
|
||
|
||
- 更简洁的语法
|
||
- 不绑定自己的 this，它会捕获其所在的上下文的 this 值作为自己的 this 值
|
||
- 没有 arguments 对象，如果你需要类似的功能，可以使用 rest 参数代替
|
||
- 不能作为构造函数，也就是说，不能使用 new 命令
|
||
|
||
```js
|
||
// 传统函数
|
||
function add(a, b) {
|
||
return a + b;
|
||
}
|
||
|
||
// 箭头函数
|
||
const add = (a, b) => a + b;
|
||
```
|
||
|
||
#### 模板字符串
|
||
|
||
模板字符串使用反引号 (``)，可以内嵌变量和表达式，也支持多行字符串。
|
||
|
||
```js
|
||
const name = 'John';
|
||
console.log(`Hello ${name}!`) // Hello John!
|
||
```
|
||
|
||
#### 对象解构
|
||
|
||
对象解构允许我们从对象中提取属性作为变量，这使得从对象中获取数据变得非常方便。解构也可以用于数组，可以让我们更快速地获取数组中的元素。
|
||
|
||
```js
|
||
const person = {
|
||
name: 'John',
|
||
age: 20
|
||
};
|
||
|
||
// 解构
|
||
const { name, age } = person;
|
||
```
|
||
|
||
#### 模块化
|
||
|
||
ES6 引入了模块化的概念，可以使用 import 和 export 实现模块的导入和导出。这个特性使得 JavaScript 代码更加模块化，便于组织和管理。
|
||
|
||
```js
|
||
// foo.js
|
||
export const name = 'John';
|
||
|
||
// main.js
|
||
import { name } from './foo.js';
|
||
```
|
||
|
||
等等众多特性,极大地推动了 JavaScript 的发展。
|
||
|
||
### 异步编程
|
||
|
||
JavaScript 的异步编程主要基于 Promise 和 async/await。
|
||
|
||
#### Promise
|
||
|
||
Promise 是 JavaScript 中处理异步操作的一种方式，是一种代表未来将要发生事件的对象。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 的状态一旦改变，就不会再变。
|
||
|
||
Promise 可以链式调用，这意味着我们可以在一个 Promise 完成后，返回一个新的 Promise，这使得我们可以以同步的方式编写异步代码。
|
||
|
||
```js
|
||
function fetchData() {
|
||
return new Promise((resolve, reject) => {
|
||
// 异步操作
|
||
setTimeout(() => {
|
||
const data = 'Hello World';
|
||
resolve(data);
|
||
}, 3000);
|
||
});
|
||
}
|
||
|
||
fetchData().then(data => {
|
||
// 成功时调用
|
||
console.log(data);
|
||
});
|
||
```
|
||
|
||
#### async/await
|
||
|
||
async/await 是基于 Promise 实现的，它是一种更人性化的处理异步的方式。它让异步代码看起来更像同步代码，大大提高了代码的可读性和可维护性。
|
||
|
||
```js
|
||
// 用 async 声明一个异步函数
|
||
async function fetchData() {
|
||
// 使用 await 获取 Promise 的结果
|
||
const data = await new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve('Hello World');
|
||
}, 3000);
|
||
});
|
||
|
||
return data;
|
||
}
|
||
|
||
// 调用异步函数
|
||
fetchData().then(data => {
|
||
console.log(data);
|
||
});
|
||
```
|
||
|
||
使用 async 关键字声明的函数称为异步函数，它会隐式返回一个 Promise。await 关键字可以用于等待一个 Promise 完成并获取其结果。注意，await 关键字只能在 async 函数内部使用。
|
||
|
||
async/await 与 Promise 一样，有很好的错误处理机制。我们可以使用 try...catch 语句来捕获和处理 Promise 中发生的错误。
|