JavaScript数据处理(数组篇一)

3,203 阅读4分钟

在日常开发中,肯定是避免不了许多繁杂的数据处理的,对于数据处理JS提供了许多的方法,为了更好的提高我们的工作效率我们就来把这些方法一一总结一下吧,本文将结合使用场景给出相对应的解决方法。

方法列举

场景一 数组排序 从小到大或者从大到小

sort方法 arr.sort(fn())

 但是sort方法默认会调用每个数组项的**toString()**方法,所以其实默认情况下sort()方法比较的是字符串,为了比较数字它给我们提供了一个比较函数作为参数进行比较,下面来一个简单的代码片段来说明

很多人会纠结函数中返回的a-b是啥意思,根据我的理解其实这个是比较函数中的一个规矩当第一个参数a比第二个参数b小的情况下函数返回的是正数的话第一个参数a排在第二个参数b前面,反之亦然。这个可能刚开始理解会有点绕,但是记住这个规则就可以了。大家有时间也可以自己去实现一下排序函数。顺带说一下,sort这个方法其实是JS里面讨论的比较多的一个点,大家也可以了解一下源代码🤓

场景二 数组首尾添加删除元素

解决这类问题主要是基于栈方法和队列方法

  • 栈方法 arr.push(...res)或者arr.push(num1,num2...) 数组尾部插入任意数量的数据

arr.pop() 取出尾部的数据返回取出的项

  • 队列方法 arr.shift() 取出数组第一个数组项返回取出的项

arr.shift(...res) 用法和push一样但是是从数组开始的位置插入返回新数组长度

场景三 切割数组

arr.slice(a,b)  第一个参数是数组的索引 第二个参数指取出数组从a索引位置到b索引之前的一段返回新数组,该操作对原始数组没有改变,如果b不传表示一直到数组末尾

arr.splice(num1,num2,...res) 参数一表示开始切割数组项的索引,参数二表示需要删除的个数,参数此处用了拓展运算符当然也可以用举例的方法,表示数组在删除元素后需要补充的元素从数组参数一索引位置开始添加的新项,该方法返回删除的数组项,下面引用一个小例子

场景四 字符串转数组

  1. Array.from(str)
  2. [...str]
  3. str.split('')

场景五 循环迭代

对于我们打工仔来说JS里面的各种循环肯定是天天来的啦😹那还是列一下吧

  • arr.map(fn(item,index,array)) map方法传入一个函数,该函数对传入的item进行处理,item是数组的每一项,返回值作为新数组的每一项组成新的arr index是索引,array是原数组 比如想对数组的每项都✖️2

  • arr.filter(fn(item,index,array)) fliter传入的参数和map一样,它的作用是筛选出符合条件的数组项 比如要选出大于0的数组项 return item>0
  • arr.forEach(fn(item,index,array)) 该方法没有返回值,其实就是for循环在数组里面的一种应用罢了
  • arr.some(fn()) arr.every(fn())

这两个函数返回一个布尔值,区别是some是只需要满足一次给定函数就会返回true,every需要每个数组项都满足

场景六 判断存在

  • arr.includes(var) 数组中存在var返回true
  • arr.indexOf(var,start) arr.lastIndexOf(var,start)

这两个方法都是寻找数组里面有没有存在var,找到的话返回var在数组里面的索引,没有的话返回-1,区别是indexOf是从头开始,lastIndexOf反之,第二个参数表示开始遍历的起始索引可不填写,默认是0和last

场景七 合并

arr.reduce(fn(pre,cur,index,array)) arr.reduceRight(fn()) 两个方法迭代数组所有项,然后返回一个最终的值,区别是一个从左开始一个从右边开始 pre是前一次操作执行的结果

本篇总结了一下最基础的数组操作数据的方法,以后当然还会更新啦