JavaScript 速查表

编写页面内 JavaScript

要在 HTML 文档中添加页面内 JavaScript，请使用以下脚本标签 -

<script type="text/javascript">
// Write your JavaScript code here
</script>

插入外部 JavaScript 文件

您可以使用 HTML 的 <script> 标签在 HTML 文档中插入外部 JavaScript 文件，方法是使用 src 属性指定文件路径。

<script src="file.js"></script>

打印/输出

JavaScript 提供三种在屏幕上打印任何内容的方法。

控制台输出
警告框
文档写入

控制台输出 (console.log())

console.log() 在 Web 控制台中打印。它用于调试和记录目的。

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

警告框

JavaScript alert() 方法在浏览器上显示一个弹出警告框，其中包含指定的消息，例如文本、变量的值等。

alert("Hello World!");
var x = 10;
alert("Value of x is :" + x);

document.write()

document.write() 方法用于将内容直接写入 HTML 文档。

document.write("Hello World!");
var x = 10;
document.write("Value of x is :", x);

变量

JavaScript 变量可以使用 var、 let 或 const 关键字声明。

var - 声明函数作用域变量，这些变量可以重新赋值。
let - 声明块作用域变量，这些变量可以重新赋值。
const - 声明常量，其值不能重新赋值。

var x = 5; 
let y = 10; 
const z = 15;

数据类型

JavaScript 数据类型可以分为以下两类 -

1. 基本类型

基本数据类型为：String、Number、Boolean、Undefined、Null、Symbol、BigInt

2. 对象类型

对象数据类型为：{}、数组 []、函数 () => {}

let str = "Kelly Hu"; 
let num = 123; 
let bool = true; 
let und = undefined; 
let n = null;

运算符

以下是 JavaScript 运算符 -

算术运算符

算术运算符为：+、-、*、/、%、++、--

let a = 10;
let b = 3;
console.log("a =", a, ", b =", b);

// Addition (+)
let sum = a + b;
console.log("a + b =", sum);
// Subtraction (-)
let difference = a - b;
console.log("a - b =", difference);
// Multiplication (*)
let product = a * b;
console.log("a * b =", product);
// Division (/)
let quotient = a / b;
console.log("a / b =", quotient);
// Modulus (remainder) (%)
let remainder = a % b;
console.log("a % b =", remainder);
// Increment (++)
a++;
console.log("After a++:", a);
// Decrement (--)
b--;
console.log("After b--:", b);

赋值运算符

赋值运算符为：=、+=、-=、*=、/=

let x = 10;
console.log("x:", x);
x = 5;
console.log("x:", x);
x += 3;
console.log("x:", x);
x -= 2;
console.log("x:", x);
x *= 4;
console.log("x:", x);
x /= 6;
console.log("x:", x);
x %= 3;
console.log("x:", x);

比较运算符

比较运算符为：==、===、!=、!==、>、<、>=、<=

let x = 5;
let y = "5";
let z = 10;

console.log(x == y); 
console.log(x === y);
console.log(x != z);
console.log(x !== y);
console.log(z > x);
console.log(x < z);
console.log(z >= 10);
console.log(x <= 5);

逻辑运算符

逻辑运算符为：&&（与）、||（或）和!（非）

let a = true;
let b = false;
let c = 5;
let d = 10;

console.log(a && c < d);
console.log(b && c < d);
console.log(a || b);
console.log(b || d < c);
console.log(!a);
console.log(!b);

条件语句

JavaScript 条件语句包含不同类型的 if-else 语句和三元运算符。

If else 语句

if-else 语句的语法为 -

if (condition) {
   // block of code
} else if (condition) {
   // block of code
} else {
   // block of code
}

以下是 if-else 语句的示例 -

let age = 20;

if (age < 18) {
   console.log("You are a minor.");
} else if (age >= 18 && age < 65) {
   console.log("You are an adult.");
} else {
   console.log("You are a senior citizen.");
}

三元运算符

三元运算符是简单 if else 语句的替代方案。以下是三元运算符的语法：

let result = condition ? 'value1' : 'value2';

三元运算符的示例如下：

let age = 20;

let message = age < 18 
   ? "You are a minor." 
   : age >= 18 && age < 65 
   ? "You are an adult." 
   : "You are a senior citizen.";

console.log(message);

循环

JavaScript 循环包括：

for 循环
while 循环
do-while 循环

for 循环

for 循环是一种入口控制循环。

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

while 循环

while 循环也是一种入口控制循环，在执行循环体之前检查条件。

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

do-while 循环是一种出口控制循环，在执行循环体之后检查条件。

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

函数

JavaScript 函数是用于执行特定任务的代码块。

用户定义函数

以下是一个用于添加两个数字的函数示例：

// Function Declaration
function addNumbers(a, b) {
   return a + b;  // Return the sum of a and b
}

// Example usage
let sum = addNumbers(5, 10);
console.log("The sum is:", sum);  // The sum is: 15

函数表达式

函数表达式的语法如下：

const multiply = function(a, b) {
   return a * b;
}

箭头函数

JavaScript 箭头函数用于编写函数表达式。

以下是一个创建箭头函数的简单语句：

const divide = (a, b) => a / b;

添加两个数字的箭头函数示例：

// Arrow function
const addNumbers = (a, b) => a + b;
// Calling
let sum = addNumbers(5, 10);
console.log("The sum is:", sum);

对象

JavaScript 对象是键值对的集合，用于存储不同类型的数据，包括其他对象、函数、数组和原始值。

以下是在 JS 中创建对象的示例：

const person = {
   name: "Kelly Hu",
   age: 27,
   display: function() {
      console.log("Hello, " + this.name);
   }
};

console.log(person.name);  // Access property
person.display();            // Call method

数组

JavaScript 数组在单个变量中存储任何类型的多个值。

数组声明

声明数组的语法为：

let array_name = [value1, value2, value3, …];

数组示例

以下是如何创建整数数组的示例。

let arr = [10, 20, 30, 40, 50];
// Printing array
console.log("arr:", arr);

数组方法

常用的数组方法包括：

push() - 用于向数组中添加一个或多个元素。
pop() - 用于删除最后一个元素并返回已删除的元素。
shift() - 用于删除第一个元素并返回已删除的元素。
unshift() - 用于在数组开头添加一个或多个元素。
concat() - 用于添加一个或多个数组并返回一个新数组。
join() - 用于将数组的所有元素连接成一个字符串。

以下是一个演示所有上述方法的示例：

// Initialize the original array
let students = ["Kelly Hu", "Peter", "John"];
// push()
students.push("Bobby", "Catty");
console.log(students); 
// pop()
console.log("Removed :", students.pop()); 
// shift()
console.log("Removed :", students.shift()); 
// unshift()
students.unshift("Julia", "Halle");
console.log(students); 
// concat()
const newNames = ["Emma", "Reese"];
const newArray = students.concat(newNames);
console.log("After concat:", newArray); 
// join()
const str = students.join(", ");
console.log("Joined string:", str);

遍历数组元素

可以使用 forEach() 方法遍历所有数组元素：

var arr = [10, 20, 30, 40, 50]
arr.forEach((item) => console.log(item));

DOM 操作

JavaScript DOM 操作允许您动态地操作网页的内容和结构。

let element = document.getElementById('myElement');
element.innerHTML = 'New Content';  // Change content
element.style.color = 'red';        // Change style
document.querySelector('.class');   // Select by class

事件监听器

JavaScript 事件监听器允许您在响应各种用户操作（例如点击、按键、鼠标移动等）时执行代码。

以下是一个按钮点击事件的示例：

element.addEventListener('click', function() {
  alert('Clicked!');
});

Promise

JavaScript Promise 表示可能现在、将来或永远不可用的值。

// Promises
let promise = new Promise((resolve, reject) => {
   // asynchronous code
   if (success) resolve('Success');
   else reject('Error');
});

promise.then(result => console.log(result)).catch(err => console.log(err));

Async/Await

JavaScript Async/Await 用于处理异步操作。

以下是一个 Async/Await 的示例：

async function fetchData() {
   try {
      let response = await fetch('url');
      let data = await response.json();
      console.log(data);
   } catch (error) {
      console.log(error);
   }
}

错误处理

JavaScript 错误处理允许您处理运行时发生的错误/异常。try、catch 和 finally 块用于处理异常。

错误处理的语法为：

try {
   // Code that may throw an error
} catch (error) {
   console.log(error.message);  // Handle the error
} finally {
   console.log("Finally block executed");
}

以下是一个简单的示例，演示了在 JavaScript 中使用 try、catch 和 finally：

function divideNumbers(num1, num2) {
   try {
      if (num2 === 0) {
         throw new Error("Cannot divide by zero!");
      }
      const result = num1 / num2;
      console.log(`Result: ${result}`);
   } catch (error) {
      console.error("Error:", error.message);
   } finally {
      console.log("Execution completed.");
   }
}

// Calling 
divideNumbers(10, 2);
divideNumbers(10, 0);

打印页面