Question

文档：https://developer.mozilla.org/en-US/docs/Web/API/FileList

为什么FileList是一个对象而不是一个数组？它唯一的属性是.length，它唯一的方法是.item()，这是多余的（fileList[0] === fileList.item(0)）。

Answer 1

嗯，可能有几个原因。首先，如果它是一个数组，你可以修改它。您无法修改FileList实例。其次但是相关的，它可能（可能是）浏览器数据结构的视图，因此最小的功能集使实现更容易提供它。

2018年更新：有趣的是，the spec在FileList上有注释：

FileList接口应被视为“有风险”，因为Web平台的一般趋势是用ECMAScript [ECMA-262]中的Array平台对象替换此类接口。特别是，这意味着排序filelist.item(0)的语法存在风险; FileList的大多数其他程序化使用不太可能受最终迁移到Array类型的影响。

（我觉得很奇怪，我认为趋势是iterable，而不是Array - 例如NodeList的更新标记为iterable兼容性使用扩展语法for-of和forEach。）

您还可以通过Array.from(theFileList)将其转换为数组。

Answer 2

使用es6，我们现在可以

const files = [...filesList]

例如，如果你想map超过这些

，则很有用

Answer 3

如果要在FileList上使用数组方法，请尝试apply

例如：

Array.prototype.every.call(YourFileList, file => { ... })

如果你想使用每一个

Answer 4

我认为它是一个自己的数据类型，因为面向对象编程在定义时比功能编程更重要。但现代Javascript提供了将数组类型转换为数组的功能。

例如Tim描述的： const files = [...filesList]

使用ES6迭代FileList的另一种方法是Array.from（）方法。

const fileListAsArray = Array.from(fileList)

IMO比扩展运算符更易读。但另一方面，更长的代码：）

Answer 5

这里有几个polyfill，它们向toObject()添加了File函数，并向toArray()添加了FileList函数：

File.prototype.toObject = function () {
  return Object({
    lastModified: parseInt(this.lastModified),
    lastModifiedDate: String(this.lastModifiedDate),
    name: String(this.name),
    size: parseInt(this.size),
    type: String(this.type)
  })
}

FileList.prototype.toArray = function () {
  return Array.from(this).map(function (file) {
    return file.toObject()
  })
}

var files = document.getElementById('file-upload').files
var fileObject = files[0].toObject()
var filesArray = files.toArray()

为什么FileList对象不是数组？

5 个答案: