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

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 前面的文章,已经介绍了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开发的挑战。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
18天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
32 0
|
19天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
35 4
js学习--制作猜数字
|
19天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
31 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
14天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
15 2
|
18天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
18天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
19天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
13 2
|
19天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
14 2
|
19天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
31 1
|
19天前
|
JavaScript
js学习--抽奖
js学习--抽奖
11 1