数组的函数

数组的函数

最近在学vue，突然发现数组的函数特别好用。当数据尽量用数组存的时候，我们就可以用数组的函数来使我们的代码变简单。所以，有必要来总结一下数组的所有常用函数。

一、普通函数

函数会改变原数组，想要用原数组的话，要记得存档一份

1. push()

   添加一个新的元素到数组末尾。

   返回值： 新的数组的长度

2. pop()

   删除一个数组的最后一位元素

   返回值： 最后一位元素

3. reverse()

   将一个数组顺序颠倒

   返回值： 颠倒后的数组

4. sort()

   传入排序的回调函数

   返回值： 排序后的数组

       //数组是地址存储的，改变一个，就等于改变了所有和他同地址的数据
       //所以为了从源头杜绝，直接搞了两份地址
       const arr1=[1,21,3,24,5,17,10];
       const arr2=[1,21,3,24,5,17,10];
       // 倒叙
       const result1=arr1.sort(function(a,b){
           return b-a;
       })
       
       // 顺叙
       const result2=arr2.sort(function(a,b){
           return a-b;
       })
   
       console.log(result1,result2);
   

5. indexOf()

   在数组中寻找元素

   返回值： 该元素第一次在数组中出现的下标，没有则返回-1

   注意：不能寻找“引用数据类型”，存到的是地址，无法判断相等

6. lastIndexOf()

   同上

   返回值： 该元素最后一次在数组中出现的下标，没有则返回-1

7. join()

   将所有数组元素转换成字符串，并可以指定连接符

   返回值： 字符串

   注意：如果一个元素为undefined或者null，它被转成空字符串

   //指定以’-‘作为连接符
   arr.join('-')
   

8. forEach()

   通过回调函数来遍历数组

   注意：此方法中break和continue失效，只能通过return来达到continue的效果

   //注意：forEach中的回调函数的参数是靠位置来确定，不是靠名字
   arr.forEach(function(item,index,arr){
       //item=>当前遍历到的元素
       //index=>当前元素的下标
       //arr=>原数组
   })
   

9. includes()

   判断一个数组中是否含有特定的元素

   返回值： Boolean

   注意：不能用于引用数据类型，理由同上

10. splice()

    只传两个参数，是删除元素；传三个及以上参数，会从第三个参数开始添加到数组start下标位置

    返回值： 由被删除元素组成的数组

    形式：

    splice(start,deleteCount,item1,item2...)
    //从第start位置开始，删除deleteCount个元素，然后再在删完的后面添加item1，item2.....
    

二、高阶函数

全部传入回调函数callback(item,index,arr),有类似于forEach的遍历效果，还有附带的功能

1. filter(callback)

   过滤器，把返回值为true的筛选出来，若没有则返回空数组

   返回值： 包含过滤元素的数组

   //过滤出值大于3的元素
   arr.filter(function(item){
       return item>3;
   })
   

2. find(callback)

   寻找数组中第一个返回为true的元素，否则返回undefined

   返回值： 元素值

   注意：可以用来找引用数据类型

3. findIndex(callback)

   寻找数组中第一个返回为true的元素下标，否则返回-1

   返回值： Number类型

4. some(callback)

   检测数组中是否至少一个元素 返回为true，有返回true，否则为false

   返回值： Boolean

5. every(callback)

   检测数组中是否所有 返回为true，有返回true，否则为false

   返回值： Boolean

6. map(callback)

   将数组中的每一个元素都调用callback函数，每次执行的返回值（包括undefined）组成新数组

   返回值： 数组

   //给所有人添加新的数据
   //直接返回数组，为了提升优先级，在花括号外面加中括号
   const mapRes=objArr.map(item=>({...item,adderss:'地址'}))
   

7. reduce(callback,initiaValue)

   • callback(prevValue,curValue,curIndex,arr)

     • precValue:上一次调用callback的返回值(return)。第一次调用时，若指定了initiaValue,则为initiaValue；否则为arr【0】

     • curValue:数组正在处理的元素。第一次调用时，若指定了initiaValue,则为arr【0】；否则为arr【1】

     • curIndex:数组正在处理的元素下标。第一次调用时，若指定了initiaValue,则为0；否则为1

     • arr:正在遍历的数组

   • initiaValue:作为第一次调用callback时参数prevValue的值

     注意：常用来计算累加效果

   //计算年龄和
   const people=[{age:18},{age:20}];
   const ageSum=people.reduce((pre,cur)=>pre+cur.age,0);