FileList 对象总结（附：不支持迭代的类数组对象表）

FileList 对象总结

核心特性

• 类数组结构 ：具有 length 属性和数字索引

• 只读的 ：你不能直接修改 FileList 的内容（不能添加、删除或替换文件）

• 不可迭代 ：大多数环境下没有 [Symbol.iterator] 方法

---

属性 (Properties)

属性	类型	描述	示例
length	number	返回 FileList 中包含的文件数量。这是最重要的属性。	fileList.length

方法 (Methods)

方法	返回值	描述	示例
item(index)	File 或 null	返回指定索引处的 File 对象，如果索引超出范围则返回 null。	fileList.item(0)
[index] (索引访问)	File 或 undefined	通过数组索引语法访问文件。这不是方法，而是类数组的特性。	fileList[0]

---

FileList 对象 (非常重要且常见)

这是前端开发中处理文件上传时经常遇到的一个坑。

<input type="file" id="fileInput" multiple>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const fileList = this.files; // 这是一个 FileList 对象
  
  console.log(fileList); // FileList {0: File, 1: File, length: 2}
  console.log(Array.isArray(fileList)); // false
  
  // ✅ 安全的方式：使用 Array.from()
  const fileArray1 = Array.from(fileList);
  console.log(fileArray1); // [File, File] (真正的数组)
  
  // ❌ 危险！FileList 没有迭代器，会报错
  try {
    const fileArray2 = [...fileList];
    console.log(fileArray2);
  } catch (e) {
    console.log('Error:', e.message); // fileList is not iterable
  }
  
  // 验证
  console.log(typeof fileList[Symbol.iterator]); // "undefined"
});
</script>

---

完整示例演示

<input type="file" id="fileInput" multiple>
<button onclick="analyzeFiles()">分析文件</button>

<script>
//完整示例演示
function analyzeFiles() {
  const fileInput = document.getElementById('fileInput');
  const fileList = fileInput.files; // 获取 FileList 对象
  
  console.log('=== FileList 属性与方法演示 ===');
  
  // 1. 访问 length 属性
  console.log(`文件数量: ${fileList.length}`);
  
  if (fileList.length === 0) {
    console.log('请先选择文件');
    return;
  }
  
  // 2. 遍历 FileList 的几种方式
  console.log('\n--- 遍历文件 ---');
  
  // 方式1: 传统的 for 循环 (最安全)
  console.log('for 循环:');
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i]; // 索引访问
    console.log(`  ${i + 1}. ${file.name} (${file.type})`);
  }
  
  // 方式2: 使用 item() 方法
  console.log('\n使用 item() 方法:');
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList.item(i); // item() 方法访问
    console.log(`  ${i + 1}. ${file.name} (${(file.size / 1024).toFixed(2)} KB)`);
  }
  
  // 方式3: 转换为数组后再处理 (推荐)
  console.log('\n转换为数组处理:');
  const fileArray = Array.from(fileList);
  fileArray.forEach((file, index) => {
    console.log(`  ${index + 1}. ${file.name}`);
  });
  
  // 3. 访问边界情况
  console.log('\n--- 边界情况测试 ---');
  console.log('访问越界索引 fileList[999]:', fileList[999]); // undefined
  console.log('访问越界索引 fileList.item(999):', fileList.item(999)); // null
  
  // 4. 检查迭代器支持
  console.log('\n--- 迭代器支持检查 ---');
  console.log('是否有 Symbol.iterator:', typeof fileList[Symbol.iterator]);
  console.log('是否是数组:', Array.isArray(fileList));
  
  // 5. 尝试扩展运算符 (通常会失败)
  try {
    const spreadArray = [...fileList];
    console.log('扩展运算符成功:', spreadArray);
  } catch (e) {
    console.log('扩展运算符失败:', e.message);
  }
}
</script>

---

实际应用场景

1. 文件上传前验证

function validateFiles(fileList) {
  const maxSize = 5 * 1024 * 1024; // 5MB
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];
    
    // 检查文件大小
    if (file.size > maxSize) {
      alert(`文件 ${file.name} 太大，请选择小于 5MB 的文件`);
      return false;
    }
    
    // 检查文件类型
    if (!allowedTypes.includes(file.type)) {
      alert(`文件 ${file.name} 类型不支持`);
      return false;
    }
  }
  return true;
}
2. 多文件信息统计
function getFilesSummary(fileList) {
  let totalSize = 0;
  const typeCount = {};
  
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];
    totalSize += file.size;
    typeCount[file.type] = (typeCount[file.type] || 0) + 1;
  }
  
  return {
    fileCount: fileList.length,
    totalSize: totalSize,
    typeCount: typeCount
  };
}

重要注意事项

1. 不可变性 ：FileList 是只读的，你不能直接修改它

   // 这些操作都会失败或没有效果
   fileList.push(new File()); // TypeError
   fileList[0] = anotherFile; // 静默失败
   delete fileList[0]; // 静默失败

2. 转换为数组 ：处理 FileList 的最佳实践是先转换为数组

   // 推荐做法
   const filesArray = Array.from(fileList);
   // 或者
   const filesArray = [...fileList]; // 在支持迭代的环境下
   
   // 然后就可以使用所有数组方法
   const imageFiles = filesArray.filter(file => file.type.startsWith('image/'));

3. 来源 ：FileList 通常来自：

   • <input type="file"> 元素的 files 属性

   • 拖放操作的 DataTransfer.files

   • 剪贴板操作的 ClipboardEvent.clipboardData.files

---

浏览器兼容性

• 所有属性方法：在现代浏览器中完全支持

• 迭代器支持 ：部分现代浏览器可能为 FileList 添加了迭代器支持，但不应依赖于此

总之，FileList 是一个简单但重要的类数组对象，主要用途是提供对用户选择文件的访问，核心就是 length 属性和索引访问能力。

---

不支持 [Symbol.iterator] 的类数组对象

核心特征： 这些对象具有 length 属性和数字索引，但没有实现迭代器协议 ，因此无法使用扩展运算符 (...)。

类数组对象	说明	示例
纯自定义类数组对象	最常见的例子，手动创建的对象字面量。	{0: 'a', 1: 'b', length: 2}
函数内部的 arguments 对象 (部分环境)	尤其在 ES5 环境、严格模式或某些转换配置下可能不可迭代。	function fn() { console.log(...arguments) } 可能报错
HTMLCollection (部分环境)	由 getElementsByTagName、getElementsByClassName 等老式 DOM API 返回。在现代浏览器中大多已可迭代，但历史兼容性差，不应依赖。	document.getElementsByTagName('div')
老式 NodeList (极老环境)	如 IE11 及更早版本中的 NodeList。所有现代浏览器都已为其添加迭代器。	document.querySelectorAll('div') (在 IE11-)
FileList 对象	由 <input type="file"> 元素的 files 属性返回。这是一个关键且常见的不可迭代例子！	document.getElementById('fileInput').files
字符串的字符索引对象	如果你通过 Object.assign 或类似方法将一个字符串的属性复制到一个普通对象。	Object.assign({length: 5}, 'hello')