javascript - 如何使用扩展运算符和映射推送到数组？

Question

我需要推送用户在<input name="PostFiles" ref="PostFiles" multiple type="file"/>元素中选择的新文件以及每个文件的一些元数据。

这就是我想出的：

const PostFiles = this.$refs.PostFiles.files;
this.Form.Files.push(...PostFiles).map(file => {
                        return [
                            file, {
                                name: file.name,
                                size: file.size,
                                type: file.type
                            }
                        ]
                })

所以我基本上希望this.Form.Files数组是这样的：

[
 [{File Object},{Metadata Object}],
 [{File Object},{Metadata Object}],
 [{File Object},{Metadata Object}]
]

当我使用上面的代码时，map()它不起作用。我只得到File Object部分。我不能这样使用map()吗？

标签： javascriptvue.js

Answer 1

map 函数返回一个新数组，它不会改变原来的数组。所以你必须分配返回的数组：

this.Form.Files = this.Form.Files.push(...PostFiles).map(file => {
                        return [
                            file, {
                                name: file.name,
                                size: file.size,
                                type: file.type
                            }
                        ]
                })

编辑：保留原始项目：

const PostFiles = Array.from(this.$refs.PostFiles.files).map(file => {
                        return [
                            file, {
                                name: file.name,
                                size: file.size,
                                type: file.type
                            }
                        ]
                })
this.Form.Files.push(...PostFiles)