在 JavaScript(包括 ES 规范)开发中,常用的方法可以按数组、对象、字符串、循环 / 迭代等类别整理

以下是高频使用的方法及说明

一、数组方法(最常用)

数组方法是处理集合数据的核心,多为高阶函数(接收函数作为参数)。

方法名 用途 示例
forEach 遍历数组,无返回值(仅执行回调) [1,2,3].forEach(x => console.log(x)) // 依次打印 1、2、3
map 遍历数组,返回新数组(每个元素为原元素经回调处理的结果) [1,2,3].map(x => x*2) // 结果:[2,4,6]
filter 筛选数组,返回新数组(包含所有满足回调条件的元素) [1,2,3,4].filter(x => x%2===0) // 结果:[2,4]
some 检测数组是否至少有一个元素满足回调条件,返回布尔值 [1,2,3].some(x => x>2) // 结果:true(3 满足)
every 检测数组是否所有元素都满足回调条件,返回布尔值 [1,2,3].every(x => x>0) // 结果:true(全部 > 0)
find 返回第一个满足条件 的元素(无则返回undefined [1,2,3,4].find(x => x>2) // 结果:3
findIndex 返回第一个满足条件 的元素的索引(无则返回-1 [1,2,3,4].findIndex(x => x>2) // 结果:2(3 的索引)
reduce 从左到右 "归约" 数组为单个值(可用于求和、合并、数组转对象等) [1,2,3].reduce((sum, x) => sum + x, 0) // 结果:6(求和)
reduceRight 从右到左归约数组(用法同reduce,方向相反) [1,2,3].reduceRight((sum, x) => sum + x, 0) // 结果:6
includes 检测数组是否包含某个值,返回布尔值(支持基本类型和NaN [1,2,3].includes(2) // 结果:true
indexOf 返回元素在数组中首次出现的索引 (无则返回-1,不支持NaN [1,2,3,2].indexOf(2) // 结果:1
lastIndexOf 返回元素在数组中最后出现的索引 (无则返回-1 [1,2,3,2].lastIndexOf(2) // 结果:3
push 向数组末尾添加元素,返回新长度(修改原数组) let arr = [1,2]; arr.push(3); //arr 变为[1,2,3]
pop 移除数组最后一个元素,返回被移除元素(修改原数组) let arr = [1,2,3]; arr.pop(); //arr 变为[1,2],返回3
shift 移除数组第一个元素,返回被移除元素(修改原数组) let arr = [1,2,3]; arr.shift(); //arr 变为[2,3],返回1
unshift 向数组开头添加元素,返回新长度(修改原数组) let arr = [2,3]; arr.unshift(1); //arr 变为[1,2,3]
slice 截取数组的一部分,返回新数组(不修改原数组,参数:start, end) [1,2,3,4].slice(1,3) // 结果:[2,3](从索引 1 到 2,不包含 3)
splice 新增 / 删除 / 替换数组元素,返回被删除元素组成的数组(修改原数组 let arr = [1,2,3]; arr.splice(1,1,4); //arr 变为[1,4,3],返回[2]
join 将数组元素拼接为字符串(参数为分隔符,默认逗号) [1,2,3].join('-') // 结果:"1-2-3"
concat 合并多个数组,返回新数组(不修改原数组) [1,2].concat([3,4]) // 结果:[1,2,3,4]
reverse 反转数组,返回反转后的数组(修改原数组 [1,2,3].reverse() // 结果:[3,2,1]
sort 对数组排序,返回排序后的数组(修改原数组,默认按字符串排序) [3,1,2].sort((a,b) => a - b) // 结果:[1,2,3](升序)
flat 扁平化数组(参数为深度,默认 1,Infinity表示完全扁平化) [1,[2,[3]]].flat(2) // 结果:[1,2,3]
flatMap 先执行map再执行flat(1)(更简洁的扁平化映射) [[1], [2]].flatMap(x => x) // 结果:[1,2]

二、对象方法

用于处理对象的属性、键值对操作。

方法名 用途 示例
for...in 遍历对象的可枚举属性 (包括继承的,需配合hasOwnProperty过滤) let obj = {a:1}; for(let key in obj) { console.log(key) } // 打印"a"
Object.keys() 返回对象自有可枚举键组成的数组 Object.keys({a:1, b:2}) // 结果:["a", "b"]
Object.values() 返回对象自有可枚举值组成的数组 Object.values({a:1, b:2}) // 结果:[1,2]
Object.entries() 返回对象自有可枚举键值对 组成的数组([key, value]形式) Object.entries({a:1}) // 结果:[["a", 1]]
Object.assign() 将源对象的属性复制到目标对象(浅拷贝,返回目标对象) Object.assign({a:1}, {b:2}) // 结果:{a:1, b:2}
Object.hasOwn() 检查对象是否有自有属性 (替代obj.hasOwnProperty(key) Object.hasOwn({a:1}, 'a') // 结果:true
Object.freeze() 冻结对象(无法新增 / 删除 / 修改属性,返回冻结后的对象) let obj = {a:1}; Object.freeze(obj); obj.a=2; //obj 仍为{a:1}

三、字符串方法

用于字符串处理(字符串是类数组,部分方法与数组类似)。

方法名 用途 示例
includes() 检测字符串是否包含子串,返回布尔值 "abc".includes("b") // 结果:true
indexOf() 返回子串首次出现的索引 (无则返回-1 "abcab".indexOf("ab") // 结果:0
lastIndexOf() 返回子串最后出现的索引 (无则返回-1 "abcab".lastIndexOf("ab") // 结果:3
slice() 截取子串,返回新字符串(参数:start, end,支持负数) "abcde".slice(1,3) // 结果:"bc"
split() 将字符串按分隔符分割为数组 "a,b,c".split(",") // 结果:["a","b","c"]
trim() 去除字符串首尾空格,返回新字符串 " abc ".trim() // 结果:"abc"
trimStart()/trimLeft() 去除字符串开头空格 " abc".trimStart() // 结果:"abc"
trimEnd()/trimRight() 去除字符串结尾空格 "abc ".trimEnd() // 结果:"abc"
toUpperCase() 转为大写字符串 "abc".toUpperCase() // 结果:"ABC"
toLowerCase() 转为小写字符串 "ABC".toLowerCase() // 结果:"abc"
startsWith() 检测字符串是否以子串开头,返回布尔值(支持第二个参数指定起始位置) "abc".startsWith("ab") // 结果:true
endsWith() 检测字符串是否以子串结尾,返回布尔值(支持第二个参数指定长度) "abc".endsWith("bc") // 结果:true
replace() 替换第一个匹配的子串(支持正则) "abcab".replace("ab", "x") // 结果:"xcbab"
replaceAll() 替换所有匹配的子串(支持正则) "abcab".replaceAll("ab", "x") // 结果:"xcb x"(实际无空格)
padStart() 按指定长度在字符串开头补全字符(默认补空格) "1".padStart(2, "0") // 结果:"01"
padEnd() 按指定长度在字符串结尾补全字符 "1".padEnd(2, "0") // 结果:"10"

四、其他常用方法 / 语法

  • for...of :遍历可迭代对象 (数组、字符串、Map、Set 等)的 value(替代forEach,支持break)例:for (let num of [1,2,3]) { console.log(num) } // 打印 1、2、3
  • JSON.parse()/JSON.stringify() :JSON 字符串与 JS 对象互转例:JSON.parse('{"a":1}') // 结果:{a:1}JSON.stringify({a:1}) // 结果:'{"a":1}'
  • Array.from() :将类数组(如arguments、DOM 集合)或可迭代对象转为数组例:Array.from("abc") // 结果:["a","b","c"]
  • Array.of() :创建数组(解决new Array(3)创建长度为 3 的空数组的问题)例:Array.of(1,2,3) // 结果:[1,2,3]
  • 类型判断typeof(基础类型)、instanceof(引用类型)、Object.prototype.toString.call()(更准确)例:typeof 123 // "number"[].toString.call([]) // "[object Array]"

这些方法覆盖了日常开发中数据处理、遍历、转换等核心场景,熟练掌握可大幅提升效率。

相关推荐
w***37511 小时前
SpringMVC 请求参数接收
前端·javascript·算法
flashlight_hi2 小时前
LeetCode 分类刷题:112. 路径总和
javascript·算法·leetcode
爱吃香蕉的阿豪2 小时前
.NET 10正式发布:三年LTS加持,性能与AI开发双重革命
前端·javascript·vue.js
Hilaku2 小时前
🎉 Ant Design 6.0 来了!这一次它终于想通了什么?
前端·javascript·ant design
三小河2 小时前
React 自定义 Hook:能否作为模块级全局状态管理?
前端·javascript
哟哟耶耶2 小时前
ts-属性修饰符,接口(约束数据结构),抽象类(约束与复用逻辑)
开发语言·前端·javascript
三小河2 小时前
Vue3 组合式函数:能否作为模块级全局状态管理?
前端·javascript
6***x5452 小时前
TypeScript在全栈开发中的使用
前端·javascript·typescript