JavaScript 知识速查表

本页面汇总了 JavaScript 编程中最常用的语法和知识点，方便快速查阅。

数据类型

类型	示例	说明
number	10, 3.14	数字（整数和浮点数）
string	"hello", 'world'	字符串
boolean	true, false	布尔值
undefined	undefined	未定义
null	null	空值
object	{name: "Tom"}	对象
array	[1, 2, 3]	数组
symbol	Symbol("id")	符号
bigint	BigInt(123)	大整数

类型判断

typeof "hello"        // "string"
typeof 123            // "number"
typeof true           // "boolean"
typeof {}             // "object"
typeof []             // "object" (注意!)
Array.isArray([])     // true (正确判断数组)

类型转换

// 转字符串
String(123)       // "123"
(123).toString()  // "123"
123 + ""          // "123"

// 转数字
Number("123")     // 123
parseInt("123")   // 123
parseFloat("3.14")// 3.14
+"123"            // 123

// 转布尔值
Boolean(1)        // true
Boolean(0)        // false
!!value           // 双取反

变量声明

var name = "Tom"     // 函数作用域，可重复声明
let age = 20         // 块作用域，不可重复声明
const PI = 3.14      // 常量，不可重新赋值

运算符

算术运算符

+   // 加法、字符串拼接
-   // 减法
*   // 乘法
/   // 除法
%   // 取余
**  // 幂运算
++  // 自增
--  // 自减

比较运算符

==  // 相等（会转换类型）
=== // 全等（不转换类型）
!=  // 不等
!== // 不全等
>   // 大于
<   // 小于
>=  // 大于等于
<=  // 小于等于

逻辑运算符

&&  // 逻辑与
||  // 逻辑或
!   // 逻辑非
??  // 空值合并（ES2020）

字符串

const s = "Hello World";

// 访问
s[0]          // 'H'
s.charAt(0)   // 'H'

// 查找
s.indexOf("o")      // 4
s.includes("World") // true
s.startsWith("Hello") // true
s.endsWith("ld")    // true

// 截取
s.slice(0, 5)       // 'Hello'
s.substring(0, 5)  // 'Hello'
s.split(" ")        // ['Hello', 'World']

// 修改
s.toUpperCase()    // 'HELLO WORLD'
s.toLowerCase()    // 'hello world'
s.trim()           // 去除两端空白
s.replace("World", "JavaScript") // 'Hello JavaScript'

// 模板字符串
const name = "Tom";
const msg = `Hello, ${name}!`;  // 'Hello, Tom!'

数组

const arr = [1, 2, 3, 4, 5];

// 访问
arr[0]         // 1
arr.at(-1)     // 5 (支持负索引)

// 修改
arr.push(6)    // 添加到末尾，返回新长度
arr.pop()       // 删除末尾，返回删除的元素
arr.unshift(0)  // 添加到开头
arr.shift()     // 删除开头

// 切片和拼接
arr.slice(1, 3)    // [2, 3]
arr.concat([6,7])  // 合并数组

// 查找
arr.indexOf(3)     // 2
arr.find(x => x > 3)  // 4
arr.findIndex(x => x > 3) // 3
arr.includes(3)    // true

// 排序
arr.reverse()           // [5,4,3,2,1]
arr.sort((a,b) => a-b)  // 升序

// 转换
arr.map(x => x * 2)     // [2,4,6,8,10]
arr.filter(x => x > 2)  // [3,4,5]
arr.reduce((sum, x) => sum + x, 0) // 15
arr.join("-")           // "1-2-3-4-5"

对象

const obj = { name: "Tom", age: 20 };

// 访问
obj.name        // "Tom"
obj["name"]     // "Tom"
Object.keys(obj)    // ["name", "age"]
Object.values(obj)  // ["Tom", 20]
Object.entries(obj)// [["name","Tom"], ["age",20]]

// 修改
obj.city = "Beijing"  // 添加
delete obj.age        // 删除
Object.assign(obj, {age: 21}) // 合并

// 遍历
for (const key in obj) { console.log(key, obj[key]) }
for (const [k,v] of Object.entries(obj)) { }

函数

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

// 函数表达式
const greet = function(name) {
    return `Hello, ${name}!`;
};

// 箭头函数
const greet = (name) => `Hello, ${name}!`;
const add = (a, b) => a + b;

// 默认参数
function greet(name = "World") {
    return `Hello, ${name}!`;
}

// 剩余参数
function sum(...nums) {
    return nums.reduce((a, b) => a + b, 0);
}

异步编程

// Promise
const promise = new Promise((resolve, reject) => {
    // 异步操作
    resolve(result);
});

promise
    .then(result => console.log(result))
    .catch(error => console.error(error))
    .finally(() => console.log("完成"));

// async/await
async function fetchData() {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

常用语法

// 条件
if (condition) {
    // ...
} else if (condition2) {
    // ...
} else {
    // ...
}

// 三元运算符
const status = age >= 18 ? "成年" : "未成年";

// switch
switch (value) {
    case 1: break;
    case 2: break;
    default:
}

// 循环
for (let i = 0; i < 5; i++) { console.log(i); }
for (const item of array) { console.log(item); }
for (const key in obj) { console.log(key); }

// 解构赋值
const [a, b] = [1, 2];
const { name, age } = { name: "Tom", age: 20 };
const [first, ...rest] = [1, 2, 3];  // rest = [2, 3]

常用方法

数组方法汇总

方法	描述	返回值
push()	添加到末尾	新长度
pop()	删除末尾	删除的元素
shift()	删除开头	删除的元素
unshift()	添加到开头	新长度
map()	映射	新数组
filter()	过滤	新数组
reduce()	累计	累计结果
find()	查找	第一个匹配
indexOf()	查找索引	索引或-1
includes()	包含检查	boolean
sort()	排序	数组本身
reverse()	反转	数组本身
slice()	切片	新数组
splice()	删除/替换	删除的元素

字符串方法汇总

方法	描述
charAt()	获取字符
indexOf()	查找索引
includes()	包含检查
slice()	截取
split()	分割
toUpperCase()	转大写
toLowerCase()	转小写
trim()	去除空白
replace()	替换
match()	正则匹配