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

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 《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更加方便。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
135 52
|
18天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
24 1
JavaScript中对象的数据拷贝
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
29 5