问题来由:面试
以前面试X公司的时候,问我关于原型链知道多少,因而我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__proto__是同样的嘛,可是我忽略了一个问题,就是这个对象是类数组对象,我想面试官可能要问我这个吧,总结一下。数组
什么是数组:数据结构
JavaScript的基本数据类型,即Array。架构
判断目标对象是否是Array:函数
(1)构造函数判断优化
target.constructor === Array
(2)instanceof判断spa
target instanceof Array
注:别用typeof。只能判断为Objectprototype
什么是类数组:code
与数组同样具备length与index属性,可是本质确实个Object,最多见的就是argumentsorm
target.constructor === Object
扩展:类数组有什么优势
提供了一种用于访问原始二进制数据的机制。 正如你可能已经知道,Array存储的对象能动态增多和减小,而且能够存储任何JavaScript值。JavaScript引擎会作一些内部优化,以便对数组的操做能够很快。然而,随着Web应用程序变得愈来愈强大,尤为一些新增长的功能例如:音频视频编辑,访问WebSockets的原始数据等,很明显有些时候若是使用JavaScript代码能够快速方便地经过类型化数组来操做原始的二进制数据将会很是有帮助(来自MDN)
类型数组架构(缓冲和视图):
(图片来自于MDN)
缓冲:
用ArrayBuffer对象实现,不提供机制访问内容,视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。
ArrayBuffer:一个通用的、固定长度的二进制数据缓冲区。
你不能直接操纵一个ArrayBuffer中的内容,你须要建立一个类型化数组的视图或一个描述缓冲数据格式的DataView,使用它们来读写缓冲区中的内容。
视图:
DataView是一种底层接口,它提供有能够操做缓冲区中任意数据的读写接口。这对操做不一样类型数据的场景颇有帮助,例如:类型化数组视图都是运行在本地字节序模式(参考 Endianness),能够经过使用 DataView
来控制字节序。默认是大端字节序(Big-endian),但能够调用读写接口改成小端字节序(Little-endian)。
类型化数组视图具备自描述性的名字和全部经常使用的数值类型像Int8
,Uint32
,Float64
等等。有一种特殊类型的数组Uint8ClampedArray
。它仅操做0到255之间的数值。
例如,这对于Canvas数据很是有用。详见:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays
栗子:
建立缓冲区
//首先,咱们建立一个16字节固定长度的缓冲 var buffer = new ArrayBuffer(16);
基于buffer建立视图1
//视图1,视图将把缓冲内的数据格式化为一个32位的有符号整数数组 var int32View = new Int32Array(buffer);
填充视图1
//填充数组 for (var i = 0; i < int32View.length; i++) { int32View[i] = i * 2; }
输出结果
建立视图2,这里视图是2字节整数视图,与上面4字节整数视图共享同一个缓冲区。
//视图2 var int16View = new Int16Array(buffer);
输出视图2:
console.dir(int16View)
结果:
能够看到两个视图对同一缓冲区的数据以不一样格式展现出来
复杂的数据结构:
struct someStruct { unsigned long id; char username[16]; float amountDue; };
C语言结构体中包含复杂类型,用类结构体缓冲:
var buffer = new ArrayBuffer(24); // ... read the data into the buffer ... var idView = new Uint32Array(buffer, 0, 1); var usernameView = new Uint8Array(buffer, 4, 16); var amountDueView = new Float32Array(buffer, 20, 1);
转化为普通数组:
var typedArray = new Uint8Array([1, 2, 3, 4]), normalArray = Array.prototype.slice.call(typedArray); normalArray.length === 4; normalArray.constructor === Array;
注:该篇文章与MDN基本相似,这里作个记录,想了解更多MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays