从0开始学习JavaScript--JavaScript类型化数组进阶

简介: 前面的文章,已经介绍了JavaScript类型化数组的基本概念、常见类型和基本操作。在本文中,我们将深入探讨类型化数组的一些进阶特性,包括共享内存、大端小端字节序、以及类型化数组与普通数组之间的转换,通过更丰富的示例代码,帮助大家更好地理解和应用这些高级功能。

前面的文章,已经介绍了JavaScript类型化数组的基本概念、常见类型和基本操作。在本文中,我们将深入探讨类型化数组的一些进阶特性,包括共享内存、大端小端字节序、以及类型化数组与普通数组之间的转换,通过更丰富的示例代码,帮助大家更好地理解和应用这些高级功能。

1. 共享内存

类型化数组可以通过共享内存的方式,实现不同TypedArray之间的数据共享。这种共享内存的方式能够在不拷贝底层二进制数据的情况下,让不同的TypedArray共享相同的数据。

// 示例:共享内存
let buffer = new ArrayBuffer(16); // 创建一个包含16字节的内存

// 创建两个视图,共享同一块内存
let intArray = new Int32Array(buffer);
let uintArray = new Uint8Array(buffer);

intArray[0] = 42;
uintArray[4] = 255;

console.log(intArray[0]); // 输出:42
console.log(uintArray[4]); // 输出:255

在这个例子中,创建了一个包含16字节的ArrayBuffer,然后通过Int32ArrayUint8Array两个视图,分别以32位整数和8位无符号整数的方式解释这段内存。通过共享同一块内存,它们可以互相影响。

2. 大端小端字节序

在计算机中,多字节数据的存储顺序有两种:大端字节序(Big Endian)和小端字节序(Little Endian)。大端字节序是将高位字节存储在低地址,小端字节序则相反。在处理二进制数据时,了解字节序很重要,因为不同平台可能使用不同的字节序。

// 示例:大端小端字节序
let buffer = new ArrayBuffer(4); // 创建一个包含4字节的内存

// 创建两个视图,一个使用大端字节序,一个使用小端字节序
let viewBigEndian = new DataView(buffer);
let viewLittleEndian = new DataView(buffer);

viewBigEndian.setInt32(0, 42, false); // 使用大端字节序存储32位整数
viewLittleEndian.setInt32(0, 42, true); // 使用小端字节序存储32位整数

console.log(viewBigEndian.getInt32(0, false)); // 输出:42
console.log(viewLittleEndian.getInt32(0, true)); // 输出:42

在这个例子中,创建了一个包含4字节的ArrayBuffer,并使用DataView创建了两个视图,一个使用大端字节序,一个使用小端字节序。通过设置不同的字节序进行存储和读取,我们可以看到相同的值在不同的字节序下的表示。

3. TypedArray与普通数组转换

TypedArray与普通数组之间可以相互转换,这在一些场景下很有用。TypedArray提供了from()of()方法,使得转换更为方便。

// 示例:TypedArray与普通数组转换
let normalArray = [1, 2, 3, 4];

// 从普通数组创建TypedArray
let intArray = Int32Array.from(normalArray);
let floatArray = Float32Array.from(normalArray);

console.log(intArray); // 输出:Int32Array [1, 2, 3, 4]
console.log(floatArray); // 输出:Float32Array [1, 2, 3, 4]

// 将TypedArray转换为普通数组
let backToNormalArray1 = Array.from(intArray);
let backToNormalArray2 = Array.of(...floatArray);

console.log(backToNormalArray1); // 输出:[1, 2, 3, 4]
console.log(backToNormalArray2); // 输出:[1, 2, 3, 4]

在这个例子中,使用from()方法从普通数组创建了两个TypedArray,然后使用Array.from()Array.of()方法将TypedArray转换为普通数组。

4. 实际应用场景

共享内存和字节序的处理在一些高性能计算和网络通信的场景中非常有用。在处理复杂数据结构时,共享内存能够避免不必要的内存拷贝,提高性能。而在进行跨平台数据交互时,了解和处理字节序能够确保数据的正确解释。

// 示例:实际应用场景 - 简单的网络通信
let socket = new WebSocket("wss://example.com");

socket.addEventListener("message", (event) => {
   
   
  let data = new Uint8Array(event.data); // 接收到的数据以Uint8Array的形式解释
  // 处理接收到的数据...
});

let sendData = new Uint32Array([42, 87, 123]);
socket.send(sendData.buffer); // 发送数据,使用共享内存

在这个例子中,使用WebSocket进行简单的网络通信,接收到的数据以Uint8Array的形式解释,而发送数据则使用了Uint32Array的共享内存。

总结

在这篇文章中,分享了JavaScript类型化数组的高级特性,包括共享内存、大端小端字节序、以及类型化数组与普通数组之间的转换。这些特性为处理复杂数据结构和优化性能提供了有力支持。

了解大端小端字节序的概念是处理多字节数据的关键,尤其在跨平台数据交互时。我们通过示例代码演示了如何使用DataView处理不同字节序下的数据,确保数据的正确解释和传输。

类型化数组与普通数组的相互转换为开发者提供了更灵活的操作方式。通过from()of()方法,可以轻松地在TypedArray和普通数组之间进行转换,使得在不同数据结构之间的切换更为便捷。

在实际应用场景中,通过简单的网络通信示例展示了这些高级特性的实际应用。WebSocket通信中使用Uint8Array和Uint32Array,以及共享内存的方式,使得数据传输更为高效。

JavaScript类型化数组的进阶特性为处理底层二进制数据提供了更多选择和优化空间。随着Web平台的不断发展,对于处理大规模数据的需求日益增长,这些特性将成为Web开发中不可或缺的利器。通过深入研究和实践这些高级特性,可以更好地应对未来Web开发的挑战。

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
179 0
|
11月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
11月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
344 113
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
201 5
|
11月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
231 2