js字符串二进制"101"怎么转数字数组

一、为什么是 [1, 0, 1] 而不是单独一个数字 5？

在处理二进制相关需求时，许多开发者容易将两类任务混淆：

• 二进制整体求值：把 "101" 视为一个完整的二进制数值，求其对应的十进制整数，即 parseInt("101", 2)，结果是十进制的 5。
• 按位拆解为数字数组：把字符串中的每一位（bit）独立提取出来，分别转为数字类型，组成 [1, 0, 1]。这常用于位掩码分析、布尔开关解析、通信协议校验码计算或 Canvas 像素位图处理。

本文的核心任务就是解决第二类需求：将由字符 '1' 和 '0' 组成的字符串，转换成每个元素均为 Number 类型的数组。

二、最推荐的标准解法：Array.from() 一步到位

Array.from() 是 ES6 引入的静态方法，能够将类数组对象或可迭代对象（字符串天然具备可迭代性）浅复制为一个新的数组实例。

很多人只用过它的单参数形式，但 Array.from(items, mapFn) 实际上原生支持第二个可选参数 mapFn。这个回调函数会在创建数组时，直接对每一个元素执行映射处理，省去先转数组再 .map() 的中间开销。

完整代码示例

const binStr = "101";

// 推荐解法：第二个参数直接传入 Number 构造函数
const numArr = Array.from(binStr, Number);

console.log(numArr); 
// 示例输出: [1, 0, 1]
console.log(typeof numArr[0]); 
// 示例输出: "number"

正如上图所示，Array.from(binStr, Number) 内部直接驱动迭代器读取 '1'、'0'、'1'，并把每个字符依次交给 Number() 处理，一次性完成内存分配与转换，是兼具语义化与运行性能的最优写法。

三、其他常见解法及其代码对比

除了 Array.from() 之外，在实际项目中经常会见到基于扩展运算符或 split 的写法。它们同样能够达成目标，但在执行流程和中间消耗上存在细微差别。

1. 扩展运算符（Spread Syntax）配合 map

利用 ES6 的 [...str] 语法将字符串打散成字符数组，随后通过 .map() 转换：

const binStr = "101";

// 方式 A：map 配合 Number
const resA = [...binStr].map(Number);

// 方式 B：map 配合一元正号 + 运算符（隐式转换）
const resB = [...binStr].map(char => +char);

console.log(resA); // 示例输出: [1, 0, 1]
console.log(resB); // 示例输出: [1, 0, 1]

这种写法的优点是视觉上直观清晰，适合现代前端代码风格；不足之处是会先生成一个临时的字符数组 ["1", "0", "1"]，接着通过 map 产生第二个数组。

2. 传统的 split('') 配合 map

在 ES6 普及之前，最经典的字符串拆分手段就是 String.prototype.split('')：

const binStr = "101";
const res = binStr.split("").map(Number);

console.log(res); // 示例输出: [1, 0, 1]

该方法在老旧运行环境中兼容性极好，但其底层同样经历了“分配字符串数组 -> 遍历构建数字数组”的双重步骤。

四、经典避坑：千万不要直接传入 parseInt

在写数组映射时，很多开发者习惯性地把 parseInt 作为回调传递，例如："101".split('').map(parseInt)。如果你在控制台执行这段代码，会得到一个令人意想不到的输出：

// ⚠️ 危险代码：千万不要这么写！
const wrongResult = "101".split("").map(parseInt);

console.log(wrongResult); 
// 示例输出: [1, NaN, 1]  <-- 中间变成了 NaN！

为什么 "0" 没有转成数字 0，反而变成了 NaN？

原因在于 Array.prototype.map 在调用回调函数时，会默认传递三个参数：(item, index, array)。而 parseInt(string, radix) 的第二个参数恰好是进制基数（radix）。

• 处理第 0 位 '1'：传入 item = '1', index = 0。执行 parseInt('1', 0)。在 JavaScript 规范中，当基数为 0 时，会自动按十进制解析，因此结果为 1。
• 处理第 1 位 '0'：传入 item = '0', index = 1。执行 parseInt('0', 1)。由于数学上根本不存在 1 进制（进制基数合法区间为 2 到 36），解析器判定为非法进制，直接返回 NaN。
• 处理第 2 位 '1'：传入 item = '1', index = 2。执行 parseInt('1', 2)。基数为 2，按二进制解析 '1'，巧合地返回了 1。

五、边界情况与数据合法性校验

在实际生产环境中，输入的二进制字符串可能来自用户表单、外部接口或硬件上报，往往存在脏数据或空值。必须进行必要的容错防御。

1. 空字符串处理

const empty = "";
console.log(Array.from(empty, Number)); 
// 示例输出: [] （符合预期的空数组）

2. 混入非二进制字符的防范

如果字符串中夹杂空格、字母或大于 1 的数字（如 "10a1" 或 "102"），Number('a') 将产生 NaN，而 Number('2') 会变成 2，破坏了二进制的纯洁性。可以通过正则表达式在转换前做严格判定：

function parseBinaryString(binStr) {
  // 校验是否仅包含 0 和 1，且至少有 1 位
  if (!/^[01]+$/.test(binStr)) {
    throw new Error(`输入格式错误: "${binStr}" 不是有效的二进制字符串`);
  }
  return Array.from(binStr, Number);
}

// 正常调用
console.log(parseBinaryString("101")); 
// 示例输出: [1, 0, 1]

// 非法调用时触发防护
// parseBinaryString("102") -> 抛出 Error

六、高性能场景：大数据量下的极速转换

如果你处理的不是 "101" 这种只有 3 位的简短标识，而是长达几十万位、上百万位的二进制数据流（例如 Canvas 二值化位图掩码、文件校验码流），普通数组方法可能会造成明显的 GC（垃圾回收）压力。

在这种极端性能场景下，可以采用 Uint8Array 结合 ASCII 字符码偏移来达到极致性能：

function fastBinaryStringToTypedArray(str) {
  const len = str.length;
  // 分配连续的 8 位无符号整型内存
  const result = new Uint8Array(len);
  
  for (let i = 0; i < len; i++) {
    // 字符 '0' 的 ASCII 码是 48，'1' 是 49
    // 减去 48 即可直接得到 0 或 1，无类型转换函数调用开销
    result[i] = str.charCodeAt(i) - 48;
  }
  return result;
}

const fastArr = fastBinaryStringToTypedArray("101");
console.log(fastArr); 
// 示例输出: Uint8Array(3) [1, 0, 1]

通过 str.charCodeAt(i) - 48，避免了任何字符串对象的创建以及 V8 引擎对字符串与数字的隐式转换判定，对于大字符串来说吞吐速度可以提高 10 倍以上。

七、总结与选型参考

将二进制字符串 "101" 转换为数字数组 [1, 0, 1] 有多种途径，针对不同场景选择最匹配的技术方案即可：

在绝大多数日常前端开发中，牢记 Array.from("101", Number) 即可从容、规范地应对所有类似的数据转换需求。