ECMAScript 2016(ES7)中的 TypedArray 数据类型详解

面试官:小伙子,你的数组去重方式惊艳到我了

ECMAScript 2016(ES7)中的 TypedArray 数据类型详解

介绍

在 ECMAScript 2016(ES7)中,TypedArray 是一个全新的数据类型,主要用于处理字节流和处理大规模数据。

TypedArray 是属于 ArrayBuffer 对象的视图,并提供了一个类似于数组的接口来操作 ArrayBuffer 的二进制数据。

目前 TypedArray 支持以下五种数据类型:

  • Int8Array: 用于处理 8 位 (1 字节) 有符号整数。
  • Uint8Array: 用于处理 8 位 (1 字节) 无符号整数。
  • Uint8ClampedArray: 用于处理 8 位 (1 字节) 无符号整数,但有个限制,即它对于大于 255 的数值会强制转换为 255。
  • Int16Array: 用于处理 16 位 (2 字节) 有符号整数。
  • Uint16Array: 用于处理 16 位 (2 字节) 无符号整数。
  • Int32Array: 用于处理 32 位 (4 字节) 有符号整数。
  • Uint32Array: 用于处理 32 位 (4 字节) 无符号整数。
  • Float32Array:用于处理 32 位 (4 字节) 浮点数。
  • Float64Array:用于处理 64 位 (8 字节) 浮点数。

TypedArray 的使用

创建 TypedArray

创建方式:

let buffer = new ArrayBuffer(10); let typedArray = new Int8Array(buffer); console.log(typedArray);

其中,new ArrayBuffer() 用于创建一个指定大小的 ArrayBuffer,Int8Array() 则将其作为参数传递。

使用数据的大小会在创建时固定,不能更改。所以在创建前,必须确定其大小。

访问和修改数据:

let buffer = new ArrayBuffer(10); let int8Array = new Int8Array(buffer); int8Array[0] = 10; console.log(int8Array[0]); // 10

访问和修改数据的方式与数组相同,不同的是修改数据的过程必须保证数据类型一致,否则会出现类型错误。

let buffer = new ArrayBuffer(10); let int8Array = new Int8Array(buffer); int8Array[0] = "10"; // TypeError: Invalid value used in weak set

借助 set() 方法进行数据操作:

let buffer = new ArrayBuffer(10); let uint8Array = new Uint8Array(buffer); uint8Array.set([5, 6]); console.log(uint8Array); // Uint8Array [5, 6, 0, 0, 0, 0, 0, 0, 0, 0]

数组拷贝:

let buffer = new ArrayBuffer(10); let uint8Array1 = new Uint8Array(buffer, 0, 3); let uint8Array2 = new Uint8Array(buffer, 3, 3); uint8Array1.set([1, 2, 3]); uint8Array2.set(uint8Array1.subarray(0, 2)); console.log(uint8Array1); // Uint8Array [1, 2, 3] console.log(uint8Array2); // Uint8Array [1, 2, 0]

数组填充:

let buffer = new ArrayBuffer(10); let uint8Array = new Uint8Array(buffer); uint8Array.fill(1); console.log(uint8Array); // Uint8Array [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

数组排序:

let buffer = new ArrayBuffer(10); let uint8Array = new Uint8Array(buffer); uint8Array.set([3, 2, 1]); console.log(uint8Array.sort()); // Uint8Array [1, 2, 3]

TypedArray 对比原生 Array

TypedArray 和原生 Array 的用法基本相同,但有一些细微的区别和不同,如下:

TypedArray 与原生 Array 的区别:

  • TypedArray 中存储的是二进制数据,而不是任意类型的数据。
  • TypedArray 中的数据类型固定,不可扩展。
  • TypedArray 中的元素不支持操作符 in。
  • TypedArray 不支持 push() 和 pop() 等非字节级别的操作。
  • TypedArray 不支持 sort(),但是支持 sort() 方法作用于 TypedArray 的视图。

在一些特定的场景下,TypedArray 将原生 Array 大幅降低内存占用,提高性能。

例如,使用原生 Array 存储一个 100 万个 int 类型数据的数组,内存占用约 32MB,而使用 TypedArray 则只占用约 4MB。

结论

在本文中,我们详细介绍了 ECMAScript 2016(ES7)中的 TypedArray,这是一个全新的数据类型,用于处理字节流和处理大规模数据。

我们了解了 TypedArray 的创建、修改、访问、数据拷贝、数组填充、数组排序等操作,并与原生 Array 进行了对比。

在一些特定的场景下,TypedArray 将原生 Array 大幅降低内存占用,提高性能。因此,在处理大规模数据时,推荐使用 TypedArray 进行处理,以提高效率。

示例代码

let buffer = new ArrayBuffer(10); let uint8Array1 = new Uint8Array(buffer, 0, 3); let uint8Array2 = new Uint8Array(buffer, 3, 3); uint8Array1.set([1, 2, 3]); uint8Array2.set(uint8Array1.subarray(0, 2)); console.log(uint8Array1); // Uint8Array [1, 2, 3] console.log(uint8Array2); // Uint8Array [1, 2, 0]

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/670895b9d91dce0dc872a65c


猜你喜欢

  • Headless CMS 构建虚拟化技术的实践

    背景 在前端应用程序的开发中,CMS(Content Management System,内容管理系统)一直是必不可少的组成部分。CMS 可以提高开发速度和效率,同时也能够快速响应内容更新请求。

    7 天前
  • 详解 Socket.io 的事件机制

    前言 Socket.io 是一个跨平台的实时通信库,可在浏览器和服务器之间进行双向通信。它能够广泛应用于聊天应用程序、游戏等需要实时通信的场景。Socket.io 架构基于事件驱动,使用的是事件机制,...

    7 天前
  • Angular2 + 中的状态管理:使用 RxJS 的 Subject 进行组件之间数据传递

    在 Angular2+ 中,状态管理是非常重要的一部分,特别是在大型应用中。当组件的数量增加时,组件内部状态的管理变得更加困难。使用 RxJS 的 Subject 可以很好的解决这个问题,它提供了一种...

    7 天前
  • 如何在 Vue.js 中构建可测试性高的 SPA?

    Vue.js 是一个流行的 JavaScript 框架,用于构建单页面应用程序(SPA)。Vue.js 为开发人员提供了灵活性和可扩展性,使其能够轻松构建出高度交互的前端应用程序。

    7 天前
  • Vue.js与PWA技术实现多页面应用

    在前端应用开发中,最常用的手段是实现单页应用(SPA)。在单页应用中,一个页面可以使用同一个 HTML 和 JavaScript 文件,但这也带来了一些问题,例如无法缓存页面和慢速加载。

    7 天前
  • 解决响应式设计中的断行问题

    在响应式设计中,我们需要考虑在不同尺寸的设备上如何让页面内容更好地呈现。其中一个常见的问题是断行问题,即在过小的设备上,一行文本被截成了多行,导致阅读体验变得很糟糕。

    7 天前
  • 高效处理 React Native 应用中的图片资源

    React Native 是 Facebook 推出的一款跨平台开发框架,它允许开发者使用 JavaScript 和 ReactJS 的知识来开发本地应用程序。在 React Native 应用中,图...

    7 天前
  • Next.js 中 style-loader 的使用指南

    在前端开发中,如何管理和处理样式显得非常重要。随着项目规模的不断扩大,我们需要一种可靠的方式来组织和加载样式。 Next.js 的 style-loader 是一种非常优秀的解决方案,能够让我们更加高...

    7 天前
  • Sequelize 参数类型详解及其在项目中的运用

    引言 在 Web 开发领域中,后端程序员不可避免地会与数据库打交道。而对于 Node.js 开发者来说,Sequelize 是一种非常常用的 ORM(对象关系映射)库,它提供了标准的 API 来操作基...

    7 天前
  • 如何避免使用 Custom Elements 时的命名冲突

    引言 在前端开发中,我们会经常使用自定义元素 (Custom Elements) 来扩展 HTML 元素。使用自定义元素可以帮助我们构建更加模块化、可重用的代码,同时也可以提高代码的可维护性。

    7 天前
  • ES12 中的 async/await 实际应用及错误处理技巧

    引言 ES12 中的 async/await 是异步编程中的一项重要技术,使得异步函数的编写变得更加简单和直观。与之前基于 Promise 的异步编程方式相比,async/await 可以带来更简洁、...

    7 天前
  • Flexbox 布局下的项行列对齐技巧

    Flexbox 是一种强大的 CSS 布局模型,它可以让开发人员更加轻松地控制网页中的布局。在使用 Flexbox 进行布局时,对于项(items)的对齐方式非常重要,因为这些项的位置关系直接影响页面...

    7 天前
  • 在 Deno 中使用 Nginx 作为反向代理

    引言 Deno 是一个基于 V8 引擎的 TypeScript 运行时,它拥有一些 Node.js 缺乏的安全性和模块化特性,在前端领域也有着广泛的应用。然而,Deno 的生态系统相对于 Node.j...

    7 天前
  • 如何避免 Web Components 内存泄漏

    前言 Web Components 让前端组件复用变得更为简单,可以通过自定义元素、Shadow DOM 及 HTML Templates 等技术来创建自己的组件。

    7 天前
  • RxJS 入门指南

    RxJS 是一个强大的 JavaScript 库,它提供了一套用于处理异步和事件驱动数据流的工具和工具集。本指南将向您介绍 RxJS,教你如何从零开始使用它,并用深入的示例代码帮助你更深入了解 RxJ...

    7 天前
  • 避免 Webpack 在开发模式下编译速度过慢的问题

    在开发前端项目时,Web前端初学者需要使用某些工具来管理代码,打包资源等。Webpack 是一个常见的前端资源处理工具,它使用模块打包器的形式来组织前端代码,而在开发过程中,Webpack经常会遇到编...

    7 天前
  • 在 Node.js 中如何使用 Cheerio 进行 HTML 页面解析

    在 Node.js 中,解析 HTML 页面是一个很常见的任务。我们可以使用许多不同的库来实现这个功能,其中一个很受欢迎的库是 Cheerio。Cheerio 是一个 jQuery 核心的子集,可用于...

    7 天前
  • 使用 Express.js 处理跨域请求的方法

    什么是跨域请求 跨域请求是指一个网站页面请求另一个网站的资源的情况。在 Web 应用中,浏览器限制了从脚本中发起的跨域 HTTP 请求。这种限制可以防止恶意网站通过用户的浏览器发起攻击,但也使得跨域请...

    7 天前
  • 如何利用 CSS3 实现响应式背景特效

    如何利用 CSS3 实现响应式背景特效 响应式设计是当今 Web 开发中不可或缺的一个重点,而 CSS3 则为我们提供了许多可以用来实现响应式设计的工具。其中包括实现响应式背景特效的工具。

    7 天前
  • Material Design 中利用 CardView 来显示文本

    在现代网页设计中,用户肯定希望看到更多的信息,而与此同时,设计者也希望在显示给用户的过程中保持页面的美观和简洁。Material Design 提供了一个完美的解决方案,这就是 CardView。

    7 天前

相关推荐

    暂无文章