typeScript 之 Array
工具: PlayGround
源码：GitHub TypeScript
数组简介
在TypeScript中， 使用[]表示数组， 它的结构：let valus: 类型名[] = 数据;
// 数字
let numList: number[] = [1, 2, 3];
// 字符串
let strList: string[] = ["hello", 'typeScript'];
// 任意类型
let data: any[] = [1, "hello", 3];
console.log(typeof(numList)); // "object"
console.log(typeof(strList)); // "object"
console.log(typeof(data)); // "object"
object类型前文曾说过： 它表示一个非原始类型(数字，字符串，布尔)的值，主要作用于数组，对象和函数等，它是一种泛指的类型，可以包括任意类型值。
object提供的主要接口有：
| 接口 | 返回值 | 描述 |
|---|---|---|
| constructor | Function | 构造函数相关 |
| toString() | string | 返回字符串相关 |
| toLocaleString() | string | |
| valueOf() | Object | 返回指定对象的原始值 |
| hasOwnProperty() | boolean | 判断对象是否具有指定名称的属性 |
| isPrototypeOf() | boolean | 判断一个对象是否存在于另一个对象的原型链中 |
| propertyIsEnumerable() | boolean | 判断指定的属性是否可枚举 |
简单的实例：
let obj = { name: "John", age: 30 };
console.log(obj.toString()); // "[object Object]"
console.log(obj.toLocaleString()); // "[object Object]"
console.log(obj.valueOf()); // { name: "John", age: 30 }
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("gender")); // false
console.log(Object.prototype.isPrototypeOf(obj)); // true
console.log(Object.prototype.isPrototypeOf({})); // true
console.log(obj.propertyIsEnumerable("name")); // true
console.log(obj.propertyIsEnumerable("toString")); // false
Array
数组的构建，同样支持使用Array对象进行构建， 它被称为泛型数组。 源码参考：es5.d.ts
interface ArrayConstructor {
// 创建指定长度的数组， 返回any类型
new(arrayLength?: number): any[];
// 创建指定长度的数组，返回T类型
new <T>(arrayLength: number): T[];
// 创建包含元素的素组，返回T类型
new <T>(...items: T[]): T[];
isArray(arg: any): arg is any[];
readonly prototype: any[];
}
T在TypeScript中表示泛型，方便我们编写更加通用和灵活性的代码，并使其适用于不同的类型。
简单的创建实例：
const arr_1 = new Array(3);
console.log(arr_1); // [, , ]
const arr_2 = new Array<number>(3);
console.log(arr_2); // [, , ]
const arr_3 = new Array(1, 2, 3);
console.log(arr_3); // [1, 2, 3]
// 均为"object"
console.log(typeof(arr_1), typeof(arr_2), typeof(arr_3));
数组也是支持创建多维数组的， 比如：
// 使用基础类型构建
const numList = [[0, 1, 2], [0, 1, 2]];
console.log(numList); // [[0, 1, 2], [0, 1, 2]]
console.log(numList.length); // 2
// 使用Array创建
let dataList = [];
for (let i = 0; i < 2; ++i) {
let strs = [];
for (let j = 0; j < 3; ++j) {
strs.push(j);
}
dataList.push(strs);
}
console.log(dataList); // [[0, 1, 2], [0, 1, 2]]
console.log(dataList.length); // 2
关于Array提供的常用接口如下：
| 接口 | 返回值 | 描述 |
|---|---|---|
| length | number | 返回数组长度 |
| toString() | string | 返回数组的字符串 |
| toLocaleString() | string | 返回数组中各个元素的本地化字符串表示 |
| push() | number | 数组末尾添加新元素，并返回数组的新长度 |
| pop() | T | undefined | 移除数组的最后一个元素，并返回该元素 |
| concat() | T[] | 合并两个或多个数组，并返回一个新的数组 |
| join() | string | 将数组的所有元素连接成一个字符串，并使用指定的分隔符进行分隔 |
| reverse() | T[] | 反转数组中元素的顺序 |
| shift() | T | 移除数组的第一个元素，并返回该元素 |
| unshift() | number | 向数组的开头添加新元素，并返回数组的新长度 |
| slice() | T[] | 返回数组中指定范围的元素 |
| sort() | this | 对数组中的元素进行排序 |
| splice() | T[] | 从数组中移除元素，并可以在指定位置插入新元素 |
| indexOf() | number | 返回指定元素在数组中第一次出现的索引 |
| lastIndexOf() | number | 返回指定元素在数组中最后一次出现的索引 |
| every() | boolean | 检测数组中的所有元素是否满足指定条件 |
| some() | boolean | 检测数组中是否存在满足指定条件的元素 |
| forEach() | void | 遍历数组中的每个元素，并执行指定的回调函数 |
| map() | U[] | 遍历数组中的每个元素，并根据回调函数的返回值创建一个新数组 |
| filter() | T[] | 遍历数组中的每个元素，并返回满足指定条件的元素组成的新数组 |
| reduce() | T | 使用指定的回调函数对数组中的元素进行累积计算，并返回最终的累积结果 |
| reduceRight() | T | 使用指定的回调函数对数组中的元素进行逆向累积计算，并返回最终的累积结果 |
源码相关：
interface Array<T> {
// 返回Array数组长度
length: number;
// 返回字符串
toString(): string;
// 返回数组中各个元素的本地化字符串表示
toLocaleString(): string;
// 移除数组的最后一个元素，并返回该元素，
// 如果数组为空，则返回undefined且不修改数组
pop(): T | undefined;
// 在数组末尾添加新元素，并返回数组的新长度
push(...items: T[]): number;
// 合并两个或多个数组，并返回一个新的数组，原有数组不发生改变
concat(...items: ConcatArray<T>[]): T[];
concat(...items: (T | ConcatArray<T>)[]): T[];
/*
@func: 将数组的所有元素添加到一个字符串中，用指定的分隔符字符串分隔
@param: separator 分割符号，如果省略则使用逗号
*/
join(separator?: string): string;
// 反转数组，它会导致数组改变
reverse(): T[];
// 从数组中移除第一个元素并返回它
// 如果数组为空，则返回undefined且不修改数组
shift(): T | undefined;
// 在数组的开头插入新元素，并返回新的数组长度
unshift(...items: T[]): number;
/*
@func: 返回数组中指定范围的元素
@param: start 开始位置，允许使用负数，比如-1表示倒数第一个元素
@param: end 结束位置，元素不包括end索引处元素，如果忽略则为末尾
*/
slice(start?: number, end?: number): T[];
// 数组排序，如果忽略则为ASCII升序排列
sort(compareFn?: (a: T, b: T) => number): this;
/*
@func: 从数组中删除元素，如果需要，在原来的位置插入新元素，并返回被删除的元素
@param: start 开始位置，位置索引0开始
@param: deleteCount 要删除的元素数量
*/
splice(start: number, deleteCount?: number): T[];
splice(start: number, deleteCount: number, ...items: T[]): T[];
/*
@func: 返回数组中值第一次出现的索引，如果不存在则返回-1
@param: searchElement 要在数组中找到的值
@param: fromIndex 开始索引，如果忽略从0开始
*/
indexOf(searchElement: T, fromIndex?: number): number;
/*
@func: 返回指定值在数组中最后出现的索引，如果不存在则返回-1
@param searchElement 要在数组中找到的值
@param fromIndex 开始的索引，如果忽略，则从最后一个索引开始
*/
lastIndexOf(searchElement: T, fromIndex?: number): number;
/*
@func: 检测数组中的所有元素是否满足指定条件
@param predicate 最多接受三个参数的函数
@param thisArg 可以引用的对象, 如果忽略则使用undefined作为this值
*/
every<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): this is S[];
every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
// 检测数组中是否存在满足指定条件的元素
some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
/*
@func: 遍历数组中的每个元素，并执行指定的回调函数
@param callbackfn 回调函数，最多接受三个参数
@param thisArg 可以引用的对象, 如果忽略则使用undefined作为this值
*/
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
/*
@func: 遍历数组中的每个元素，并根据回调函数的返回值创建一个新数组
@param callbackfn 回调函数，最多接受三个参数
@param thisArg 可以引用的对象, 如果忽略则使用undefined作为this值
*/
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
/*
@func: 返回满足回调函数中指定条件的数组元素
@param predicate 回调函数，最多接受三个参数
@param thisArg 可以引用的对象, 如果忽略则使用undefined作为this值
*/
filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
/*
@func: 为数组中的所有元素调用指定的回调函数
回调函数的返回值是累积的结果，并在下次调用回调函数时作为参数提供
@param: callbackfn 一个最多接受四个参数的回调函数
*/
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
// 使用指定的回调函数对数组中的元素进行逆向累积计算，并返回最终的累积结果
reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
[n: number]: T;
}
基本使用：
let dataList:number[] = []
// 插入数值
dataList.push(1);
console.log(dataList); // [1]
// 删除数值
const value = dataList.pop();
console.log(value, dataList); // 1, []
// 数组已经为空，如果再删除则返回undefined
console.log(dataList.pop()); // undefined
针对于删除可做下拓展，比如删除重复数值:
// 方法1: 使用push相关增加新数组
let arr: number[] = [1, 2, 2, 3, 4, 4, 5, 5];
let uniqueArr: number[] = [];
for (let i = 0; i < arr.length; i++) {
if (uniqueArr.indexOf(arr[i]) === -1) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]
// 方法2：使用filter方法进行遍历获取新的数组
let arr: number[] = [1, 2, 2, 3, 4, 4, 5, 5];
let uniqueArr: number[] = arr.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]
// 方法3: 使用reduce方法
let arr: number[] = [1, 2, 2, 3, 4, 4, 5, 5];
let uniqueArr: number[] = arr.reduce((prev, curr) => {
if (!prev.includes(curr)) {
prev.push(curr);
}
return prev;
}, []);
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]
如果要移除或插入特定的元素相关也可以考虑unshift和shift相关：
// 使用Array对象
let arrObj = new Array();
console.log(arrObj); // []
// 使用 unshift 在数组开头插入元素, 并返回长度
arrObj.unshift(1);
arrObj.unshift(2);
let len = arrObj.unshift(0);
console.log(len, arrObj); // 3, [0, 2, 1]
// 使用shift移除首位置元素，并返回删除元素
let newLen = arrObj.shift();
console.log(newLen, arrObj); // 0, [2, 1]
数组的遍历，如果需要有回调方法的支持，可以使用forEach
const numList = [1, 2, 3]
numList.forEach((value, index, array) => {
if (value % 2 === 0) {
console.log(`索引是：${index} 为偶数`); // "索引是：1 为偶数"
}
console.log("数据是" + array.join("#")); // "数据是1#2#3"
});
数组是支持排序的，可以使用sort
const numList: number[] = [1,3,2,5,4];
// 默认为升序
numList.sort();
console.log(numList); // [1, 2, 3, 4, 5]
// 使用比较函数排序
numList.sort((a, b) => b - a);
console.log(numList); // [5, 4, 3, 2, 1]
// 元素反转
numList.reverse()
console.log(numList); // [1, 2, 3, 4, 5]
获取数组中某个元素
获取数组中的元素可以通过索引来简单获取
const arr_1 = [1, 2, 3, 4];
const arr_2 = [[1, 2, 3], [4, 5,6]];
console.log(arr_1[0], arr_2[1][0]); // 1, 4
// 如果索引错误，则返回undefined
console.log(arr_1[5], arr_2[1][10]); // undefined, undefined
也可以使用indexOf和lastIndexOf相关查找元素的索引位置相关
const arrObj = new Array<number>(1, 2, 2, 3);
// indexOf 查找元素首次出现的位置
const firstIndex = arrObj.indexOf(2);
console.log(firstIndex); // 1
// lastIndexOf 查找元素最后出现的位置
const lastIndex = arrObj.lastIndexOf(2);
console.log(lastIndex); // 2
// 如果查找不到，返回-1
console.log(arrObj.indexOf(0), arrObj.indexOf(0));
合并数组
可以使用contact方法
const arr_1 = [1,2,3,4,5];
const arr_2 = [1,2,3,6,7];
// 使用concat合并数组, 原有数组不会发生改变
let newArr_1 = arr_1.concat(arr_2);
console.log(arr_1, arr_2); // [1, 2, 3, 4, 5], [1, 2, 3, 6, 7]
console.log(newArr_1); // [1, 2, 3, 4, 5, 1, 2, 3, 6, 7]
拓展下，如果想剔除重复元素，可以考虑filter：
let arr1: number[] = [1, 2, 3];
let arr2: number[] = [2, 3, 4];
let mergedArr: number[] = [...arr1, ...arr2].filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(mergedArr); // [1, 2, 3, 4]
再进行拓展下，使用最笨的循环方法实现：
let arr1: number[] = [1, 2, 3];
let arr2: number[] = [2, 3, 4];
// 获取排序的合并数组
function getMergeArr(originArr: any, destArr: any) {
if (originArr.length <= 0) {
return console.error("originArr is nil");
}
if (destArr.length <= 0) {
return console.error("originArr is nil");
}
let mergeArr: any = [];
// 遍历originArr
for (let i = 0; i < originArr.length; ++i) {
if (!mergeArr.includes(originArr[i])) {
mergeArr.push(originArr[i]);
}
}
// 遍历destArr
for (let i = 0; i < destArr.length; ++i) {
if (!mergeArr.includes(destArr[i])) {
mergeArr.push(destArr[i]);
}
}
return mergeArr;
}
console.log(getMergeArr(arr1, arr2)); // [1, 2, 3, 4]
includes方法来源于Array对象 ES2016中， 它主要用于判定数组中是否包含指定元素。
// es2016.array.include.d.ts
interface Array<T> {
includes(searchElement: T, fromIndex?: number): boolean;
}
其他
map遍历数组中的每个元素，并根据回调函数的返回值创建一个新数组
let arr: number[] = [1, 2, 3, 4, 5];
let doubledArr: number[] = arr.map((value, index, array) => {
return value * 2;
});
console.log(doubledArr); // [2, 4, 6, 8, 10]