欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

使用ES6新特性开发微信小程序（4）

发布：2018-01-24 15:07浏览： 次来源：网络 作者：tianshu

Symbol Type

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

Symbol值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol类型。凡是属性名属于Symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
  1. let s = Symbol();
  2. console.log(typeof s); // 输出: symbol
Iterators（迭代器）

ES6迭代器不是内建的，通过使用[Symbol.iterator]()和.next()来进行创建。Iterators（迭代器）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator的作用：
  • 为各种数据结构，提供一个统一的、简便的访问接口；
  • 使得数据结构的成员能够按某种次序排列；
  • ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。
  1. function f() {
  2.     let fibonacci = {
  3.         [Symbol.iterator]() {
  4.             let pre = 0,
  5.                 cur = 1;
  6.             return {
  7.                 next() {
  8.                     [pre, cur] = [cur, pre + cur];
  9.                     return { done: false, value: cur };
  10.                 }
  11.             };
  12.         }
  13.     };
  14.     for (let n of fibonacci) {
  15.         if (n > 1000)
  16.             break;
  17.         console.log(n);
  18.     }
  19. }
  20. f(); // 输出: 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987
Set、Map数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。

  1. let s = new Set();
  2. s.add("hello").add("goodbye").add("hello");
  3. s.size === 2;
  4. s.has("hello") === true;
  5. for (let key of s.values())
  6.     console.log(key) // 输出: hello goodbye
ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。
  1. let m = new Map();
  2. m.set("hello", 42);
  3. m.set(s, 34);
  4. m.get(s) === 34;
  5. m.size === 2;
  6. for (let [key, val] of m.entries())
  7.     console.log(key + " = " + val); // 输出: hello = 42 [object Set] = 34
WeakSet结构与Set类似，也是不重复的值的集合。但WeakSet只能存对象类型的元素，比如：Object, Array, Function 等。WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于WeakSet之中。有了弱引用的WeakSet， 就不用担心内存泄漏了。

WeakSet对象的方法只有三个，WeakMap没有size属性：
  • add(): 向集添加新元素。
  • delete(): 从集中移除指定元素。
  • has(): 如果集包含指定的元素，则返回 true。
  1. var ws = new WeakSet();
  2. var str = new String("Hello");
  3. var num = new Number(1776);
  4. ws.add(str);
  5. ws.add(num);
  6. console.log(ws.has(str)); // 输出: true
  7. console.log(ws.has(num)); // 输出: true
  8. ws.delete(str);
  9. console.log(ws.has(str)); // 输出: false
WeakMap结构与Map结构基本类似，也是是键值对的集合。但WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。

WeakMap对象的方法，WeakMap没有size属性，WeakMap对象不能枚举：
  • clear():从 WeakMap 中移除所有元素。
  • delete(): 从 WeakMap 中移除指定的元素。
  • get(): 从 WeakMap 中返回指定的元素。
  • has(): 如果 WeakMap 包含指定元素，则返回 true。
  • set(): 添加新元素至 WeakMap。
  • toString():返回 WeakMap 的字符串表示形式。
  • valueOf():返回指定对象的原始值。
  1. var dog = {
  2.     breed: "yorkie"
  3. }
  4. var cat = {
  5.     breed: "burmese"
  6. }
  7. var wm = new WeakMap();
  8. wm.set(dog, "fido");
  9. wm.set(cat, "pepper");
  10. console.log(wm.get(dog) + ": " + dog.breed); // 输出: fido: yorkie
  11. console.log(wm.get(cat) + ": " + cat.breed); // 输出: pepper: burmese
Typed Arrays（类型化数组）

类型化数组（ArrayBuffer对象、TypedArray视图和DataView视图）是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格（2011年2月发布），ES6将它们纳入了ECMAScript规格，并且增加了新的方法。

类型化数组支持任意基于字节的数据结构，更方便的实现网络协议、加密算法、文件格式操作等功能。

ArrayBuffer是一段不透明的内存区域（所谓不透明，就是无法直接操作的数据块），单位是字节(Byte)也就是8位，它的byteLength属性返回其内存大小。


  1. var a = new ArrayBuffer(10);
  2. console.log(a.byteLength); // 输出:10
在ArrayBuffer上，可以使用不同的视图来创建任意数量的类型化数组， 这些类型化数组也可以是重叠的。有八种不同的类型化数组(视图)，分别为：
  • Int8Array: 1个字节，8位二进制带符号整数 -2^7~(2^7) - 1
  • Uint8Array: 1个字节，8位无符号整数 0~(2^8) - 1
  • Int16Array: 2个字节，16位二进制带符号整数 -2^15~(2^15)-1
  • Uint16Array: 2个字节，16位无符号整数 0~(2^16) - 1
  • Int32Array: 4个字节，32位二进制带符号整数 -2^31~(2^31)-1
  • Uint32Array: 4个字节，32位无符号整数 0~(2^32) - 1
  • Float32Array: 4个字节，32位IEEE浮点数
  • Float64Array: 8个字节，64位IEEE浮点数
  1. let typedArray = new Uint8Array([0, 1, 2]);
  2. console.log(typedArray.length); // 输出:  3
  3. typedArray[0] = 5;
  4. let normalArray = [...typedArray];
  5. console.log(normalArray); // 输出:  [5,1,2]
  1. class Example {
  2.     constructor(buffer = new ArrayBuffer(24)) {
  3.         this.buffer = buffer;
  4.     }
  5.     set buffer(buffer) {
  6.         this._buffer = buffer;
  7.         this._id = new Uint32Array(this._buffer, 0, 1);
  8.         this._username = new Uint8Array(this._buffer, 4, 16);
  9.         this._amountDue = new Float32Array(this._buffer, 20, 1);
  10.     }
  11.     get buffer() {
  12.         return this._buffer;
  13.     }
  14.     set id(v) {
  15.         this._id[0] = v;
  16.     }
  17.     get id() {
  18.         return this._id[0];
  19.     }
  20.     set username(v) {
  21.         this._username[0] = v;
  22.     }
  23.     get username() {
  24.         return this._username[0];
  25.     }
  26.     set amountDue(v) {
  27.         this._amountDue[0] = v;
  28.     }
  29.     get amountDue() {
  30.         return this._amountDue[0]
  31.     }
  32. }
  33.  
  34. let example = new Example();
  35. example.id = 7;
  36. example.username = "John Doe";
  37. example.amountDue = 42.0;
  38. console.log(example); // 输出: Example {_buffer: ArrayBuffer, _id: Uint32Array[1], _username: Uint8Array[16], _amountDue: Float32Array[1]}
如果一段数据包括多种类型，这时除了建立ArrayBuffer对象的复合视图以外，还可以通过DataView视图进行操作。

DataView视图提供更多操作选项，而且支持设定字节序。

DataView本身也是构造函数，接受一个ArrayBuffer对象作为参数，生成视图。

  1. let typedArray2 = new Uint8Array([1, 4, 9, 25, 36, 49, 64, 81]);
  2. let dataView = new DataView(typedArray2.buffer);
  3. console.log(dataView.getUint8(5)); // 输出:  49
完整代码：https://github.com/guyoung/GyWxappCases/tree/master/ES6



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有