你想到的这都有-JS数组归总

805 阅读5分钟

前言

在工作之中我们所遇到最多的无非就是数组以及对象,对象很多情况下就是对他进行一个解构取到我们想要的值,那么相比起来,我们操作数组就有非常多的方法去得到自己想要的结果,司尘呆呆今天就来分享一个汇总,分三大块:存储方式、修改、遍历。文章篇幅可能有点长,但是毕竟是总结就想写详细一点,有些方法这边就一笔带过了。

JS中数组存储方式

我们之前学数据结构时知道数组是连续储存在内存当中的,但是我们的js任是那股‘清流’,与众不同,JavaScript数组是动态的,根据需要它们会增长或缩减,并且在创建数组时无需声明一个固定的大小或者在数组大小变化时无需重新分配空间。

可以保存任意的数据类型,数组元素的索引不一定要连续的,它们之间可以有空缺。这一个点我们看一个例题就能清楚了。

let arr= [1,2,3];
arr[9]= 10;
console.log(arr.length); // 10

数组修改方法

这一块分为两部分:

改变自身:push、pop、reverse、shift、sort、splice、unshift、fill
不改变自身:concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、includes


自身改变

  • push、pop
    这两种方法我们就理解为栈顶压入和栈顶弹出,我们要注意的点就是这两种方法改变了数组本身,同时执行时是有返回值的 push 返回压栈后数组长度,pop返回被删除的项内容。

  • reverse
    数组倒序

  • shift、unshift
    shift栈底删除返回值为栈顶项值,unshift从栈底添加数组,返回值与上面的push、pop相似

  • sort
    帮助我们去实现排序,这边多提一下sort内部的实现,sort是有一个函数参数的,当不填入参数时,会将数组元素转成字符串的Unicode位点顺序排序,所以不填入参数时我们有时候排序会有问题。

    let arr = [10, 1, 2, 3]
    console.log(arr.sort()); // [1, 10, 2, 3]
    

    sort方法内部会通过传入函数(函数参数为对比项,sort会将每个项去遍历传入)返回值来进行排序若

    • 返回值 < 0,那么a 将排到 b 前面;
    • 返回值 = 0,那么a 和 b 相对位置不变;
    • 返回值 > 0,那么a , b 将调换位置;
    let arr = [10, 1, 2, 3]
    arr.sort((a, b) => a-b)
    console.log(arr); // [1, 2, 3, 10]
    
  • splice
    取数组切片然后替换成参数内容

  • copyWithin
    取数组内的元素替换数组内的元素,这句话有一点绕,我们看个实例,第一个参数是被替换起始索引,后两个参数是替换数索引区间,只填一个即到末尾,所以这个方法数组长度是不会变的。这一块可以用几个案例去体会一下。

    let arr = [1,2,3,4,5]; 
    console.log(arr.copyWithin(0,3,4)); // [4, 2, 3, 4, 5]
    console.log(arr.copyWithin(0,3)); // [4, 5, 3, 4, 5]
    
  • fill
    指定区间值为参数值

    let arr = [1,2,3,4,5]; 
    console.log(arr.copyWithin(6, 0, 2)); // [6, 6, 3, 4, 5]
    

不改变自身

  • concat
    用于连接数组,当参数为空时类似拷贝一个相同的数组

  • join
    这个点我记忆比较深因为当时面试的时候问到过这个问题(数组与字符串的相互转换),就是用参数连接数组项成字符串,默认的话就是逗号。

  • slice
    切片,返回切出的数组,我们注意的点就是这一系列的索引值都是取头不取尾的。

  • toString、toLocaleString
    这个就不细说了

  • indexOf、lastIndexOf
    前者查找元素在数组中第一次出现时的索引值,后者返回最后一次出现的索引值,若没有就返回-1

  • includes
    也是查找目标值arr.includes(element, begin=0),第二个参数表示索引起始位返回值为true or false

遍历方法

这一趴可能是工作中用到最多的,当然这边还是都列举出来,可能有一些用到的频率很低但是这边还是都列举出来

  • forEach
    将数组中的每一项执行forEach中的方法,他的参数就是所写的直意:当前项,当前索引,数组本身,函数直接改变数组本身,返回值为undefined。

    arr.forEach(fn(item, index, array){})
    
  • every、some
    every方法我们看做一个检测函数用法还是与forEach相同,函数中对每一项进行检测,都符合才返回true,又不满足的该函数就返回false,some与之相反

  • filter
    筛选器,用法还是与上面一样

  • map
    这个方法感觉在工作中就用到很多了,作用与forEach相同,但是他会返回结果数组,平常我们取数据用到它会比较方便

    const backData = data.userGroupUserNameList.map((item: any) => {
        return item.id.toString()
    })
    
  • reduce、reduceRight
    作为一个累计操作的方法我们看一个案例,参数形式还是一样就是多了一个nextItem

    let arr = [1, 2, 3, 4];
    res = arr.reduce((item, nextItem, index, array) => {
        return item + nextItem;
    })
    // res = 10
    

    reduceRight的话就是遍历方向与reduce相反从右至左

  • entries
    返回一个迭代器对象

  • find、findIndex
    find遍历查找返回数组中第一个满足条件的元素,没有就undefined。 findIndex返回索引,没有就返回-1

总结

其实到了工作阶段,很多基础的东西还是经常会碰到的,及时的发现和总结一下也是比较好的,这一篇关于数组的比较详细。自己做一个整理。

本文使用 mdnice 排版