JavaScript 常用方法速查表-victorBlog

文章摘要

LIK.CC-GPT

JavaScript 常用方法速查表，涵盖核心语法、ES6+ 新特性及高频使用场景，便于快速查阅和复习：一、数组方法方法说明示例返回值/副作用 push(...items) 末尾添加元素 arr.push(4) → 修改原数组返回新数组长度 pop() 删除末尾元素 arr.

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 的最佳路径！ 🚀

目录CONTENT

JavaScript 常用方法速查表