JavaScript 速查表

编写页面 JavaScript

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

<script type="text/javascript">
// 在此处编写您的 JavaScript 代码
</script>

插入外部 JavaScript 文件

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

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

打印/输出

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

• Console 控制台输出
• Alert 警告框
• Document Write 文档写入

控制台输出 (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("x 的值为 :", 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);

// 加法 (+)
let sum = a + b;
console.log("a + b =", sum);
// 减法 (-)
let difference = a - b;
console.log("a - b =", Difference);
// 乘法 (*)
let product = a * b;
console.log("a * b =", product);
// 除法 (/)
let quotient = a / b;
console.log("a / b =", quotient);
// 模数(余数)(%)
let remainder = a % b;
console.log("a % b =", remainder);
// 加一 (++)
a++;
console.log("a++ 之后:", a);
// 减一 (--)
b--;
console.log("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) {
// 代码块
} else if (condition) {
// 代码块
} else {
// 代码块
}

以下是 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 addNumbers(a, b) {
    return a + b; // 返回 a 与 b 的和
}

// 示例用法
let sum = addNumbers(5, 10);
console.log("和为:", sum); // 和为:15

函数表达式

函数表达式如下 -

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

箭头函数

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

以下是创建箭头函数的简单语句 -

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

箭头函数示例:将两个数字相加 -

// 箭头函数
const addNumbers = (a, b) => a + b;
// 调用
let sum = addNumbers(5, 10);
console.log("总和为:", sum);

对象

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

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

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

console.log(person.name); // 访问属性
person.display(); // 调用方法

数组

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

数组声明

声明数组的语法为 -

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

数组示例

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

let arr = [10, 20, 30, 40, 50];
// 打印数组
console.log("arr:", arr);

数组方法

常用的数组方法有:-

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

以下示例演示了所有上述方法 -

// 初始化原始数组
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'; // 更改内容
element.style.color = 'red'; // 更改样式
document.querySelector('.class'); // 按类别选择

事件监听器

JavaScript 事件监听器可以执行代码来响应各种用户操作，例如点击、按键、鼠标移动等等。

以下是按钮点击事件的示例 -

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

Promises

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

// 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 {
    // 可能抛出错误的代码
} catch (error) {
    console.log(error.message); // 处理错误
} 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);