如何使用排列运算符和映射来推送数组

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

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)

Answer 2

使用.push将更改数组并返回新数组的长度，因此这不是您想要的。

用this.Form.Files.concat(PostFiles)替换this.Form.Files.push(...PostFiles)应该可以。

Answer 3

这里的问题是javascript中的Map函数不返回修改后的数组，而是返回数组的新长度。所以你应该把代码分成两部分：

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

Answer 4

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

我不知道你为什么要这么做。