本文详细介绍了JavaScript中常见的数组方法，如push、pop、unshift、shift用于元素的增删，join用于元素连接成字符串，reverse用于数组反转，concat用于合并数组，fill用于填充数组元素，indexOf和includes用于查找元素，forEach、map、some、every用于遍历和条件判断，slice、splice用于数组截取和修改，reduce用于累加计算，filter用于筛选元素，sort用于排序，entries用于获取键值对，以及Array.from和Array.of用于数组创建。
javascript数组方法总结
文章目录
1 [].push
在数组末尾追加新元素，并返回数组的新长度。
push(...items: T[]): number;
let arr = [1, 2, 3, 4, 5];
let res = arr.push(100);
console.log(res); //输出: 6
console.log(arr);//输出: [1, 2, 3, 4, 5, 100]
2 [].pop
从数组中删除最后一个元素并返回它。
如果数组没有元素,返回
undefined
pop(): T | undefined;
let arr = [1, 2, 3, 4, 5];
let res = arr.pop();
console.log(res);//输出: 5
console.log(arr);//输出: [1, 2, 3, 4]
// -------------------------------
let arr2 = [];
let res2 = arr2.pop();
console.log(res2);//输出: undefined
console.log(arr2);//输出: []
3 [].unshift
在数组的开头插入新元素，并返回数组的新长度。
unshift(...items: T[]): number;
let arr = [1, 2, 3, 4, 5];
let res = arr.unshift(100);
console.log(res);//输出: 6
console.log(arr);//输出: [100, 1, 2, 3, 4, 5]
4 [].shift
从数组中删除第一个元素并返回它。
如果数组没有元素,返回
undefined
shift(): T | undefined;
let arr = [1, 2, 3, 4, 5]
let res = arr.shift();
console.log(res);//输出: 1
console.log(arr);//输出: [2, 3, 4, 5]
5 [].join
将数组的所有元素添加到一个字符串中，用指定的分隔符字符串分隔。
join(separator?: string): string;
let arr = [1, 2, 3, 4, 5];
let res = arr.join('|');
console.log(res);//输出: 1|2|3|4|5
console.log(arr);//输出: [1, 2, 3, 4, 5]
//不填写分隔符 则为空字符串
let res2 = arr.join();
console.log(res2);//输出: 12345
6 [].reverse
反转数组中的元素。
此方法改变数组并返回对同一数组的引用。
改变原数组
并return原数组
reverse(): T[];
let arr = [1, 2, 3, 4, 5];
let res = arr.reverse();
console.log(res);//输出: [5, 4, 3, 2, 1]
console.log(arr);//输出: [5, 4, 3, 2, 1]
console.log(arr === res);//输出: true
//说明arr和res引用同一对象
7 [].concat
组合两个或多个数组。
此方法返回一个新数组，而不修改任何现有数组。
concat(...items: (T | ConcatArray<T>)[]): T[];
let arr = [1, 2, 3, 4, 5];
let res = arr.concat([100, 200], [1000, 2000]);
console.log(res);//输出: [1, 2, 3, 4, 5, 100, 200, 1000, 2000]
console.log(arr);//输出: [1, 2, 3, 4, 5]
8 [].fill
在用值填充由开始和结束标识的部分后返回this对象
填充数组元素,不填写范围,默认全部填充
改变原数组
并return原数组
fill(value: T, start?: number, end?: number): this;
let arr = [1, 2, 3, 4, 5];
let res = arr.fill(10);
console.log(res);//输出: [10, 10, 10, 10, 10]
console.log(arr);//输出: [10, 10, 10, 10, 10]
console.log(arr === res);//输出: true
//指定start和end参数,左闭右开 [start, end)
arr.fill(100, 1, 3);
console.log(arr);//输出: [10, 100, 100, 10, 10]
9 [].indexOf
返回数组中第一个值的索引，如果不存在，则返回-1。
查找值的索引, 默认从0开始查找
indexOf(searchElement: T, fromIndex?: number): number;
let arr = [1, 2, 3, 4, 5, 3];
let res = arr.indexOf(3);
console.log(res);//输出: 2
//从索引为4的位置开始查找
let res2 = arr.indexOf(3, 4);
console.log(res2);//输出: 5
//找不到返回-1
let res3 = arr.indexOf(100);
console.log(res3);//输出: -1
10 [].includes
确定数组是否包含某个元素，并返回true或false。
是否包含某元素,默认从0开始查找
includes(searchElement: T, fromIndex?: number): boolean;
let arr = [1, 2, 3, 4, 5];
let res = arr.includes(3);
console.log(res);//输出: true
let res2 = arr.includes(100);
console.log(res2);//输出: false
//从下标3开始 是否有1这个元素
let res3 = arr.includes(1, 3);
console.log(res3);//输出: false
11 [].forEach
对数组中的每个元素执行指定的操作。
无法中途退出循环
无返回值
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index, _arr) => {
console.log(`value=${value},index=${index} 原数组=${_arr}`);
});
/*
输出:
value=1,index=0 原数组=1,2,3,4,5
value=2,index=1 原数组=1,2,3,4,5
value=3,index=2 原数组=1,2,3,4,5
value=4,index=3 原数组=1,2,3,4,5
value=5,index=4 原数组=1,2,3,4,5
*/
12 [].map
对数组的每个元素调用已定义的回调函数，并返回包含结果的数组。
将数组的每一项通过回调函数进行处理,并返回新的数组
不改变原数组
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
let arr = [1, 2, 3, 4, 5];
let res = arr.map((val, idx) => {
return val * 10;
});
console.log(res);//输出: [10, 20, 30, 40, 50]
console.log(arr);//输出: [1, 2, 3, 4, 5]
13 [].some
确定指定的回调函数是否为数组的任何元素返回true。
通过回调函数中的条件判断,至少有一个元素满足条件则返回true
some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
let arr = [1, 2, 3, 4, 5];
//判断是否存在偶数
let res = arr.some((val, idx) => {
return val % 2 == 0;
});
// 等价于 arr.some(val => val % 2 == 0);
console.log(res);//输出: true
console.log(arr);//输出: [1, 2, 3, 4, 5]
14 [].every
确定数组的所有成员是否满足指定的测试。
通过回调函数中的条件判断,每个元素都满足条件则返回true
every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
let arr = [1, 2, 3, 4, 5];
//是否全为偶数
let res = arr.every((val, idx) => {
return val % 2 == 0;
});
// 等价于 arr.every(val => val % 2 == 0);
console.log(res);//输出: false
console.log(arr);//输出: [1, 2, 3, 4, 5]
15 [].slice
返回数组的一部分的副本。
对于开始和结束，可以使用负索引来指示与数组结尾的偏移。
例如，-2表示数组的倒数第二个元素。取数组的某一段的序列, 作为返回值返回
左闭右开 [start, end)
slice(start?: number, end?: number): T[];
let arr = [1, 2, 3, 4, 5];
let res = arr.slice(2, 4);
console.log(res);//输出: [3, 4]
console.log(arr);//输出: [1, 2, 3, 4, 5]
//不加end参数, 截取到末尾
let res2 = arr.slice(1);
console.log(res2);//输出: [2, 3, 4, 5]
// 不带参数, 可以获得数组的拷贝
let res3 = arr.slice();
console.log(res3);//输出: [1, 2, 3, 4, 5]
console.log(res3 == arr);//输出: false
//虽然res3和arr相同,但确指向两个对象
16 [].splice
从数组中删除元素，并在必要时在其位置插入新元素，返回删除的元素。
从指定位置删除指定长度的元素, 并将删除的元素返回
修改原数组
splice(start: number, deleteCount?: number): T[];
splice(start: number, deleteCount: number, ...items: T[]): T[];
let arr = [1, 2, 3, 4, 5];
//从索引为2的位置删除到末尾
let res = arr.splice(2);
console.log(res);//输出: [3, 4, 5]
console.log(arr);//输出: [1, 2]
arr = [1, 2, 3, 4, 5];
//从索引为2的位置删除2个元素
let res2 = arr.splice(2, 2);
console.log(res2);//输出: [3, 4]
console.log(arr);//输出: [1, 2, 5]
arr = [1, 2, 3, 4, 5];
//从索引为2的位置删除2个元素, 并插入新元素
let res3 = arr.splice(2, 2, [1000, 2000]);
console.log(res3);//输出: [3, 4]
console.log(arr);//输出: [1, 2, Array(2), 5]
17 [].reduce
为数组中的所有元素调用指定的回调函数。回调函数的返回值是累积结果，并在下次调用回调函数时作为参数提供。
对数组进行积累操作
不改变原数组
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;
let arr = [1, 2, 3, 4, 5];
let res = arr.reduce((pre, cur, cur_idx) => {
console.log(`pre=${pre}, cur=${cur}, cur_idx=${cur_idx}`);
return pre + cur;
}, 0);
console.log(res);//输出: 15
console.log(arr);//输出: [1, 2, 3, 4, 5]
let res2 = arr.reduce((pre, cur, cur_idx) => {
return pre + '|' + cur;
}, 'arr = ');
console.log(res2);//输出: arr = |1|2|3|4|5
18 [].filter
返回满足回调函数中指定条件的数组元素。
过滤器
返回满足条件的元素 数组
filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
let arr = [1, 2, 3, 4, 5];
let res = arr.filter((val, idx) => {
return val % 2 == 1;
});
console.log(res);//输出: [1, 3, 5]
console.log(arr);//输出: [1, 2, 3, 4, 5]
19 [].sort
对数组进行排序。
sort(compareFn?: (a: T, b: T) => number): this;
let arr = [1, 2, 3, 4, 5];
//升序排序
let res = arr.sort((a, b) => {
return a - b;
});
console.log(res);//输出: [1, 2, 3, 4, 5]
console.log(arr);//输出: [1, 2, 3, 4, 5]
console.log(res === arr);//输出: true
//降序排序
arr.sort((a, b) => b - a);
console.log(arr);//输出: [5, 4, 3, 2, 1]
let arr2 = [
{id: '1025', price: 35},
{id: '4265', price: 98},
{id: '8541', price: 5},
{id: '3264', price: 4799},
];
// 按价格升序排序
arr2.sort((a, b) => a.price - b.price);
console.log(arr2);
/*
输出:
[
{id: '8541', price: 5},
{id: '1025', price: 35},
{id: '4265', price: 98},
{id: '3264', price: 4799}
]
*/
20 [].entries
为数组中的每个条目返回可迭代的键、值对
返回一个键值对迭代器
entries(): IterableIterator<[number, T]>;
let arr = ['a', 'b', 'c', 'd'];
let res = arr.entries();
for(var it of res) {
console.log(it);
}
/*
输出:
[0, 'a']
[1, 'b']
[2, 'c']
[3, 'd']
*/
21 Array.from
根据一个array-like对象创建数组
from<T>(arrayLike: ArrayLike<T>): T[];
var res = Array.from('Hello World!')
console.log(res);
//输出: ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!']
22 Array.of
根据一组值生成数组
of<T>(...items: T[]): T[];
var res = Array.of(1, 4, 8)
console.log(res);//输出: [1, 4, 8]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
