為什么 FileList 對象不是數組？

Question

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

為什么FileList是一個對象而不是一個數組？ 它擁有的唯一屬性是.length並且它擁有的唯一方法是.item() ，這是多余的（ fileList[0] === fileList.item(0) ）。

Answer 1

嗯，可能有幾個原因。 一方面，如果它是一個數組，你可以修改它。 您不能修改FileList實例。 其次但相關，它可能（可能是）瀏覽器數據結構的視圖，因此最小的功能集使實現更容易提供它。

您可以通過a = Array.from(theFileList) （這是一種 ES2015 方法，但對它進行 polyfill）或通過a = Array.prototype.slice.call(theFileList)將其轉換為數組。

2018 年更新：不過，有趣的是，規范在FileList上有一個注釋：

FileList接口應該被視為“有風險”，因為 Web 平台的總體趨勢是用 ECMAScript [ECMA-262] 中的Array平台對象替換此類接口。 特別是，這意味着排序filelist.item(0)語法存在風險； FileList大多數其他編程使用不太可能受到最終遷移到Array類型的影響。

我覺得那張紙條很奇怪。 我認為趨勢是iterable ，而不是Array — 例如更新NodeList將其標記為iterable以兼容擴展語法for-of和forEach 。

Answer 2

有了es6，我們現在可以

const files = [...filesList]

很有用，例如，如果您想map這些

Answer 3

我認為它是它自己的數據類型，因為面向對象編程在定義時比函數式編程更重要。 現代 Javascript 提供了將類數組數據類型轉換為數組的功能。

例如，像 Tim 描述的那樣： const files = [...filesList]

另一種使用 ES6 迭代 FileList 的方法是 Array.from() 方法。

const fileListAsArray = Array.from(fileList)

IMO 它比擴展運算符更具可讀性，但另一方面它的代碼更長:)

Answer 4

如果您想在 FileList 上使用數組方法，請嘗試apply

例如：

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

如果你想使用每個

Answer 5

這里有幾個toObject()向File添加了一個toObject()函數，向FileList添加了一個toArray()函數：

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()

Answer 6

似乎擴展運算符[...yourFileList]比Array.from(yourFileList)性能更高。 https://stackoverflow.com/a/63818423/971695