最后
小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!
File对象的属性
lastModified | 只读。返回当前 File 对象所引用文件最后修改时间的毫秒数。 |
File 对象所引用文件最后修改时间的 Date 对象。(废弃) | |
name | 只读。返回当前 File 对象所引用文件的名字。 |
size | 只读。返回当前 File 对象所引用文件的大小。 |
type | 只读。返回当前 File 对象所引用文件的MIME类型 |
其中lastModifiedDate,webkitRelativePath不推荐使用
剩下的属性也比较好理解,都是文件常见的信息,比如文件名,文件类型,文件大小,文件最后修改时间,需要注意这些File对象属性都是只读的。
File对象的方法
File对象没有定义任何方法,它的方法都继承自Blob。
原型链如下
可以发现File实例对象可以沿着原型链访问到Blob.prototype上的方法。
Blob是什么
Blob - Web API 接口参考 | MDN (mozilla.org)")
MDN对于Blob介绍是:
Blob
对象表示一个不可变、原始数据的类文件对象。
啥叫类文件对象?
Blob翻译过来是 Binary Larger Object,即二进制大对象。即Blob对象的组成是二进制数据。
而我们知道文件也是二进制编码的数据。
那么为什么Blob叫类文件呢,而不是文件呢?
其实Blob在这里代表的是比文件更加底层的概念。
我们知道文件是由二进制数据组成的,那么我们随意编写一些二进制数据,它能代表一个文件吗?答案是不能。文件的二进制数据具有各种特殊标识,来帮助外部理解一堆二进制数据是一个文件。
Blob代表的其实就是文件的切片。
我们知道文件的二进制数据组合在一起才能代表文件,而文件的二进制数据被分段后,比如分成十段,那么每一段都无法表示文件。但是每一段又都是文件的必不可少的组成部分。
此时就需要Blob来表示这些文件切片。所以说Blob是一个类文件对象。它不是文件,但是却和文件有千丝万缕的关系。
在浏览器API中,Blob是File的父类,这很好理解,父类是基类,子类是扩展类,我们可以说文件File是一堆二进制数据,是一个特殊的Blob,它可以当成Blob。但是它又比Blob多了一层含义。
Blob对象的属性:
size | 只读。Blob 对象中所包含数据的大小(字节)。 |
type | 只读。一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。 |
有人说Blob对象咋还有文件才有的MIME类型呢?它不就是一个二进制数据对象吗?
还是要再说明一下,Blob对象相当于File对象的切片,如何标识一个文件切片属于什么文件类型是有必要的,它涉及都二进制数据的解析。
Blob对象的方法:
Blob.slice([start[, end[, contentType]]]) | 返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。 |
Blob.stream() | 返回一个能读取blob内容的 ReadableStream。 |
Blob.text() | 返回一个promise且包含blob所有内容的UTF-8格式的 USVString。 |
Blob.arrayBuffer() | 返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer |
Blob构造函数
返回一个新创建的 Blob
对象,其内容由参数中给定的数组串联组成。
其中blobParts参数是一个数组,数组中的每一项元素连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。
options:可选项,字典格式类型,可以指定如下两个属性:
-
type,默认值为
""
,它代表了将会被放入到blob中的数组内容的MIME类型。 -
endings,默认值为"transparent",用于指定包含行结束符
\n
的字符串如何被写入。 它是以下两个值中的一个: “native”,表示行结束符会被更改为适合宿主操作系统文件系统的换行符; “transparent”,表示会保持blob中保存的结束符不变。
File,Blob的slice方法
那么现在了解Blob,而File继承了Blob的所有方法,且进行了拓展,可以直接操作文件,比如文件分片slice
从打印结果可以看出,file经过slice得到文件切片file_cp,而file_cp就不再是File类型了,而是Blob类型。
File,Blob的text方法
file.text()返回一个promise,该promise对象的结果是 blob所有内容的UTF-8格式的 USVString。
即file.text()将二进制编码的数据 转成了 utf-8编码的文本字符串。
不知道意义何在…,就像你用Notepad++打开一张png格式的图片一样。
File,Blob的arrayBuffer方法
file.arrayBuffer()
file.arrayBuffer()返回一个promise对象,其结果是 blob所有内容的二进制格式的 ArrayBuffer
ArrayBuffer是啥
那么啥是ArrayBuffer呢?ArrayBuffer - JavaScript | MDN (mozilla.org)")
ArrayBuffer
对象用来表示通用的、固定长度的原始二进制数据缓冲区。
它是一个字节数组,通常在其他语言中称为“byte array”。
你不能直接操作
ArrayBuffer
的内容,而是要通过 TypeArray 或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
为什么ArrayBuffer中的数据无法直接操作呢?
因为ArrayBuffer数组的元素都是字节,即八位二进制数,且是二进制编码的,我们无法将ArrayBuffer字节数组的字节元素取出来,也无法覆盖字节元素。因为我们输入的都是字符,而不是字节。
而我们知道八位二进制数 可以转成 其他类型数据,最常见就是十进制数值,而我们是可以输入十进制数值的,所以可以将ArrayBuffer字节数组转为TypeArray类型数组,常见的TypeArray数组有:
由于ArrayBuffer都是字节元素,即每个元素都是无符号8位2进制,所以我们通常是将ArrayBuffer转为Unit8Array来进行处理
此时我们就可以对字节数组转成的Uint8Array数组进行元素操作了
对Uint8Array修改完后,再将其转为ArrayBuffer,则很简单,Uint8Array对象上就有一个buffer属性,可以获取到之前的ArrayBuffer实例
另外TypeArray没有新增,删除元素的操作,因为TypeArray的数组长度是固定的,无法改变的。
所以这么一看ArrayBuffer除了可以转为TypeArray修改字节元素外,也没啥,关键谁没事改字节数啊,文件的字节被改了,可能都无法解析了。
File,Blob的stream方法
file.stream()
返回一个能读取blob内容的 ReadableStream。
那么什么是ReadableStream呢?ReadableStream - Web API 接口参考 | MDN (mozilla.org)")
流操作API 中的ReadableStream
接口呈现了一个可读取的二进制流操作。
啥叫二进制流?
我们知道程序上的各种数据在计算机底层上都是二进制形式的,而程序中可识别数据互相传递,就意味着二进制形式数据的传输,即一串010101在各个程序中传输,而这些传输都是有方向性,就像水流一样,总是朝着一个方向流动,不可能出现一股水流出现两个方向。所以二进制数据的传输也是如此,所以二进制数据传输,也叫做流。
那么流的方向有哪些呢?
一个程序需要外部传入数据,那就底层的二进制数据就是朝着该程序输入,也叫输入流。
一个程序向外部提供数据,那么底层二进制数据就是朝程序外输出,也叫输出流。
具体判断是输入流,还是输出流的要点是,数据源是谁,如果从数据源读取数据,那么相当于数据源对外输出,就是输出流,如果向数据源写入数据,那么相当于输入流。
所以一个文件的输出流一般和读操作相关,输入流和写操作相关。
另外有一个关于流的概念,那就是流的组成。
我们知道流是指二进制数据的流动,那么流的组成就是二进制数据。但是二进制数据有不同的形式:
比如 0000000000001111111111111100000000000000,和 00000000 00001111 11111111 11000000 00000000
二者二进制数都相同,都表示40位的二进制数,但是第二个按照8位一组,进行了分组。
我们知道 8 bit = 1 Byte,即8位二进制数 相当于一个字节。
所以在传输中的流有了两个概念,比特(bit)流,和字节(Byte)流,字节流就是将比特流按照8位一组进行分组后的二进制数据。
而在字节之上就是字符了,字符指的就是人类可以识别的文字,而字节是计算机可以识别的文字。
人们制定了各种编码方式,将字节组合起来代表一个人类世界的字符。
比较有名的编码有:ASCII码(英语系编码),GBK码(汉语系编码),UTF-8码(世界所有语言编码)
由于英语只有26字母以及一些常用的英语符号,所以ASCII码只需要一个字节(相当于8位二进制数,可以有255种对应关系)就可以代表所有英语系常用字符。
而汉语有成千上万的文字,即使按照偏旁部首进行分类,也有很多,所以GBK字符需要两个字节(相当于16位二进制数,可以有 2^16 - 1 = 65535种对应关系)
而想要表示世界上所有语言,UTF-8的字符需要三个字节(相当于24位二进制数,即2^24-1种对应关系。)
而无论操作系统,还是浏览器,还是程序编写工具,还是记事本,它们都是直接面向人类的,所以他们需要将字节 按照对应编码规则 转化为 字符。
所以字节流 在进行分组,即按照编码规则分组,比如UTF-8编码,将三个字节分为一组,形成字符流。
而无论是比特流,还是字节流,还是字符流,它们都有流向,即可以分为输入流和输出流。
如果是基于文件的读取和写入的话,那么也可以叫做 读取流(输出流) 和 写入流(输入流)。
ReadableStream
是啥
那么ReadableStream
接口呈现了一个可读取的二进制流操作。
其实就是说 以字节流的方式读取文件中二进制数据 的 操作
ReadableStream的属性
locked | 只读。locked 返回这个可读流是否被一个读取器锁定 |
ReadableStream对象的方法
cancel | 取消读取流,读取方发出一个信号,表示对这束流失去兴趣。可以传入 reason 参数表示取消原因,这个原因将传回给调用方。 |
getIterator | 创建一个异步的 ReadableStream 迭代器并将流锁定于其上。一旦流被锁定,其他读取器将不能读取它,直到它被释放。 |
getReader | 创建一个读取器并将流锁定于其上。一旦流被锁定,其他读取器将不能读取它,直到它被释放。 |
pipeThrough | 提供将当前流管道输出到一个 transform 流或 writable/readable 流对的链式方法。 |
pipeTo | 将当前 ReadableStream 管道输出到给定的 WritableStream (en-US),并返回一个 promise,输出过程成功时返回 fulfilled,在发生错误时返回 rejected。 |
tee | tee 方法(tee本意是将高尔夫球放置在球座上)tees 了可读流,返回包含两个ReadableStream 实例分支的数组,每个元素接收了相同的传输数据。 |
看了一下ReadableStream的各种方法,水很深,暂时搁置一下,后面有时间再分析把。
File,Blob,ArrayBuffer小结
以上,我们了解了File,Blob,ArrayBuffer的一些基本概念和功能。
我们知道了File,Blob,ArrayBuffer都是二进制数据对象,
其中File是文件级别二进制对象,Blob和ArrayBuffer都是普通二进制对象
但是Blob相当于File的切片,即文件切片,是类文件二进制对象。File也可以看成一种特殊的Blob。
而Blob只有四个方法 slice,text,arrayBuffer,stream,File也继承了这四个方法,可以对文件对象进行操作。
但是Blob提供的操作都是宏观的,而ArrayBuffer可以提供更加微观的,基于字节的操作。
ArrayBuffer是一个字节数组,数组元素就是字节,相当于八位二进制数,ArrayBuffer本身无法直接对数组元素进行操作,需要转成TypeArray后才能进行字节元素的修改,另外需要注意的是TypeArray一旦初始化就无法改变自身字节数,即ArrayBuffer虽然可以间接的修改数组中的字节元素,但是无法增加和删除字节元素。
最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
于字节的操作。
ArrayBuffer是一个字节数组,数组元素就是字节,相当于八位二进制数,ArrayBuffer本身无法直接对数组元素进行操作,需要转成TypeArray后才能进行字节元素的修改,另外需要注意的是TypeArray一旦初始化就无法改变自身字节数,即ArrayBuffer虽然可以间接的修改数组中的字节元素,但是无法增加和删除字节元素。
最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
[外链图片转存中…(img-IOblDHTw-1715268646728)]
[外链图片转存中…(img-OT8Sak43-1715268646729)]