JavaScript 基础知识

标签：console log 示例 JavaScript 基础知识 let const 函数

概述

在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，避免频繁请求，以免影响性能。
错误处理：在网络请求中，确保对可能出现的错误进行处理，并提供适当的用户反馈。

标签：console,log,示例,JavaScript,基础知识,let,const,函数
From： https://blog.csdn.net/2302_77228054/article/details/142058556

概述

1 变量与数据类型

1.1 变量声明

1.2 数据类型

2 运算符

3 控制结构

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

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

4 函数

4.1 函数声明

4.2 函数表达式

4.3 箭头函数

4.4 回调函数

4.5 高阶函数

5 对象

6 数组

7 字符串操作

7.1 charAt

7.2 concat

7.3 includes

7.4 indexOf

7.5 replace

7.6 slice

7.7 split

7.8 substring

7.9 toLowerCase

7.10 toUpperCase

8 错误处理

8.1 try...catch

8.2 throw

综合示例

9 事件处理

9.1 使用 addEventListener 添加事件监听

9.2 访问事件对象

10 异步编程

10.1 回调函数

10.2 Promise

10.3 async 和 await

综合示例

11 DOM 操作

11.1 选择元素

11.1.1 使用 getElementById

11.1.2 使用 querySelector

11.2 操作元素

11.2.1 修改元素的内容

11.2.2 修改元素的属性

11.2.3 修改元素的样式

11.3 事件处理

响应用户的操作示例

12 模块化

12.1 ES6 模块（ECMAScript 模块）

12.1.1 导出（export）

12.2.2 导入（import）

12.2.3 导入全部

12.2 CommonJS 模块

12.2.1 导出（ module.exports ）

12.2.2 导入（require）

12.3 总结

13 面向对象编程

13.1 定义类

13.2 继承

13.3 访问修饰符

13.4 总结

14 Web API

14.1 浏览器内置 Web API

14.2 第三方 Web API

14.3 RESTful API 和 GraphQL

14.4 使用 Web API 的注意事项

相关文章

赞助商

阅读排行

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

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

7.1 `charAt`

7.2 `concat`

7.3 `includes`

7.4 `indexOf`

7.5 `replace`

7.6 `slice`

7.7 `split`

7.8 `substring`

7.9 `toLowerCase`

7.10 `toUpperCase`

8.1 `try...catch`

8.2 `throw`

9.1 使用 `addEventListener` 添加事件监听

11.1.1 使用 `getElementById`

11.1.2 使用 `querySelector`

12.1.1 导出（`export`）

12.2.2 导入（`import`）

12.2.1 导出（ `module.exports` ）

12.2.2 导入（`require`）