为何更换Blob配置项的传入变量名会触发DOMException类型不匹配报错

这和type是不是JS保留字、浏览器API有特殊硬编码逻辑完全无关，核心是第二段代码对JS 对象属性简写规则 的错误套用，导致生成的Blob根本没有被设置正确的MIME类型。

具体逻辑拆解 #

• 先明确JS ES6引入的对象简写规则：当你在对象字面量里直接写一个变量名，没有显式指定对应键名时，JS会自动创建一个和变量名完全同名的键，把变量的值作为这个键的取值。比如写法{ type }，本质完全等价于{ type: type }。
• 第一段代码能正常运行，刚好是适配了这个规则：
  你定义了变量type = 'text/plain'，写new Blob([text], { type })时，实际传给Blob构造函数的配置对象是{ type: 'text/plain' }。Blob构造函数只会读取配置对象里的type键，用来设置自身的MIME类型，所以最终生成的Blob的type属性值就是'text/plain'，和后续ClipboardItem里通过动态键传入的MIME类型完全匹配，整个流程自然能跑通。
• 第二段代码报错的核心偏差就在这里：
  你把变量名换成了anotherName，值还是'text/plain'，但写new Blob([text], { anotherName})时，按照简写规则，实际生成的配置对象根本不是Blob要求的结构，而是{ anotherName: 'text/plain' }。
  Blob构造函数只会识别配置对象里固定叫type的属性，对这个自定义的anotherName键会完全忽略。此时生成的Blob根本没有被设置MIME类型，它的type属性值是空字符串，也就是默认的未知二进制流类型。

错误触发的完整链路 #

等执行到new ClipboardItem({ [anotherName]: blob })这步时，相当于动态生成了键为text/plain的映射关系，值就是刚才那个MIME类型为空的Blob。
ClipboardItem的内部校验逻辑会逐一比对传入的键名和对应Blob的实际MIME类型，发现两边不匹配（键名要求是text/plain，但Blob实际类型是空字符串），就抛出了你看到的Type text/plain does not match the blob's type错误。

快速验证方法 #

你可以在报错的代码片段里手动打印Blob的实际类型，就能直观看到问题所在：

var text="copy me"
var anotherName= 'text/plain';
var blob = new Blob([text], { anotherName});
console.log(blob.type) // 控制台输出空字符串 ''，并非预期的'text/plain'

使用自定义变量名的正确写法 #

如果你不想用type当变量名，只要不要在Blob的配置对象里依赖简写规则，显式把配置键写为Blob要求的type即可：

var text="copy me"
var anotherName= 'text/plain';
// 显式指定Blob配置的键为type，而非依赖简写逻辑
var blob = new Blob([text], { type: anotherName });
var data = [new ClipboardItem({ [anotherName]: blob })];
navigator.clipboard.write(data)

内容的提问来源于stack exchange，提问作者mondersky