1. 集合引用类型

学习内容
- 对象
- 数组与定型数组
- Map、WeakMap、Set以及WeakSet

1.1 Object

到目前为止，大多数引用值的示例使用的时Object类型，Object是ECMAScript中最常用的类型之一。虽然Object的实例没有多少功能，但很适合存储和在应用程序间交换数据。
显示的创建Object的实例有两种方式
1. 使用new操作符和Object构造函数
2. 使用字面量表示法

// 使用new操作符和Object构造函数
let person = new Object()
person.name = "Nicholas"
person.age = 19

// 使用字面量表示法
let person = {
    name: "Nicholas",
    age: 20
}

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

let person = {
    "name": "Nicholas",
    "age": 19,
    5: true
}

虽然使用哪种方式创建object实例都可以，但实际上使用时更倾向于对象字面量表示法。(对象字面量的表示方式可以给函数传递大量可选参数)

function displayInfo(args){
    let output = ""
    if(typeof args.name == "string"){
        output += "Name" + args.name
    }
    if(typeof args.age == "number"){
        output += "Age" + args.age
    }
    alert(output)
}
displayInfo({name:"Nicholas"})
displayInfo({name:"Bob",age: 19})

虽然属性一般是通过点语法来存取的，但也可以使用中括号来存取属性，在使用中括号时，要在括号内使用属性名的字符串形式。
1. 使用中括号的优势就是可以通过变量访问属性
2. 如果属性名中包含可能会导致语法错误的字符，或者关键字/保留字时，也可以使用中括号语法。

let person = {
    name: "Nicholas",
    age: 19
}
console.log(person["name"]) // "Nicholas"
console.log(person.name) // "Nicholas"

let propertyName = "name"
console.log(person[perpertyName]) // "Nicholas"

person["first  name"] = "Nicholas"

1.2 Array

ECMAScript数组是一组有序的数据，但跟其他编程语言不同的是，数组中每个槽位可以存储任意类型的数据。ECMAScript数组也是动态大小的，会随着数据添加而自动增长。

1.2.1 创建数组

使用Array构造函数
1. 直接使用new
2. 在new Array构造函数时传入一个数值，就会创建一个初始length长度为这个数值的数组
3. 给Array构造函数中传入要保存的元素

let arr1 = new Array()
// 创建数组长度为20的arr2数组
let arr2 = new Array(20)
// 创建数组时保存元素
let arr3 = new Array("bule","red","green")

在使用Array构造函数时，也可以省略new操作符。

let arr = Array(3)
let names = Array("green")

使用数组字面量表示法

let colors = ["green","red","blue"]
let names = []
let values = [1,2,]

Array构造函数还有两个ES6新增的用于创建数组的静态方法：from()和of()
1. from()用于将类数组结构转换为数组实例，第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个length属性和可索引元素的结构。第二个可选的映射函数参数，可以直接增强新数组的值，第三个可选的参数，用于指定映射函数中this的值。
2. of()用于将一组参数转换为数组实例

// 字符串会被拆分为单字符数组
let name = "Matt"
console.log(Array.from("Matt")); // [ 'M', 'a', 't', 't' ]
// 可以使用from()将集合和映射转换为一组数组
const m = new Map().set(1,2).set(2,3).set(3,4)
console.log(Array.from(m)); // [ [ 1, 2 ], [ 2, 3 ], [ 3, 4 ] ]
const s = new Set().add(1).add(2).add(3) 
console.log(Array.from(s)); // [ 1, 2, 3 ]

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

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

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

// Array.from()还接收第二个可选的映射函数。这个函数可以直接增强新数组的值，第三个可选的参数，用于指定映射函数中this的值
const arr1 = [1,2,3,4]
const arr2 = Array.from(arr1, x=> x**2)
console.log(arr2); // [ 1, 4, 9, 16 ]
const arr3 = Array.from(arr1, function(x){
  return x * this.exponent
},{ exponent: 2 })
console.log(arr3); // [ 2, 4, 6, 8 ]

// Array.of()可以把一组参数转换为数组
console.log(Array.of(1,2,3,4)); // [ 1, 2, 3, 4 ]
console.log(Array.of(undefined)); // [ undefined ]

1.2.2 数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位(hole),ECMAScript会将逗号之间相应索引位置当成空位。
ES6新增的方法和迭代器与早期ECMAScript版本中存在方法行为不同，ES6新增方法普遍将这些空位当成存在的元素，只不过值为undefined

const options = [,,,,,]
console.log(options.length); // 5
console.log(options);

const option = [1,,,,5]
for (const value of option) {
  console.log(value === undefined); // false   true   true true true false
}
// 使用ES6的Array.from()创建包含3个空位的数组
const a = Array.from([,,,])
for (const value of a) {
  console.log(value == undefined); // true true true
}
console.log(Array.of(...[,,,])); // [ undefined, undefined, undefined ]
// ES6之前的方法会忽略空位
const arr1 = [1,,,,5]
// map()会跳过空位置
console.log(arr1.map(v=> 6)); // [ 6, undefined, undefined, undefined, 6 ]
// jion()视空位置为空字符串
console.log(arr1.join('-')) // 1----5

1.2.3 数组索引

要取得或设置数组的值，需要使用中括号并提供相应值的数字索引。
数组length属性的独特之处在于，它不是只读的。通过修改length属性，可以从数组末尾删除或添加元素。
1. 如果将length设置为大于数组元素数的值，则新添加的元素都将以 undefined 填充。
2. 数组最多可以包含 4294967295 个元素

let colors = ["red","green","blue"]
console.log(colors[0]); // red
colors[2] = "black"   // 修改第三项
colors[3] = "brown"   // 添加第四项
console.log(colors);

// 通过数组长度删除末尾元素
let color = ["red","blue","green"]
color.length = 2
console.log(color); // [ 'red', 'blue' ]
// 通过length 添加元素
color.length = 5
console.log(color);
console.log(color[3]); // undefined
// 使用length很方便的在数组末尾添加元素
console.log(color[color.length] = "brown");
console.log(color[color.length] = "black");
console.log(color); // [ 'red', 'blue', undefined, undefined, undefined, 'brown', 'black' ]

1.2.4 检测数组

ECMAScript提供了 Array.isArray()方法，这个方法的目的就是确定一个值是否为数组

let colors = ["red","green","bule"]
console.log(Array.isArray(colors)) // true

1.2.5 迭代器方法

在ES6中，Array的原型上暴露了3个用于检索数组内容的方法: keys() values() entries()
1. keys() 返回数组索引的迭代器
2. values() 返回数组元素的迭代器
3. entries() 返回索引值/值对的迭代器

let colors = ["red","green","blue"]
// keys()
for (const iterator of colors.keys()) {
  console.log(iterator); // 0 1 2
}
// values()
for (const iterator of colors.values()) {
  console.log(iterator); // "red" "green" "blue"
}
// entries()
for (const [i,v] of colors.entries()) {
  console.log(i); // 0 1 2
  console.log(v); // "red" "green" "blue"
}

// 通过Array.from()直接转换为数组实例
const aKeys = Array.from(colors.keys())
const aValues = Array.from(colors.values())
const aEntries = Array.from(colors.entries())

console.log(aKeys); // [ 0, 1, 2 ]
console.log(aValues); // [ 'red', 'green', 'blue' ]
console.log(aEntries); // [ [ 0, 'red' ], [ 1, 'green' ], [ 2, 'blue' ] ]

1.2.6 复制和填充方法

ES6新增两个方法，这这个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。这个方法不会改变数组大小。
1. copyWithin(): 批量复制方法
2. fill(): 填充数组方法。
fill() 向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上它得到的一个正索引。

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

// fill()静默忽略超出数组边界，零长度及方向相反的索引范围
// 索引过低,省略
console.log(zeros.fill(1,-10,-7));  // [ 0, 0, 0, 0, 0 ]
// 索引过高，省略
console.log(zeros.fill(1,10,15));  // [ 0, 0, 0, 0, 0 ]
// 索引反向，省略
console.log(zeros.fill(1,10,7));  // [ 0, 0, 0, 0, 0 ]
// 索引部分填充
console.log(zeros.fill(3,3,10));  // [ 0, 0, 0, 3, 3 ]

copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置，开始索引和结束索引与fill()使用同样的计算方法。

let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function reset() {
  ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}
// 从ints中复制 索引0的开始的内容，插入到索引5开始的位置
console.log(ints.copyWithin(5)); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从ints中复制索引5开始的内容，插入到索引0开始的位置
console.log(ints.copyWithin(0, 5)); // [ 5, 6, 7, 8, 9, 5, 6, 7, 8, 9 ]
reset();
// 从ints中复制索引0开始到索引3结束的内容，插入到索引4开始的位置
console.log(ints.copyWithin(4, 0, 3)); // [  0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();

// copyWithin() 静默忽略超出数组边界、零长度及方向相反的索引范围
// 索引过低，忽略
console.log(ints.copyWithin(1, -10, -11)); // [0,1,2,3,4,5,6,7,8,9]
reset()
// 索引过高，忽略
console.log(ints.copyWithin(1, 12,15)); // [0,1,2,3,4,5,6,7,8,9]
reset()
// 索引反向，忽略
console.log(ints.copyWithin(1, 4,2)); // [0,1,2,3,4,5,6,7,8,9]
reset()
// 索引部分可用，复制、填充可用
console.log(ints.copyWithin(1, 5,12)); // [  0, 5, 6, 7, 8, 9, 6, 7, 8, 9]

1.2.7 转换方法

所有对象都有toLocaleString() toString() valueOf()方法
1. valueOf()方法，返回的还是数组本身
2. toString()方法，返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串
3. toLocaleString()方法也可能返回跟toSting() valueOf()相同的结果，但也不一定。它与另外两个方法的唯一区别是，为了得到最终的字符串，会调用数组每个值的toLocaleString()方法，而不是toString()方法

let colors = ["red","green","blue"]
console.log(colors.toString()); // red,green,blue
console.log(colors.valueOf());  // [ 'red', 'green', 'blue' ]

// toLocaleString()与 toString() valueOf()方法的区别
let person1 = {
  toLocaleString(){
    return "Nicholas"
  },
  toString(){
    return "Nicholas"
  }
}
let person2 = {
  toLocaleString(){
    return "Grigorios"
  },
  toString(){
    return "Greg"
  }
}
let people = [person1,person2]
console.log(people.toString()); // Nicholas,Greg
console.log(people.toLocaleString()); // Nicholas,Grigorios

1.2.9 排序方法

数组有两个方法可以用来对元素重新排序： reverse()和sort()
默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即使数组的元素是数值，也会把数组转换为字符串再比较、排序。
1. 比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相同，返回0；如果第一个参数应该排在第二个参数的后面，就返回正值。

let values = [0,1,5,10,15]
console.log(values.reverse()); // [ 15, 10, 5, 1, 0 ]
console.log(values.sort()); // [ 0, 1, 10, 15, 5 ]

function compare(value1,value2){
  if(value1 < value2){
    return -1
  } else if(value1 > value2) {
    return 1
  }else {
    return 0
  }
}
console.log(values.sort(compare)); // [ 0, 1, 5, 10, 15 ]

// 如果数组元素是数值，或者是valueOf()方法返回数值的对象，这个比较函数还可以写的更加简单
function compare2(value1,value2){
  return value1 - value2
}

1.2.10 操作方法

concat()方法可以在现有数组全部元素基础上创建一个新数组。如果传入一个或多个数组，则concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾。
打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号，Symbol.isConcatSpreadable。这个符号能够阻止concat()打平参数数组。

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

let newColors = ["black","brown"]
let moreNewColor = {
  [Symbol.isConcatSpreadable]: true,
  0: "pink",
  1: "cyan",
  length: 2
}
newColors[Symbol.isConcatSpreadable] = false
// 强制不打平数组
let color3 = colors.concat(newColors)

// 强制打平数组
let color4 = colors.concat(moreNewColor)

console.log(color3); // [  'red', 'green', 'blue',[ 'black', 'brown']
console.log(color4); // [ 'red', 'green', 'blue', 'pink', 'cyan' ]
       
3. slice()用于创建一个包含原有数组中一个或多个元素的新数组。

```js
let colors = [ 'red', 'green', 'blue', 'yellow', 'black', 'brown' ]

console.log(colors.slice(1)); // [ 'green', 'blue', 'yellow', 'black', 'brown' ]
console.log(colors.slice(1,4)); // [ 'green', 'blue', 'yellow' ]
// 如果截取索引 结束位置小于开始位置，则返回空数组
console.log(colors.slice(3,1)); // []

splice()方法，主要目的是在数组中间插入元素
1. 删除，需要给splice()传2个参数，要删除的第一个元素的位置和要删除的元素数量。
2. 插入，需要给splice()传3个参数，第一个参数是开始位置；第二个参数是要删除的元素的数量；第三个参数是要插入的元素。比如splice(1,0,"olivedrab") 在索引1的位置插入"olivedrab"
3. 替换，需要给splice()传3个参数，第一个参数是开始位置；第二个参数是要替换元素的数量；第三个参数是替换元素的数量

let colors = [ 'red', 'green', 'blue']

// 删除元素的第一项
let removed = colors.splice(0,1)
console.log(colors); // [ 'green', 'blue' ]
// 在元素1位置插入两个元素 "pink" "brown"
let inserted = colors.splice(1,0,"pink","brown")
console.log(colors); // [ 'green', 'pink', 'brown', 'blue' ]
// 在元素1位置替换1个元素为 "cyan" "yellow"
let repliced = colors.splice(1,1,"cyan","yellow")
console.log(repliced); // ['pink']
console.log(colors); // [ 'green', 'cyan', 'yellow', 'brown', 'blue' ]

1.2.11 搜索和位置方法

ECMAScript提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索
严格相等,这些方法都接收两个参数，要查找的元素和一个可选的起始索引位置
1. indexOf() 找到返回对应的索引位置，没有找到返回-1
2. lstIndexOf() 找到返回对应的索引位置，没有找到返回-1
3. includes() 返回true 或 false

let num = [1,2,3,4,5,4,3,2,1]

console.log(num.indexOf(1)); // 0
console.log(num.lastIndexOf(1)); // 8
console.log(num.includes(1)); // true

console.log(num.indexOf(1, 2)); // 8
console.log(num.lastIndexOf(1,4)); // 0
console.log(num.includes(1, 4)); // true

断言函数: ECMAScript也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数，断言函数的返回值决定了相应索引的元素是否被认为匹配。
1. 断言函数接收3个参数：元素、索引和数组本身，其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。
2. find() 从数组的最小索引开始，返回第一个匹配的元素，第二个可选的参数，用于指定断言函数内部this的值。
3. findIndex() 从数组的最小索引开始，返回第一个匹配元素的索引，第二个可选的参数，用于指定断言函数内部this的值。
4. 找到匹配项后，这两个方法都不在继续搜索

const people = [
  {
    name: 'Matt',
    age: 27
  },
  {
    name: 'Nicholas',
    age: 29
  }
]

let res = people.find((element,index,array)=>{
  return element.age > 28
})
console.log(res); // { name: 'Nicholas', age: 29 }
let res1 = people.findIndex((element,index,array)=>{
  return element.age > 28
})
console.log(res1); // 1

// 找到匹配项后，这两个方法都不在继续搜索
let events = [2,4,6]
events.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.2.12 迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数，以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象。传给每个方法的函数接收3个参数：数组元素、元素索引和数组本本。
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];
// every
let everyResult = numbers.every((element, index, array) => {
  return element > 2;
});
console.log(everyResult); // false
// some
let someResult = numbers.some((element, index, array) => {
  return element > 2;
});
console.log(someResult); // true
// filter
let filterResult = numbers.filter((element, index, array) => {
  return element > 2;
});
console.log(filterResult); // [ 3, 4, 5, 4, 3 ]
// map
let mapResult = numbers.map((element, index, array) => {
  return element * 2;
});
console.log(mapResult); // [  2, 4, 6, 8, 10, 8, 6, 4, 2]
// forEach

numbers.forEach((element, index, array) => {
  // 要执行的操作
});

1.2.13 归并方法

ECMAScript为数组提供了两个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组中的所有项，并在此基础上构建一个最终返回值。这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。
1. reduce()方法从数组第一项开始遍历到最后一项。每一项运行的归并函数接收4个参数：上一个归并值、当前项、当前项的索引、数组本身
2. reduceRight()方法从最后一项开始遍历至第一项。
3. 归并函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数(作为归并起点值)，则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

let numbers = [1,2,3,4,5]
// reduce()

let sum = numbers.reduce((prev,cur,index,array)=>{
  return prev + cur
})
console.log(sum); // 15
// reduceRight()

let sum1 = numbers.reduceRight((prev,cur,index,array)=>{
  return prev + cur
})
console.log(sum1); // 15

1.3 Map

ECMAScript6新增特性，Map是一种新的集合类型，提供真正的键/值存储机制。

1.3.1 基本API

使用new关键字和Map构造函数可以创建一个空映射。如果想在创建的同时初始化实例。可以给Map函数传入一个可迭代对象，需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入都新映射实例中。
初始化之后，可以使用set()方法再添加键值对，另外，可以使用get()和has()进行查询，通过size属性获取映射中键/值对的数量。还可以使用delete()和clear()删除值。

// 使用嵌套数组初始化映射
let m1 = new Map([
  ['key1','val1'],
  ['key2','val2'],
  ['key3','val3']
])
console.log(m1); // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
// 使用自定义迭代器初始化映射
let m2 = new Map({
  [Symbol.iterator]: function *(){
    yield ['key1','val1']
    yield ['key2','val2']
    yield ['key3','val3']
  }
})
console.log(m2); // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
// 映射期待的键/值对，无论是否提供
let m3 = new Map([[]])
console.log(m3); // Map(1) { undefined => undefined }

const m4 = new Map()
console.log(m4.has("firstName")); // false
console.log(m4.size); // 0

m4.set("firstName","Matt").set("lastName","Nicholas")
console.log(m4.has("firstName")); // true
console.log(m4.get("firstName")); // "Matt"
console.log(m4.size); // 2
m4.delete("firstName")

console.log(m4.has("firstName")); // false
console.log(m4.size); // 1

m4.clear()
console.log(m4.has("firstName")); // false
console.log(m4.has("lastName"));  // false
console.log(m4.size); // 0

与Object只能使用数值、字符串或符号作为键不同。Map可以使用任何JavaScript数据类型作为键，Map内部使用全等的标准来检查键的匹配性。
与严格相等一样，在映射中用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变。

const m = new Map()

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

m.set(functionKey,"functionKey").set(symbolKey,"symbolKey").set(objectKey,"objectKey")

console.log(m);
// map 对应的结果
// Map(3) {
//   [Function: functionKey] => 'functionKey',
//   Symbol() => 'symbolKey',
//   {} => 'objectKey'
// }
console.log(m.get(functionKey)); // functionKey
console.log(m.get(symbolKey)); // symbolKey
console.log(m.get(objectKey)); // objectKey

// 与严格相等一样，在映射中用作键和值的对象以及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变
const m1 = new Map()
const objKey = {},
      objVal = {},
      arrKey = [],
      arrVal = []
m1.set(objKey,objVal).set(arrKey,arrVal)
objKey.name = "张三"
objVal.age = 29
arrKey.push("李四")
arrVal.push(30)

console.log(m1); // Map(2) { { name: '张三' } => { age: 29 }, [ '李四' ] => [ 30 ] }
console.log(m1.get(objKey)); // { age: 29 }
console.log(m1.get(arrKey)); // [ 30 ]

// 在map中的判断重复比较也可能导致意想不到的冲突
const m2 = new Map()
const a = 0/"",
      b = 0/"",
      pz = +0,
      nz = -0
console.log(a === b); // false
console.log(pz === nz); // true
m2.set(a, 'foo').set(b,'zoo')

console.log(m2); // Map(1) { NaN => 'zoo' }
console.log(m2.size); // 1

m2.set(pz, '正0').set(nz,'负0')
console.log(m2); // Map(2) { NaN => 'zoo', 0 => '负0' }
console.log(m2.size); // 2

1.3.2 顺序与迭代

与Object类型的一个主要差异，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。
映射实例可以提供一个迭代器(interator),能以插入顺序生成[key,value]形式的数组。可以通过entries() values() keys() 进行取键/值

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

// entries()
for (const iterator of m.entries()) {
  console.log(iterator);
}
// [ 'key1', 'val1' ]
// [ 'key2', 'val2' ]
// [ 'key3', 'val3' ]
// 因为entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组
console.log([...m]); //[ [ 'key1', 'val1' ], [ 'key2', 'val2' ], [ 'key3', 'val3' ] ]

// values()
for (const iterator of m.values()) {
  console.log(iterator);
}
// val1
// val2
// val3

// keys
for (const iterator of m.keys()) {
  console.log(iterator);
}
// key1
// key2
// key3

1.4 WeakMap

ECMAScript6新增的 “弱映射”是一种新的集合类型，增强键/值对存储机制。WeakMap中的 “Weak” 描述的是JavaScript垃圾回收程序对 “弱映射” 中键的方式。
弱映射中的键只能是object或者继承自Object的类型，不然会报错 TypeError

const m = new WeakMap()
const key1 = {id: 1},
      key2 = {id: 2},
      key3 = {id: 3}
// 使用嵌套数组初始化若映射
const wm1 = new WeakMap([
  [key1,"val1"],
  [key2,"val2"],
  [key3,"val3"]
])
console.log(wm1.get(key1)); // val1
console.log(wm1.get(key2)); // val2
console.log(wm1.get(key3)); // val3

// 初始化时全有或全无的操作 只要有一个键无效就会抛出错误，导致整个初始化失效
const wm2 = new WeakMap([
  [key1,"val1"],
  ["cyan","val2"],
  [key3,"val3"]
])
// console.log(wm2); // TypeError

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

WeakMap中“Weak”表示若映射的键是“弱弱的拿着”的。意思就是，这些键不属于正式的引用，不会阻止垃圾回收。但要注意的是，弱映射中值的引用可不是“弱弱的拿着”的。只要键存在，键/值对就会存在于映射中，并被当作对值的引用，因此就不会被垃圾回收。
WeakMap不能迭代，也没有clear()方法。

const wm = new WeakMap()

const container = {
  key: {}
}
wm.set(container.key, "val1")
console.log(wm);

function removeReference(){
  container.key = null
}
// container 对象维护着一个对弱映射键的引用，因此这个对象键不会成为垃圾回收的目标
// 如果调用了removeReference()，就会摧毁键对象的最后一个引用，垃圾回收程序就会把这个键/值对清理掉。

1.5 Set

ECMAScript6新增的Set是一种新集合类型，Set在很多方面都像是加强的Map
基本API
1. add() has() size delete() clear()
与Map类似，Set可以包含任何的JavaScript数据类型作为值，使用严格对象相等的标准来检查值的匹配性。

const s = new Set()
const functionVal = function(){}
const symbolVal = Symbol()
const objectVal = new Object()
s.add(functionVal).add(symbolVal).add(objectVal)
console.log(functionVal); // [Function: functionVal]
console.log(symbolVal); // Symbol()
console.log(objectVal); // []

// 与严格相等一样，用做值的对象和其他"集合"类型在自己的内容或属性被修改时也不会改变。
const s1 = new Set()
const objVal = {},
      arrVal = []
s1.add(objVal).add(arrVal)
objVal.foo = "foo"
arrVal.push("zoo")

console.log(s1); // Set(2) { { foo: 'foo' }, [ 'zoo' ] }
console.log(s1.has(objVal)); // true

1.5.1 顺序与迭代

Set会维护值插入时的顺序，因此支持按顺序迭代。values()是默认的迭代器，可以直接对集合实例使用扩展操作，把集合转换为数组。
entries()方法返回一个迭代器，可以按照插入顺序产生包含两个元素的数组，这两个元素是集合中每个值的重复出现。
调用集合的forEach()方法并传入回调，依次迭代每个键/值对。

const s = new Set(['val1','val2','val3'])
// 因为values()是默认迭代器，所以可以直接对集合实例使用扩展操作，把集合转换为数组
console.log([...s]); // [ 'val1', 'val2', 'val3' ]
// entyies() 方法 
for (const iterator of s.entries()) {
  console.log(iterator);
}
// [ 'val1', 'val1' ]
// [ 'val2', 'val2' ]
// [ 'val3', 'val3' ]

// 使用集合的forEach()方法
s.forEach((val,dupVal)=>{
  console.log(`${val}---${dupVal}`);
})
// val1---val1
// val2---val2
// val3---val3

1.5.2 WeakSet

WeakSet中的"Weak"，描述的是JavaScript垃圾回收程序对待"弱集合"中值的方式。
弱集合中的值只能是Object或者继承自Object的类型。尝试使用非对象设置值会抛出TypeError。
WeakSet中"weak"表示弱集合的值是"弱弱地拿着"的，意思就是，这些值不属于正式的引用，不会阻止垃圾回收。

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

ws.add(val1).add(val2).add(val3)
console.log(ws.has(val1)); // true

const ws2 = new WeakSet()
ws.add([])
// add()方法初始化了一个新对象，并将它用做一个值。因为没有指向这个对象的其他引用，所以
// 这行代码执行完成后，这个对象值就会被当作垃圾回收。然后，这个值就从弱集合中消失了，使其成为一个空集合。

const ws3 = new WeakSet()
const container = {
  val1: []
}
ws3.add(container.val1)
function removeReference(){
  container.val1 = null
}
// ws3中container对象维护着一个对弱集合值的引用。因此这个对象值不会成为垃圾回收的目标。

持续对红宝书进行输出（三）

1. 集合引用类型

1.1 Object

1.2 Array

1.2.1 创建数组

1.2.2 数组空位

1.2.3 数组索引

1.2.4 检测数组

1.2.5 迭代器方法

1.2.6 复制和填充方法

1.2.7 转换方法

1.2.9 排序方法

1.2.10 操作方法

1.2.11 搜索和位置方法

1.2.12 迭代方法

1.2.13 归并方法

1.3 Map

1.3.1 基本API

1.3.2 顺序与迭代

1.4 WeakMap

1.5 Set

1.5.1 顺序与迭代

1.5.2 WeakSet