Skip to content

Commit b70e941

Browse files
committed
docs(bom): add ArrayBuffer
1 parent 80fe9f5 commit b70e941

3 files changed

Lines changed: 77 additions & 30 deletions

File tree

chapters.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
- bom/storage.md: Storage 接口
7777
- bom/history.md: History 对象
7878
- bom/location.md: Location 对象,URL 对象,URLSearchParams 对象
79+
- bom/arraybuffer.md: ArrayBuffer 对象,Blob 对象
7980
- elements/: 附录:网页元素接口
8081
- elements/a.md: <a>
8182
- elements/image.md: <img>

docs/bom/arraybuffer.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# ArrayBuffer 对象,Blob 对象
2+
3+
## ArrayBuffer 对象
4+
5+
ArrayBuffer 对象表示一段二进制数据,用来模拟内存里面的数据。通过这个对象,JavaScript 可以读写二进制数据。
6+
7+
这个对象是 ES6 才写入标准的,普通的网页编程用不到它,为了教程体系的完整,下面只提供一个简略的介绍,详细介绍请看《ES6 标准入门》里面的章节。
8+
9+
浏览器原生提供`ArrayBuffer`构造函数,用来生成实例。它接受一个整数作为参数,表示这段二进制数据占用多少个字节。
10+
11+
```javascript
12+
var buffer = new ArrayBuffer(8);
13+
```
14+
15+
上面代码中,实例对象`buffer`占用8个字节。
16+
17+
ArrayBuffer 对象有实例属性`length``byteLength`,都表示当前实例占用的内存长度(单位字节)。
18+
19+
```javascript
20+
var buffer = new ArrayBuffer(8);
21+
buffer.length // 8
22+
buffer.length // 8
23+
```
24+
25+
ArrayBuffer 对象有实例方法`slice()`,用来复制一部分内存。它接受两个整数参数,分别表示复制的开始位置(从0开始)和结束位置(复制时不包括结束位置),如果省略第二个参数,则表示一直复制到结束。
26+
27+
```javascript
28+
var buf1 = new ArrayBuffer(8);
29+
var buf2 = buf1.slice(0);
30+
```
31+
32+
上面代码表示复制原来的实例。
33+
34+
## Blob 对象
35+
36+
Blob 对象表示一个二进制文件的数据内容,比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件。
37+
38+
浏览器原生提供`Blob`构造函数,用来生成实例对象。
39+
40+
```javascript
41+
new Blob( array[, options])
42+
```
43+
44+
`Blob`构造函数接受两个参数。第一个参数是数组,成员就是新生成的`Blob`实例对象的内容;第二个参数是可选的,是一个配置对象,目前只有一个属性`type`,它的值是一个字符串,表示数据的 MIME 类型,默认是空字符串。
45+
46+
```javascript
47+
var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];
48+
var myBlob = new Blob(htmlFragment, {type : 'text/html'});
49+
```
50+
51+
上面代码中,实例对象`myBlob`包含的是字符串。生成实例的时候,数据类型指定为`text/html`
52+
53+
下面是另一个例子,Blob 实例保存 JSON 数据。
54+
55+
```javascript
56+
var blob = new Blob([{"hello": "world"}], {type : 'application/json'});
57+
```
58+
59+
`Blob`具有两个实例属性`size``type`,分别返回数据的大小和类型。
60+
61+
```javascript
62+
var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];
63+
var myBlob = new Blob(htmlFragment, {type : 'text/html'});
64+
65+
myBlob.size // 32
66+
myBlob.type // "text/html"
67+
```
68+
69+
`Blob`具有一个实例方法`slice`,用来拷贝原来的数据,返回的也是一个`Blob`实例。
70+
71+
```javascript
72+
myBlob.slice(start,end, contentType)
73+
```
74+
75+
`slice`方法有三个参数,都是可选的。它们依次是起始的字节位置(默认为0)、结束的字节位置(默认为`size`属性的值,该位置本身将不包含在拷贝的数据之中)、新实例的数据类型(默认为空字符串)。
76+

docs/stdlib/arraybuffer.md

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)