js类数组和数组区别,javascript数组的定义

　　在本文中，我们将看看JavaScript中的类型化数组，看看它的组成，它与普通数组的区别，以及它在Web开发中的用途。

　　在JavaScript语言中，我们所有人都必须熟悉数组，知道数组本质上是动态的，可以保存任何JavaScript对象。但是，如果你曾经使用过像C这样的其他语言，你应该知道它的数组本质上并不是动态的。并且只能在数组中存储特定的数据类型。毕竟，从性能的角度来看，这可以确保阵列的效率更高。然而，动态数组和存储信息类型的多样化实际上并没有使JavaScript数组效率低下。借助JavaScript引擎优化，JavaScript中数组的执行速度其实很快。

　　随着Web应用程序越来越强大，我们开始需要让Web应用程序处理和操作原始的二进制数据。JavaScript数组无法处理这些原始的二进制数据，所以我们引入了JavaScript的类型化数组。

类型化数组

　　类型化数组是一种与数组非常相似的对象，但它提供了一种将原始二进制数据写入内存缓冲区的机制。各大浏览器都很好的支持这个功能，ES6已经将它集成到了JavaScript核心框架中。还可以访问map()和filter()等数组方法。我强烈建议您浏览本文末尾提到的参考资料，以了解更多关于类型化数组的知识。

组成

　　类型化数组由两个主要部分组成，缓冲区和视图。

　　缓冲区

　　Buffer是ArrayBuffer类型的对象，表示一个数据块。该原始二进制数据块不能被独立访问或修改。您可能对无法访问或修改的数据对象的使用感到好奇。其实视图就是缓冲区的读写接口。

　　视图

　　View是一个对象，允许您访问和修改存储在ArrayBuffer中的原始二进制内容。总的来说，有两种观点。

　　TypedArray 对象的实例

　　这些类型的对象与普通数组非常相似，但只存储单一类型的数值数据。Int8、Uint8、Int16和Float32等数据类型是类型化数组。类型中的数字表示为该数据类型分配的位数。例如，Int8表示一个8位整数。

　　DataView 对象的实例

　　DataView是一个低级接口，它提供了一个getter/setter API来读写缓冲区中的任意数据。这极大地方便了我们的开发，尤其是当我们需要在单个类型化数组中处理多种数据类型时。

　　使用DataView的另一个优点是它允许您控制数据的字节顺序。——类型化数组使用平台的字节顺序。当然，如果你的程序在本地运行，这不会是一个问题，因为你的设备将使用与输入数组相同的字节顺序。在大多数情况下，您的类型化数组将处于低位，因为英特尔采用了低位。因为英特尔在电脑处理器上很常见，所以大部分时候不会有问题。但如果将小端编码的数据传输到大端编码的设备，会导致读取出错，最终可能导致数据丢失。因为DataView使您能够控制字节顺序的方向，所以您可以在必要时使用它。

是什么使它们与普通数组不同

　　如前所述，普通的JavaScript数组已经被JavaScript引擎优化了。你不需要使用类型化数组来提升性能，因为它不会给你带来太多的升级。但是有些特性使得类型化数组不同于普通数组，这可能是你选择它们的原因。

　　让您处理原始的二进制数据。因为它们处理的数据类型有限，所以你的引擎优化类型化数组比普通数组更容易，因为普通数组的优化其实是一个非常复杂的过程。不能保证普通数组总是得到优化，因为您的引擎可能会因为各种原因而决定不进行优化。

在 Web 开发中的用途

XMLHttpRequest API

　　根据您的响应类型，您可以接收ArrayBuffer形式的数据响应。

　　const xhr=new XMLHttpRequest()；

　　xhr.open(GET ，example URL)；

　　xhr . response type= array buffer ；

　　xhr.onload=function () {

　　const arrayBuffer=xhr.response

　　//处理数据

　　};

　　xhr . send()；

Fetch API

　　类似于XMLHttpRequest API。Fetch API还允许您在ArrayBuffer中接收响应。只需要在fetch API响应中使用arrayBuffer()方法，就可以收到ArrayBuffer解析的承诺。

　　获取(url)。then(response=response . array buffer())。然后(arrayBuffer={

　　//处理数据

　　});

HTML Canvas

　　 HTML5 Canvas元素使您能够呈现动态2D形状和位图图像。这个元素只作为图形的容器，图形是在JavaScript的帮助下绘制的。

　　canvas的2D上下文使您能够将位图数据作为Uint8ClampedArray的实例进行检索。让我们来看看Axel博士提供的示例代码：

　　const canvas=document . getelementbyid( my _ canvas )；

　　const context=canvas . get context( 2d )；

　　const imageData=context . getimagedata(0，0，canvas.width，canvas . height)；

　　const uint 8 clampedarray=image data . data；

WebGL

　　 WebGL允许您渲染高性能的交互式3D和2D图形。它非常依赖类型化数组，因为它处理原始像素数据以在画布上输出必要的图形。

　　您可以在本文中阅读更多关于WebGL的基础知识。

Web Socket

　　 Web Socket允许您以Blob或数组缓冲区的形式发送和接收原始二进制数据。

　　const socket=new web socket( ws://localhost:8080 )；

　　socket . binary type= array buffer ；

　　//监听消息

　　socket . addevent listener( message ，function (event) {

　　const view=new DataView(event . data)；

　　//处理接收到的数据

　　});

　　//发送二进制数据

　　socket.addEventListener(open ，function (event) {

　　const typed array=new uint 16 array(7)；

　　socket . send(typed array . buffer)；

　　});虽然初学者可能不需要详细了解类型化数组，但当你进入高级JavaScript开发时，它们是必不可少的。这主要是因为您可能必须开发需要使用类型化数组的更复杂的应用程序。

　　要了解更多关于类型化数组的信息，请浏览下面附加的资源链接。

　　感谢您的阅读，祝您编程愉快！

资源

　　 JavaScript类型化数组-MDN文档

　　阿克塞尔博士探索JS

　　有关编程的更多信息，请访问：编程入门！上面的文章是关于JavaScript中类型化数组的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。