《JS原理、方法与实践》- ES6新增对象(上篇)

简介: 《JS原理、方法与实践》- ES6新增对象(上篇)

#### Symbol

Symbol是ES6中新增的一种类型,其含义是符号、标志,它的作用是每调用一次都会返回一个独一无二的返回值,我们可以将此返回值作为对象的属性,这样就不会与原有的属性重名了。即使传入相同的参数,Symbol方法也会返回不同的值。Symbol只能作为方法使用,而不是使用new去创建对象。另一个作用是使用Symbol.iterator作为属性来定义遍历器。

代码示例:

```

var obj = {};

var abc1 = Symbol('abc');

var abc2 = Symbol('abc');

obj[abc1] = 'hello';

console.log(obj[abc1]); // hello

console.log(obj[abc2]); // undefined

console.log(obj[Symbol('abc')]); // undefined

console.log(abc1 === abc2); // false

```

#### 容器对象_Set

Set是一种集合类型,类似于Array数组,但与Array存在两点不同:Set中的元素不可以重复;Set中的元素没有序号。

###### Set对象的属性

Set的prototype属性对象有一个size属性和8个方法:add、clear、delete、has、keys、entries、forEach和values。

代码示例:

```

var setTest = new Set();

// add:对象添加元素,且返回一个Set对象

setTest.add('a').add('b').add('c');

for (var v of setTest) {

 console.log(v); // a, b, c

}

// has: 判断Set对象中是否包含某个元素

console.log(setTest.has('a')); // true

// values: 获取Set的值

for (var v of setTest.values()) {

 console.log(v); // a, b, c

}

// keys: 与map对应,set的名-值相等

for (var v of setTest.keys()) {

 console.log(v); // a, b, c

}

// entries: 获取名-值对, 与map对应。

for (var v of setTest.entries()) {

 console.log(v); // ['a', 'a'],['b', 'b'], ['c', 'c']

}

// 遍历Set对象

setTest.forEach((v) => console.log(v)); // a,b,c

// delete: 删除Set对象的某一个元素

setTest.delete('a');

setTest.forEach((v) => console.log(v)); // b,c

// clear:清空Set对象

setTest.clear();

setTest.forEach((v) => console.log(v)); // 无输出

```

#### 容器对象_Map

Map对象一种名值对结构。它的作用与对像不同,功能比较单一,只是保存数据的一种容器。虽然对象objct也是保存名值对,但有所不同。

* 如果Map的value是function类型,那么在function的方法体中Map不可以作为this使用。

* 如果对象的属性名全是对象,则会转换为字符串来使用(Symbol)除外,而如果Map的key是对象,则不需要转换,可以直接使用。

代码示例一:

```

let obj = new Object();

let map = new Map();

obj.name = 'zzh';

obj.logName = function() {

 console.log(`name is ${this.name}`);

}

map.set('name', 'zzh');

map.set('logName', function() {

 console.log(`name is ${this.name}`);

});

obj.logName(); // name is zzh

map.get('logName')(); // name is  

map.logName(); // error: Uncaught TypeError: map.logName is not a function

```

代码示例二:

```

var key1 = new Set([1,2,3]);

var key2 = new Set([2,3,4]);

var obj = new Object();

var map = new Map();

obj[key1] = 'value';

console.log(obj[key1]); // value

console.log(obj[key2]); // value

console.log(obj[new Set()]); // value

// obj[key1]: [object Set],  

// obj[key2]: [object Set],  

// obj[new Set()]: [object Set]

console.log(`obj[key1]: ${key1.toString()},  

obj[key2]: ${key2.toString()},  

obj[new Set()]: ${(new Set()).toString()}`);  

map.set(key1, 'value');

console.log(map.get(key1)); // value

console.log(map.get(key2)); // undefined

```

Map有一个size属性和9个方法:get, set, has, clear, delete, keys, values, entries, forEach。

Set的prototype属性对象有一个size属性和8个方法:add、clear、delete、has、keys、entries、forEach和values。

代码示例:

```

var mapTest = new Map();

// set:对象添加元素,且返回一个Map对象

mapTest.set('a', 97).set('b', 98).set('c', 99);

//  ["a",97],["b",98],["c",98]

for (var v of mapTest) {

 console.log(v);  

}

// get: 根据key,查询该key对应的value

console.log(mapTest.get('a')); // 97

// has: 判断Map对象中是否包含某个元素

console.log(mapTest.has('a')); // true

// values: 获取Map的值

for (var v of mapTest.values()) {

 console.log(v); // 97,98, 99

}

// keys: 遍历Map的key

for (var v of mapTest.keys()) {

 console.log(v); // a, b, c

}

// entries: 获取名-值对

for (var v of mapTest.entries()) {

 console.log(v); // ['a', 97],['b', 98], ['c', 99]

}

// 遍历Map对象

mapTest.forEach((v) => console.log(v)); // 97,98,99

// delete: 删除Map对象的某一个元素

mapTest.delete('a');

mapTest.forEach((v) => console.log(v)); // 98,99

// clear:清空Map对象

mapTest.clear();

mapTest.forEach((v) => console.log(v)); // 无输出

```

#### WeakSet和WeakMap

WeakSet和WeakMap是弱化了的Set和Map,具体说,就是垃圾回收器不会关注元素保存在WeakSet或WeakMap中所产生的以用。换句话说,在WeakSet或者WeakMap中保存的对象,或者在其他地方已经没有引用,垃圾回收器就可能回收它们所占用的内存,而不会考虑WeakSet和WeakMap中的引用,这样做可以有效避免内存泄漏的问题。

WeakSet和WeakMap在使用上跟Set和Map的区别主要是:WeakSet中的元素和WeakMap中的key都只能是对象类型(WeakMap的value可以是任意类型);WeakSet和WeakMap都没有size属性,都没有clear方法,都不可以遍历所包含的元素。

WeakSet的prototype一共有三个方法: add, has, delete

WeakMap的prototype一共有四个方法:get, set, has, delete

#### 缓存对象

ES6中新增了缓存类型,相关的对象一共有三个:ArrayBuffer、TypedArray和DataView。使用缓存进行操作的速度更快,缓存主要适用于对大量二进制数据的操作。

ArrayBuffer就像一个蓄水池,TypedArray就像水盆、水桶等多种盛水的工具,每种工具的大小都是确定的,而DataView则像一种可以随便改变大小的容器,可以更加灵活的使用蓄水池中的水。

###### ArrayBuffer只是用来保存数据,但不可以自己操作数据;TypedArray和DataView只是操作缓存数据的工具,他们本身并不存储数据。

#### ArrayBuffer

var buffer = new ArrayBuffer(16);

缓存对象有一个byteLength属性和一个slice方法。byteLength表示缓存包含的字节数,slice方法可以提取出自己的一部分来创建一个新的缓存。slice方法有两个参数:start和end,start表示从那个字节开始提取,end表示提取到第几个字节,即提取的起始字节和结束字节,如果省略,则start默认为0,end默认为原始缓存所包含的字节数。

代码示例:

```

var buffer = new ArrayBuffer(16);

var buffer1 = buffer.slice();

var buffer2 = buffer.slice(5);

var buffer3 = buffer.slice(5, 10);

console.log(buffer.byteLength); // 16

console.log(buffer1.byteLength); // 16

console.log(buffer2.byteLength); // 11

console.log(buffer3.byteLength); // 5

```

slice方法所创建的缓存是新的缓存,即新的内存区域,而不是指向原来的内存地址,因此这里创建的4个缓存都是相互独立的,操作它们时不会相互影响。

#### TypedArray

* %TypedArray%(length)

* %TypedArray%(typedArray)

* %TypedArray%(object)

* %TypedArray%(buffer [,byteOffset[,length]])

这里的%TypedArray%代表具体的类型数组对象,TypedArray作为对象的时候自身有两个方法:from和of,这两个方法都可以返回相应的TypedArray对象。from方法的参数可以遍历的对象类型,而of方法的参数直接用每个元素自身。

代码示例:

```

var u8 = Uint8Array.from(new Set([1,3,5,7,9]));

var i8_1 = Int8Array.from([1,3,5,7,9]);

var i8_2 = Int8Array.of('1','3','5','7','9');

console.log(u8[3]); // 7

console.log(i8_1[3]); // 7

console.log(i8_2[3]); // 7

```

TypedArray创建出来的对象实例时操作缓存数据最重要的对象,它主要使用TypedArray的prototype属性对象中的属性实际操作。TypedArray的prototype属性对象一共有5个对象属性(包含直接量)和24个方法。5个对象属性分别是:constructor,buffer,byteOffset,byteLength和length。

#### DataView

DataView可以截取ArrayBuffer中的一块内存来使用,DataView跟TypedArray的区别在于DataView并没有固定的格式,操作比TypedArray更加方便。

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
4月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
265 69
|
4月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
247 0
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
277 80
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
129 19
|
5月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
139 23
|
5月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
93 13
|
4月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
5月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一