js字符串怎么转数组Object.keys方法

导读图：使用 Object.keys 对 JavaScript 原生字符串进行解构与转换路径

一、Object.keys 处理字符串的直接结果是什么？

在 ECMAScript 规范中，Object.keys() 方法用于返回一个由指定对象自身所有可枚举属性键（Property Keys）组成的数组。许多初学者尝试编写 Object.keys("hello")，期待能够直接输出 ['h', 'e', 'l', 'l', 'o']，但控制台实际打印的结果却截然不同。

我们可以直接在浏览器控制台或 Node.js 环境中执行以下代码观察真实输出：

// 定义待转换的原始字符串
const str = "hello";

// 调用 Object.keys 方法
const keys = Object.keys(str);

console.log(keys);
// 示例输出：
// [ "0", "1", "2", "3", "4" ]

可以看到，返回的结果是一个元素为字符串类型的索引数组，而不是字符内容本身。数组中的每个元素分别对应字符串中每个字符从 0 开始的位置下标。

二、底层原理：为什么 Object.keys 能处理基本类型字符串？

"hello" 是 JavaScript 的基本数据类型（Primitive），并不属于普通的对象字面量。为什么 Object.keys() 接收字符串时不会报错，并且能够提取出数字下标呢？这里涉及到 JavaScript 引擎的自动装箱（Auto-boxing）机制。

图 1：String 包装对象与 Object.keys 属性过滤原理

当我们将原始字符串传入 Object.keys(str) 时，引擎在内部会按以下规则运转：

1. ES6+ 规范的自动转换（ToObject）：在 ES5 规范中，如果向 Object.keys() 传入非对象参数，会抛出 TypeError；但在 ES2015（ES6）及以后的标准中，非对象参数会被内部抽象操作 ToObject() 强制装箱为对应的包装对象 new String("hello")。
2. 字符串包装对象的属性存储：包装后的 String 实例会将每一个字符按位置索引存储在内部字典中，例如 { "0": "h", "1": "e", "2": "l", "3": "l", "4": "o" }。这些索引属性的属性描述符为 enumerable: true（可枚举）。
3. length 属性为何不在其中：String 实例同时自带 length 属性（值为 5），但 length 的属性描述符被设定为 enumerable: false（不可枚举）。因此 Object.keys() 只会采集 ["0", "1", "2", "3", "4"]，自动过滤掉了 length。

三、实现步骤：怎么用 Object.keys 将字符串转为字符数组？

明确了 Object.keys(str) 返回的是索引字符串数组之后，要完成“字符串转字符数组”的目标，我们需要基于获取到的索引列表进行一步值映射（Value Mapping）。

图 2：使用 Object.keys 完成字符串转字符数组的标准操作流程

完整操作代码示例

// 步骤 1：准备输入源字符串
const sourceStr = "frontend";

// 步骤 2：使用 Object.keys 提取字符位置索引
const indices = Object.keys(sourceStr);
console.log("索引数组：", indices);
// 示例输出：索引数组： [ "0", "1", "2", "3", "4", "5", "6", "7" ]

// 步骤 3：利用 map 依据索引提取对应字符
const charArray = indices.map(i => sourceStr[i]);
console.log("字符数组：", charArray);
// 示例输出：字符数组： [ 'f', 'r', 'o', 'n', 't', 'e', 'n', 'd' ]

一行代码简洁封装

在实际项目中，如果不希望声明中间变量，可以将提取与映射串联为单行表达式：

const strToChars = str => Object.keys(str).map(i => str[i]);

console.log(strToChars("vue"));
// 示例输出：[ 'v', 'u', 'e' ]

四、方案对比：Object.keys 与常用字符串转数组方式

在日常开发中，将字符串转为数组的方法有多种。了解各方案的底层机制差异，有助于在特定业务场景下做出正确的选型。

图 3：四种 JavaScript 字符串转数组方案特性多维横向对比

五、注意事项与常见疑问

1. 为什么 Object.keys 返回的索引是字符串而不是数字？

根据 ECMAScript 对象规范，普通 JavaScript 对象的所有属性键（Keys）只有两种类型：String 和 Symbol。当字符串包装对象按下标存储属性时，属性键内部本质上是 "0"、"1"、"2" 这类字符串，因此 Object.keys() 返回的数组元素统一为字符串。

如果你需要纯数字类型的索引数组，需要显式将它们转为数字：

const numericIndices = Object.keys("cat").map(Number);
console.log(numericIndices);
// 示例输出：[ 0, 1, 2 ]

2. 处理包含 Emoji 等特殊字符时的表现

JavaScript 内部字符串使用 UTF-16 编码存储。常见字符占用 2 个字节（1 个代码单元），而某些 Emoji、特殊符号或冷僻字占用 4 个字节（由 2 个代理对组成）。

因为 Object.keys() 是按底层存储的代码单元生成索引的，所以在处理 4 字节 Emoji 时，它会将一个表情符号当成两个独立的索引来处理：

const emojiStr = "A😊B";

// Object.keys 获取索引
console.log(Object.keys(emojiStr));
// 示例输出：[ "0", "1", "2", "3" ] （😊 占据了索引 1 和 2）

// 如果直接使用展开语法 [...str]
console.log([...emojiStr]);
// 示例输出：[ 'A', '😊', 'B' ] （按完整码点解析）

避坑建议：如果你的业务场景涉及用户输入的昵称、留言、Emoji 表情或国际化多语言字符，建议优先使用 [...str] 或 Array.from(str) 进行字符拆分，避免因代码单元截断造成乱码。

六、选型总结与决策指南

综合全文分析，Object.keys 用于字符串转数组并不是最简短的方法，但它非常直接地揭示了 JavaScript 字符串作为类数组对象（Array-like Object）的内在属性机制。

图 4：字符串转数组方法选型与决策路径图

• 如果你需要获取所有字符的位置下标数组：优先使用 Object.keys(str)，一步直接得到索引集合。
• 如果你需要键值对应的二元组数组：使用 Object.entries(str)，可直接遍历 [索引, 字符]。
• 如果你只需要提取字符并保持简单：在 ES6+ 环境下推荐使用 [...str] 或 Array.from(str)。
• 如果你希望完全利用 Object 静态方法获取字符：直接使用 Object.values(str) 即可一步到位。