问题来由:

之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__proto__是一样的嘛,但是我忽略了一个问题,就是这个对象是类数组对象,我想面试官可能要问我这个吧,总结一下。

什么是数组:

JavaScript的基本数据类型,即Array。

判断目标对象是不是Array:

(1)构造函数判断

target.constructor === Array

(2)instanceof判断

target instanceof Array

注:别用typeof。只能判断为Object

什么是类数组:

与数组一样具有length与index属性,但是本质确实个Object,最常见的就是arguments

target.constructor === Object

扩展:类数组有什么优点

提供了一种用于访问原始二进制数据的机制。 正如你可能已经知道,Array存储的对象能动态增多和减少,并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化,以便对数组的操作可以很快。然而,随着Web应用程序变得越来越强大,尤其一些新增加的功能例如:音频视频编辑,访问WebSockets的原始数据等,很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助(来自MDN)

类型数组架构(缓冲和视图):

(图片来自于MDN)

缓冲:

用ArrayBuffer对象实现,不提供机制访问内容,视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。

ArrayBuffer:一个通用的、固定长度的二进制数据缓冲区。

你不能直接操纵一个ArrayBuffer中的内容,你需要创建一个类型化数组的视图或一个描述缓冲数据格式的DataView,使用它们来读写缓冲区中的内容。

视图:

DataView是一种底层接口,它提供有可以操作缓冲区中任意数据的读写接口。这对操作不同类型数据的场景很有帮助,例如:类型化数组视图都是运行在本地字节序模式(参考 Endianness),可以通过使用 DataView 来控制字节序。默认是大端字节序(Big-endian),但可以调用读写接口改为小端字节序(Little-endian)。

类型化数组视图具有自描述性的名字和所有常用的数值类型像Int8Uint32Float64 等等。有一种特殊类型的数组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

Javascript数组与类数组对象的更多相关文章

  1. ES6...扩展运算符(数组或类数组对象)

    数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...

  2. 新手指引,php什么是常量、变量、数组、类和对象及方法?

    众所周知,常量.变量.数组.类和对象及方法共同构成了PHP的基石.那么什么是常量?什么是变量?什么是数组?什么是类和对象及方法?我在此谈谈个人浅见,新手指引,高手勿喷. PHP 常量 定义:常量是单个 ...

  3. Javascript学习6 - 类、对象、继承

    原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...

  4. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  5. javascript 中的类数组和数组

    什么是类数组呢? 我们先来看一段代码: function fn() { console.dir(arguments); } fn(1,2,3,4,5,6,7,8,9,10); 这段代码的执行后,在 c ...

  6. [Javascript] js的类和对象

    类 graph LR 类-->构造函数 类-->prototype对象 类-->instanceof运算符 类-->constructor属性 类-->isPrototy ...

  7. java - day005 - 数组工具类, 数组复制,二维数组,变量,方法, 面向对象

    1. java.util.Arrays  数组工具类    Arrays.toString (数组) 数组值链接字符串 Arrays.sort(数组) 基本类型: 优化的快速排序 引用类型: 优化的合 ...

  8. javaScript中定义类或对象的五种方式

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...

  9. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

随机推荐

  1. 4. EM算法-高斯混合模型GMM详细代码实现

    1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 EM ...

  2. [Linux实用工具]munin-node插件配置和插件编写

    前面介绍了2篇munin使用的相关文章: [Linux实用工具]Linux监控工具munin的安装和配置 [Linux实用工具]Linux监控工具munin的展示(Nginx)   这次介绍一下mun ...

  3. Functions: C++'s Programming Modules

    在这一章中要学习以下内容: 函数基础 函数原型 通过value向函数传递参数 设计处理数组的函数 使用const指针参数 设计函数处理文本字符串 设计函数处理结构体 设计函数处理string类型的对象 ...

  4. MyBatis拦截器的执行顺序引发的MyBatis源码分析

    你猜一下哪个先执行?反正不要按常规来. <plugins> <plugin interceptor="com.Interceptor1"></plug ...

  5. 如何在Linux下Redis安装

    转载出于:http://blog.csdn.net/jiangguilong2000/article/details/8114740 redis作为NoSQL数据库的一种应用,响应速度和命中率上还是比 ...

  6. jQuery.countdown倒计时插件

    https://github.com/hilios/jQuery.countdown 文档:http://hilios.github.io/jQuery.countdown/documentation ...

  7. sql 拼接同列的值

    sql中有时需要将列的值转成行的形式,比如下面的数据,具有相同Path的ZumenID有哪一些,该怎么做呢? 常见的做法可以参见这篇文章http://www.cnblogs.com/xiashengw ...

  8. 编译安装LAMP之安装Apache+php与管理(十五)

    [教程主题]:编译安装LAMP之安装Apache+php与管理 [课程录制]: 创E [主要内容] [1]编译安装Apache+PHP 1.安装程序依赖库和开发环境 为了省事把所需要的库文件全都安装上 ...

  9. webpack4--热更新

    所谓热更新,就是在浏览器能同步刷新你的代码.webpack 热更新依赖 webpack-dev-server.具体实现步骤如下: 1.局部安装依赖 webpack-dev-server npm ins ...

  10. 开始一段新的敏捷学习之旅 —— IT帮读书会第4期《Scrum实战》

    刚看了一下,距离上一次写博客过去快1年半了.之前的知识管理都放到笔记软件中了,但是现在看来,收藏了很多东西,输入很多,但是输出有限. 学习任何领域的知识,如果只有输入没有输出,效果都是很有限的,有时需 ...