【Web前端】关于JS数组方法的一些理解

一、具备栈特性的方法

unshift(...items: T[]) : number

将一个或多个元素添加到数组的开头，并返回该数组的新长度。

shift(): T | undefined

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

二、具备队列特性的方法

push(...items: T[]): number;

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

pop(): T | undefined;

方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

三、具备排序特性的方法

reverse()

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

sort(compareFn?: (a: number, b: number) => number): this;

对数组的元素进行排序，并返回数组。

1、如果没有指明 compareFn ，会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。涉及到数字时要尤为注意:

const array1 = [1, 30, 4, 21, 100000];

array1.sort();

console.log(array1); // [1, 100000, 21, 30, 4]

2、如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序:

compareFn(a, b) 返回值	排序顺序
> 0	a 在 b 后
< 0	a 在 b 前
=== 0	保持 a 和 b 的顺序

四、数组截取的方法

slice(start?: number, end?: number): Int8Array;

将 [start,end) 范围内的元素浅拷贝至一个新数组中并返回该数组，原始数组不会被改变。

splice(start: number, deleteCount?: number): T[];

通过删除、替换现有元素或原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

五、元素遍历相关的方法

every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

判断数组内的所有元素是否都满足函数的执行条件。都通过返回true,否则返回false

some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

判断数组内是否有元素满足函数的执行条件。只要有一个通过就返回true,否则返回false

map(callbackfn: (value: number, index: number, array: Int8Array) => number, thisArg?: any): Int8Array;

创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，一般用于数据转换，注意map函数是在遍历每一项元素时执行回调函数，而不是调用者控制遍历，因此return不能跳出map循环

forEach(callbackfn: (value: number, index: number, array: Uint8Array) => void, thisArg?: any): void;

使用上基本和map和一样，区别在于它没有返回值。

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number) => T): T;

遍历数组，每循环一次，将循环返回值当成下一次循环的初始值参与计算。

比如计算所有元素的总和：

const arr = [1,2,3,4,5];

arr.reduce((pre,cur)=>(pre+cur)); // return 15

详细使用参考这篇文章

六、元素查找的方法

at(index:number)

返回index索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

indexOf(searchElement: T, fromIndex?: number): number;

返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。

lastIndexOf(searchElement: T, fromIndex?: number): number;

返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从后向前查找。

findIndex(predicate: (value: number, index: number, obj: Int8Array) => boolean, thisArg?: any): number;

返回数组中满足提供的函数条件的第一个元素的索引。若没有找到对应元素则返回 -1。

find(predicate: (value: number, index: number, obj: Uint8Array) => boolean, thisArg?: any): number | undefined;

返回数组中满足提供的函数条件的第一个元素的值。否则返回 undefined。

七、toString()和toLocalString()的区别

toString()和toLocalString()都是对数组的每个元素执行Object对应的方法并用”,”join出一段字符串返回。一般情况下元素的toString和toLocalString是一样的，但请注意number和date这俩货，他们重写了toLocalString方法。

1、数字：

const number=123456789;

console.log(number.toString()); //'123456789'

console.log(number.toLocalString()); //'123,456,789'

2、日期：

const date=new Date();

console.log(date.toString()); //'Tue Feb 28 2023 16:54:36 GMT+0800 (中国标准时间)'

console.log(date.toLocalString()); //'2023/2/28 16:54:36'