JavaScript 常用方法速查表，涵盖核心语法、ES6+ 新特性及高频使用场景，便于快速查阅和复习：
一、数组方法
| 方法 | 说明 | 示例 | 返回值/副作用 |
|---|---|---|---|
push(...items) | 末尾添加元素 | arr.push(4) → 修改原数组 | 返回新数组长度 |
pop() | 删除末尾元素 | arr.pop() → 修改原数组 | 返回被删除元素 |
unshift(...items) | 开头添加元素 | arr.unshift(0) → 修改原数组 | 返回新数组长度 |
shift() | 删除开头元素 | arr.shift() → 修改原数组 | 返回被删除元素 |
slice(start, end) | 截取数组片段（不修改原数组） | arr.slice(1, 3) | 返回新数组 |
splice(start, deleteCount, ...items) | 删除/替换元素 | arr.splice(1, 2, 'a') → 修改原数组 | 返回被删除元素组成的数组 |
map(callback) | 遍历并返回新数组 | [1,2,3].map(x => x*2) → [2,4,6] | 新数组 |
filter(callback) | 过滤符合条件的元素 | [1,2,3].filter(x => x>1) → [2,3] | 新数组 |
reduce(callback, initialValue) | 累计计算（如求和、统计） | [1,2,3].reduce((sum, x) => sum + x, 0) → 6 | 最终累计值 |
find(callback) | 查找第一个符合条件的元素 | [1,2,3].find(x => x>1) → 2 | 元素或 undefined |
findIndex(callback) | 查找第一个符合条件的索引 | [1,2,3].findIndex(x => x>1) → 1 | 索引或 -1 |
includes(value) | 判断是否包含某元素（ES6） | [1,2,3].includes(2) → true | 布尔值 |
flat(depth) | 扁平化嵌套数组（ES2019） | [1, [2]].flat() → [1, 2] | 新数组 |
二、字符串方法
| 方法 | 说明 | 示例 | 返回值 |
|---|---|---|---|
split(separator) | 按分隔符拆分为数组 | "a,b,c".split(",") → ["a", "b", "c"] | 数组 |
substring(start, end) | 截取子字符串（不包含 end 索引） | "Hello".substring(1, 3) → "el" | 新字符串 |
slice(start, end) | 截取子字符串（支持负数索引） | "Hello".slice(-3) → "llo" | 新字符串 |
replace(searchValue, newValue) | 替换匹配内容（支持正则表达式） | "abc".replace("a", "A") → "Abc" | 新字符串 |
toUpperCase() | 转为大写 | "hello".toUpperCase() → "HELLO" | 新字符串 |
toLowerCase() | 转为小写 | "HELLO".toLowerCase() → "hello" | 新字符串 |
trim() | 去除首尾空格（ES5） | " hello ".trim() → "hello" | 新字符串 |
startsWith(str) | 判断是否以某字符串开头（ES6） | "hello".startsWith("he") → true | 布尔值 |
endsWith(str) | 判断是否以某字符串结尾（ES6） | "hello".endsWith("lo") → true | 布尔值 |
padStart(length, padStr) | 头部填充字符串（ES2017） | "5".padStart(3, "0") → "005" | 新字符串 |
三、对象方法
| 方法 | 说明 | 示例 | 返回值 |
|---|---|---|---|
Object.keys(obj) | 获取对象所有键的数组 | Object.keys({a:1, b:2}) → ["a", "b"] | 数组 |
Object.values(obj) | 获取对象所有值的数组（ES2017） | Object.values({a:1, b:2}) → [1, 2] | 数组 |
Object.entries(obj) | 获取键值对数组（ES2017） | Object.entries({a:1}) → [["a", 1]] | 二维数组 |
Object.assign(target, ...sources) | 合并对象（浅拷贝） | Object.assign({a:1}, {b:2}) → {a:1, b:2} | 目标对象 |
obj.hasOwnProperty(key) | 判断是否为自身属性（非原型链） | {a:1}.hasOwnProperty("a") → true | 布尔值 |
四、函数与高阶方法
| 方法/语法 | 说明 | 示例 |
|---|---|---|
bind(thisArg, ...args) | 绑定 this 并返回新函数 | func.bind(obj) → 新函数 |
call(thisArg, ...args) | 立即调用函数并指定 this | func.call(obj, 1, 2) |
apply(thisArg, [args]) | 立即调用函数并指定 this（参数为数组） | func.apply(obj, [1, 2]) |
setTimeout(callback, delay) | 延迟执行函数（返回定时器ID） | setTimeout(() => {}, 1000) → ID |
setInterval(callback, delay) | 循环执行函数（返回定时器ID） | setInterval(() => {}, 1000) → ID |
五、ES6+ 新特性速查
| 特性 | 说明 | 示例 |
|---|---|---|
| 箭头函数 | 简化函数语法（无自身 this） | const sum = (a, b) => a + b; |
| 解构赋值 | 快速提取数据 | const { name } = user; |
| 模板字符串 | 支持多行和变量嵌入 | `Hello, ${name}!` |
展开运算符 ... | 展开数组或对象 | const arr = [...oldArr, 4]; |
可选链 ?. | 避免访问不存在的属性（ES2020） | user?.address?.city → 安全取值 |
空值合并 ?? | 提供默认值（ES2020） | const value = input ?? 'default'; |
六、实用代码片段
-
数组去重
const unique = [...new Set(arr)]; -
深拷贝对象
const deepCopy = JSON.parse(JSON.stringify(obj)); -
防抖函数（避免高频触发）
function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } -
节流函数（固定频率触发）
function throttle(fn, delay) { let lastTime = 0; return (...args) => { const now = Date.now(); if (now - lastTime >= delay) { fn(...args); lastTime = now; } }; }
七、注意事项
- 数组方法副作用：
push、pop、splice等会修改原数组，而map、filter、slice不会。 - 字符串不可变：所有字符串方法均返回新字符串，原字符串不变。
- 严格相等判断：优先使用
===避免类型转换错误。 - 闭包内存泄漏：避免在闭包中保留无用的大对象。
资源推荐：
- MDN JavaScript 文档
- 《JavaScript 权威指南》（犀牛书）
提示：多利用浏览器控制台（F12）测试代码片段，实践是掌握 JavaScript 的最佳路径！ 🚀
