（我的博客样式有点怪，建议复制到本地，需要看的时候打开Typora，大纲点击要查的内容即可，我一般记不清某个方法的时候就查一下。）
基础
Typescript
TypeScript是一个开源的、渐进式包含类型的JavaScript超集，由微软创建并维护。创建它的目的是让开发者增强JavaScript的能力并使应用的规模扩展变得更容易。它的主要功能之一是为JavaScript变量提供类型支持。在JavaScript中提供类型支持可以实现静态检查，从而更容易地重构代码和寻找bug。最后，TypeScript会被编译为简单的JavaScript代码。
使用
npm install -g typescript
创建以.ts为扩展名的文件再使用tsc命令来编译它，如：
tsc example.ts
内容
类型推断
// 给变量设置类型
let age: number = 20;
//简洁写法
let age = 20; // 自动推断为number
当声明了一个变量但没有设置其初始值，可以为其设置一个类型
let language : string;
接口
- 给变量设置一个类型，符合这个描述的对象都是接口符合的目标
- 和其他语言中的接口一个意思
// 1 类型限制
interface Person{
name: string;
age: number;
}
function printName(person: Person){
console.log(person.name)
}
// 2 类与接口
interface Comparable{
compareTo(b): number;
}
class MyObject implements Comparable{
age: number;
compareTo(b): number{
if(this.age === b.age){
return 0;
}
return this.age > b.age ? 1 : -1;
}
}
泛型
修改上面的接口，指定接口内函数的参数类型。
interface Comparable<T>{
compareTo(b: T): number;
}
class MyObject implements Comparable<MyObject>{
age: number;
compareTo(b: MyOBject): number{
if(this.age === b.age){
return 0;
}
return this.age > b.age ? 1 : -1;
}
}
数据结构
数组 Array
构造
// 使用Array构造函数
new Array() // 创建空数组
new Array(20) // 创建包函 20 项的数组
new Array( 'red', 'gray', 'pink') // 创建带有三个字符串的数组
// 使用数组字面量构造
let demo = [ ] // 创建空数组
let demo1 = [20] // 创建包函 20 项的数组
let demo2 = [ 'red', 'gray', 'pink' ] // 创建带有三个字符串的数组
常用API
静态
Array.from(element)
将element转化为数组，适用于字符串、集合、映射等等。
转字符串
join([sep])
把数组里面的元素拼接成字符串。
sep为间隔符，默认为逗号。
toString()
把数组里面的元素拼接成字符串，以逗号间隔。
concat(arr1 [, arr2, ...])
连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
slice(start[, end])
截取从start到end的数组，返回新的子数组。
支持负数，含头不含尾。（end省略表示一直到结尾）
reverse()
翻转数组，直接修改原数组。
sort([sortFunc])
排序，直接修改原数组。
默认排序顺序为按字母升序。（使用数字排序要通过函数参数！）
sortFunc规定排序顺序，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 返回一个小于 0 的值，则a 排在 b 之前。
- 若 返回 0，则a和b的位置相对不变，不是所有浏览器都遵守。
- 若 返回一个大于 0 的值，则a排在b之后。
按数字升序排序：arr.sort((a, b) => a - b)
按数字降序排序：arr.sort((a, b) => b - a)
查找
下面3个函数的 start 为合法的数组下标，接受负数，负数超出数组下标有效，正数超出数组下标无效。
indexOf(value [, start])
返回value在数组中首次出现的位置，没有找到返回-1
检查是否包含某值：
if(arr.indexOf(el) !== -1){}
// 会导致对NaN的误判
[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true
lastIndexOf(value [, start])
返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
includes(value [, start])
返回一个布尔值，表示某个数组是否包含给定的值。
find( func(cur [, index [, arr]]) )
返回通过测试（函数内判断）的数组的第一个元素的值。
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
findIndex( func(cur [, index [, arr]]) )
返回传入通过测试（函数内判断）的数组第一个元素位置。
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
增删
splice(start, deleteCount [, value1, value2...])
直接修改原数组。
返回所有被删除元素组成的子数组。
如果deleteCount是0，表示插入元素，插入的元素在start之前。
如果deleteCount不为0，表示删除从 start 开始并包含 start 的deleteCount个元素。
arr.unshift(value1 [, value2, ...])
在数组的最开头插入元素。
修改原数组。返回新数组的length。
arr.shift()
弹出数组最开头的元素。
修改原数组。
返回被弹出的元素。
arr.push(value1[,value2,arr1])
在数组末尾追加元素。
修改原数组。返回新数组的length。
追加进去的数组不会被打散。
arr.pop()
弹出数组最末尾的元素。
修改原数组。
返回被弹出的元素。
迭代
以下3个函数还有第2个可选参数thisValue，对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
因不常用，在下文省略。
filter( func(cur [, index [, arr]]) )
返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。相当于过滤。
-
不会对空数组进行检测。
-
不会改变原始数组。
let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(cur => cur%2===0)
// [2, 4]
map( func(cur [, index [, arr]]) )
返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。相当于映射到一个新数组。
按照原始数组元素顺序依次处理元素。
-
不会对空数组进行检测。
-
不会改变原始数组。
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(cur => cur**2)
// [1, 4, 9, 16, 25]
reduce( func(total, cur [, index [, arr]]), [initValue] )
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。相当于汇总。
initValue是total的初始值。
对于空数组是不会执行回调函数。
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((total, cur) => total + cur) // 15
reduceRight()与本方法相同，只不过是从末尾开始累积。
forEach( func(cur [, index [, arr]]) )
没有返回值，本质上等同于 for 循环，对每一项执行 func 函数。
如果cur操作的是基本数据类型，则不改变原数组的值；如果cur是引用类型的对象，则会修改原数组的值。
-
不支持 continue，用 return false 或 return true 代替。
-
不支持 break，用 try catch/every/some 代替
-
空数组不会执行回调函数。
let arr1 = [1, 2, 3, 4, 5]
arr1.forEach(cur => {cur=1})
// 不改变
arr1.forEach((cur, index) => {arr1[index]=1})
// 改变 [1, 1, 1, 1, 1]
let arr2 = [1, '2', [3], {a: 4}]
arr2.forEach(cur => {cur=1})
// 不改变
let arr3 = [{a: 1}, {a: 2}, {a: 3}, {a: 4}, {a: 5}]
arr3.forEach(cur => {cur.a = 1})
// 改变 [{a: 1}, {a: 1}, {a: 1}, {a: 1}, {a: 1}]
注意：字符串不可修改，只能替换。
every( checkFunc(cur [, index [, arr]]) )
用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
some( checkFunc(cur [, index [, arr]]) )
用于检测数组是否有部分元素符合指定条件（通过函数提供）。
- 如果数组中检测到有一个元素满足，则整个表达式返回 true ，且剩余的元素不会再进行检测。
- 如果所有元素都不满足条件，则返回 false。
keys()
从数组创建一个包含数组键（下标）的可迭代对象（是Iterator! 并非Array）。
for(i of arr.keys()){...}
values()
返回一个数组的迭代对象，该对象包含数组的值。
for(i of arr.values()){...}
entries()
返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
for(i of arr.entries()){...}
集合 Set
Set是ES6新的数据结构，是值的集合，但成员的值是唯一的，没有重复的值。你可以按照插入的顺序来遍历它。
可使用 for of 遍历，可用使用 ... 展开。
构造
let s = new Set()
new Set([1, 2, 4, 5]) // Set(5) { 1, 2, 4, 5}
new Set("China") // Set(5) {'C', 'h', 'i', 'n', 'a'}
new Set(s) // 克隆一个Set
实例属性
size
返回元素数量。
实例方法
has(value)
如集合中含有value，返回true，否则返回false.
增删
add(value)
将value添加到集合中。
delete(value)
将value从集合中删除，成功返回true，失败返回false.
clear()
删除集合中所有元素。
迭代
forEach( func [, this])
为集合中的每个元素都执行func函数。
values()
返回值的可迭代对象。
keys()
和 values() 一样。注意：这和数组不同。
entries()
返回一个可迭代对象，包含一个 [value, value] 的数组。
并交差(自定义函数判断)
// 是否超集
function isSuperset(set, subset) {
for (let elem of subset) {
if (!set.has(elem)) {
return false
}
}
return true
}
// 并集
function union(setA, setB) {
let _union = new Set(setA)
for (let elem of setB) {
_union.add(elem)
}
return _union
}
// 交集
function intersection(setA, setB) {
let _intersection = new Set()
for (let elem of setB) {
if (setA.has(elem)) {
_intersection.add(elem)
}
}
return _intersection
}
// 返回两个集合中不重复的元素集合,即会移除两个集合中都存在的元素。
function symmetricDifference(setA, setB) {
let _difference = new Set(setA)
for (let elem of setB) {
if (_difference.has(elem)) {
_difference.delete(elem)
} else {
_difference.add(elem)
}
}
return _difference
}
// 返回A与B的差集，即返回A删除 A与B交集的元素 后的集合。
function difference(setA, setB) {
let _difference = new Set(setA)
for (let elem of setB) {
_difference.delete(elem)
}
return _difference
}
// Examples
const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 3])
const setC = new Set([3, 4, 5, 6])
isSuperset(setA, setB) // returns true
union(setA, setC) // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC) // returns Set {3, 4}
symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
difference(setA, setC) // returns Set {1, 2}
// intersect can be simulated via
const intersection = new Set([...mySet1].filter(x => mySet2.has(x)))
// difference can be simulated via
const difference = new Set([...mySet1].filter(x => !mySet2.has(x)))
映射 Map
Map是存储ES6中键值对的数据集，可以按插入顺序遍历。
可使用 for of
构造
const map1 = new Map();
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
// 可以被克隆
const original = new Map([[1, 'one']])
const clone = new Map(original)
console.log(clone.get(1)) // one
console.log(original === clone) // false (useful for shallow comparison)
// 深拷贝，两map互不影响，也不相等。
与对象的比较
| Map | Object | |
|---|---|---|
| 意外的key | 不包含任何key | Object 包含原型，所以它有默认键。 Note: 从ES5开始，可以通过 Object.create(null) 绕过，但很少这样做。 |
| 键的类型 | 任何类型(包括functions, objects, or any primitive). NaN 也可以是key |
必须是 String 或者 Symbol |
| 键的顺序 | 插入顺序 | 虽然现在普通Object 的键是有序的，但情况并非总是如此，而且顺序很复杂。因此，最好不要依赖属性顺序。 |
| Size | size属性 | 手动确认 |
| Iteration | 可迭代 | Object不可迭代，所以不能直接使用 for of 遍历 Note: 通过获取可迭代对象如 Object.keys()， Object.values() 来进行迭代。 |
| 表现 | 在涉及频繁添加和删除键值对的场景中表现更好。 | 未针对频繁添加和删除键值对进行优化。 |
| 序列化和解析 | 没有序列化和解析的本地支持。 (但你可以使用JSON.stringify()的replacer 参数，以及JSON.parse()的 reviver 参数。 可以参考How do you JSON.stringify an ES6 Map?). |
Object转Json： JSON.stringify() Json转Object : JSON.parse() |
实例属性
size
返回元素数量。
实例方法
has(key)
如集合中含有key，返回true，否则返回false.
增删
set(key, value)
将键值对添加到集合中。
也可以使用 对象名[键名] = 值 来添加。
get(key)
获取key对应的value，如未找到则返回 undefined
delete(key)
将键为key的键值对从集合中删除，成功返回true，失败返回false.
clear()
删除集合中所有元素。
迭代
forEach( func [, this])
为集合中的每个元素都执行func函数。
values()
返回值的可迭代对象。
keys()
和 values() 一样。注意：这和数组不同。
entries()
返回一个可迭代对象，包含一个 [value, value] 的数组。
使用实例
const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')
for (const [key, value] of myMap) {
console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one
myMap.forEach(function(value, key) {
console.log(key + ' = ' + value)
})
// 0 = zero
// 1 = one
// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray