前言
近日在编写业务代码时,突然发现对JS数组的方法记忆有些模糊,于是便整理了这篇文章来回顾一下JS中数组的方法,并且对它们进行了分类。
栈方法
ECMAScript给数组提供了几个方法(push( )、pop( )),让数组看起来像另一种数据结构-----栈。
let stack = new Array(); // 首先我们创建一个数组
stack.push(1); // 入栈
stack.push(2);
console.log(stack.toString()); // 1,2
stack.push(2);
stack.push(4);
let a = stack.pop(); // 出栈
console.log(stack.toString()); // 1,2,2
队列方法
我们也可以利用shift( )、pop( ) 方法来模拟实现队列数据结构。
let queue = new Array();
queue.push(1);
queue.push(2);
queue.push(3);
console.log(queue); // [1, 2, 3]
let b = queue.shift(); // 取出数组的第一项
console.log(b, queue); // 1 [2, 3]
// unshift 顾名思义 进行与shift相反的操作,在数组的末尾进行插入操作
queue.unshift(4);
console.log(queue); // [4, 2, 3]
排序方法
介绍2个数组方法:reverse( )、 sort( ),二者都会修改元素组、并将结果返回。
- reverse():将数组进行反转。
- sort():默认情况下,将数组按照升序排序,可以传入一个比较器。
let arr = [1, 2, 4, 5, 7, 3, 6];
let reverseArr = arr.reverse();
console.log(arr, reverseArr); // [6, 3, 7, 5, 4, 2, 1] ,[6, 3, 7, 5, 4, 2, 1]
let sortArr = arr.sort((a, b) => a - b); // 传入一个比较器
console.log(arr, sortArr); // [1, 2, 3, 4, 5, 6, 7] ,[1, 2, 3, 4, 5, 6, 7]
操作方法
- concat( ): 可以在现有数组全部元素基础上创建一个新数组
- slice( ):用于创建一个包含原有数组中一个或多个元素的新数组,这个操作不会影响原数组
- splice( ): 主要目的是在数组中间插入元素(它可以完成删除、插入、替换)操作
let concatArr1 = ['a', 'b'];
let concatArr2 = concatArr1.concat('c', ['d', 'e']);
console.log(concatArr1, concatArr2); // ["a", "b"],["a", "b", "c", "d", "e"]
// slice(a,b):截取a ~ b 之间的元素,包左不包右
let sliceArr = concatArr2.slice(1, 3);
console.log(sliceArr); // ["b", "c"]
// 两个参数:要删除的第一个元素的位置和要删除的元素数量
let spliceRes = concatArr2.splice(1, 1);
console.log(spliceRes, concatArr2); // ["b"],["a", "c", "d", "e"]
let spliceRes2 = concatArr2.splice(1, 1, 'b');
console.log(spliceRes2, concatArr2); // ["c"] ,["a", "b", "d", "e"]
搜索和位置方法
这里给大家介绍三个严格相等的搜索方法:indexOf()、lastIndexOf()、includes(),这些方法都接收两个参数:要查找的元素 & 一个可选的起始搜索地址
let indexArr = [1, 3, 2, 5, 6, 7, 2, 1];
console.log(indexArr.indexOf(2)); // 2 返回匹配项的索引
console.log(indexArr.lastIndexOf(2)); // 6 返回匹配项的索引
console.log(indexArr.includes(6)); // true 是否包含指定元素
console.log(indexArr.includes(12)); // false
接下来介绍find()、findIndex(),这两个方法传入一个函数,函数返回结果为true,表示命中匹配项,找到匹配项之后,都不会继续搜索
let people = [
{ name: 'a', age: 21 },
{ name: 'b', age: 22 },
{ name: 'c', age: 25 },
];
console.log(people.find((item, index, array) => item.age > 21)); // {name: "b", age: 22}
console.log(
people.findIndex((item, index, array) => item.age > 21) // 1
);
迭代方法
这些方法都传入一个函数,并且不会影响到原数组
- every(): 如果每一项都返回true,则这个方法返回true
- filter(): 函数返回true的项会组成数组之后返回
- forEach(): 对数组每一项都运行传入的函数,没有返回值
- map(): 返回由每次函数调用的结果构成的数组
- some(): 如果有一项函数返回true,则这个方法返回true
let numbers = [1, 3, 5, 1, 6, 2, 6, 7, 8, 9];
let everyRes = numbers.every((item, index, array) => item > 2);
console.log(everyRes); // false
let someRes = numbers.some((item, index, array) => item > 2);
console.log(someRes); // true
let filterRes = numbers.filter((item, index, arr) => item > 4);
console.log(filterRes); // [5, 6, 6, 7, 8, 9]
let mapRes = numbers.map((item, index, array) => item * 2);
console.log(mapRes); // [2, 6, 10, 2, 12, 4, 12, 14, 16, 18]
numbers.forEach((item, index, array) => {
// 这里执行一些操作
});
归并方法
这个介绍2个方法:reduce()、reduceRight(),俩个方法都会迭代数组的所有项,并在此基础上构建一个最终的返回值, 都接收两个参数: 对每一项都会运行的归并函数, 归并值(pre)的初始值(可选),传入的函数接收四个参数: 上一个归并值、当前项、当前项的索引和数组本身。
let sum = numbers.reduce((pre, cur, index, array) => pre + cur);
console.log(sum); // 48
let sum1 = numbers.reduce((pre, cur, index, array) => pre + cur, 1);
console.log(sum1); // 49
最后
到这里数组所有的方法都已经介绍完了,其实这些方法已经有很多文章在介绍它们了,写这篇文章的主要目的就是让自己回顾一下。学习是没有止境的,在不断学习前沿技术的同时,也要时常回顾基础知识~