2

JS 中的集合引用类型_安东尼漫长的技术岁月的技术博客_51CTO博客

 2 years ago
source link: https://blog.51cto.com/u_13961087/5398367
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JS 中的集合引用类型

原创

avaScript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。

中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。

于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着跳着看），将抽取精华，用最简单的话解释核心点、尽量把握全局、快速过一遍的同时，记录与工友们分享~~

第六章：集合引用类型， 主要讲的就是 Object 和 Array

let obj = {}

// 和

let obj = new Object()
复制代码



这两个是一样的吗？



咱就说，别光看着了，在控制台上打印打印，不就知道了？



JS 中的集合引用类型_ecmascript



JS 中的集合引用类型_数组_02

两者是相同的！



作者提到：



但实际上开发者更倾向于使用对象字面量表示法。这是因为对象字面量代码更少，看起来也更有封装所有相关数据的感觉。



有谁会这样创建数组吗？



let names = Array("Greg")
复制代码



本瓜想应该很少人会这样~



题外问：你认为以下两句声明，效果一样吗？



let str = new String()

let str = ""
复制代码






除了 Object，Array 应该就是 ECMAScript 中最常用的类型了。



书归正文，讲到了系列操作数组的方法。



数组索引、数组检测 .isArray()、数组迭代器、数组转换 toString()和 valueOf()、数组操作、排序等等……



特别提下：数组的归并



ECMAScript 为数组提供了两个归并方法：reduce()和 reduceRight()，这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。



reduce() 和 reduceRight() 接收 4 个参数：上一个归并值、当前项、当前项的索引和数 组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。



我们熟悉的，用 reduce 作加法：



let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum); // 15
复制代码



let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function(prev, cur, index, array){
 return prev + cur;
});
alert(sum); // 15
复制代码



另一个容易忽略的重点：定型数组



定型数组（typed array）是 ECMAScript 新增的结构，目的是提升向原生库传输数据的效率。



为什么要创造定型数组？？



一句话可以理解为：为了让 JavaScript 具有更好的 2D、3D 绘制能力~



设计定型数组的目的就是提高与 WebGL 等原生库交换二进制数据的效率。由于定型数组的二进制表示对操作系统而言是一种容易使用的格式，JavaScript 引擎可以重度优化算术运算、按位运算和其他对定型数组的常见操作，因此使用它们速度极快。



ArrayBuffer 是所有定型数组及视图引用的基本单位。



const buf = new ArrayBuffer(16); // 在内存中分配 16 字节
alert(buf.byteLength); // 16

const buf = new ArrayBuffer(12); // 创建一个 12 字节的缓冲
复制代码



允许读写 ArrayBuffer 的视图是 DataView



const ints = new Int32Array(buf);// 创建一个引用该缓冲的 Int32Array
复制代码



这个定型数组知道自己的每个元素需要 4 字节（4*8），在控制台打印试试（挖坑：后面有机会专题补以下 ArrayBuffer）



JS 中的集合引用类型_ecmascript_03



然后，讲到了 Map （新的集合类型，为 JS 这门语言带来了真正的键/值存储机制；）和 Set （新集合类型，为 JS 这门语言带来集合数据结构）；



 💡 有没有想过，为什么已经有了 Object ，还要多加一种 Map 类型？有了 Array ，还要多加一种 Set 类型？？如果单单是为了增强功能，为什么不直接加操作方法呢？而是要另起炉灶，再重新定义呢？



接着行文一并提到：WeakMap、WeakSet



WeakMap 只接受对象作为键名（null除外），不接受其他类型的值作为键名；键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的；不能遍历



WeakSet 成员都是对象或数组，成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏，不能遍历；



JavaScript 比较独特的一点是，函数其实是 Function 类型的实例，这意味着函数也是对象。



Function.prototype===Function.__proto__ // true
复制代码



另外：ECMAScript 6 新增了一批引用类型：Map、WeakMap、Set 和 WeakSet。这些类型为组织应用程序数据和简化内存管理提供了新能力。



OK，以上便是本篇分享。 觉得不错点个赞吧👍👍👍，您的鼓励，我的动力，坚持原创质量好文~~ 欢迎评论留言 我是掘金安东尼，输出暴露输入，技术洞见生活。再会吧~~ 👋👋👋

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK