传统数组

  • Array, from()
    将类数组对象和可遍历对象转化为真正的数组。
  1. var arrayLike = {
  2.   '0' : 'a',
  3.   '1' : 'b',
  4.   '2' : 'c',
  5.   'length': 3
  6. }
  8. var arr;
  9. //ES5
  10. arr = [].slice.call(arrayLike);    //arr=['a', 'b', 'c']
  12. //ES6
  13. arr = Array.from(arrayLike);    //arr=['a', 'b', 'c']

和它类似的是扩展运算符, 一样可以实现该功能(要求对象具有遍历器接口):

  1. function(){
  2.   var arg = [...arguments];   //转化 arguments 为数组
  3. }

Array.from() 接受第二参数(函数), 用来映射结果, 相当于 map, 并且可以用第三个参数绑定 this:

  1. Array.from(obj, func, context);
  2. //等价于
  3. Array.from(obj).map(func, context);

技巧, 用 Array.from() 指定函数运行次数:

  1. var i = 0;
  2. Array.from({length: 3}, ()=>i++);   //[0, 1, 2]

建议：使用Array.from方法，将类似数组的对象转为数组。

  • Array.of()
    将多个值组成数组:

    1. Array.of(2, 3, 5);   //[2, 3, 5]
    2. Array.of(2);   //[2]
    3. Array.of();   //[]
    4. Array.of(undefined);   //[undefined]

  • Array.prototype.copyWithin()
    函数参数是 Array.prototype.copyWithin(target, start=0, end=this.length), 对当前数组, 从截取下标为 start 到 end 的值, 从target 位置开始覆盖 this 中的值。如果 start 或 end 为负数则倒数。 ```javascript [1, 2, 3, 4, 5].copyWithin(0, 3, 4); //[4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1); //[4, 2, 3, 4, 5]

[].copyWithin.call({length: 5, 3: 1}, 0, 3); //{0: 1, 3: 1, length: 5}

var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); //[3, 4, 5, 4, 5]

  2. - `Array.prototype.find()`, `Array.prototype.findIndex()`<br />这两个函数的参数都是回调函数。遍历数组, 找到符合条件(回调函数返回为true)的第一个值, find()返回其值, `findIndex()`返回其下标。如果没找到符合条件的值`find()`返回undefined, `findIndex()`返回-1。
  3. ```javascript
  4. [1, 2, -3, 4].find((item) => item < 0);   //-3
  5. [1, 2, -3, 4].findIndex((item) => item < 0);   //2
  7. [NaN].findIndex(y => y !== y);   //0
  8. [NaN].indexOf(NaN);   //-1, indexOf 找不到 NaN

这两个函数还接受第二参数, 用来绑定回调函数中的 this

  • Array.prototype.fill()
    完整形式: Array.prototype.fill(value, start=0, end=this.length), 对数组 start 到 end 直接部分填充 value, 覆盖原有值。

    1. [1, 2, 3, 4, 5].fill('a', 2, 4);    //[1, 2, 'a', 'a', 5];
    2. var arr = new Array(5).fill(0);   //arr = [0, 0, 0, 0, 0];

  • Array.prototype.entries(), Array.prototype.keys(), Array.prototype.values()
    这三个方法, 用来遍历数组, 返回一个遍历器, 供 for...of 使用, 其中 keys()是对键的遍历, values() 是对值的遍历, entires()是对键值对的遍历。babel 已实现 ```javascript var a = [‘a’, ‘b’, ‘c’];

for(let item of a.values()){ console.log(item); //依次输出 ‘a’, ‘b’, ‘c’ }

for(let key of a.keys()){ console.log(key); //依次输出 0, 1, 2 } for(let pair of a.entries()){ console.log(pair); //依次输出 [0, ‘a’], [1, ‘b’], [2, ‘c’] }

  2. 当然也可以用遍历器的 next() 方法遍历
  3. ```javascript
  4. var a = ['a', 'b', 'c'];
  5. var values = a.values();
  6. console.log(values.next().value);   //'a'
  7. console.log(values.next().value);   //'b'
  8. console.log(values.next().value);   //'c'

  • Array.prototype.includes()
    这是个 ES7 的方法, 判断数组中是否含有某个值, 含有则返回 true, 否则返回 false。可以用第二个参数指定查找起始点(小于0倒数)。

    1. //该方法同样可以找到 NaN, 而 indexOf 不行
    2. [1, 2, NaN].includes(NaN);   //true
    3. [1, 2, 3, 4, 5].includes(2, 3);  //false

  • 数组的空位
    我们比较以下两个数组: ```javascript var empty = new Array(3); //[, , , ] var unempty = new Array(3).fill(undefined); //[undefined, undefined, undefined]

console.log(0 in empty); //false console.log(0 in unempty); //true

  2. 结合手册内容如下就很好理解这个问题：
  3. > “Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by<br />an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the<br />Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array,<br />that element does not contribute to the length of the Array.”<br />摘自[ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/)
  6. 翻译如下。
  7. > "数组成员可以省略。只要逗号前面没有任何表达式，数组的length属性就会加1，并且相应增加其后成员的位置索引。被省略的成员不会被定<br />义。如果被省略的成员是数组最后一个成员，则不会导致数组length属性增加。”
  10. 很明显, 一个完全空的数组是没有东西的, 而填充了`undefined`的数组并不是空的。<br />结合 ES5, 发现不同函数方法对空位处理方式是不一样的:
  12. - `forEach()`, `filter()`, `every()`, `some()` 会忽略空值
  13. - `map()`, `copyWithin()` 会保留空值, 但不做处理
  14. - `join()`, `toString()`, 会把空值处理为空字符串
  15. - `fill()` 不区分空值与非空值
  16. - `Array.from()`, 扩展运算符(...), `for...of`, `entires()`, `keys()`, `values()`, `find()`, `findIndex()` 会视空值为 `undefined`
  18. 如果你记不住这些, 或者为了程序的健壮性, 可维护性, 尽量避免在数组中出现空值。<br />举个实例, 理解一下这个问题:
  19. > 新建一个长为200的数组, 并初始化每个位置的值等于其索引
  22. ```javascript
  23. // 错误方法
  24. var arr = new Array(200).map(function(item, index){
  25.   return index;
  26. });
  27. console.log(arr);    //[undefined × 200]
  1. // 正确做法
  2. var arr = new Array(200).join().split(',').map(function(item, index){
  3.   return index;
  4. });
  5. console.log(arr);    //[1, 2, 3, ..., 200]
  7. // 更简洁的方法
  8. var arr = [...new Array(200)].map(function(item, index){
  9.   return index;
  10. });
  11. console.log(arr);    //[1, 2, 3, ..., 200]
  • 数组推导
    这是一个 ES7 的功能, 暂时还没能实现。我们可以先看一下它如何推导的:
    1. var a1 = [1, 2, 3, 4];
    2. var a2 = [for( i of a1) i * 2];   // a2 = [2, 4, 6, 8]

不难看出, 数组 a2 通过 for...of 直接从 a1 生成。但是它的功能不仅仅这么简单, 还可以有 if 条件:

  1. var a1 = [1, 2, 3, 4];
  2. var a3 = [for( i of a1) if(i > 2) i * 2];   //a3=[6, 8]

这样, 我们可以简单的用数组推导模拟 map(), filter() 方法了。比如上面2个例子等价于:

  1. var a1 = [1, 2, 3, 4];
  2. var a2 = a1.map( (i) => i * 2 );
  3. var a3 = a1.filter( (i) => i > 2 ).map( (i) => i * 2 );

当然我们还可以用多个 for...of 构成循环嵌套:

  1. var a = ['x1', 'x2'];
  2. var b = ['y1', 'y2'];
  4. [for(i of a) for(j of b), console.log(i+', '+j)];
  5. //输出
  6. //['x1', 'y1']
  7. //['x1', 'y2']
  8. //['x2', 'y1']
  9. //['x2', 'y2']

数组推导由 [] 构建了一个作用域, 其内部新建的变量, 等同于用 let 关键字声明的变量。除此之外, 字符串也可以被视为数组, 所以同样可以使用数组推导:

  1. [for(c of 'abcde'). c+'.'].join('');  //"a.2.3.4.5."

二进制数组

二进制数组其实很早就有了，不过为了 WebGL 中，数据可以高效和显卡交换数据。分为3类：

  • ArrayBuffer：代表内存中的一段二进制数据；
  • TypedArray：读写简单的二进制数据，如 Uint8Array, Int16Array, Float32Array 等9类；
  • DataView：读写复杂的二进制数据，如 Uint8, Int16, Float32 等8类； | 数据类型 | 字节长度 | 含义 | 对应 C 语言类型 | TypedArray 类型 | DataView 类型 | | —- | —- | —- | —- | —- | —- | | Int8 | 1 | 8位有符号整数 | char | Int8Array | Int8 | | Uint8 | 1 | 8位无符号整数 | unsigned char | Uint8Array | Uint8 | | Uint8C | 1 | 8位无符号整数(自动过滤溢出) | unsigned char | Uint8ClampedArray | 不支持 | | Int16 | 2 | 16位有符号整数 | short | Int16Array | Int16 | | Uint16 | 2 | 16位无符号整数 | unsigned short | Uint16Array | Uint16 | | Int32 | 4 | 32位有符号整数 | int | Int32Array | Int32 | | Uint32 | 4 | 32位无符号整数 | unsigned int | Uint32Array | Uint32 | | Float32 | 4 | 32位浮点数 | float | Float32Array | Float32 | | Float64 | 8 | 64位浮点数 | double | Float64Array | Float64 |

ArrayBuffer

ArrayBuffer 代表内存中的一段二进制数据，我们没法直接操作，需要利用视图(TypedArray,DataView)按一定格式解读二进制数据。但我们依然可以构造一段内存来存放二进制数据:

  1. var buf = new ArrayBuffer(32);  //分配32个字节的内存存放数据, 默认全0
  2. var dataview = new DataView(buf);   //将这段内存转为视图
  3. dataview.getUint8(0);   //得到第一个8字节的值(无符号)，0

这里需要强调的是，分配内存空间不要太大！毕竟你的内存是有限的。
其次，无论使用什么视图，其实例化的内存如果共享，所有的写入操作会修改每一个视图，因为内存共用的：

  1. var buf = new ArrayBuffer(32);
  2. var view16 = new Int16Array(buf);
  3. var viewu8 = new Uint8Array(buf);
  5. console.log(viewu8[0]);   //0
  6. view16[0]=-1;
  7. console.log(viewu8[0]);   //255

这里之所以得到255，是因为内存共用导致的，但为何不是-1？Int16Array 是有符号类型的，这样二进制的最高位用作符号位，负数记为1:1000 0000 0000 0001,之后的数字用移码存储，得到-1的二进制为：1111 1111 1111 1111, 之后利用Uint8Array读取无符号的前8位，得到1111 1111这个计算为十进制为 数组的扩展 - 图1。具体关于数制转换和反码补码这里不再展开，否则就跑偏了。

ArrayBuffer 对象也有几个方法和属性:

  • byteLength: 得到内存区域的字节长度

    1. const N = 32;
    2. var buf = new ArrayBuffer(N);
    3. if(buf.byteLength === N){
    4. //分配成功
    5. } else {
    6. //分配失败
    7. }

  • slice(start=0, end=this.byteLength): 分配新内存，并把先有内存 start 到 end 部分复制过去，返回这段新内存区域

    1. var buf = new ArrayBuffer(32);
    2. var newBuf = buf.slice(0,3);

  • isView(view): 判断传入的 view 是否当前 buffer 的视图，是则返回 true, 否则 false。该方法暂无法使用。 ```javascript var buf1 = new ArrayBuffer(32); var buf2 = new ArrayBuffer(32); var buf1View = new Int8Array(buf1); var buf2View = new Int8Array(buf2);

buf1.isView(buf1View); //true buf1.isView(buf2View); //false

  2. <a name="TypedArray"></a>
  3. ### TypedArray
  4. 具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存；或接受一个数组参数，实例化该数组为二进制内容。得到的值是一个数组，可以直接使用`[]`访问每个位置的内容，有`length`属性。其构造函数有9个：
  6. | 数据类型 | 字节长度 | 含义 | 对应 C 语言类型 | TypedArray 类型构造函数 |
  7. | --- | --- | --- | --- | --- |
  8. | Int8 | 1 | 8位有符号整数 | char | Int8Array() |
  9. | Uint8 | 1 | 8位无符号整数 | unsigned char | Uint8Array() |
  10. | Uint8C | 1 | 8位无符号整数(自动过滤溢出) | unsigned char | Uint8ClampedArray() |
  11. | Int16 | 2 | 16位有符号整数 | short | Int16Array() |
  12. | Uint16 | 2 | 16位无符号整数 | unsigned short | Uint16Array() |
  13. | Int32 | 4 | 32位有符号整数 | int | Int32Array() |
  14. | Uint32 | 4 | 32位无符号整数 | unsigned int | Uint32Array() |
  15. | Float32 | 4 | 32位浮点数 | float | Float32Array() |
  16. | Float64 | 8 | 64位浮点数 | double | Float64Array() |
  19. 以上9个会对内存进行不同位数的格式化，以得到对应类型值的数组。这个数组不同于普通数组，它不支持稀疏数组，默认值为0，而且同一个数组只能存放同一个类型的变量。
  21. 以上每个构造函数都对应如下形式的参数：
  22. ```javascript
  23. (buffer, start=0, len=buffer.byteLength-start*8)

可以指定序列化其中 start到 end部分的二进制数据。注意这里指定的范围必须和数组类型所匹配，不能出现类似new Int32Array(buffer,2,2)的情况。如果你觉得这个不符合你的需求，可以使用 DataView。

如果你觉得上面的写法复杂，可以不写 new ArrayBuffer，直接使用 TypedArray，但注意参数的意义不一样：

  1. var f64a = new Float64Array(4);    //分配32个字节，并作为double类型使用。 32 = 64 / 8 * 4

TypedArray的构造函数还接受另一个TypedArray作为参数，开辟新内存复制其值并改变类型，对原视图和buffer 不构成影响，也不共用内存。
TypeArray的构造函数还接受另一个Array作为参数，开辟新内存复制其值，对原数组不构成影响，也不共用内存。

当然利用一下方法，可以把 TypedArray 转换为普通数组：

  1. var arr = [].slice.call(typedArray);

TypedArray具有除了concat()以外的全部数组方法，当然，它也具有 iterator，可以用 for…of 遍历。
以下是 TypedArray 特有的属性和方法：

  • buffer属性：返回该视图对于的二进制内存区域
  • BYTES_PER_ELEMENT属性：是个常数，表示数组中每个值的字节大小，不同视图的返回值与上方表格一致
  • byteLength: 返回该视图对于的内存大小，只读
  • byteOffset: 返回该视图从对应 buffer 的哪个字节开始，只读
  • set(arr_or_typeArray, start=0): 在内存层面，从arr_or_typeArray 的 start 下标开始复制数组到当然 typeArray
  • subarray(start=0,end=this.length),截取 start到 end部分子数组,但是和原数组共用内存
  • from(): 接受一个可遍历参数，转为该视图实例
  • of(): 将参数列表转为该视图实例

小技巧，转换字符串和 ArrayBuffer

  1. //该方法仅限转换 utf-16 的字符串
  2. function ab2str(buf){
  3.   return String.fromCharCode.apply(null, new Uint16Array(buf));
  4. }
  5. function str2ab(str){
  6.   var len = str.length;
  7.   var view = new Uint16Array(len);
  8.   for(let i = 0; i < len; i++){
  9.     view[i] = str.charCodeAt(i);
  10.   }
  11.   return view.buffer;
  12. }
  13. var str = "Hello world";
  14. var buf = str2ab(str);
  15. var view = new Uint16Array(buf);
  16. for(var i = 0; i < view.length; i++){
  17.   console.log(String.fromCharCode(view[i]));   //一次输出"Hello world"的每个字母
  18. }
  19. console.log(ab2str(buf));    //"Hello world"

这里扩展一些编码知识，我们知道计算机里面存储的是二进制，并且存储的最小单位是字节。但是不同的系统存储方式不同，分为高位优先和低位优先。比如 20170101 这个数字，其十六进制表示为 0x0133C575, 在低位优先的系统中存储方式为 0x75 0xC5 0x33 0x01, 而在高位优先的系统中存储方式为 0x01 0x33 0xC5 0x75。由于大多数计算机采用低位优先的方式，所以 ES6 采用是也是低位优先的方式，但遇到高位优先的数据时，就不能简单的直接那来使用，具体使用会在 DataView 中介绍，这里说明一种判断低位优先(little endian)还是高位优先(big endian)的方法

还有需要注意的是数据溢出，这个也是需要数制方面基础比较好理解，这里不过多展开了。举一个例子：
Uint8 只能表示8位无符号整数，最大是1111 1111, 也就是十进制的 0~255；Int8因为有了符号位，只能表示十进制-128~127，如果给它的值不在这个范围内就会发生溢出，得到一个你意想不到但情理之中的值

  1. var view1 = new Uint8Array(2);
  2. view1[0] = 256;   //256 二进制是 1 0000 0000 由于数据只能容纳8个值，进位1就丢了
  3. view1[1] = -1;    //之前说过-1 二进制(补码)为 1111 1111(全1), 作为无符号数8个1就是255
  5. console.log(view1[0]);   //0
  6. console.log(view1[1]);   //255
  8. var view2 = new Int8Array(2);
  9. view2[0] = 128;   //由于符号位溢出，系统自动用32位计算这个数1 000 0000 0000 0000 0000 0000 1000 0000，取符号位和最后8位得到-128
  10. view2[1] = -128;  //由于符号位溢出，系统自动用32位计算这个数0 111 1111 1111 1111 1111 1111 0111 1111，取符号位和最后8位得到127
  11. console.log(view2[0]);   //-128
  12. console.log(view2[1]);   //127

为了防止这样的情况，js 有一个 Unit8ClampedArray, 使整数方向的溢出值为255，0方向的易楚志为0。注意这是个无符号的类型；

  1. var view = new Uint8ClampedArray(2);
  2. view[0] = 256;
  3. view[1] = -1;
  5. console.log(view[0]);   //255
  6. console.log(view[1]);   //0

复合视图

划分一块 buffer 使用类似 C 语言中的结构体

  1. var buf = new ArrayBuffer(24);
  2. var name = new Uint8Array(buf, 0, 16);
  3. var gender = new Uint8Array(buf, 16, 1);
  4. var age = new Uint16Array(buf, 18, 1);
  5. var score = new Float32Array(buf,20,1);

相当于以下C语言代码

  1. struct Person{
  2.   char name[16];
  3.   char gender;
  4.   int age;
  5.   float score;
  6. }

共用一块 buffer 使用得到类似C语言中的联合体

  1. var buf = new ArrayBuffer(8);
  2. var num = new Uint16Array(buf);
  3. var dotNum = new Float64Array(buf);

相当于以下C语言代码

  1. union Example{
  2.   int num[4];
  3.   double dotNum;
  4. }

DataView

具有一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存。毕竟当一段内存有多种数据时，复合视图也不是那么方便，这时适合使用 DataView 视图。其次 DataView 可以自定义高位优先和低位优先，这样可以读取的数据就更多了。
DataView构造函数形式如下,这一点和 TypedArray 一致：

  1. (buffer, start=0, len=buffer.byteLength-start*8)

它具有以下方法格式化读取 buffer 中的信息：

  • getInt8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getUint8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getInt16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getUint16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getInt32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getUint32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getFloat32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • getFloat64(start, isLittleEndian): 从 start 字节处读取 8 个字节，返回一个64位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具有以下方法格式化写入 buffer 中的信息：

  • setInt8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setUint8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setInt16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setUint16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setInt32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setUint32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setFloat32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
  • setFloat64(start,value,isLittleEndian): 在 start位置写入 8 个字节的64位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具有以下属性和方法：

  • buffer属性：返回该视图对于的二进制内存区域
  • byteLength: 返回该视图对于的内存大小，只读
  • byteOffset: 返回该视图从对应 buffer 的哪个字节开始，只读

如果你不知道计算机使用的是高位优先还是低位优先，也可以自行判断：

  1. //方法1
  2. const BIG_ENDIAN = Symbol('BIG_ENDIAN');
  3. const LITTLE_ENDIAN = Symbol('LITTLE_ENDIAN');
  4. function getPlatformEndianness(){
  5.   let arr32 =  Uint32Array.of(0x12345678);
  6.   let arr8 = new Uint8Array(arr32.buffer);
  7.   switch((arr8[0] * 0x1000000) + (arr8[1] * 0x10000) + (arr8[2] * 0x100) + arr8[3]){
  8.     case 0x12345678: return BIG_ENDIAN;
  9.     case 0x78563412: return LITTLE_ENDIAN;
  10.     default: throw new Error("unknow Endianness");
  11.   }
  12. }
  14. //方法2
  15. window.isLittleEndian = (function(){
  16.   var buffer = new ArrayBuffer(2);
  17.   new DataView(buffer).setInt16(0, 256, true);
  18.   return new Int16Array(buffer)[0] === 256;
  19. }());