首页

Appearance

JavaScript 关键字与 API ​

关键字 ​

JavaScript 的关键字是在语言中有特定用途的保留单词，开发者不能将这些关键字用作变量名、函数名或任何其他标识符名称。以下是 JavaScript 关键字列表：

  • await: 用于等待一个 async 函数的 Promise 返回。
  • break: 用于跳出循环或一个 switch 语句。
  • case: 与 switch 语句一起使用，定义一个分支。
  • catch: 与 try 和 finally 一起使用，用来捕获异常。
  • class: 用于定义一个类。
  • const: 用于声明一个块作用域的常量。
  • continue: 用于跳过当前循环的剩余部分，并继续执行下一次迭代。
  • debugger: 用于调用调试功能。
  • default: 与 switch 语句一起使用，定义默认分支。
  • delete: 用于删除对象的属性。
  • do: 与 while 一起使用，创建一个至少执行一次的循环。
  • else: 与 if 语句一起使用，定义一个条件不满足时执行的代码块。
  • enum: 目前在 JavaScript 中保留未使用，但在其他语言如 Java 中用于定义枚举。
  • export: 用于导出模块中的函数、对象或原始值。
  • extends: 用于在类声明中创建一个子类。
  • false: 布尔类型的字面量，表示逻辑上的“假”。
  • finally: 与 try 和 catch 一起使用，定义无论是否有异常抛出都会执行的代码块。
  • for: 创建一个循环，包括初始化表达式、条件和增量表达式。
  • function: 用于声明一个函数。
  • if: 用于创建一个条件分支。
  • import: 用于导入模块中的函数、对象或原始值。
  • in: 用于检测对象是否拥有某个属性。
  • instanceof: 用于检测一个对象是否是某个构造函数的实例。
  • let: 用于声明一个块作用域的变量。
  • new: 用于创建一个对象实例。
  • null: 表示空值的字面量。
  • return: 用于从函数返回值。
  • super: 用于调用父类的构造函数或方法。
  • switch: 用于创建一个多分支的选择结构。
  • this: 用于引用当前对象。
  • throw: 用于抛出异常。
  • true: 布尔类型的字面量，表示逻辑上的“真”。
  • try: 用于标记一个尝试执行的代码块，并指定一个或多个响应异常的捕获。
  • typeof: 用于确定一个变量或表达式的类型。
  • var: 用于声明一个函数作用域的变量。
  • void: 用于指定一个表达式不返回值。
  • while: 创建一个条件循环。
  • with: 用于设置代码在特定对象的上下文中执行，不推荐使用，严格模式下不允许使用。
  • yield: 用于暂停和恢复一个生成器函数。

此外，还有一些被视为 "将来的保留字"，根据 ECMAScript 规范的不同版本，这些保留字可能会有变化。在某些情况下，它们只在严格模式下被视为保留字。这些包括：

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

开发者应当避免使用这些关键字作为变量名或其他标识符，以防止语法错误和未来的兼容性问题。

API ​

JavaScript 语言本身是一种编程语言的规范，它定义了语法和基础操作。与此同时，JavaScript 还可以通过各种 API（应用程序编程接口）与浏览器以及其他环境（如 Node.js）进行交互。以下是一些常见的 JavaScript API：

DOM (文档对象模型) API ​

  • 用于操作 HTML 和 XML 文档的结构、样式和内容。
  • 例如：document.getElementById(), document.createElement(), element.innerHTML, element.addEventListener() 等。
javascript
// 获取一个元素并改变其文本内容
document.getElementById("myElement").textContent = "Hello, World!";

BOM (浏览器对象模型) API ​

  • 提供与浏览器交互的方法，如窗口管理、定时器、导航等。
  • 例如：window.location, window.setTimeout(), window.setInterval(), window.alert() 等。
javascript
// 使用 `setTimeout` 延迟执行一个函数
setTimeout(function () {
  alert("Hello after 3 seconds");
}, 3000);

Canvas API ​

  • 允许在网页上绘制 2D 图形。
  • 例如：getContext(), fillRect(), drawImage() 等。
html
<canvas id="myCanvas" width="200" height="100"></canvas>
javascript
// 在画布上绘制一个矩形
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 50);

WebGL API ​

  • 用于在浏览器中渲染交互式 3D 和 2D 图形。
  • 例如：createShader(), createProgram(), drawElements() 等。
html
<canvas id="glcanvas" width="640" height="480"></canvas>
javascript
// 初始化 WebGL 上下文（更复杂的示例需要更多代码）
var canvas = document.getElementById("glcanvas");
var gl = canvas.getContext("webgl");
if (!gl) {
  console.log("WebGL not supported, falling back on experimental-webgl");
  gl = canvas.getContext("experimental-webgl");
}
if (!gl) {
  alert("Your browser does not support WebGL");
}

Fetch API ​

  • 用于发起网络请求和处理响应。
  • 例如：fetch(), Headers, Request, Response 等。
javascript
// 发送一个 GET 请求
fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

Web Audio API ​

  • 用于在网页上处理和合成音频。
  • 例如：AudioContext, AudioNode, AudioBufferSourceNode 等。
javascript
// 创建一个简单的音调
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioContext.createOscillator();
oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // 设置频率为 440 Hz
oscillator.connect(audioContext.destination);
oscillator.start();

Web Storage API ​

  • 提供了存储键值对的方法。
  • 例如：localStorage, sessionStorage。
javascript
// 存储数据
localStorage.setItem("myKey", "myValue");
// 检索数据
var data = localStorage.getItem("myKey");
console.log(data); // 输出: myValue

IndexedDB API ​

  • 用于在客户端存储大量结构化数据，并使用索引进行高性能搜索。
  • 例如：indexedDB.open(), createObjectStore(), IDBTransaction 等。
javascript
// 打开数据库（更完整的示例需要更多代码）
var request = window.indexedDB.open("MyTestDatabase", 3);
request.onerror = function (event) {
  // 错误处理
};
request.onsuccess = function (event) {
  // 成功处理
  var db = event.target.result;
};

File API ​

  • 用于处理文件读写操作。
  • 例如：FileReader, Blob, FileList 等。
html
<input type="file" id="fileInput" />
javascript
// 读取用户选择的文件
var input = document.getElementById("fileInput");
input.addEventListener("change", function (event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    console.log(e.target.result);
  };
  reader.readAsText(file);
});

Geolocation API ​

  • 允许网站访问用户的地理位置信息。

  • 例如：navigator.geolocation.getCurrentPosition(), watchPosition() 等。

    javascript
    // 获取用户的当前位置
navigator.geolocation.getCurrentPosition(function (position) {
  console.log("Latitude:", position.coords.latitude);
  console.log("Longitude:", position.coords.longitude);
});

Web Workers API ​

  • 允许运行后台脚本而不干扰主线程。

  • 例如：Worker, postMessage(), onmessage 等。

    javascript
    // 创建一个新的 Worker
var myWorker = new Worker("worker.js");
myWorker.postMessage("Hello, worker!");
myWorker.onmessage = function (e) {
  console.log("Message received from worker:", e.data);
};

WebSockets API ​

  • 用于在网页和服务器之间建立一个持久的连接，以便任何一方可以开始发送数据。

  • 例如：WebSocket, onopen, onmessage, send() 等。

    javascript
    // 创建一个 WebSocket 连接
var socket = new WebSocket("ws://www.example.com/socketserver", "protocol");
socket.onopen = function (event) {
  socket.send("Hello Server!");
};
socket.onmessage = function (event) {
  console.log("Message from server ", event.data);
};

History API ​

  • 用于操作浏览器会话历史记录。

  • 例如：history.pushState(), history.replaceState(), onpopstate 等。

    javascript
    // 添加一个新的状态
history.pushState({ page: 1 }, "title 1", "?page=1");
// 替换当前状态
history.replaceState({ page: 2 }, "title 2", "?page=2");
// 监听 popstate 事件
window.onpopstate = function (event) {
  console.log(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state)
  );
};

Service Workers API ​

  • 使得网站能够控制网络请求，缓存文件，以及在没有网络连接的情况下提供功能。

  • 例如：ServiceWorker, install, activate, fetch 事件等。

    javascript
    // 注册一个 Service Worker（更完整的示例需要更多代码）
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then(function (registration) {
      console.log(
        "Service Worker Registered with scope:",
        registration.scope
      );
    })
    .catch(function (error) {
      console.log("Service Worker registration failed:", error);
    });
}

WebRTC API ​

  • 用于网页浏览器之间的实时通信。

  • 例如：RTCPeerConnection, RTCSessionDescription, navigator.mediaDevices.getUserMedia() 等。

    html
    <video id="localVideo" autoplay></video>
    javascript
    // 获取视频流并显示在页面上（需要信令和 STUN/TURN 服务器配置）
navigator.mediaDevices
  .getUserMedia({ video: true })
  .then(function (stream) {
    var video = document.getElementById("localVideo");
    video.srcObject = stream;
  })
  .catch(function (error) {
    console.log("Error accessing media devices.", error);
  });

Payment Request API ​

  • 提供了一种简单、一致的方式来处理支付操作。

  • 例如：PaymentRequest, PaymentResponse 等。

    javascript
    // 发起支付请求
if (window.PaymentRequest) {
  const methodData = [
    {
      supportedMethods: "basic-card",
      data: {
        supportedNetworks: ["visa", "mastercard"],
        supportedTypes: ["debit", "credit"],
      },
    },
  ];

  const details = {
    total: {
      label: "Total",
      amount: { currency: "USD", value: "65.00" },
    },
  };

  const request = new PaymentRequest(methodData, details);

  request
    .show()
    .then(function (paymentResponse) {
      // 处理 paymentResponse
      paymentResponse.complete("success");
    })
    .catch(function (err) {
      console.error("Payment Request failed", err);
    });
}

Notifications API ​

  • 允许网页显示系统级的通知信息。

  • 例如：Notification, permission, requestPermission() 等。

    javascript
    // 显示一个通知
if ("Notification" in window) {
  Notification.requestPermission().then(function (permission) {
    if (permission === "granted") {
      var notification = new Notification("Hello, World!");
    }
  });
}

这些 API 提供了丰富的功能集，允许开发者创建复杂的应用程序。需要注意的是，不同的浏览器可能会有不同程度的支持，因此在开发时需要考虑兼容性问题。

hancenter808@outlook.com

Copyright © 2024 Hanwei