JavaScript 基础知识

概述

        在Web前端开发中，JavaScript 是一种脚本语言，主要用于实现网页的动态功能和交互效果。与 HTML 和 CSS 主要关注网页的结构和样式不同，JavaScript 可以用于以下方面：

• 动态内容更新：通过 JavaScript，可以在不重新加载页面的情况下更新网页上的内容。例如，用户点击一个按钮后，网页内容可以即时改变。

• 事件处理：JavaScript 可以监听和处理用户的各种操作事件，比如点击、输入、滚动等，从而使网页响应用户的操作。

• 表单验证：在用户提交表单之前，可以使用 JavaScript 对表单数据进行验证，确保用户输入的数据符合预期。

• 动画效果：可以使用 JavaScript 创建动画效果，例如元素的移动、渐变等，增强用户体验。

• 与服务器交互：JavaScript 允许网页与服务器进行异步通信（如使用 AJAX 技术），从而在后台获取数据或提交数据，而无需刷新整个页面。

1 变量与数据类型

1.1 变量声明

var	传统的变量声明方式，作用域为函数或全局，存在变量提升的问题。
let	块级作用域（即 {} 内部）的变量声明，不会有变量提升问题。推荐使用。
const	块级作用域的常量声明，值不能被重新赋值。

var name = "Alice";
let age = 30;
const PI = 3.14;

1.2 数据类型

• 基本数据类型：Number（数字）、String（字符串）、Boolean（布尔值）、undefined（未定义）、null（空值）、Symbol（符号，ES6新增）。
• 复杂数据类型：Object（对象）、Array（数组）。

let number = 42;
let string = "Hello, World!";
let isTrue = true;
let nothing = null;
let person = { name: "Alice", age: 30 };
let numbers = [1, 2, 3, 4, 5];

2 运算符

算术运算符	+、-、*、/、%（取模）
比较运算符	==、===（严格相等）、!=、!==、>、<、>=、<=
逻辑运算符	&&（与）、||（或）、!（非）
赋值运算符	=、+=、-=、*=、/=、%=、++、--

let sum = 10 + 5; // 15
let isEqual = (10 === 10); // true
let isGreater = (10 > 5); // true
let result = (true && false); // false

3 控制结构

3.1 条件语句：if、else if、else、switch

if (age > 18) {
    console.log("Adult");
} else if (age > 12) {
    console.log("Teenager");
} else {
    console.log("Child");
}

switch (day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
        console.log("Monday");
        break;
    default:
        console.log("Other day");
}

3.2 循环语句：for、while、do...while

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

4 函数

4.1 函数声明

使用 function 关键字定义函数：

// 函数声明
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // 输出: Hello, Alice!

4.2 函数表达式

将函数赋值给变量，可以是匿名函数或具名函数：

// 函数表达式（匿名函数）
const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(2, 3)); // 输出: 6

// 函数表达式（具名函数）
const divide = function divide(a, b) {
  return a / b;
};

console.log(divide(6, 2)); // 输出: 3

4.3 箭头函数

使用箭头函数简化函数的定义。箭头函数语法更简洁，且没有自己的 this 绑定：

// 单行表达式箭头函数
const add = (a, b) => a + b;

console.log(add(5, 7)); // 输出: 12

// 多行箭头函数
const subtract = (a, b) => {
  let result = a - b;
  return result;
};

console.log(subtract(10, 4)); // 输出: 6

4.4 回调函数

将函数作为参数传递给另一个函数：

// 函数接收回调函数
function processUserInput(callback) {
  let name = "Bob";
  callback(name);
}

// 回调函数
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 调用
processUserInput(sayHello); // 输出: Hello, Bob!

4.5 高阶函数

接受或返回函数的函数：

// 高阶函数：接受函数作为参数
function operateOnNumbers(a, b, operation) {
  return operation(a, b);
}

// 传递不同的函数作为操作
const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

console.log(operateOnNumbers(5, 3, add)); // 输出: 8
console.log(operateOnNumbers(5, 3, multiply)); // 输出: 15

// 高阶函数：返回函数
function createMultiplier(multiplier) {
  return function(value) {
    return value * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 输出: 10
console.log(triple(5)); // 输出: 15

5 对象

         对象：由键值对组成的集合。

对象字面量	使用 {} 创建对象
对象属性和方法	访问和定义对象的属性和方法
this 关键字	引用当前对象
原型链	对象继承的机制

let person = {
    name: "Alice",
    age: 30,
    greet() {
        return "Hello, " + this.name;
    }
};
console.log(person.greet()); // "Hello, Alice"

6 数组

        数组：由多个值组成的集合。

创建和访问	使用 [] 创建数组
常用方法	push、pop、shift、unshift、splice、slice、forEach、map、filter、reduce

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

7  字符串操作

7.1 charAt

返回指定位置的字符：

let str = "Hello, World!";
let char = str.charAt(7); // "W"
console.log(char);

7.2 concat

连接两个或多个字符串：

let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2); // "Hello, World!"
console.log(result);

7.3 includes

检查字符串是否包含指定的子字符串：

let str = "Hello, World!";
let contains = str.includes("World"); // true
console.log(contains);

7.4 indexOf

返回指定子字符串第一次出现的位置，如果未找到，则返回 -1：

let str = "Hello, World!";
let index = str.indexOf("World"); // 7
console.log(index);

7.5 replace

替换字符串中指定的子字符串或正则表达式匹配项：

let str = "Hello, World!";
let newStr = str.replace("World", "JavaScript"); // "Hello, JavaScript!"
console.log(newStr);

7.6 slice

提取字符串的指定部分：

let str = "Hello, World!";
let sliced = str.slice(7, 12); // "World"
console.log(sliced);

7.7 split

将字符串分割为数组：

let str = "Hello, World!";
let parts = str.split(", "); // ["Hello", "World!"]
console.log(parts);

7.8 substring

返回字符串中两个指定索引之间的子字符串：

let str = "Hello, World!";
let sub = str.substring(7, 12); // "World"
console.log(sub);

7.9 toLowerCase

将字符串转换为小写字母：

let str = "Hello, World!";
let lowerCaseStr = str.toLowerCase(); // "hello, world!"
console.log(lowerCaseStr);

7.10 toUpperCase

将字符串转换为大写字母：

let str = "Hello, World!";
let upperCaseStr = str.toUpperCase(); // "HELLO, WORLD!"
console.log(upperCaseStr);

8 错误处理

在 JavaScript 中，错误处理是确保程序稳定运行的重要部分。下面是 try...catch 和 throw 的基本用法和示例：

8.1 try...catch

try...catch 语句用于捕捉运行时错误，从而防止程序崩溃。try 块中的代码是需要检查的代码，catch 块中的代码是处理错误的代码。

try {
  // 可能会抛出错误的代码
  let result = 10 / 0;
  console.log(result);
} catch (error) {
  // 处理错误
  console.error("发生错误:", error.message);
}

        在这个示例中，尝试除以零的操作会导致错误。catch 块捕捉到错误并输出错误消息。

8.2 throw

throw 语句用于手动抛出错误。你可以抛出内置的 Error 对象，也可以创建自定义的错误对象。

function divide(a, b) {
  if (b === 0) {
    throw new Error("除数不能为零");
  }
  return a / b;
}

try {
  let result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error("发生错误:", error.message);
}

        在这个示例中，divide 函数检查除数是否为零。如果是，它会抛出一个 Error 对象，try 块中的代码会捕捉到这个错误并在 catch 块中处理。

综合示例

function parseJSON(jsonString) {
  try {
    // 尝试解析 JSON 字符串
    let obj = JSON.parse(jsonString);
    console.log("解析成功:", obj);
  } catch (error) {
    // 处理解析错误
    console.error("JSON 解析失败:", error.message);
  }
}

const validJSON = '{"name": "Alice", "age": 25}';
const invalidJSON = '{"name": "Alice", "age": }'; // 错误的 JSON

parseJSON(validJSON); // 输出: 解析成功: { name: 'Alice', age: 25 }
parseJSON(invalidJSON); // 输出: JSON 解析失败: Unexpected token } in JSON at position 22

        在这个示例中，parseJSON 函数尝试解析 JSON 字符串。如果输入的 JSON 字符串格式不正确，会抛出错误并在 catch 块中处理。

9 事件处理

        在 JavaScript 中，事件监听用于响应用户的操作（如点击、输入等）。addEventListener 方法是用于向 HTML 元素添加事件监听器的标准方法。事件对象则提供了关于事件的详细信息，如事件类型、触发元素等。

下面是如何使用 addEventListener 添加事件监听器以及如何访问事件对象的示例：

9.1 使用 addEventListener 添加事件监听

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">点击我</button>
  <input type="text" id="myInput" placeholder="输入文本">
  <script>
    // 获取元素
    const button = document.getElementById('myButton');
    const input = document.getElementById('myInput');

    // 添加点击事件监听器
    button.addEventListener('click', function() {
      alert('按钮被点击了!');
    });

    // 添加输入事件监听器
    input.addEventListener('input', function(event) {
      console.log('输入框的值:', event.target.value);
    });
  </script>
</body>
</html>

在这个示例中：

• addEventListener 用于在按钮上添加点击事件监听器，当按钮被点击时，会弹出一个提示框。
• addEventListener 用于在输入框上添加输入事件监听器，每当用户在输入框中输入文本时，控制台会输出当前输入的值。

9.2 访问事件对象

事件对象是事件处理函数的参数，它包含了关于事件的各种信息，如事件类型、目标元素等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Object Example</title>
</head>
<body>
  <button id="myButton">点击我</button>
  <input type="text" id="myInput" placeholder="输入文本">
  <script>
    const button = document.getElementById('myButton');
    const input = document.getElementById('myInput');

    button.addEventListener('click', function(event) {
      // 访问事件对象
      console.log('事件类型:', event.type); // 事件类型
      console.log('事件目标:', event.target); // 事件的目标元素
      console.log('事件的坐标:', `X: ${event.clientX}, Y: ${event.clientY}`); // 鼠标坐标
    });

    input.addEventListener('input', function(event) {
      console.log('事件类型:', event.type); // 事件类型
      console.log('当前输入的值:', event.target.value); // 当前输入框的值
    });
  </script>
</body>
</html>

在这个示例中：

• 在按钮的点击事件处理函数中，事件对象 event 被用来获取事件的类型、目标元素和鼠标点击的位置。
• 在输入事件处理函数中，事件对象 event 被用来获取当前输入框的值。

10 异步编程

        在 JavaScript 中，处理异步操作是非常常见的任务，尤其是在与网络请求、文件读取等操作打交道时。以下是三种常用的异步编程方式：回调函数、Promise、以及 async 和 await。

10.1 回调函数

        回调函数是最基本的异步处理方式。你将一个函数作为参数传递给另一个函数，后者在某些操作完成时调用这个回调函数。

// 异步操作示例
function fetchData(callback) {
  setTimeout(() => {
    // 模拟异步操作
    const data = '数据加载完成';
    callback(data);
  }, 1000);
}

// 使用回调函数处理结果
fetchData(function(result) {
  console.log(result); // 输出: 数据加载完成
});

        在这个示例中，fetchData 函数接受一个回调函数，并在模拟的异步操作完成后调用它。

10.2 Promise

         Promise是一种用于处理异步操作的更强大、更灵活的机制。它表示一个异步操作的最终完成（成功或失败）。

// 使用 Promise 示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步操作
      const data = '数据加载完成';
      resolve(data); // 操作成功
      // reject('操作失败'); // 如果需要处理失败的情况
    }, 1000);
  });
}

// 使用 Promise 处理结果
fetchData()
  .then(result => {
    console.log(result); // 输出: 数据加载完成
  })
  .catch(error => {
    console.error(error); // 处理错误
  });

        在这个示例中，fetchData 函数返回一个 Promise 对象，表示异步操作的结果。then 方法用于处理成功的结果，catch 方法用于处理错误情况。

10.3 async 和 await

        async 和 await 是基于 Promise 的语法糖，用于简化异步代码的编写，使其看起来更像同步代码。

// 使用 async 和 await 示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '数据加载完成';
      resolve(data);
    }, 1000);
  });
}

// 使用 async 和 await 处理结果
async function fetchDataAndLog() {
  try {
    const result = await fetchData();
    console.log(result); // 输出: 数据加载完成
  } catch (error) {
    console.error(error); // 处理错误
  }
}

fetchDataAndLog();

在这个示例中：

• fetchData 函数和之前一样返回一个 Promise 对象。
• fetchDataAndLog 函数是一个 async 函数，其中 await 用于等待 fetchData 的完成，且它使代码看起来像是同步的。
• 使用 try...catch 处理可能出现的错误。

综合示例

        结合回调函数、Promise 和 async/await，你可以创建一个处理异步操作的完整示例：

// 回调函数示例
function fetchDataWithCallback(callback) {
  setTimeout(() => {
    const data = '数据加载完成（回调函数）';
    callback(data);
  }, 1000);
}

// Promise 示例
function fetchDataWithPromise() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('数据加载完成（Promise）');
    }, 1000);
  });
}

// async/await 示例
async function fetchDataWithAsyncAwait() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('数据加载完成（async/await）');
    }, 1000);
  });
}

// 使用回调函数
fetchDataWithCallback(result => {
  console.log(result);
});

// 使用 Promise
fetchDataWithPromise().then(result => {
  console.log(result);
});

// 使用 async/await
(async function() {
  const result = await fetchDataWithAsyncAwait();
  console.log(result);
})();

 

11 DOM 操作

        在 JavaScript 中，你可以使用各种方法来选择和操作 DOM 元素。下面的示例展示了如何使用 getElementById、querySelector 等方法选择元素，如何修改元素的内容、属性和样式，以及如何响应用户的操作。

11.1 选择元素

11.1.1 使用 getElementById

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getElementById 示例</title>
</head>
<body>
  <h1 id="header">Hello, World!</h1>
  <script>
    // 选择元素
    const header = document.getElementById('header');
    console.log(header); // 打印 <h1 id="header">Hello, World!</h1>
  </script>
</body>
</html>

11.1.2 使用 querySelector

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>querySelector 示例</title>
</head>
<body>
  <p class="intro">欢迎访问我的网站！</p>
  <script>
    // 选择元素
    const introParagraph = document.querySelector('.intro');
    console.log(introParagraph); // 打印 <p class="intro">欢迎访问我的网站！</p>
  </script>
</body>
</html>

11.2 操作元素

11.2.1 修改元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改元素内容 示例</title>
</head>
<body>
  <div id="content">初始内容</div>
  <button id="changeContentButton">修改内容</button>
  <script>
    const contentDiv = document.getElementById('content');
    const button = document.getElementById('changeContentButton');

    // 修改元素内容
    button.addEventListener('click', () => {
      contentDiv.textContent = '内容已被修改！';
    });
  </script>
</body>
</html>

11.2.2 修改元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改元素属性 示例</title>
</head>
<body>
  <img id="image" src="placeholder.jpg" alt="Placeholder Image">
  <button id="changeImageButton">修改图片</button>
  <script>
    const image = document.getElementById('image');
    const button = document.getElementById('changeImageButton');

    // 修改图片的属性
    button.addEventListener('click', () => {
      image.src = 'new-image.jpg';
      image.alt = 'New Image';
    });
  </script>
</body>
</html>

11.2.3 修改元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改元素样式 示例</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button id="changeStyleButton">修改样式</button>
  <script>
    const box = document.getElementById('box');
    const button = document.getElementById('changeStyleButton');

    // 修改元素的样式
    button.addEventListener('click', () => {
      box.style.width = '200px';
      box.style.height = '200px';
      box.style.backgroundColor = 'red';
    });
  </script>
</body>
</html>

11.3 事件处理

响应用户的操作示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件处理 示例</title>
</head>
<body>
  <button id="alertButton">点击我</button>
  <input type="text" id="textInput" placeholder="输入文本">
  <script>
    const alertButton = document.getElementById('alertButton');
    const textInput = document.getElementById('textInput');

    // 处理点击事件
    alertButton.addEventListener('click', () => {
      alert('按钮被点击了！');
    });

    // 处理输入事件
    textInput.addEventListener('input', (event) => {
      console.log('输入框中的文本:', event.target.value);
    });
  </script>
</body>
</html>

在这个示例中：

• 按钮点击事件会弹出一个提示框。
• 输入框的内容变化会在控制台中输出当前输入的文本。

12 模块化

        模块化编程是现代 JavaScript 开发中不可或缺的部分，它帮助开发者组织和管理代码，使其更加清晰和可维护。常见的模块化方案包括 CommonJS 和 ES6 模块（也称为 ECMAScript 模块）。下面是关于这两种模块化方案的详细介绍和示例。

12.1 ES6 模块（ECMAScript 模块）

        ES6 模块是 JavaScript 的标准模块化方案，使用 import 和 export 语法来导入和导出模块。

12.1.1 导出（export）

你可以通过 export 语法将一个模块的变量、函数或类导出，以便在其他模块中使用。

// math.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export default class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

12.2.2 导入（import）

在另一个文件中，你可以使用 import 语法来导入这些导出的内容。

// app.js
import { PI, add } from './math.js'; // 导入 named exports
import Calculator from './math.js';  // 导入 default export

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

const calculator = new Calculator();
console.log(calculator.multiply(2, 3)); // 6

12.2.3 导入全部

你也可以将模块中的所有导出内容一次性导入到一个对象中。

// app.js
import * as math from './math.js';

console.log(math.PI); // 3.14
console.log(math.add(2, 3)); // 5

const calculator = new math.default();
console.log(calculator.multiply(2, 3)); // 6

12.2 CommonJS 模块

CommonJS 是 Node.js 中的模块化方案，使用 require 和 module.exports 语法来导入和导出模块。

12.2.1 导出（ module.exports ）

在 CommonJS 中，你可以通过 module.exports 导出变量、函数或类。

// math.js
const PI = 3.14;

function add(a, b) {
  return a + b;
}

class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

module.exports = {
  PI,
  add,
  Calculator
};

12.2.2 导入（require）

在另一个文件中，你可以使用 require 来导入这些导出的内容。

// app.js
const math = require('./math.js');

console.log(math.PI); // 3.14
console.log(math.add(2, 3)); // 5

const calculator = new math.Calculator();
console.log(calculator.multiply(2, 3)); // 6

12.3 总结

ES6 模块 是 JavaScript 的标准模块系统，使用 import 和 export 语法，适合于浏览器和现代 Node.js 环境。

CommonJS 是 Node.js 的模块系统，使用 require 和 module.exports 语法，适合于服务器端 Node.js 环境

13 面向对象编程

        在 JavaScript 中，类（class）和对象（object）是面向对象编程的核心概念。使用 class 关键字可以定义类，并且可以通过 extends 关键字实现继承。下面的示例展示了如何定义类、创建对象以及实现继承。

13.1 定义类

        使用 class 关键字可以定义一个类。类可以包含构造函数和方法。

// 定义一个类
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 创建对象
const animal = new Animal('Generic Animal');
animal.speak(); // 输出: Generic Animal makes a noise.

13.2 继承

        使用 extends 关键字可以从一个类继承另一个类。子类可以继承父类的属性和方法，还可以重写（覆盖）父类的方法。

// 定义父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 定义子类
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }

  describe() {
    console.log(`${this.name} is a ${this.breed}.`);
  }
}

// 创建子类对象
const dog = new Dog('Rex', 'German Shepherd');
dog.speak();   // 输出: Rex barks.
dog.describe(); // 输出: Rex is a German Shepherd.

13.3 访问修饰符

        ES6 不直接支持传统的访问修饰符（如 public、private），但可以通过命名约定和一些语言特性来模拟它们。最近的 JavaScript 标准（如 ES2022）引入了私有字段的支持。

// 定义类
class Person {
  #age; // 私有字段

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.#age} years old.`);
  }

  get age() {
    return this.#age;
  }

  set age(value) {
    if (value >= 0) {
      this.#age = value;
    } else {
      console.log('Age cannot be negative.');
    }
  }
}

// 创建对象
const person = new Person('Alice', 30);
person.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
console.log(person.age); // 输出: 30
person.age = 35;
console.log(person.age); // 输出: 35

13.4 总结

类的定义	使用 class 关键字定义类，类可以有构造函数和方法。
继承	使用 extends 关键字从一个类继承另一个类，可以重写父类的方法。
私有字段	ES6 的私有字段（以 # 开头）允许你在类中定义私有数据。

14 Web API

        Web API（应用程序编程接口）是指通过 HTTP 协议提供的一组接口，允许开发者在客户端（如浏览器）和服务器之间进行数据交换和操作。Web API 可以让你在网页中实现与服务器的交互，获取或提交数据，或使用各种服务。以下是一些常见的 Web API 类型和功能：

14.1 浏览器内置 Web API

• DOM API：用于操作网页的结构和内容。通过 DOM API，你可以创建、修改和删除 HTML 元素，管理事件等。

  • 示例：document.getElementById('elementId')

• Fetch API：用于进行网络请求，替代了传统的 XMLHttpRequest。

  • 示例：

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
    

• LocalStorage 和 SessionStorage：用于在客户端存储数据。LocalStorage 存储的数据在浏览器关闭后仍然保留，而 SessionStorage 只在当前会话中有效。

  • 示例：

    localStorage.setItem('key', 'value');
    let value = localStorage.getItem('key');
    

• Geolocation API：用于获取用户的地理位置。

  • 示例：

    navigator.geolocation.getCurrentPosition(position => {
        console.log(position.coords.latitude, position.coords.longitude);
    });
    

• WebSockets API：用于在客户端和服务器之间建立持久连接，实现实时数据传输。

  • 示例：

    let socket = new WebSocket('ws://example.com/socket');
    socket.onmessage = function(event) {
        console.log('Message from server ', event.data);
    };
    

14.2 第三方 Web API

这些 API 通常由服务提供商提供，可以用于各种功能，如社交媒体集成、支付处理、数据获取等。

• Google Maps API：用于在网页中嵌入和操作地图。

  • 示例：

    function initMap() {
        let map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    }
    

• Twitter API：允许你访问 Twitter 数据，如用户推文、关注者等。

  • 示例：

    fetch('https://api.twitter.com/2/tweets?ids=1453489038376136705', {
        headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }
    })
    .then(response => response.json())
    .then(data => console.log(data));
    

• OpenWeatherMap API：用于获取天气数据。

  • 示例：

    fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
      .then(response => response.json())
      .then(data => console.log(data));
    

14.3 RESTful API 和 GraphQL

• RESTful API：一种遵循 REST 架构风格的 API，使用 HTTP 方法（GET、POST、PUT、DELETE 等）进行操作。

  • 示例：使用 GET 请求获取资源

    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => console.log(data));
    

• GraphQL：一种查询语言，允许客户端请求所需的数据，并能对数据进行精确的控制。

  • 示例：

    fetch('https://api.example.com/graphql', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            query: '{ user(id: "1") { name, age } }'
        })
    })
    .then(response => response.json())
    .then(data => console.log(data));
    

14.4 使用 Web API 的注意事项

• 安全性：在使用 Web API 时，要注意处理敏感数据和保护用户隐私。
• 性能：合理使用 API，避免频繁请求，以免影响性能。
• 错误处理：在网络请求中，确保对可能出现的错误进行处理，并提供适当的用户反馈。