JS高级程序设计精简版（第六章：集合引用类型）附思维导图

一、Object

New object（） 

或者对象字面量 object = {} 不会调用 Object构造函数

key为数值会自动转为字符串

二、数组

1. 创建数组：

数组字面量 [] 也不会调用Array构造函数

ES6新增两种创建数组的静态方法。

Array.form(arg,function(x){})

arg可以是任何可迭代的结构，或者有length属性和可索引元素的结构。若arg是现有数组，则对此数组进行浅拷贝。

Function(x){}对创建出来的数组元素都调用一次函数，并返回新的数组，

{}是函数中用到的变量的值，配置。

Array.of(1,2,3)把一组参数转为数组

相当于Array.prototype.slice.call(arguments)。

        2.判断是不是数组

arr instanceof Array 的问题在于，如果网页里有多个框架，就会有两个不同的全局执行上下文。当A框架把arr传给B框架时，B框架里的Array构造函数可就不是arr的构造函数了。

解决方案是Array.isArray(arr)

3.迭代器方法

Array的原型上暴露了3个方法，返回数组的迭代器。

keys():索引迭代器

vlues()：值迭代器

entries()：键-值对 迭代器

通过Array.form(arr.keys())直接创建迭代器的数组实例。

​​​​​​​4.复制和填充方法（ES6）

copyWithin(insertIdx,begin,end) ：批量复制，从本数组中浅拷贝一段插入到insertIdx。

fill(value,begin,end)：用value填充begin到end之间的数组，索引超出边界或者反向则忽略

​​​​​​​5.转换方法

ValueOf()返回数组本身

toString()返回由数组每一项toString() 逗号拼接的字符串。

toLocalString()则是调用数组中每一个元素的toLocalString()再用逗号拼接成的字符串

Join()可以设置拼接的字符串​​​​​​​

6.栈方法和队列方法

Push   pop   shift   unshift

​​​​​​​7.排序方法

Reverse()   sort(function(a,b){})  return 结果>0则反转ab    这两个方法都返回数组本身

Slicce(begin,end)   

Splice(begin,end,...insert) 改变数组本身

8.搜索和位置方法

第一种：按严格相等搜索===

indexOf()    lastIndexOf()    includes()//至少一个与指定元素匹配的项

第二种；断言函数

参数：元素  索引  数组本身

断言函数返回return为真的第一项，且不再继续搜索后面的项。

Find()   返回第一个匹配的元素

findIndex()   返回第一个匹配元素的索引

alert(people.find((element, index, array) => element.age < 28)); // {name: "Matt", age: 27}

​​​​​​​9.迭代方法

q every()：如果对每一项函数都返回 true，则这个方法返回 true。

some()：如果有一项函数返回 true，则这个方法返回 true。

q filter()：函数返回 true 的项会组成数组之后返回。

q forEach()：每一项都执行函数，但没有返回值。

q map()：返回由每次函数调用的结果构成的数组。

这些方法都不改变原始数组，方法有两个参数(function(value,index,arr){},作用域)

​​​​​​​10.归并方法

reduce(function((prev, cur, index, array){}，beginValue)

BeginValue是prev的初始值，有则从第一项开始迭代。

若无第二参数，则默认prev为第一项，cur为第二项，从第二项开始迭代。

反方向：reduceRight()

三、定型数组(ES6)

定型数组是 ECMAScript 新增的结构，目的是提升向原生库传输数据的效率。因为 JavaScript 数组与原生数组之间不匹配，所以出现了性能问题。

• ArrayBuffer

ArrayBuffer 是所有定型数组及视图引用的基本单位，他在内存中分配特定数量的字节空间(不能超过Number.MAX_SAFE_INTEGER)，一经创建就不能再调整大小。

1、创建一个ArrayBuffer：const buf1 = new ArrayBuffer(16);  //在内存中分配16字节

2、属性：byteLength属性获得字节长度。

3、方法：const buf2 = buf1.slice(4, 12); //可以()复制其部分到一个新实例中

ArrayBuffer并不能直接读写，读取或写入数组要通过视图，有DateView和定型数组两种。

• DataView

1. 指定DataView使用的ArrayBuffer

const view= new DataView(buf, 0, 8);//使用的ArrayBuffer，起始0字节，长度8字节

属性：

byteOffset//字节偏移    byteLength//字节长度  bufer//指向使用的ArrayBuffer

2、ElementType

DataView对数据类型没有预设，根据八种数据类型的读写方法向ArrayBuffer读写数据。

Int8  int16  int32

Uint8  uint16  uint32

Float32   float64

DataView 为上面的每种类型都暴露了 get 和 set 方法。

写入：如view.setUint8(0, 255)//第0个字节开始，写入八位无符号整数

读取：如view.getInt16(0) //从第0个字节开始通过有符号16位的方式读取一个数。

3、字节序

大端字节序：0x12345678中，0x12是高位，从高位开始存值。

DataView 的所有方法都默认大端字节序（网络字节序），但接收一个可选的布尔值参数，设置为 true 即使用小端字节序。

view.setUint16(0, 0x0002, true);//按照小段字节序读取

alert(view.getUint16(0, true)); // 384

1. 边界情况

DateView在读写的时候，超出范围都会报错。然而在写入时，会尽量将其他类型的值转为适当的类型，如无法转换才会抛出错误。

三）定型数组

定型数组特定于一种elementType，它遵循系统原生的字节序

1. 创建定型数组

const ints1 = new Int32Array(buf); // 通过已有缓冲创建数组

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

const ints3 = new Int32Array([2,4,6,8]); // 创建一个[2,4,6,8]的数组

const ints4 = Int16Array.from([3, 5, 7, 9]); // 基于普通数组来创建一个 Int16Array

const floats = Float32Array.of(3.14, 2.718, 1.618); // 基于传入的参数创建一个 Float32Array

若对应缓冲没有初始化，则以0填充。

1. 定型数组的方法

大部分数组方法都适用于定型数组，也可以迭代。

但是定型数组无法调整大小，因此有关拓展数组长度的方法都不适用于定型数组，如：

concat()  pop()  push()  shift()  splice()  unshift()

定型数组提供了两种方法：

1. set() 插入值到定型数组

container.set([5,6,7,8], 4); //把5678复制到container定型数组中，从索引4开始，溢出报错。

1. subarray() 提取定型数组中的部分

const arrs = source.subarray(1, 3); // 把source从索引 1 开始复制到索引 3，返回给arr。

四、集合

一）Map

1. map的方法

map可以使用任何数据类型作为键，类似于严格对象相等来匹配键。当键为对象时，判断的是对同一个对象的引用，而作为键的原始值是不能修改的。

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

has(key)  方法返回是否有此键名   

get(key)  通过key获取到值

set(key,value)  向map添加一个键值对，set还可以链式调用多次添加

delete(key)  删除选中键值对

clear()  清除map实例的所有键值对

通过size属性获取长度而非length

1. 顺序与迭代

map会以插入顺序生成[key, value]形式数组的默认迭代器，所以可以通过entries()方法取得迭代器，也可以直接使用拓展符...，forEach()等。

3、Object和map的区别

1）内存占用：单个插入线性增加，批量插入根据浏览器而异。给定固定大小的内存，Map 大约可以比 Object 多存储 50%的键/值对。

2）插入性能：map稍微快一点。

3）查找性能：少量键值时object稍微快一点，大量时差别不大。

4）删除性能：使用delete删除时，map更快，比插入和查找都快。

即除了查找以外，频繁的插入和删除键值对时Map性能更高。

二）WeakMap

weakMap的键必须是Object或继承制Object的类型，其方法与map的类似。

弱键：weakMap中的键不属于正式的引用，不会阻止垃圾回收，但键是对值的引用。

键不可迭代：weakMap中的键/值随时都会被销毁，所以不可迭代，且没有clear()方法。

使用情景：DOM节点数据：key为DOM节点的引用，value为要储存的值，当DOM销毁时，值也对应被回收。

注意：当初始化weakMap时，只要有一个键无效就会抛出错误，全部初始化失败。

三）Set

set是值的集合，与Map类似，任何数据类型都能作为值。

其方法类似，也可以按照插入值的顺序进行迭代，entries()的键和值一样。

Set中的元素只会出现一次，NaN是和undefined也可以存在Set中，NaN之间被认为是相同的值，两个相同的空对象可以同时存在。

set与数组的区别：set的值是唯一的，且没有索引的概念。

四）weakSet

weakSet的值只能是对象，是对象的弱引用，不会阻碍垃圾回收机制。

无法遍历，没有size属性。只有add()  delete()  has()三个方法。