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")); // falseconsole.log(Object.prototype.isPrototypeOf(obj)); // true
console.log(Object.prototype.isPrototypeOf({}));  // trueconsole.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 = [];// 遍历originArrfor (let i = 0; i < originArr.length; ++i) {if (!mergeArr.includes(originArr[i])) {mergeArr.push(originArr[i]);}}// 遍历destArrfor (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]