示例工程【免费下载链接】samplesA repo containing samples tied to new functionality in each release of Google Chrome.项目地址https://gitcode.com/gh_mirrors/samp/samples点击查看免费下载导读本文围绕 Google Chrome Samples 仓库中的typedarray-methods-es6样例系统解析 ECMAScript 2015ES2015为各类TypedArray子类新增的静态方法TypedArray.from()、TypedArray.of()以及镜像Array.prototype的 18 个实例方法。读完本文你将理解类型化数组与普通Array在这些方法上的异同、元素强制数值转换与溢出取模等底层行为并可直接复用样例中完整、可运行的代码片段。一、样例背景Chrome 45 与 ES2015 的 TypedArray 方法typedarray-methods-es6是 Google Chrome Samples 仓库中的一个功能样例其页面源码 typedarray-methods-es6/index.html 的 front matter 记录了该功能的元信息feature_name: TypedArray Methods (ECMAScript 2015) chrome_version: 45 feature_id: 4919908559224832即该功能自 Chrome 45 起可用。ECMAScript 2015 规范在TypedArray子类Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array上新增了静态方法并在其原型上新增了实例方法这些实例方法镜像了绝大多数Array.prototype方法。样例目录结构非常精简typedarray-methods-es6/README.md样例入口说明指向页面本体typedarray-methods-es6/index.html完整技术说明与演示页面typedarray-methods-es6/demo1.jsTypedArray.from()演示代码typedarray-methods-es6/demo2.jsTypedArray.of()演示代码。其中index.html通过{% include js_snippet.html %}将两个demo*.js内联到页面并高亮展示这一机制详见仓库的 _includes/js_snippet.html它先用script直接内联执行对应脚本再用{% highlight js %}语法高亮渲染源码让演示页面同时具备可运行与可阅读两种形态。二、TypedArray.from()从可迭代与类数组对象构建类型化数组签名与语义TypedArray.from ( items [ , mapfn [ , thisArg ] ] )TypedArray.from()提供了一种全新的、基于现有可迭代iterable对象或类数组array-like对象创建TypedArray的方式其用途与Array.from完全对应。mapfn可选会在每个元素写入新数组前执行一次映射thisArg可选用于指定mapfn执行时的this值。样例代码逐行解读typedarray-methods-es6/demo1.js 给出了三行经典用法Uint8Array.from(new Set([1, 1, 2, 3])); // [1, 2, 3] Uint8Array.from(hello); // [0, 0, 0, 0, 0] Uint8Array.from(hello, x x.charCodeAt(0)); // [104, 101, 108, 108, 111]Uint8Array.from(new Set([1, 1, 2, 3]))→[1, 2, 3]Set本身是可迭代对象且天然去重因此从集合迭代得到的元素序列为1, 2, 3写入新的Uint8Array后即为[1, 2, 3]。这也体现了from的第一个实用场景把任意可迭代数据源Set、Map、生成器、字符串、NodeList等直接类型化。Uint8Array.from(hello)→[0, 0, 0, 0, 0]字符串按 UTF-16 码元迭代出h、e、l、l、o五个字符。由于未提供mapfn字符会被直接写入Uint8Array写入时发生强制数值转换ToNumber(h)的结果是NaN而NaN写入无符号 8 位整型数组时按0存储因此五个字符全部落为0。Uint8Array.from(hello, x x.charCodeAt(0))→[104, 101, 108, 108, 111]提供mapfn后每个字符先经x.charCodeAt(0)映射为其 UTF-16 码元值再写入数组于是得到h104、e101、l108、l108、o111。这正是字符串与二进制数据互转的常用手法。与 Array.from 的差异对比仓库中的配套样例 array-methods-es6/demo1.js 展示了普通数组的相同调用Array.from(new Set([1, 1, 2, 3])); // [1, 2, 3] Array.from(hello); // [h, e, l, l, o] Array.from(hello, x x.charCodeAt(0)); // [104, 101, 108, 108, 111]两相对照差异一目了然Array.from(hello)保留字符原值得到[h, e, l, l, o]而Uint8Array.from(hello)因元素类型约束全部变成0。这说明TypedArray.from的核心区别在于写入时强制的数值类型转换——普通数组是元素的容器类型化数组是固定类型的数值缓冲。三、TypedArray.of()由可变参数创建类型化数组签名与语义TypedArray.of ( ...items )TypedArray.of()用任意数量的参数创建一个新的TypedArray与Array.of()几乎相同无论参数个数与类型如何都会生成一个以这些参数为初始元素的数组不会像构造器那样因参数个数不同而触发不同的构造分支例如new Array(3)会创建长度为 3 的空数组。样例代码解读typedarray-methods-es6/demo2.js 只有一行Uint8Array.of(1, 2, 3, 256 4); // [1, 2, 3, 4]这里最值得注意是最后一个参数256 4 260它超出了Uint8Array的取值范围[0, 255]。类型化数组在写入元素时会先做ToNumber转换再按元素类型对 256 取模因此260 % 256 4最终得到[1, 2, 3, 4]。这一行为与Uint8Array.from中的强制转换完全一致是类型化数组底层数值寄存器语义的直接体现。与 Array.of 的对比对照 array-methods-es6/demo3.jsArray.of(hello); // [hello] Array.of(1, 2, 3); // [1, 2, 3] Array.of(blink, 182); // [blink, 182]Array.of可以容纳任意类型字符串、数字混存而TypedArray.of的每个参数都会被强制转换为目标元素类型超出范围的数值还会发生取模溢出。四、18 个镜像的 Array.prototype 实例方法除静态方法外ES2015 还在%TypedArray%.prototype上镜像了以下 18 个Array.prototype方法完整列表见 typedarray-methods-es6/index.htmlTypedArray.prototype.copyWithinTypedArray.prototype.everyTypedArray.prototype.fillTypedArray.prototype.filterTypedArray.prototype.findTypedArray.prototype.findIndexTypedArray.prototype.forEachTypedArray.prototype.indexOfTypedArray.prototype.joinTypedArray.prototype.lastIndexOfTypedArray.prototype.mapTypedArray.prototype.reduceTypedArray.prototype.reduceRightTypedArray.prototype.reverseTypedArray.prototype.someTypedArray.prototype.sortTypedArray.prototype.toLocaleStringTypedArray.prototype.toString这些方法在回调参数、返回值与边界行为上与Array.prototype同名方法保持一致。为便于记忆与查阅可以按用途分组理解查找类find(predicate [, thisArg])返回第一个满足predicate的元素值没有则返回undefinedfindIndex(predicate [, thisArg])返回第一个满足predicate的元素下标没有则返回-1indexOf(searchElement [, fromIndex])从前往后查找元素下标lastIndexOf(searchElement [, fromIndex])从后往前查找元素下标some(predicate [, thisArg])任一元素满足条件即返回trueevery(predicate [, thisArg])全部元素满足条件才返回true。变换与聚合类map(mapper [, thisArg])逐元素映射返回一个同类型的新 TypedArrayfilter(predicate [, thisArg])过滤出满足条件的元素返回同类型新 TypedArrayforEach(callback [, thisArg])逐元素遍历无返回值reduce(reducer [, initialValue])从左到右归并reduceRight(reducer [, initialValue])从右到左归并。重排与修改类copyWithin(target, start [, end])将数组中一段元素复制到target起始位置end默认取数组长度负数索引按length index处理fill(value [, start [, end]])用value填充start默认 0到end默认长度之间的元素reverse()就地反转元素顺序sort([compareFn])排序TypedArray的默认排序比较器按数值排序与Array.prototype.sort默认按字符串排序不同。输出类join([separator])用分隔符拼接为字符串toString()转为字符串表示toLocaleString()按本地化规则转为字符串。仓库中与之呼应的 array-methods-es6/index.html 样例为其中部分Array方法提供了配套演示如copyWithin、fill、find、findIndex等见 array-methods-es6/demo4.js 至 array-methods-es6/demo8.js两套样例配合阅读可以完整对照同一套 ES2015 方法在Array与TypedArray上的表现差异。五、底层行为差异与注意事项结合样例代码可以总结出类型化数组方法区别于普通数组的几个关键底层行为元素强制数值化写入TypedArray的每个值都会经过ToNumber转换字符串、NaN、对象等都会被换算成数值。Uint8Array.from(hello)得到全 0 就是最直观的证据。溢出取模整型数组写入超出类型范围的值时按 256或对应类型的模数取模例如Uint8Array.of(256 4)得到4Uint8ClampedArray则是夹取到[0, 255]边界不取模。长度固定由于类型化数组长度不可变镜像方法列表中不包含push、pop、shift、unshift、splice、concat这类改变长度的Array方法——这正是这份 18 方法清单的边界所在。结果仍为 TypedArraymap、filter返回同类型的新 TypedArray而不是普通数组find返回元素值、findIndex返回下标语义与Array版本一致。sort默认数值排序这是TypedArray.prototype.sort与Array.prototype.sort的一个显性差异处理数值缓冲数据时通常更符合预期。六、如何在仓库中查看与运行该样例该样例本身是纯前端演示无需构建步骤即可查看直接阅读 typedarray-methods-es6/index.html 即可看到完整说明与代码展示两个演示脚本 typedarray-methods-es6/demo1.js 与 typedarray-methods-es6/demo2.js 会被页面内联执行在支持 Chrome 45 及以上版本ES2015 完整支持的浏览器中打开页面打开开发者工具即可在控制台观察到注释中标注的运行结果。如果希望在本地复现该仓库的页面渲染效果可以注意到index.html依赖仓库的 Jekyll 模板机制front matter 与{% include js_snippet.html %}指令相关说明见 README.md本地搭建 Jekyll 环境后即可获得与线上一致的模板化渲染页面。对于已支持 ES2015 的现代浏览器也可以直接在控制台逐行运行demo1.js、demo2.js中的表达式来验证行为——无需任何依赖几行代码即可完整还原本样例的全部要点。赞分享示例工程【免费下载链接】samplesA repo containing samples tied to new functionality in each release of Google Chrome.项目地址https://gitcode.com/gh_mirrors/samp/samples点击查看免费下载相关推荐Resilience4j方法引用静态方法与实例方法使用Resilience4j方法引用静态方法与实例方法使用 1. 引言你还在为Resilience4j方法引用困惑吗 在Java应用程序开发中构建弹性Re后端微服务Prefect流程入口实战静态方法与类方法技术解析Prefect流程入口实战静态方法与类方法技术解析 你还在为Prefect流程入口设计烦恼当需要将业务逻辑封装为类时应该用静态方法还是类方法定义流程本文工作流自动化流程编排任务调度数据工程后端30 seconds of code 深度解析JavaScript 静态方法与实例方法static vs instance methods30 seconds of code 深度解析JavaScript 静态方法与实例方法static vs instance methods 在 JavaS教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考