JavaScript红宝书04-集合引用类型(Collection Reference Types)

对象类型

对象的创建方式：字面量和构造函数

    let obj1 = new Object()
    obj1.size = 66
    obj1.name = 'good'

    let obj2 = {
      name: 'Gfred',
      size: 667
    }

数组类型

与其他编程语言不一样，JavaScript的数组中每个元素都可以是不同的类型。

创建方式：构造函数和字面量

其他常用方法

Array.from：把其他类型像数组一样

const m = new Map().set(1, 2)
    .set(3, 4)

 alert(Array.from(m))

Array.of()：把接受到的参数转为数组

注意：数组的长度是只读属性，数组的最大空间是可以容纳4,294,967,295元素

深入：如果一个web页面只有一个全局作用域，那么实例化数组会存在问题，如果要处理一个web页面内有多个frame，这两个frame的全局上下文是不同的，构造函数也是不同的，需要把frame 1的数组传递到 frame 2中。JavaScript中给出了 Array.isArray()方法，该方法判断传递的参数是不是数组，但不考虑数组的上下文是否相同

复制和填充(Copy and Fill Method)

在ES6之后，数组有两个新的操作方法，fill()和copyWithIn()方法，它们分别允许批量的复制和填充数组，有着相同的方法签名，允许数组有开始索引没有结束索引，数组使用这两个方法，将不会改变数组的大小。

fill()方法的具体使用：

fill()方法可以接收三个参数，如果只传一个参数，那么会把整个数组，都替换为这个传递的元素。

const zeroes = [0, 0, 0, 0, 0]
zeroes.fill(5)

如果传两个参数，第一个参数指要改为什么值，第二个参数指从数组的什么位置开始替换。

const zeroes = [0, 0, 0, 0, 0]
zeroes.fill(6, 3);

如果传三个参数，第一个参数指要改为什么值，第二个参数指从数组的什么位置开始替换，第三个参数指在什么位置结束替换。

const zeroes = [0, 0, 0, 0, 0]
zeroes.fill(7, 1, 3);

copyWithIn()方法的具体使用：

复制一段元素并替换数组中的元素，也可以接收三个参数，只传一个参数指，从索引0开始拷贝到第几个元素，结束后把这个元素之后的一段元素替换为之前进行拷贝的元素。

let ints,
  reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
reset()

ints.copyWithin(5)

传两个参数：第一个参数指从第几个位置开始替换，第二个参数指从第几个位置开始拷贝。

let ints,
  reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
reset()
ints.copyWithin(0, 5);

传三个参数：第一个参数指从第几个位置开始替换，第二、第三个参数指从第几个位置开始到第几个位置结束进行内容的拷贝

let ints,
  reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
reset()
ints.copyWithin(4, 0, 3)

转换方法

在JavaScript中所有对象都包含这几个转换方法：toLocaleString()、toString()和valueOf()。

一个纯字符串的数组，放在alert中调用toString()和valueOf()方法结果是一样的，alert需要的提示字符串，内部还会调用一次toString()

测试：

let jujutsu = ['5t5', '乙骨', '娜娜米']
console.log(jujutsu.toString());

console.log(jujutsu.valueOf());
console.log(jujutsu);

alert(jujutsu.toString())
alert(jujutsu.valueOf())
alert(jujutsu);

toLocaleString()、toString()和valueOf()这三个方法，调用后，每个元素都是通过逗号分割，这是因为构造函数里面调用了join()方法，join()方法可以接收一个参数，这个参数可以作为分隔符使用，默认为逗号。举个栗子，数组直接调用join()方法

alert(jujutsu.join('@'))

栈相关方法

JavaScript的数组提供了栈的操作方法push()和pop()，使数组看起来和栈数据结构非常像。

演示：

let jujutsu = ['5t5', '乙骨', '娜娜米']

jujutsu.push('甚尔')
console.log(jujutsu);

jujutsu.pop()
console.log(jujutsu);

队列方法

顾名思义，符合队列数据结构的特点，先进先出，shift()方法，弹出数组第一个元素，unshift()插入队列不转换的情况

演示：

let jujutsu = ['5t5', '乙骨', '娜娜米']

jujutsu.push('甚尔')
jujutsu.shift()
console.log(jujutsu);

jujutsu.unshift('5t5')
console.log(jujutsu);

翻转方法

JavaScript中数组提供reverse()方法和sort()方法，reverse()方法就是把每一个元素按照之前的顺序倒过来，而sort()方法是升序排列，调用String()方法进行强制转换，再进行比较。

演示：

let values = [1, 2, 3, 4, 5];
values.reverse()

console.log(values);

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

控制方法

concat()方法：拷贝一个数组，创建一个新的数组，把参数和拷贝的数组拼接在一起。

演示：

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

slice()方法：可以传一个或者两个参数，传一个，就切掉这个位置的元素（这个位置不是index，就是第几个元素），传两个，就保留这两个指定位置之间

的元素

演示：

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

console.log(colors2); 
console.log(colors3);

查找方法：indexOf()、lastIndexOf()、include()不多赘述，见名知意

过滤和映射

filter()

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

map()

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

拓展：ArrayBuffer

ArrayBuffer:是JavaScript中所有类型的数组和视图基本引用单元

JavaScript的数组缓存(ArrayBuffer)创建方式是类似c++的malloc，如果创建失败会返回空指针，抛出错误。数组缓存最大的安全分配的空间是2的53次方个字节。

Map类型

非常常用的key-value类型

常用API

has():Map里面是否包含这个key，返回布尔值

get():获取对应key的值，找不到返回undefined

set():设置键值对

delete():删除指定键值对

size():返回Map中的key-value对的数量

栗子：

const names = new Map();

console.log(names.has("firstName"));  
console.log(names.get("firstName ")); 
console.log(names.size);

names.set("firstName", "Matt")
 .set("lastName", "Frisbie");
console.log(names.has("firstName"));  
console.log(names.get("firstName")); 

names.delete("firstName")
console.log(names); 

Map在创建时也可以链式调用设置键值对，栗子

const m = new Map().set("key1", "val1");

注意：Map的key只能是Numbers或者String类型

拓展：在引擎级实现上 Object与Map有明显的不同，单个键值对与多个比较，内存开销呈线性增长，Map大约会比Object的容量多50%

WeakMap

JavaScript的WeakMap中，里面的key是弱持有，而value不是，只要key还在value就不会销毁。

如果WeakMap没有被引用，那么就会很快被执行完毕，对象被标记垃圾回收，之后键值对就会消失。

Set类型

可以理解为无序的数组，又包含很多和Map一样API

常用API

has()

delete()

add()

栗子：

const s = new Set();

console.log(s.has("Matt"));   
console.log(s.size);    

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

console.log(s.has("Matt"));   
console.log(s.size);   
s.delete("Matt");

console.log(s.has("Matt"));  

const s1 = new Set().add("val1");

console.log(s1.size);