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)

---

✅ 总结思路面试陈述建议

1. 按类型分类：Object → Array → String，条理清晰
2. 举常用场景：动态对象、数组去重、回文校验等
3. 说明原生 vs 可变 vs 不可变 ：如 splice vs toSpliced
4. 兼顾 ES6+ 新特性 ：如 .at()、.flatMap()、new Set()
5. 可补充性能/场景思考：如排序、数组遍历性能差异

---

这样结构化、实用性的分享方式，既展现了工具方法的掌握，也体现了你解决问题的思考力，一定能在面试中加分。如需进一步扩展到 Map/Set/Date/Promise 等，也欢迎继续聊 😊

---

下面是JavaScript 中 Object、Array、String 三个对象常用方法 的 逻辑关系图（Mermaid） 和一个总结表格，方便向面试官清晰、有条理地介绍：

---

flowchart LR A[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 核心思路 A B C end

---

📊 方法对比总结表

类别	方法举例	功能描述	注意点
Object	Object.keys() / values() / entries() { ...obj } 或 Object.assign() Object.freeze() obj[key] = value	属性遍历 浅拷贝/合并 不可变保护 动态键设置	展开仅浅拷贝；freeze 是浅层锁定
Array	.length、.at() push/pop/shift/unshift concat、.slice、.splice、.toSpliced() includes/indexOf、.find/findIndex map/filter/reduce forEach、.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 全局替换

---

🎯 面试介绍建议逻辑

1. 按类型展开：从 Object → Array → String，清晰分段。

2. 说明常见应用场景：

   • Object：配置合并、遍历属性、冻结对象；
   • Array：数据处理、去重、分页、排序、聚合；
   • String：输入校验、格式化、模板渲染。

3. 强调 ES6+ 新特性 ：如 at(), .flatMap(), .toSpliced() 等。

4. 区分可变／不可变方法：如 splice vs slice/toSpliced。

5. 补充性能／使用建议：如 map/filter 比 forEach 更具函数式；熟悉正则方法应对复杂场景。

---

这种图加表格式，既展示了你对 API 的系统梳理，也体现出你考虑面试表达的严谨性。希望对你面试展示有用！如需扩展 Map/Set/Promise 等模块，也可以继续。