Response.blob()方法和Blob()构造函数都可以用来创建Blob对象，但它们的使用场景和目的有所不同。

Response.blob()

Response.blob()是Fetch API的一部分，它是在处理Fetch请求的响应时使用的。当您向一个服务器发送请求并接收到响应时，如果响应数据是二进制数据，您可以使用Response.blob()来获取这些数据的Blob对象。
例如，如果您请求一个图片或视频文件，服务器的响应可以通过Response.blob()转换为Blob对象。转换后的Blob对象可以用于多种用途，比如使用URL.createObjectURL()创建一个URL来显示这个图片或视频。
这个方法是异步的，返回一个Promise对象，这意味着您需要使用.then()方法或async/await语法来处理结果。

fetch('image.png')
  .then(response => response.blob())
  .then(blob => {
    // 使用获取到的blob对象
    const imageUrl = URL.createObjectURL(blob);
    document.querySelector('img').src = imageUrl;
  });

Blob()构造函数

Blob()构造函数用于直接在JavaScript中创建一个新的Blob对象。您可以提供一个数组作为第一个参数，数组中的每个元素都会成为Blob对象的一部分。这些元素可以是字符串、ArrayBuffer或者另一个Blob对象等。第二个参数是一个可选的对象，指定了Blob对象的属性，比如type属性来指定MIME类型。
这个构造函数主要用于在程序中动态创建二进制数据。您可以使用它来创建文件、处理文本或生成媒体内容等。

const blobParts = ['<q id="a"><span id="b">hey!</span></q>']; // 一个包含单个字符串的数组
const blob = new Blob(blobParts, { type: "text/html" }); // 得到blob
// 使用创建的blob对象
const url = URL.createObjectURL(blob);
document.querySelector('iframe').src = url;