集合引用类型

[webVueBlog]

1. 对象
2. 数组 和 定型数组
3. Map，WeakMap，Set 和 WeakSet 类型

Object

Object 是 ECMAScript 中最常用的类型之一。

显示地 创建 Object的实例 有两种方式。

1. 使用 new 操作符 和 Object 构造函数。

let person = new Object();
person.name = 'webVueBlog';
person.age = 12;

2. 使用 对象字面量 表示法。（对象字面量 是 对象定义的 简写形式， 目的 为了简化包含大量属性的对象的创建）

let person = {
 name: 'webVueBlog',
 age: 29
};

在ECMAScript中，表达式上下文 指的是 期待返回值的上下文。

在对象字面量表示法中，属性名可以是字符串 或 数值。注意，数值属性会自动转换未字符串。

let person = {}; // 与new Object() 相同

注意 在使用对象字面量表示法定义对象时，并不会实际调用 Object 构造函数。

属性可以通过 点语法 来存取， 也可以通过 中括号 来存取属性。（使用中括号的主要优势是可以通过变量访问属性）

Array

创建数组：

1. 使用Array构造函数： let colors = new Array();
2. length属性会自动创建并设置为传入的这个数值：let colors = new Array(20);
3. 可以给 Array 构造函数传入要保存的元素
4. 使用 Array 构造函数时，可以省略 new 操作符

也可以使用 数组字面量 表示法。

如： let colors = ["red", "blue", "green"];

使用数组字面量表示法创建数组不会调用 Array 构造函数

ES6+

用于创建数组的静态方法： from() 和 of()

from() 用于将 类数组结构 转换 为 数组实例。

of() 用于将一组参数 转换为 数组实例。

Array.from() 的第一个参数时一个类数组对象，即为任何可迭代的结构，或者有一个 length 属性 和 可索引元素的结构。

// 字符串会拆分为单字符数组
console.log(Array.from('Matt')); // ['M', 'a', 't', 't'];

// 可以使用 from() 将集合和映射转换为一个新数组
const m = new Map().set(1,2).set(3,4);
const s = new Set().add(1).add(2).add(3).add(4);
console.log(Array.from(m)); // [[1,2], [3,4]];
console.log(Array.from(s)); // [1,2,3,4];

// Array.from()对现有数组执行浅复制
const a1 = [1,2,3,4];
const a2 = Array.from(a1);
console.log(a1); // [1,2,3,4]
alert(a1===a2); // false

// 可以使用任何可迭代对象
const iter = {
 *[Symbol.iterator]() {
   yield 1;
   yield 2;
   yield 3;
   yield 4;
 }
};
console.log(Array.from(iter)); // [1,2,3,4]

// arguments 对象可以被轻松地转换为数组
function getArgsArray() {
 return Array.from(arguments);
}
console.log(getArgsArray(1,2,3,4)); // [1,2,3,4]

// from() 也能转换带有必要属性的自定义对象
const arrayLikeObject = {
 0: 1,
 1: 2,
 2: 3,
 3: 4,
 length: 4
};
console.log(Array.from(arrayLikeObject)); // [1,2,3,4]

Array.from() 可以接收第二个 可选的映射函数 参数。就不用使用 Array.from().map() 这样了。

可以接收第三个可选参数， 用于指定 映射函数中 this 的值。（重写的 this 值在箭头函数中不适用）

const a1 = [1,2,3,4];
const a2 = Array.from(a1, x=>x*2);
const a3 = Array.from(a1, function(x) { return x*this.exponent }, {exponent:2});

Array.of()可以把一组参数转换为数组。

替换之前的 Array.prototype.slice.call(arguments)

console.log(Array.of(1,2,3,4)); // [1,2,3,4]
console.log(Array.of(undefined)); // [undefined];

数组空位

创建空位数组：

const options = [,,,,];

ES6 将空位当成存在的 undefined 的元素

const options = [1,,,,5];
for (const option of options) {
 console.log(option === undefined);
}
// false
// true
// true
// true
// false

const a = Array.from([,,,]); // 使用 ES6 的 Array.from()创建的包含 3 个空位的数组
for (const val of a) {
 alert(val === undefined);
}
// true
// true
// true
alert(Array.of(...[,,,])); // [undefined, undefined, undefined]
for (const [index, value] of options.entries()) {
 alert(value);
}
// 1
// undefined
// undefined
// undefined
// 5

ES6之前：

const options = [1,,,,5];
// map()会跳过空位置
console.log(options.map(() => 6)); // [6, undefined, undefined, undefined, 6]
// join()视空位置为空字符串
console.log(options.join('-')); // "1----5"

数组索引

检测数组

使用 instanceof 操作符：

if (value instanceof Array) {
 // 操作数组
}

使用 instanceof 的问题是假定只有一个全局执行上下文。

解决问题，提供了 Array.isArray() 方法，目的时确定 一个值 是否为数组，不用管它时哪个全局执行上下文中创建的。

if (Array.isArray(values)) {
 // 操作数组
}

迭代器方法

ES6 中，Array原型上 有 3 个用于检索数组内容的方法。

1. keys() 返回数组索引的迭代器
2. values() 返回数组元素的迭代器
3. entries() 返回索引键值对的迭代器

const a = ["foo", "bar", "baz", "qux"];
// 因为这些方法都返回迭代器，所以可以将它们的内容
// 通过 Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"]
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

使用 ES6 的解构

const a = ["foo", "bar", "baz", "qux"];
for (const [idx, element] of a.entries()) {
 alert(idx);
 alert(element);
}
// 0
// foo
// 1
// bar
// 2
// baz
// 3
// qux 

复制和填充方法

ES6 +

1. 批量复制方法 copyWithin()
2. 填充数组方法 fill()

都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小

const zeroes = [0, 0, 0, 0, 0];
// 用 5 填充整个数组
zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes); // [0, 8, 8, 8, 0];

fill()静默忽略超出数组边界、零长度及方向相反的索引范围：

const zeroes = [0, 0, 0, 0, 0];
// 索引过低，忽略
zeroes.fill(1, -10, -6);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引过高，忽略
zeroes.fill(1, 10, 15);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引反向，忽略
zeroes.fill(2, 4, 2);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引部分可用，填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes); // [0, 0, 0, 4, 4]

copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指
定索引开始的位置。

let ints,
 reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5);
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3);
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript 引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6] 

copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围

let ints,
 reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引过低，忽略
ints.copyWithin(1, -15, -12);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引过高，忽略
ints.copyWithin(1, 12, 15);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向，忽略
ints.copyWithin(2, 4, 2);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用，复制、填充可用部分
ints.copyWithin(4, 7, 10)
alert(ints); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];

数组中 转换方法

1. valueOf() 返回的还是数组本身
2. toString() 返回由数组中 每个值 的等效字符串拼接而成的一个逗号分隔的 字符串。(就是说，对数组的每个值都会调用其 toString() 方法，已得到最终的字符串。
3. toLocaleString()

toLocaleString()方法也可能返回跟 toString()和 valueOf()相同的结果，但也不一定。

let person1 = {
 toLocaleString() {
 return "Nikolaos";
 },
 toString() {
 return "Nicholas";
 }
};
let person2 = {
 toLocaleString() {
 return "Grigorios";
 },
 toString() {
 return "Greg";
 }
};
let people = [person1, person2];
alert(people); // Nicholas,Greg
alert(people.toString()); // Nicholas,Greg
alert(people.toLocaleString()); // Nikolaos,Grigorios

join()方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。

栈方法

栈是一种后进先出（LIFO，Last-In-First-Out）的结构

数据项的插入（称为推入，push）和删除（称为弹出，pop）只在栈的一个地方发生，即栈顶。ECMAScript 数组提供了 push()和 pop()方法，以实现类似栈的行为。

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。pop()方法则用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项。

队列方法

队列以先进先出（FIFO，First-In-First-Out）形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据。

使用 shift()和 push()，可以把数组当成队列来使用。

排序方法

对元素重新排序：reverse()和 sort()。

1. reverse()方法就是将数组元素反向排列。
2. 默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。(sort()会在每一项上调用 String()转型函数，然后比较字符串来决定顺序。即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。)

sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。

比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回 0；如果第一个参数应该排在第二个参数后面，就返回正值。

function compare(value1, value2) {
 if (value1 < value2) {
 return -1;
 } else if (value1 > value2) {
 return 1;
 } else {
 return 0;
 }
} 

let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15 

操作方法

concat()方法可以在现有数组全部元素基础上创建一个新数组。

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号：Symbol.isConcatSpreadable。这个符号能够阻止concat()打平参数数组。相反，把这个值设置为 true 可以强制打平类数组对象

let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = {
 [Symbol.isConcatSpreadable]: true,
 length: 2,
 0: "pink",
 1: "cyan"
};
newColors[Symbol.isConcatSpreadable] = false;
// 强制不打平数组
let colors2 = colors.concat("yellow", newColors);
// 强制打平类数组对象
let colors3 = colors.concat(moreNewColors);
console.log(colors); // ["red", "green", "blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]]
console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]

slice()用于创建一个包含原有数组中一个或多个元素的新数组。

slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。

slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。

不影响原始数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
alert(colors2); // green,blue,yellow,purple
alert(colors3); // green,blue,yellow 

如果结束位置小于开始位置，则返回空数组。

最强大的数组方法就属 splice()了

splice()的主要目的是在数组中间插入元素，但有 3 种不同的方式使用这个方法。

1. 删除。需要给 splice()传 2 个参数：要删除的第一个元素的位置和要删除的元素数量。
2. 插入。需要给 splice()传 3 个参数：开始位置、0（要删除的元素数量）和要插入的元素
3. 替换。splice()在删除元素的同时可以在指定位置插入新元素，同样要传入 3 个参数：开始位置、要删除元素的数量和要插入的任意多个元素。

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，只有一个元素的数组
removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
alert(colors); // green,yellow,orange,blue
alert(removed); // 空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，只有一个元素的数组

搜索和位置方法

ECMAScript 提供两类搜索数组的方法：按 严格相等 搜索和按 断言函数 搜索。

提供了 3 个严格相等的搜索方法：indexOf()、lastIndexOf()和 includes()

ES7 + includes()方法

这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。

1. indexOf()和 includes()方法从数组前头（第一项）开始向后搜索
2. lastIndexOf()从数组末尾（最后一项）开始向前搜索。
3. indexOf()和 lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。
4. includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)); // 3
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.includes(4)); // true
alert(numbers.indexOf(4, 4)); // 5
alert(numbers.lastIndexOf(4, 4)); // 3
alert(numbers.includes(4, 7)); // false
let person = { name: "Nicholas" };
let people = [{ name: "Nicholas" }];
let morePeople = [person];
alert(people.indexOf(person)); // -1
alert(morePeople.indexOf(person)); // 0
alert(people.includes(person)); // false
alert(morePeople.includes(person)); // true 

断言函数

每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。

断言函数接收 3 个参数：元素、索引和数组本身。

find()和 findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，
findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数，用于指定断言函数内部 this 的值。

const people = [
 {
 name: "Matt",
 age: 27
 },
 {
 name: "Nicholas",
 age: 29
 }
];
alert(people.find((element, index, array) => element.age < 28));
// {name: "Matt", age: 27}
alert(people.findIndex((element, index, array) => element.age < 28));
// 0

找到匹配项后，这两个方法都不再继续搜索。

const evens = [2, 4, 6];
// 找到匹配后，永远不会检查数组的最后一个元素
evens.find((element, index, array) => {
 console.log(element);
 console.log(index);
 console.log(array);
 return element === 4;
});
// 2
// 0
// [2, 4, 6]
// 4
// 1
// [2, 4, 6]

迭代方法

1. every()：对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true。
2. filter()：对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。
3. forEach()：对数组每一项都运行传入的函数，没有返回值。
4. map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组
5. some()：对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。

这些方法都不改变调用它们的数组。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult); // false
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult); // true 

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult); // 3,4,5,4,3 

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
alert(mapResult); // 2,4,6,8,10,8,6,4,2

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
 // 执行某些操作
});

归并方法

数组提供了两个归并方法：reduce()和 reduceRight()

1. reduce()方法从数组第一项开始遍历到最后一项。
2. reduceRight()从最后一项开始遍历至第一项。

传给 reduce()和 reduceRight()的函数接收 4 个参数：上一个归并值、当前项、当前项的索引和数组本身。

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

定型数组

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

“TypedArray”类型，它所指的其实是一种特殊的包含数值类型的数组。

历史：CanvasFloatArray变成了 Float32Array，也就是今天定型数组中可用的第一个“类型”。

JavaScript 运行时使用这个类型可以分配、读取和写入数组。
这个数组可以直接传给底层图形驱动程序 API，也可以直接从底层获取到。

ArrayBuffer

Float32Array 实际上是一种“视图”，可以允许 JavaScript 运行时访问一块名为 ArrayBuffer 的预分配内存。ArrayBuffer 是所有定型数组及视图引用的基本单位。

ArrayBuffer()是一个普通的 JavaScript 构造函数，可用于在内存中分配特定数量的字节空间。

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

ArrayBuffer 一经创建就不能再调整大小。

可以使用 slice()复制其全部或部分到一个新实例中：

const buf1 = new ArrayBuffer(16);
const buf2 = buf1.slice(4, 12);
alert(buf2.byteLength); // 8

ArrayBuffer 某种程度上类似于 C++的 malloc()，但也有几个明显的区别。

• malloc()在分配失败时会返回一个 null 指针。ArrayBuffer 在分配失败时会抛出错误。
• malloc()可以利用虚拟内存，因此最大可分配尺寸只受可寻址系统内存限制。ArrayBuffer分配的内存不能超过 Number.MAX_SAFE_INTEGER（2的53次 - 1）字节。
• malloc()调用成功不会初始化实际的地址。声明 ArrayBuffer 则会将所有二进制位初始化为 0。
• 通过 malloc()分配的堆内存除非调用 free()或程序退出，否则系统不能再使用。而通过声明ArrayBuffer 分配的堆内存可以被当成垃圾回收，不用手动释放。

不能仅通过对 ArrayBuffer 的引用就读取或写入其内容。要读取或写入 ArrayBuffer，就必须通过视图。
视图有不同的类型，但引用的都是 ArrayBuffer 中存储的二进制数据。

DataView

第一种允许你读写 ArrayBuffer 的视图是 DataView。这个视图专为文件 I/O 和网络 I/O 设计，其API 支持对缓冲数据的高度控制

DataView 对缓冲内容没有任何预设，也不能迭代。

必须在对已有的 ArrayBuffer 读取或写入时才能创建 DataView 实例。这个实例可以使用全部或部分 ArrayBuffer，且维护着对该缓冲实例的引用，以及视图在缓冲中开始的位置。

const buf = new ArrayBuffer(16);
// DataView 默认使用整个 ArrayBuffer
const fullDataView = new DataView(buf);
alert(fullDataView.byteOffset); // 0
alert(fullDataView.byteLength); // 16
alert(fullDataView.buffer === buf); // true

// 构造函数接收一个可选的字节偏移量和字节长度
// byteOffset=0 表示视图从缓冲起点开始
// byteLength=8 限制视图为前 8 个字节
const firstHalfDataView = new DataView(buf, 0, 8);
alert(firstHalfDataView.byteOffset); // 0
alert(firstHalfDataView.byteLength); // 8
alert(firstHalfDataView.buffer === buf); // true

// 如果不指定，则 DataView 会使用剩余的缓冲
// byteOffset=8 表示视图从缓冲的第 9 个字节开始
// byteLength 未指定，默认为剩余缓冲
const secondHalfDataView = new DataView(buf, 8);
alert(secondHalfDataView.byteOffset); // 8
alert(secondHalfDataView.byteLength); // 8
alert(secondHalfDataView.buffer === buf); // true

要通过 DataView 读取缓冲，还需要几个组件。

• 首先是要读或写的字节偏移量。可以看成 DataView 中的某种“地址”。
• DataView 应该使用 ElementType 来实现 JavaScript 的 Number 类型到缓冲内二进制格式的转
  换。
• 最后是内存中值的字节序。默认为大端字节序。

1. ElementType

DataView 对存储在缓冲内的数据类型没有预设。它暴露的 API 强制开发者在读、写时指定一个ElementType，然后 DataView 就会忠实地为读、写而完成相应的转换。

ElementType	字节
Int8	1
Uint8	1
Int16	2
Uint16	2
Int32	4
Uint32	4
Float32	4
Float64	8

DataView 为上表中的每种类型都暴露了 get 和 set 方法，这些方法使用 byteOffset（字节偏移量）定位要读取或写入值的位置。

// 在内存中分配两个字节并声明一个 DataView
const buf = new ArrayBuffer(2);
const view = new DataView(buf);
// 说明整个缓冲确实所有二进制位都是 0
// 检查第一个和第二个字符
alert(view.getInt8(0)); // 0
alert(view.getInt8(1)); // 0
// 检查整个缓冲
alert(view.getInt16(0)); // 0
// 将整个缓冲都设置为 1
// 255 的二进制表示是 11111111（2^8 - 1）
view.setUint8(0, 255);
// DataView 会自动将数据转换为特定的 ElementType
// 255 的十六进制表示是 0xFF
view.setUint8(1, 0xFF);
// 现在，缓冲里都是 1 了
// 如果把它当成二补数的有符号整数，则应该是-1
alert(view.getInt16(0)); // -1

字节序

“字节序”指的是计算系统维护的一种字节顺序的约定。

DataView 只支持两种约定：大端字节序和小端字节序。

大端字节序也称为“网络字节序”，意思是最高有效位保存在第一个字节，而最低有效位保存在最后一个字节。小端字节序正好相反，即最低有效位保存在第一个字节，最高有效位保存在最后一个字节。

JavaScript 运行时所在系统的原生字节序决定了如何读取或写入字节，但 DataView 并不遵守这个约定。

对一段内存而言，DataView 是一个中立接口，它会遵循你指定的字节序。DataView 的所有 API 方法都以大端字节序作为默认值，但接收一个可选的布尔值参数，设置为 true 即可启用小端字节序。

// 在内存中分配两个字节并声明一个 DataView
const buf = new ArrayBuffer(2);
const view = new DataView(buf);
// 填充缓冲，让第一位和最后一位都是 1
view.setUint8(0, 0x80); // 设置最左边的位等于 1
view.setUint8(1, 0x01); // 设置最右边的位等于 1
// 缓冲内容（为方便阅读，人为加了空格）
// 0x8 0x0 0x0 0x1
// 1000 0000 0000 0001
// 按大端字节序读取 Uint16
// 0x80 是高字节，0x01 是低字节
// 0x8001 = 2^15 + 2^0 = 32768 + 1 = 32769
alert(view.getUint16(0)); // 32769
// 按小端字节序读取 Uint16
// 0x01 是高字节，0x80 是低字节
// 0x0180 = 2^8 + 2^7 = 256 + 128 = 384
alert(view.getUint16(0, true)); // 384
// 按大端字节序写入 Uint16
view.setUint16(0, 0x0004);
// 缓冲内容（为方便阅读，人为加了空格）
// 0x0 0x0 0x0 0x4
// 0000 0000 0000 0100
alert(view.getUint8(0)); // 0
alert(view.getUint8(1)); // 4
// 按小端字节序写入 Uint16
view.setUint16(0, 0x0002, true);
// 缓冲内容（为方便阅读，人为加了空格）
// 0x0 0x2 0x0 0x0
// 0000 0010 0000 0000
alert(view.getUint8(0)); // 2
alert(view.getUint8(1)); // 0 

边界情形

DataView 完成读、写操作的前提是必须有充足的缓冲区，否则就会抛出 RangeError：

const buf = new ArrayBuffer(6);
const view = new DataView(buf);
// 尝试读取部分超出缓冲范围的值
view.getInt32(4);
// RangeError
// 尝试读取超出缓冲范围的值
view.getInt32(8);
// RangeError
// 尝试读取超出缓冲范围的值
view.getInt32(-1);
// RangeError
// 尝试写入超出缓冲范围的值
view.setInt32(4, 123);
// RangeError 

DataView 在写入缓冲里会尽最大努力把一个值转换为适当的类型，后备为 0。如果无法转换，则抛出错误

const buf = new ArrayBuffer(1);
const view = new DataView(buf);

view.setInt8(0, 1.5);
alert(view.getInt8(0)); // 1

view.setInt8(0, [4]);
alert(view.getInt8(0)); // 4

view.setInt8(0, 'f');
alert(view.getInt8(0)); // 0

view.setInt8(0, Symbol());
// TypeError 

定型数组

定型数组是另一种形式的 ArrayBuffer 视图

设计定型数组的目的就是提高与 WebGL 等原生库交换二进制数据的效率。

创建定型数组的方式包括读取已有的缓冲、使用自有缓冲、填充可迭代结构，以及填充基于任意类型的定型数组。

通过.from()和.of()也可以创建定型数组

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

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

// 这个定型数组知道自己的每个元素需要 4 字节
// 因此长度为 3
alert(ints.length); // 3 

// 创建一个长度为 6 的 Int32Array
const ints2 = new Int32Array(6);

// 每个数值使用 4 字节，因此 ArrayBuffer 是 24 字节
alert(ints2.length); // 6

// 类似 DataView，定型数组也有一个指向关联缓冲的引用
alert(ints2.buffer.byteLength); // 24

// 创建一个包含[2, 4, 6, 8]的 Int32Array
const ints3 = new Int32Array([2, 4, 6, 8]);
alert(ints3.length); // 4

alert(ints3.buffer.byteLength); // 16
alert(ints3[2]); // 6

// 通过复制 ints3 的值创建一个 Int16Array
const ints4 = new Int16Array(ints3);
// 这个新类型数组会分配自己的缓冲
// 对应索引的每个值会相应地转换为新格式
alert(ints4.length); // 4

alert(ints4.buffer.byteLength); // 8

alert(ints4[2]); // 6

// 基于普通数组来创建一个 Int16Array
const ints5 = Int16Array.from([3, 5, 7, 9]);
alert(ints5.length); // 4
alert(ints5.buffer.byteLength); // 8
alert(ints5[2]); // 7

// 基于传入的参数创建一个 Float32Array
const floats = Float32Array.of(3.14, 2.718, 1.618);
alert(floats.length); // 3
alert(floats.buffer.byteLength); // 12
alert(floats[2]); // 1.6180000305175781

定型数组的构造函数和实例都有一个 BYTES_PER_ELEMENT 属性，返回该类型数组中每个元素的大小：

alert(Int16Array.BYTES_PER_ELEMENT); // 2
alert(Int32Array.BYTES_PER_ELEMENT); // 4

const ints = new Int32Array(1),
 floats = new Float64Array(1);
alert(ints.BYTES_PER_ELEMENT); // 4
alert(floats.BYTES_PER_ELEMENT); // 8

如果定型数组没有用任何值初始化，则其关联的缓冲会以 0 填充：

const ints = new Int32Array(4);
alert(ints[0]); // 0
alert(ints[1]); // 0
alert(ints[2]); // 0
alert(ints[3]); // 0 

定型数组行为

定型数组支持如下操作符、方法和属性：

[]
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
indexOf()
join()
keys()
lastIndexOf()
length
map()
reduce()
reduceRigth()
reverse()
slice()
some()
sort()
toLocaleString()
toString()
values()

const ints = new Int16Array([1, 2, 3]);
const doubleints = ints.map(x => 2*x);
alert(doubleints instanceof Int16Array); // true

const ints = new Int16Array([1, 2, 3]);
for (const int of ints) {
 alert(int);
}
// 1
// 2
// 3
alert(Math.max(...ints)); // 3

合并、复制和修改定型数组

定型数组同样使用数组缓冲来存储数据，而数组缓冲无法调整大小。因此，下列方法不适用于定型数组：

concat()
pop()
push()
shift()
spllice()
unshift()

定型数组也提供了两个新方法，可以快速向外或向内复制数据：set()和 subarray()。

set()从提供的数组或定型数组中把值复制到当前定型数组中指定的索引位置：

// 创建长度为 8 的 int16 数组
const container = new Int16Array(8);
// 把定型数组复制为前 4 个值
// 偏移量默认为索引 0
container.set(Int8Array.of(1, 2, 3, 4));
console.log(container); // [1,2,3,4,0,0,0,0]

// 把普通数组复制为后 4 个值
// 偏移量 4 表示从索引 4 开始插入
container.set([5,6,7,8], 4);
console.log(container); // [1,2,3,4,5,6,7,8]

// 溢出会抛出错误
container.set([5,6,7,8], 7);
// RangeError

subarray()执行与 set()相反的操作，它会基于从原始定型数组中复制的值返回一个新定型数组。

复制值时的开始索引和结束索引是可选的：

const source = Int16Array.of(2, 4, 6, 8);
// 把整个数组复制为一个同类型的新数组
const fullCopy = source.subarray();
console.log(fullCopy); // [2, 4, 6, 8]

// 从索引 2 开始复制数组
const halfCopy = source.subarray(2);
console.log(halfCopy); // [6, 8]

// 从索引 1 开始复制到索引 3
const partialCopy = source.subarray(1, 3);
console.log(partialCopy); // [4, 6] 

定型数组没有原生的拼接能力，但使用定型数组 API 提供的很多工具可以手动构建：

// 第一个参数是应该返回的数组类型
// 其余参数是应该拼接在一起的定型数组

function typedArrayConcat(typedArrayConstructor, ...typedArrays) {
 // 计算所有数组中包含的元素总数
 const numElements = typedArrays.reduce((x,y) => (x.length || x) + y.length);

 // 按照提供的类型创建一个数组，为所有元素留出空间
 const resultArray = new typedArrayConstructor(numElements);

 // 依次转移数组
 let currentOffset = 0;
 typedArrays.map(x => {
 resultArray.set(x, currentOffset);
 currentOffset += x.length;
 });

 return resultArray;
}

const concatArray = typedArrayConcat(Int32Array,
 Int8Array.of(1, 2, 3),
 Int16Array.of(4, 5, 6),
 Float32Array.of(7, 8, 9));
console.log(concatArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(concatArray instanceof Int32Array); // true 

下溢和上溢

定型数组中值的下溢和上溢不会影响到其他索引，但仍然需要考虑数组的元素应该是什么类型。

定型数组对于可以存储的每个索引只接受一个相关位，而不考虑它们对实际数值的影响。

以下代码演示了如何处理下溢和上溢：

// 长度为 2 的有符号整数数组
// 每个索引保存一个二补数形式的有符号整数
// 范围是-128（-1 * 2^7）~127（2^7 - 1）
const ints = new Int8Array(2);

// 长度为 2 的无符号整数数组
// 每个索引保存一个无符号整数
// 范围是 0~255（2^7 - 1）
const unsignedInts = new Uint8Array(2);

// 上溢的位不会影响相邻索引
// 索引只取最低有效位上的 8 位
unsignedInts[1] = 256; // 0x100
console.log(unsignedInts); // [0, 0]

unsignedInts[1] = 511; // 0x1FF
console.log(unsignedInts); // [0, 255]

// 下溢的位会被转换为其无符号的等价值
// 0xFF 是以二补数形式表示的-1（截取到 8 位）,
// 但 255 是一个无符号整数
unsignedInts[1] = -1 // 0xFF (truncated to 8 bits)
console.log(unsignedInts); // [0, 255]

// 上溢自动变成二补数形式
// 0x80 是无符号整数的 128，是二补数形式的-128
ints[1] = 128; // 0x80
console.log(ints); // [0, -128]

// 下溢自动变成二补数形式
// 0xFF 是无符号整数的 255，是二补数形式的-1
ints[1] = 255; // 0xFF
console.log(ints); // [0, -1]

除了 8 种元素类型，还有一种“夹板”数组类型：Uint8ClampedArray，不允许任何方向溢出。

超出最大值 255 的值会被向下舍入为 255，而小于最小值 0 的值会被向上舍入为 0。

const clampedInts = new Uint8ClampedArray([-1, 0, 255, 256]);
console.log(clampedInts); // [0, 0, 255, 255]

按照 JavaScript 之父 Brendan Eich 的说法：“Uint8ClampedArray 完全是 HTML5canvas 元素的历史留存。除非真的做跟 canvas 相关的开发，否则不要使用它。”

Map

ECMAScript 6 的新增特性，Map 是一种新的集合类型

使用 new 关键字和 Map 构造函数可以创建一个空映射：

const m = new Map();

// 使用嵌套数组初始化映射
const m1 = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 
alert(m1.size); // 3 

// 使用自定义迭代器初始化映射
const m2 = new Map({ 
 [Symbol.iterator]: function*() { 
 yield ["key1", "val1"]; 
 yield ["key2", "val2"]; 
 yield ["key3", "val3"]; 
 } 
}); 
alert(m2.size); // 3 

// 映射期待的键/值对，无论是否提供
const m3 = new Map([[]]); 
alert(m3.has(undefined)); // true 
alert(m3.get(undefined)); // undefined

1. 使用 set()方法再添加键/值对
2. 使用 get()和 has()进行查询
3. 通过 size 属性获取映射中的键/值对的数量
4. 使用 delete()和 clear()删除值

const m = new Map(); 
alert(m.has("firstName")); // false 
alert(m.get("firstName")); // undefined 
alert(m.size); // 0 

m.set("firstName", "Matt") 
 .set("lastName", "Frisbie"); 
alert(m.has("firstName")); // true 
alert(m.get("firstName")); // Matt 
alert(m.size); // 2 

m.delete("firstName"); // 只删除这一个键/值对
alert(m.has("firstName")); // false 
alert(m.has("lastName")); // true 
alert(m.size); // 1 

m.clear(); // 清除这个映射实例中的所有键/值对
alert(m.has("firstName")); // false 
alert(m.has("lastName")); // false 
alert(m.size); // 0

const m = new Map(); 

const functionKey = function() {}; 
const symbolKey = Symbol(); 
const objectKey = new Object(); 

m.set(functionKey, "functionValue"); 
m.set(symbolKey, "symbolValue"); 
m.set(objectKey, "objectValue"); 

alert(m.get(functionKey)); // functionValue 
alert(m.get(symbolKey)); // symbolValue 
alert(m.get(objectKey)); // objectValue 

// SameValueZero 比较意味着独立实例不冲突
alert(m.get(function() {})); // undefined

const m = new Map(); 

const objKey = {}, 
 objVal = {}, 
 arrKey = [], 
 arrVal = []; 

m.set(objKey, objVal); 
m.set(arrKey, arrVal); 

objKey.foo = "foo"; 
objVal.bar = "bar"; 
arrKey.push("foo"); 
arrVal.push("bar"); 

console.log(m.get(objKey)); // {bar: "bar"} 
console.log(m.get(arrKey)); // ["bar"]

const m = new Map(); 

const a = 0/"", // NaN 
 b = 0/"", // NaN 

 pz = +0, 
 nz = -0;

alert(a === b); // false 
alert(pz === nz); // true 

m.set(a, "foo"); 
m.set(pz, "bar"); 

alert(m.get(b)); // foo 
alert(m.get(nz)); // bar

顺序与迭代

映射实例可以提供一个迭代器（Iterator），能以插入顺序生成[key, value]形式的数组。可以通过 entries()方法（或者 Symbol.iterator 属性，它引用 entries()）取得这个迭代器

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

alert(m.entries === m[Symbol.iterator]); // true 

for (let pair of m.entries()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3] 

for (let pair of m[Symbol.iterator]()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3]

因为 entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 
console.log([...m]); // [[key1,val1],[key2,val2],[key3,val3]]

forEach(callback, opt_thisArg) 传入的回调接收可选的第二个参数，这个参数用于重写回调内部 this 的值

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

m.forEach((val, key) => alert(`${key} -> ${val}`)); 
// key1 -> val1 
// key2 -> val2 
// key3 -> val3

keys()和 values()分别返回以插入顺序生成键和值的迭代器

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

for (let key of m.keys()) { 
 alert(key); 
} 

// key1 
// key2 
// key3 

for (let key of m.values()) { 
 alert(key); 
} 

// value1 
// value2 
// value3

const m1 = new Map([ 
 ["key1", "val1"] 
]); 

// 作为键的字符串原始值是不能修改的
for (let key of m1.keys()) { 
 key = "newKey"; 
 alert(key); // newKey 
 alert(m1.get("key1")); // val1 
} 

const keyObj = {id: 1}; 

const m = new Map([ 
 [keyObj, "val1"] 
]); 

// 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
for (let key of m.keys()) { 
 key.id = "newKey"; 
 alert(key); // {id: "newKey"} 
 alert(m.get(keyObj)); // val1 
} 

alert(keyObj); // {id: "newKey"}

选择 Object 还是 Map

1. 内存占用: Map 大约可以比 Object 多存储 50%的键/值对。
2. 插入性能: 如果代码涉及大量插入操作，那么显然 Map 的性能更佳。
3. 查找速度: Object 更好一些
4. 删除性能: 选择 Map

WeakMap

ECMAScript 6 新增的“弱映射”（WeakMap）是一种新的集合类型

WeakMap 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱映射”中键的方式。

可以使用 new 关键字实例化一个空的 WeakMap：

const wm = new WeakMap();

弱映射中的键只能是 Object 或者继承自 Object 的类型，尝试使用非对象设置键会抛出TypeError。值的类型没有限制。

const key1 = {id: 1}, 
 key2 = {id: 2},
key3 = {id: 3}; 

// 使用嵌套数组初始化弱映射
const wm1 = new WeakMap([ 
 [key1, "val1"], 
 [key2, "val2"], 
 [key3, "val3"] 
]); 

alert(wm1.get(key1)); // val1 
alert(wm1.get(key2)); // val2 
alert(wm1.get(key3)); // val3 

// 初始化是全有或全无的操作
// 只要有一个键无效就会抛出错误，导致整个初始化失败
const wm2 = new WeakMap([ 
 [key1, "val1"], 
 ["BADKEY", "val2"], 
 [key3, "val3"] 
]); 
// TypeError: Invalid value used as WeakMap key 

typeof wm2; 
// ReferenceError: wm2 is not defined 

// 原始值可以先包装成对象再用作键
const stringKey = new String("key1"); 
const wm3 = new WeakMap([ 
 stringKey, "val1" 
]); 
alert(wm3.get(stringKey)); // "val1"

1. 使用 set()再添加键/值对
2. 使用 get()和 has()查询
3. 使用 delete()删除

const wm = new WeakMap(); 

const key1 = {id: 1}, 
 key2 = {id: 2}; 

alert(wm.has(key1)); // false 
alert(wm.get(key1)); // undefined 

wm.set(key1, "Matt") 
 .set(key2, "Frisbie"); 

alert(wm.has(key1)); // true 
alert(wm.get(key1)); // Matt 

wm.delete(key1); // 只删除这一个键/值对

alert(wm.has(key1)); // false 
alert(wm.has(key2)); // true

弱键

WeakMap 中“weak”表示弱映射的键是“弱弱地拿着”的。

只要键存在，键/值对就会存在于映射中，并被当作对值的引用，因此就不会被当作垃圾回收。

const wm = new WeakMap(); 
wm.set({}, "val");

因为没有指向这个对象的其他引用，所以当这行代码执行完成后，这个对象键就会被当作垃圾回收。

const wm = new WeakMap(); 
const container = { 
 key: {} 
}; 

wm.set(container.key, "val"); 
function removeReference() { 
 container.key = null; 
}

不可迭代键

因为 WeakMap 中的键/值对任何时候都可能被销毁，所以没必要提供迭代其键/值对的能力。当然，也用不着像 clear()这样一次性销毁所有键/值的方法。WeakMap 确实没有这个方法。因为不可能迭代，所以也不可能在不知道对象引用的情况下从弱映射中取得值。即便代码可以访问 WeakMap 实例，也没办法看到其中的内容。

WeakMap 实例之所以限制只能用对象作为键，是为了保证只有通过键对象的引用才能取得值。如果允许原始值，那就没办法区分初始化时使用的字符串字面量和初始化之后使用的一个相等的字符串了。

使用弱映射

1. 私有变量
2. DOM 节点元数据

前提很明确：私有变量会存储在弱映射中，以对象实例为键，以私有成员的字典为值。

const wm = new WeakMap();

class User { 
 constructor(id) { 
 this.idProperty = Symbol('id'); 
 this.setId(id); 
 } 
 setPrivate(property, value) { 
 const privateMembers = wm.get(this) || {}; 
 privateMembers[property] = value; 
 wm.set(this, privateMembers); 
 } 
 getPrivate(property) { 
 return wm.get(this)[property]; 
 } 
 setId(id) { 
 this.setPrivate(this.idProperty, id); 
 } 
 getId() { 
 return this.getPrivate(this.idProperty); 
 } 
}

const user = new User(123); 
alert(user.getId()); // 123 
user.setId(456); 
alert(user.getId()); // 456 

// 并不是真正私有的
alert(wm.get(user)[user.idProperty]); // 456

可以用一个闭包把 WeakMap 包装起来

const User = (() => { 
 const wm = new WeakMap(); 
 class User { 
 constructor(id) { 
 this.idProperty = Symbol('id');
this.setId(id); 
 } 
 setPrivate(property, value) { 
 const privateMembers = wm.get(this) || {}; 
 privateMembers[property] = value; 
 wm.set(this, privateMembers); 
 } 
 getPrivate(property) { 
 return wm.get(this)[property]; 
 } 
 setId(id) { 
 this.setPrivate(this.idProperty, id); 
 } 
 getId(id) { 
 return this.getPrivate(this.idProperty); 
 } 
 } 
 return User; 
})(); 

const user = new User(123); 
alert(user.getId()); // 123 
user.setId(456); 
alert(user.getId()); // 456

const m = new Map(); 
const loginButton = document.querySelector('#login'); 
// 给这个节点关联一些元数据
m.set(loginButton, {disabled: true});

const wm = new WeakMap(); 
const loginButton = document.querySelector('#login'); 
// 给这个节点关联一些元数据
wm.set(loginButton, {disabled: true});

Set

使用 new 关键字和 Set 构造函数可以创建一个空集合：

const m = new Set();

// 使用数组初始化集合
const s1 = new Set(["val1", "val2", "val3"]); 
alert(s1.size); // 3 

// 使用自定义迭代器初始化集合
const s2 = new Set({ 
 [Symbol.iterator]: function*() { 
 yield "val1"; 
 yield "val2"; 
 yield "val3"; 
 } 
}); 
alert(s2.size); // 3

1. 使用 add()增加值
2. 使用 has()查询
3. 通过 size 取得元素数量
4. 使用 delete()和 clear()删除元素

const s = new Set(); 
alert(s.has("Matt")); // false 

alert(s.size); // 0 

s.add("Matt") 
 .add("Frisbie"); 

alert(s.has("Matt")); // true 

alert(s.size); // 2 

s.delete("Matt"); 

alert(s.has("Matt")); // false 
alert(s.has("Frisbie")); // true 

alert(s.size); // 1 

s.clear(); // 销毁集合实例中的所有值

alert(s.has("Matt")); // false 
alert(s.has("Frisbie")); // false 
alert(s.size); // 0

const s = new Set(); 

const functionVal = function() {}; 
const symbolVal = Symbol(); 
const objectVal = new Object(); 

s.add(functionVal); 
s.add(symbolVal); 
s.add(objectVal); 

alert(s.has(functionVal)); // true 
alert(s.has(symbolVal)); // true 
alert(s.has(objectVal)); // true 

// SameValueZero 检查意味着独立的实例不会冲突
alert(s.has(function() {})); // false

const s = new Set(); 

const objVal = {}, 
 arrVal = []; 

s.add(objVal); 
s.add(arrVal); 

objVal.bar = "bar"; 
arrVal.push("bar"); 

alert(s.has(objVal)); // true 
alert(s.has(arrVal)); // true

const s = new Set(); 
s.add('foo'); 
alert(s.size); // 1 

s.add('foo'); 
alert(s.size); // 1 

// 集合里有这个值
alert(s.delete('foo')); // true 

// 集合里没有这个值
alert(s.delete('foo')); // false

顺序与迭代

集合实例可以提供一个迭代器（Iterator），能以插入顺序生成集合内容。可以通过 values()方法及其别名方法 keys()（或者 Symbol.iterator 属性，它引用 values()）取得这个迭代器

const s = new Set(["val1", "val2", "val3"]); 
alert(s.values === s[Symbol.iterator]); // true 
alert(s.keys === s[Symbol.iterator]); // true 

for (let value of s.values()) { 
 alert(value); 
} 
// val1 
// val2 
// val3 

for (let value of s[Symbol.iterator]()) { 
 alert(value); 
} 
// val1 
// val2 
// val3

因为 values()是默认迭代器，所以可以直接对集合实例使用扩展操作，把集合转换为数组

const s = new Set(["val1", "val2", "val3"]); 
console.log([...s]); // ["val1", "val2", "val3"]

const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) { 
 console.log(pair); 
} 
// ["val1", "val1"] 
// ["val2", "val2"] 
// ["val3", "val3"]

const s = new Set(["val1", "val2", "val3"]); 
s.forEach((val, dupVal) => alert(`${val} -> ${dupVal}`)); 
// val1 -> val1 
// val2 -> val2 
// val3 -> val3

修改集合中值的属性不会影响其作为集合值的身份

const s1 = new Set(["val1"]); 

// 字符串原始值作为值不会被修改
for (let value of s1.values()) {
 value = "newVal"; 
 alert(value); // newVal 
 alert(s1.has("val1")); // true
}

const valObj = {id: 1}; 

const s2 = new Set([valObj]); 
// 修改值对象的属性，但对象仍然存在于集合中
for (let value of s2.values()) { 
 value.id = "newVal"; 
 alert(value); // {id: "newVal"} 
 alert(s2.has(valObj)); // true 
} 
alert(valObj); // {id: "newVal"}

定义正式集合操作

某些 Set 操作是有关联性的，因此最好让实现的方法能支持处理任意多个集合实例

Set 保留插入顺序，所有方法返回的集合必须保证顺序。

尽可能高效地使用内存。扩展操作符的语法很简洁，但尽可能避免集合和数组间的相互转换能够节省对象初始化成本。

不要修改已有的集合实例。union(a, b)或 a.union(b)应该返回包含结果的新集合实例。

class XSet extends Set { 
 union(...sets) { 
 return XSet.union(this, ...sets) 
 } 
 intersection(...sets) { 
 return XSet.intersection(this, ...sets); 
 } 
 difference(set) { 
 return XSet.difference(this, set); 
 } 
 symmetricDifference(set) { 
 return XSet.symmetricDifference(this, set); 
 } 
 cartesianProduct(set) { 
 return XSet.cartesianProduct(this, set); 
 } 
 powerSet() { 
 return XSet.powerSet(this); 
 }
// 返回两个或更多集合的并集
 static union(a, ...bSets) { 
 const unionSet = new XSet(a); 
 for (const b of bSets) { 
 for (const bValue of b) { 
 unionSet.add(bValue); 
 } 
 } 
 return unionSet; 
 } 
 // 返回两个或更多集合的交集
 static intersection(a, ...bSets) { 
 const intersectionSet = new XSet(a); 
 for (const aValue of intersectionSet) { 
 for (const b of bSets) { 
 if (!b.has(aValue)) { 
 intersectionSet.delete(aValue); 
 } 
 } 
 } 
 return intersectionSet; 
 } 
 // 返回两个集合的差集
 static difference(a, b) { 
 const differenceSet = new XSet(a); 
 for (const bValue of b) { 
 if (a.has(bValue)) { 
 differenceSet.delete(bValue); 
 } 
 } 
 return differenceSet; 
 } 
 // 返回两个集合的对称差集
 static symmetricDifference(a, b) { 
 // 按照定义，对称差集可以表达为
 return a.union(b).difference(a.intersection(b)); 
 } 
 // 返回两个集合（数组对形式）的笛卡儿积
 // 必须返回数组集合，因为笛卡儿积可能包含相同值的对
 static cartesianProduct(a, b) { 
 const cartesianProductSet = new XSet(); 
 for (const aValue of a) { 
 for (const bValue of b) { 
 cartesianProductSet.add([aValue, bValue]); 
 } 
 } 
 return cartesianProductSet; 
 } 
 // 返回一个集合的幂集
 static powerSet(a) { 
 const powerSet = new XSet().add(new XSet()); 
 for (const aValue of a) {
for (const set of new XSet(powerSet)) { 
 powerSet.add(new XSet(set).add(aValue)); 
 } 
 } 
 return powerSet; 
 } 
}

WeakSet

ECMAScript 6 新增的“弱集合”（WeakSet）是一种新的集合类型

WeakSet 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。

可以使用 new 关键字实例化一个空的 WeakSet：

const ws = new WeakSet();

弱集合中的值只能是 Object 或者继承自 Object 的类型，尝试使用非对象设置值会抛出 TypeError。

const val1 = {id: 1}, 
 val2 = {id: 2}, 
 val3 = {id: 3}; 

// 使用数组初始化弱集合
const ws1 = new WeakSet([val1, val2, val3]); 
alert(ws1.has(val1)); // true 
alert(ws1.has(val2)); // true 
alert(ws1.has(val3)); // true 

// 初始化是全有或全无的操作
// 只要有一个值无效就会抛出错误，导致整个初始化失败
const ws2 = new WeakSet([val1, "BADVAL", val3]); 
// TypeError: Invalid value used in WeakSet 

typeof ws2; 
// ReferenceError: ws2 is not defined 

// 原始值可以先包装成对象再用作值
const stringVal = new String("val1"); 
const ws3 = new WeakSet([stringVal]); 
alert(ws3.has(stringVal)); // true

1. 使用 add()再添加新值
2. 使用 has()查询
3. 使用 delete()删除

const ws = new WeakSet(); 
const val1 = {id: 1}, 
 val2 = {id: 2}; 

alert(ws.has(val1)); // false 
ws.add(val1)
 .add(val2); 

alert(ws.has(val1)); // true 
alert(ws.has(val2)); // true 

ws.delete(val1); // 只删除这一个值

alert(ws.has(val1)); // false 
alert(ws.has(val2)); // true 

add()方法返回弱集合实例，因此可以把多个操作连缀起来，包括初始化声明：
const val1 = {id: 1}, 
 val2 = {id: 2}, 
 val3 = {id: 3}; 

const ws = new WeakSet().add(val1); 
ws.add(val2) 
 .add(val3); 

alert(ws.has(val1)); // true 
alert(ws.has(val2)); // true 
alert(ws.has(val3)); // true

弱值

const ws = new WeakSet(); 
ws.add({});

const ws = new WeakSet(); 
const container = { 
 val: {} 
}; 
ws.add(container.val); 
function removeReference() { 
 container.val = null; 
}

不可迭代值

因为 WeakSet 中的值任何时候都可能被销毁，所以没必要提供迭代其值的能力。当然，也用不着像 clear()这样一次性销毁所有值的方法。WeakSet 确实没有这个方法。因为不可能迭代，所以也不可能在不知道对象引用的情况下从弱集合中取得值。即便代码可以访问 WeakSet 实例，也没办法看到其中的内容。

WeakSet 之所以限制只能用对象作为值，是为了保证只有通过值对象的引用才能取得值。如果允许原始值，那就没办法区分初始化时使用的字符串字面量和初始化之后使用的一个相等的字符串了。

使用弱集合

const disabledElements = new Set(); 
const loginButton = document.querySelector('#login'); 
// 通过加入对应集合，给这个节点打上“禁用”标签
disabledElements.add(loginButton);

const disabledElements = new WeakSet(); 
const loginButton = document.querySelector('#login'); 
// 通过加入对应集合，给这个节点打上“禁用”标签
disabledElements.add(loginButton);

迭代与扩展操作

1. Array
2. 所有定型数组
3. Map
4. Set

let iterableThings = [ 
 Array.of(1, 2), 
 typedArr = Int16Array.of(3, 4), 
 new Map([[5, 6], [7, 8]]), 
 new Set([9, 10]) 
]; 
for (const iterableThing of iterableThings) { 
 for (const x of iterableThing) { 
 console.log(x); 
 } 
} 
// 1 
// 2 
// 3 
// 4 
// [5, 6] 
// [7, 8] 
// 9 
// 10

let arr1 = [1, 2, 3]; 
let arr2 = [...arr1]; 
console.log(arr1); // [1, 2, 3] 
console.log(arr2); // [1, 2, 3] 
console.log(arr1 === arr2); // false

let map1 = new Map([[1, 2], [3, 4]]); 
let map2 = new Map(map1); 
console.log(map1); // Map {1 => 2, 3 => 4} 
console.log(map2); // Map {1 => 2, 3 => 4}

let arr1 = [1, 2, 3]; 
let arr2 = [0, ...arr1, 4, 5]; 
console.log(arr2); // [0, 1, 2, 3, 4, 5]

let arr1 = [{}]; 
let arr2 = [...arr1]; 
arr1[0].foo = 'bar'; 
console.log(arr2[0]); // { foo: 'bar' }

let arr1 = [1, 2, 3]; 
// 把数组复制到定型数组
let typedArr1 = Int16Array.of(...arr1); 
let typedArr2 = Int16Array.from(arr1); 
console.log(typedArr1); // Int16Array [1, 2, 3] 
console.log(typedArr2); // Int16Array [1, 2, 3] 

// 把数组复制到映射
let map = new Map(arr1.map((x) => [x, 'val' + x])); 
console.log(map); // Map {1 => 'val 1', 2 => 'val 2', 3 => 'val 3'} 

// 把数组复制到集合
let set = new Set(typedArr2); 
console.log(set); // Set {1, 2, 3} 

// 把集合复制回数组
let arr2 = [...set]; 
console.log(arr2); // [1, 2, 3]

👌