JavaScript 中Object、Array 和 String的常用方法
下面是面试中向前端面试官介绍 JavaScript 中 Object、Array 和 String 的常用方法，按逻辑分组展示，以展现你对标准库的熟练掌握与思考能力。
🗂️ 1. Object 常用方法
a. 结构与遍历
Object.keys(obj)→ 返回属性名数组Object.values(obj)→ 返回属性值数组Object.entries(obj)→ 返回[key, value]键值对二元数组Object.hasOwnProperty(prop)→ 检查是否自身属性，过滤原型链属性 (FreeCodeCamp)
const user = { name: "Alice", age: 25 };
console.log(Object.keys(user)); // ["name", "age"]
console.log(Object.entries(user)); // [["name","Alice"], ["age",25]]
b. 拷贝、冻结与类型判断
{ ...obj }或Object.assign({}, obj)深拷贝顶层属性Object.freeze(obj)+Object.isFrozen(obj)防止修改 (FreeCodeCamp)
const copy = { ...user };
Object.freeze(copy);
console.log(Object.isFrozen(copy)); // true
c. 动态操作
obj[key] = value用于动态设置属性键名 (GeeksforGeeks)
const dynamic = {};
const k = "score";
dynamic[k] = 42;
🔢 2. Array 常用方法
按用途可划分如下：
a. 访问与基本转换
.length→ 数组长度.at(index)→ 支持负数索引（ES2022） (Medium)
const arr = [10,20,30];
console.log(arr.at(-1)); // 30
b. 增删元素
.push(),.pop()操作尾部元素.unshift(),.shift()操作头部元素 (W3Schools)
c. 拼接与切片
.concat()合并数组.slice()提取子数组，不修改原数组.splice()在原数组插入或删除元素.toSpliced()（ES2023）：返回新数组不破坏原数组 (W3Schools)
d. 搜索定位
.indexOf(),.lastIndexOf()查找元素索引.includes()检查是否存在.find(),.findIndex()支持回调函数条件 (W3Schools)
e. 映射、过滤、归约
.map(fn)→ 新数组，每项为 fn 返回值.filter(fn)→ 新数组，保留 fn 为真的项.reduce(fn, init)→ 累计单值 (Medium, DEV Community)
f. 迭代与遍历
.forEach(fn)→ 遍历每个元素执行 fn.values(),.entries(),.keys()返回遍历器对象 (Medium)
g. 排序、反转、扁平化
.sort()默认按照字符串排序，自定义 fn 可按需排序.reverse()反转数组.flat(depth),.flatMap(fn)用于数组扁平化 (W3Schools)
✍️ 3. String 常用方法
.length→ 字符串长度.charAt(index)或属性访问符[index]获取字符 (维基百科, 维基百科).toLowerCase(),.toUpperCase()转换大小写.trim(),.padStart(),.padEnd()去除空格或填充.includes(sub),.indexOf(sub),.lastIndexOf()查找子串.slice(start, end),.substring(start, end)提取子串.split(delimiter)转为数组.replace(pattern, repl)替换.match(regex),.search(regex)正则功能
const s = " Hello ";
console.log(s.trim().toUpperCase()); // "HELLO"
🎯 拓展：实用面试问答技巧
- Array 去重：
[...new Set(arr)]或filter/indexOf(DEV Community, 维基百科) - 判断回文：
str === str.split('').reverse().join('')(DEV Community) - Swap 无临时变量：
[a, b] = [b, a](DEV Community)
✅ 总结思路面试陈述建议
- 按类型分类：Object → Array → String，条理清晰
- 举常用场景：动态对象、数组去重、回文校验等
- 说明原生 vs 可变 vs 不可变：如
splicevstoSpliced - 兼顾 ES6+ 新特性：如
.at()、.flatMap()、new Set() - 可补充性能/场景思考：如排序、数组遍历性能差异
这样结构化、实用性的分享方式，既展现了工具方法的掌握，也体现了你解决问题的思考力，一定能在面试中加分。如需进一步扩展到 Map/Set/Date/Promise 等，也欢迎继续聊 😊
下面是JavaScript 中 Object、Array、String 三个对象常用方法的 逻辑关系图（Mermaid） 和一个总结表格，方便向面试官清晰、有条理地介绍：
flowchart LRA[Object 方法] --> A1[Object.keys/values/entries]A --> A2[Object.assign / 展开运算]A --> A3[Object.freeze / isFrozen]A --> A4[动态属性 obj[key]]B[Array 方法] --> B1[访问 length, at()]B --> B2[增删 push, pop, shift, unshift]B --> B3[拼接切片 concat, slice, splice, toSpliced]B --> B4[搜索 includes, indexOf, find, findIndex]B --> B5[映射过滤 map, filter, reduce]B --> B6[遍历 forEach, keys/values/entries]B --> B7[排序 & 重构 sort, reverse, flat, flatMap]C[String 方法] --> C1[大小写转换 toLowerCase/UpperCase]C --> C2[裁剪 trim, padStart/ padEnd]C --> C3[查找 includes, indexOf, lastIndexOf]C --> C4[截取 slice, substring]C --> C5[替换 replace, 正则 match/search]C --> C6[分割 split]subgraph 核心思路ABCend
📊 方法对比总结表
| 类别 | 方法举例 | 功能描述 | 注意点 |
|---|---|---|---|
| Object | Object.keys() / values() / entries(){ ...obj } 或 Object.assign()Object.freeze()obj[key] = value | 属性遍历 浅拷贝/合并 不可变保护 动态键设置 | 展开仅浅拷贝；freeze 是浅层锁定 |
| Array | .length、.at()push/pop/shift/unshiftconcat、.slice、.splice、.toSpliced()includes/indexOf、.find/findIndexmap/filter/reduceforEach、.values() 等sort/reverse/flat/flatMap | 长度与索引访问 增删元素 拼接或提取 搜索定位 遍历与条件处理 映射/筛选/归约 排序/扁平化 | splice 改原数组，toSpliced 返回新数组；sort 需注意默认字符串排序 |
| String | .length、charAt()toLowerCase()/toUpperCase()trim()、padStart()、padEnd()includes/indexOf、lastIndexOf()slice()、substring()replace()、正则 .match() / .search().split() | 长度与字符访问 大小写转换 首尾操作 子串查找 子串提取 替换/正则匹配 字符串分割 | replace 默认只替换首个，可用正则 /g 全局替换 |
🎯 面试介绍建议逻辑
-
按类型展开：从 Object → Array → String，清晰分段。
-
说明常见应用场景：
- Object：配置合并、遍历属性、冻结对象；
- Array：数据处理、去重、分页、排序、聚合；
- String：输入校验、格式化、模板渲染。
-
强调 ES6+ 新特性：如
at(),.flatMap(),.toSpliced()等。 -
区分可变／不可变方法：如 splice vs slice/toSpliced。
-
补充性能／使用建议：如 map/filter 比 forEach 更具函数式；熟悉正则方法应对复杂场景。
这种图加表格式，既展示了你对 API 的系统梳理，也体现出你考虑面试表达的严谨性。希望对你面试展示有用！如需扩展 Map/Set/Promise 等模块，也可以继续。