JavaScript 中怎么用 forEach 遍历伪数组进行类型转换-js教程-PHP中文网

javascript中foreach不能直接用于伪数组，需通过array.prototype.foreach.call()借用、array.from()转换或扩展运算符[...pseudoarray]转为真数组后再遍历处理。

javascript 中怎么用 foreach 遍历伪数组进行类型转换

JavaScript 中 forEach 本身不能直接用于伪数组（如 arguments、NodeList、HTMLCollection），因为它们没有原生的 forEach 方法。但可以通过“借用”数组原型方法或先转为真数组，再进行遍历和类型转换。

用 `Array.prototype.forEach.call()` 借用方法

这是最轻量的方式，不创建新数组，适合只读或简单转换场景：

语法：Array.prototype.forEach.call(伪数组, 回调函数)
回调函数中可对每个元素做类型转换（如转数字、字符串等）
注意：不能修改伪数组本身（如 arguments 是只读的；NodeList 多数不可写），但可操作其元素值（比如设置 input.value）

示例：将 arguments 中所有参数转为数字

function sum() {
  let total = 0;
  Array.prototype.forEach.call(arguments, item => {
    total += Number(item); // 类型转换
  });
  return total;
}
sum('1', '2', '3'); // 6

用 `Array.from()` 转成真数组再遍历

更现代、语义清晰，支持映射转换，适合需要链式操作或批量类型处理的场景：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

Array.from(伪数组, mapFn) 可在转换同时完成类型映射
返回新数组，不影响原伪数组
兼容性好（ES6+，几乎所有现代浏览器和 Node.js 支持）

示例：将 DOM 中所有 input 的值转为整数

const inputs = document.querySelectorAll('input');
const numbers = Array.from(inputs, el => parseInt(el.value, 10));
// numbers 是一个纯数字数组

用扩展运算符 `[...伪数组]`（推荐日常使用）

简洁直观，本质同 Array.from，但更易读：

适用于可迭代的伪数组（NodeList、HTMLCollection 在现代环境基本都可迭代）
不支持老旧 IE，但可在 Babel 或现代项目中放心使用
配合 map() 可一步完成遍历 + 类型转换

示例：把类数组对象转为字符串数组

const args = { 0: 10, 1: 20, length: 2 }; // 简单类数组（非标准，仅示意）
// 需先确保有 Symbol.iterator 或用 Array.from 更稳妥
const strArr = [...arguments].map(String); // 在函数内使用 arguments

注意事项与避坑点

arguments 在箭头函数中不可用，需用普通函数
HTMLCollection（如 getElementsByClassName）某些旧版浏览器不支持扩展运算符或 forEach 借用，建议优先用 Array.from
类型转换时注意边界：如 parseInt('') 得 NaN，建议加默认值或校验
若需“边遍历边修改 DOM 元素”，借用 forEach 或扩展运算符均可，但避免在循环中增删节点（可能引发索引错乱）