带你重新回顾JS数组方法

375 阅读4分钟

前言

近日在编写业务代码时,突然发现对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

最后

到这里数组所有的方法都已经介绍完了,其实这些方法已经有很多文章在介绍它们了,写这篇文章的主要目的就是让自己回顾一下。学习是没有止境的,在不断学习前沿技术的同时,也要时常回顾基础知识~