JS/TS 学习记录三 JS Object、Array、Map和Set
Object类型
Object类型为ECMAScript最常用的类型之一，非常适合在应用程序间交换数据。创建Object对象，可以通过new关键字和对象字面量表示法两种方式。
let person1 = new Object();
person.name = "Jack";
person.age = 12;
//TS中不能使用这种方法
let person2 = {name: "Jack", age: 12};
person2.sex = male; //TS中非法
//对TS来说，定义Object对象时需明确其所含字段
Array类型
创建Array对象
ECMAScript数组类型与其他语言数组类型不同的是，ECMAScript数组可以存储任意类型的数据，并且其大小可以随数据的添加自动增长。
与Object类型类似，创建数组也可以通过new关键字和数组字面量两种方法进行。
let colors = new Array(); //创建一个空数组
colors = new Array(20); //创建长度为20的数组，其中每一个元素都为undefined
colors = Array("blue"); //省略new关键字，创建包含一个元素blue的数组
//以上为通过new关键字创建数组的几种写法
colors = []; //创建一个空数组
colors = ["blue", "red"];
//数组字面量写法
此外，ES6中Array构造函数新增了两个创建数组的静态方法：from()和of()。
from将类数组结构转换为数组实例，任何可迭代的结构，或者有一个length属性和可索引元素的结构，均可作为参数。of用于将“()”内的一堆参数转换为数组（arguments对象不能正确转换）。
const map1 = new Map().set(1,2).set(3,4);
const set1 = new Set().add(1).add(2).add(3).add(4);
console.log(Array.from(map1), Array.from(set1));
//打印输出为[[1, 2], [3, 4]] [1, 2, 3, 4]
function getArguments(...args: number[]){
console.log(arguments, arguments.length, Array.from(arguments), Array.of(1, 2, 3, 4));
}
getArguments(1, 2, 3, 4);
//打印输出为[1, 2, 3, 4, ...] 4 [1, 2, 3, 4] [1, 2, 3, 4]
访问Array元素
Array对象可通过下标访问数据，当下标值超过数组长度时，返回undefined。数组长度可通过Array的length属性获取。数组的length属性是可读可写的，设置length小于数组长度时，超出部分的元素会被舍弃；设置length大于数组长度时，多余的部分会填充为undefined。
let array1 = []; console.log(array1.length, array1[2], array1.length); //输出打印为0 undefined 0 array1[0] = 0; array1.length = 3; array1[array1.length]=3; console.log(array1.length, array1, array1.length); //输出打印为4 [0, empty × 2, 3] 4
检测数组
可通过isArray()函数判断一个变量是否为数组。
迭代器方法
ES6中，Array的原型上暴露了3个用于检测数组内容的方法：keys()、values()和entries()。keys()返回数组索引的迭代器，values()返回数组元素的迭代器，entries()返回索引/值对的迭代器。
let array1 = []; array1[0] = 0; array1.length = 3; array1[array1.length]=3; console.log(Array.from(array1.keys()), Array.from(array1.values()), Array.from(array1.entries())); //输出打印为[0, 1, 2, 3] [0, undefined, undefined, 3] [[0, 0], [1, undefined], [2, undefined], [3, 3]]
转换方法
Array提供数组元素转换为字符串的方法toString()，使用join()方法可以指定字符串分割字符，并返回字符串。
let array1 = []; array1[0] = 0; array1.length = 3; array1[array1.length]=3; //输出打印为0,,,3 0|||3
栈方法和队列方法
ECMAScript给数组提供几个方法，使其可以像栈一样进行压入和弹出操作。push()和pop()方法使数组可以在末尾添加和删除元素，shift()和unshift()方法可以在数组开头添加和删除元素。
let array2 = [1,2]; array2.push(100); array2.shift(); console.log(array2); array2.pop(); array2.unshift(1); console.log(array2); //输出打印为[2, 100]，[1, 2]
排序方法
数组提供两个排序方法，reserve()和sort()方法。调用reserve()可以反转数组，调用sort()方法，不传入参数时，sort()方法会调用String()转型函数，将数组元素转换为字符串再进行比较，或者给sort方法传入比较函数，若第一个参数应排在第二个参数前面，则返回负值，否则返回正值，相等则返回0。
let array3 = [8, 9, 10];
array3.sort();
console.log(array3);
array3.sort((val1, val2) => {
return val2 - val1;
});
console.log(array3);
//输出打印为[10, 8, 9]，[10, 9, 8]
操作方法
concat()合并数组，slice()创建一个包含原数组中一个或多个元素的新数组。
搜索和位置方法
ECMAScript提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索。
严格相等方法（使用“===”比较）有indexOf()和lastIndexOf()，分别从前往后和从后往前查找匹配的第一个元素，返回元素索引，无匹配项返回-1；以及ECMAScript7新增的includes()，返回值为Boolean类型。
断言函数搜索包括find()方法——返回断言函数匹配的第一个元素以及findIndex()方法——返回匹配的第一个元素的索引。
let array4 = [{name: "Jack", age: 27}, {name: "Lucy", age: 19}, {name: "Cindy", age: 18}];
console.log(array4.findIndex((element, index, array) => element.age < 20), array4.find((element, index, array) => element.age < 20));
//输出打印为1 {name: "Lucy", age: 19}
迭代方法
ECMAScript为Array提供了5个迭代方法：
（1）every()：对数组的每一项都传入运行的函数，当均返回true时该方法返回true；
（2）filter()：对数组的每一项都传入运行的函数，返回true的项组成数组返回；
（3）forEach()：对数组的每一项运行传入的函数，没有返回值；
（4）map()：对数组的每一项运行传入的函数，返回由每次调用函数返回的结果组成的数组；
（5）some()：对数组的每一项运行传入的函数，任一元素返回true函数立即返回true。
归并方法
ECMAScript为数组提供了两个归并方法：reduce()和reduceRight()，两个方法都会迭代数组的所有项，并构建一个最终返回值，区别在于分别为从前往后和从后往前迭代。
两者均接收两个参数，对每一项都会运行的归并函数，以及归并起点的初始值。
let array5 = [1,2,3,4,5]; console.log(array5.reduce((prev, cur, index, array) => prev + cur), array5.reduceRight((prev, cur, index, array) => prev + cur, 10)); //打印输出为15 25
定型数组
定型数组是ECMAScript新增的结构，目的是提升向原生库传输数据的效率。
暂未用到，略过。
Map
Map是ECMAScript6新增的一种键/值式存储类型，Object类型也可以完成键/值式存储，区别在于：
（1）内存占用：不同的浏览器情况不同，但给固定大小的内存，Map大约可以比Object多存储50%的键/值对；
（2）插入性能：插入键值对二者的消耗大致相当，但插入操作较多时，还是Map的性能较好；
（3）查找速度：二者的查找速度性能差异极小，某些情况下Object的性能甚至优于Map，若代码使用大量查找操作，考虑使用Object；
（4）删除性能：使用delete删除Object中的元素一直饱受诟病，Map的delete操作比删除和查找更快，因此若代码涉及较多的删除操作，毫无疑问应该使用Map；
（5）与Object类型的另一差异是，Map会维护键/值对的插入顺序，可根据插入顺序执行迭代操作。
基本API
创建一个Map对象，需要使用关键字new声明，可以在声明时传入一个可迭代对象，需要包含键/值对数组。初始化后，可以通过set()方法给Map对象增加键/值对，通过has()方法判断是存在键/值对，通过get()方法获取键对应的值，通过delete()方法删除键/值对，通过clear()方法清空Map对象。
let map2 = new Map();
let map3 = new Map([["k1", "v1"], ["k2", "v2"], ["k3", "v3"]]);
map3.set("k3", "vv").set("k4", "v4");
map3.delete("k1");
console.log(map3.has("k1"), map3.has("k2"), map3.get("k3"), map3.get("kk"));
//输出打印为false true "vv" undefined
map3.clear();
console.log(map3.size); //输出打印为0
顺序与迭代
如前文所述，Map内部维护了键/值对的插入顺序，可通过entries()方法返回[key, value]形式的数组，或者通过forEach()方法传入的回调函数迭代。
let map4 = new Map([["k1", "v1"], ["k2", "v2"], ["k3", "v3"]]);
for(let pair of map4.entries()){
console.log(pair);
}
//输出打印为["k1", "v1"]，["k2", "v2"]，["k3", "v3"]
map4.forEach((val, key) => console.log(`[${key}, ${val}]`));
//输出打印为[k1, v1]，[k2, v2]，[k3, v3]
WeakMap
“弱映射”（WeakMap），弱映射的键只能是Object类型或继承自Object类型，其键值不为正式的引用，不会阻止垃圾回收。
Set
Set（集合）为ECMAScript6新增的一种集合类型，很多方面像是加强的Map。
基本API
创建一个Set对象，需要使用关键字new声明，可以在声明时传入一个可迭代对象。初始化后，可以通过add()方法给Map对象增加值，通过has()方法判断是存在值，通过delete()方法删除值，通过clear()方法清空Set对象。
let set2 = new Set();
let set3 = new Set(["v1", "v2"]);
set3.add("v3").add("v4");
set3.delete("v1");
console.log(set3.size, set3.has("v1"), set3.has("v2"));
//输出打印为3 false true
顺序与迭代
与Map一样，Set也会维护插入时的顺序，因此支持按顺序迭代。
let set4 = new Set(["v1", "v2"]);
for(let val of set4.values()){
console.log(val);
}
//输出打印为v1，v2，v3
for(let val of set4.keys()){
console.log(val);
}
//输出打印为v1，v2，v3
set4.forEach((val)=> console.log(val));
//输出打印为v1，v2，v3
WeakSet
“弱集合”（WeakSet），弱集合的值只能是Object类型或继承自Object类型，不为正式的引用，不会阻止垃圾回收。
迭代与拓展操作
ECMAScript支持的四种原生集合类型：Array、定型数组、Map、Set，都定义了默认迭代器，因此都支持顺序迭代，可传入for-of循环，都兼容拓展操作符“...”。
let map5 = new Map([["k1", "v1"], ["k2", "v2"], ["k3", "v3"]]); console.log(...map5); //输出打印为["k1", "v1"] ["k2", "v2"] ["k3", "v3"] let set4 = new Set(["v1", "v2", "v3"]); console.log(...set4); //输出打印为v1 v2 v3