javascript25个数组方法整理分析，囊括函数功能、参数、返回值及经典应用场景

1.set一行代码实现数组去重

const removeRepeatElement = [...new Set([3, 4, 5, 5, 5, 6, 5, 6, 7, 4, 3, 5, 8])]
console.log(removeRepeatElement)     //[3,4,5,6,7,8]

2.随机生成数组下标,并返回在数组中对应的值

const arr=[1,2,3,4,5,6,7,8,9,10,11]
const num = Math.floor(Math.random() * arr.length)//随机生成数组下标
console.log(num);
console.log(arr[num]);

3.array.map():遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值.

/**
* @description: 数组map遍历
* @param {Function}:回调函数 (元素,下标)=>{ return 新元素 }
* @return: 返回一个新数组
*/
//需求：数组中每一个元素*2
let arr = [23, 31, 60, 88, 90, 108, 260];
let arr1 = arr.map((value) => {
return value * 2;//让每一个元素的值 * 2
});

console.log(arr1);    //[46, 62, 120, 176, 180, 216, 520]  map的返回值是一个新数组
console.log(arr);     //[23, 31, 60, 88, 90, 108, 260] 可见原数组arr未发生改变

//(3)需求3： 超过100的商品打八折
let arr2 = arr.map((value, index) => {
if(value > 100){
return value*0.8;
}else{
return value;
}
});

console.log(arr2);                 // [23, 31, 60, 88, 90, 86.4, 208]

注意点：

(1) 回调函数执行次数  == 数组长度

  * 数组中有多少个元素，回调函数就会执行几次

(2)map函数返回的新数组长度  ==  原数组长度

(3)回调函数中一定要return，返回的是当前遍历的元素值

    * 如果不return，新数组中每一个元素都变成了undefined

(4)不会改变原始数组

(5)不会对空数组进行检测

4.array.push(元素): 将 一个或多个元素,添加到数组 末尾,返回值是新数组的长度,同时原始数组会发生改变

const arr = [10, 20, 30, 40, 50]
        const res = arr.push(60, 70)
        console.log(arr)      //[10, 20, 30, 40, 50, 60, 70]   原数组发生了改变
        console.log(res)      //7,返回新数组的长度

 5.array.unshift():向数组的开头添加一个或多个元素,并返回新的长度,同时原数组会发生改变

const arr = [10, 20, 30, 40, 50]
        res = arr.unshift(1, 2)
        console.log(arr)           // [1, 2, 10, 20, 30, 40, 50]
        console.log(res)           //  7   返回新数组的长度

6.array.pop():删除数组最后一个元素,返回最后一个元素,原数组发生改变

let arr = [10, 20, 30, 40, 50]
        let res = arr.pop()
        console.log(arr);       //[10, 20, 30, 40]   原数组发生改变
        console.log(res);       //50      返回最后一个元素值

7.array.shift():删除数组第一个元素,返回第一个元素,原数组发生改变

   let arr = [10, 20, 30, 40, 50]
        let res = arr.shift()
        console.log(arr);          //[20, 30, 40, 50]   原数组发生改变
        console.log(res);          //10                 返回第一个元素

8.array.splice():从数组中第几个下标开始增加或删除元素,并返回删除的元素,原数组发生改变

场景一:删除元素,返回被删除的元素

  const arr = [10, 20, 20, 50, 30, 30, 20]
    //array.splice()应用一：指定位置删除数组
    const res = arr.splice(3, 2)       //从下标3开始删除2个元素
    console.log(arr);                 //[10, 20, 20, 30, 20]    原数组发生改变
    console.log(res);                 //[50, 30]        返回被删除的数组     

场景二:增加元素,返回空数组

  const arr = [10, 20, 20, 50, 30, 30, 20]
    //array.splice()应用一：指定位置删除数组
    const res = arr.splice(3, 0, 15, 25, 35) //从下标3开始删除0个元素,并在第3个下标新增三个元素15,25,35
    console.log(arr);                 //[10, 20, 20, 15, 25, 35, 50, 30, 30, 20]    原数组发生改变
    console.log(res);                 //[]        删除0个元素,所以返回空数组 

9.array.slice():返回数组中被选中的元素，从给定的 start 参数开始，到给定的 end 参数处结束,[start,end)左闭右开,常用于选中数组中连续的几个元素,原数组不发生变化.

<script>
    const arr = [10, 20, 20, 50, 30, 30, 20]
    const res1 = arr.slice(1) //选中下标1到末尾的元素
    const res2 = arr.slice(3) //选中下标3到末尾的元素
    const res3 = arr.slice(2,5) //左闭右开,选择第2个(含)到第5个元素(不含)
    console.log(arr);      //[10, 20, 20, 50, 30, 30, 20] 原数组不发生改变
    console.log(res1);     //[20, 20, 50, 30, 30, 20]    
    console.log(res2);     //[50, 30, 30, 20]            
    console.log(res3);     //[20, 50, 30]                
  </script>

10,array.join():返回由数组元素构成的字符串,元素将由指定的分隔符分隔，默认分隔符是逗号 (,),此方法不会改变原数组 

const arr = [10, 20, 20, 50, 30, 30, 20]
    const res = arr.join()       //元素默认由逗号分隔
    const res1 = arr.join("-")   //元素间由-分隔
    console.log(arr);        //[10, 20, 20, 50, 30, 30, 20]
    console.log(res);        //10,20,20,50,30,30,20
    console.log(res1);        //10-20-20-50-30-30-20

11.array.filter():返回一个由所有符合特定条件的元素组成的新数组,不会改变原始数组。

const arr = [10, 20, 15, 24, 30, 30, 20]
    const res = arr.filter(item=>item%6===0)       //筛选能够被6整除的元素,返回一个新数组
    console.log(arr);        //[10, 20, 15, 24, 30, 30, 20]   //未改变原数组
    console.log(res);        //[24, 30, 30]    

12.array.reduce返回一个数值,可实现数组求和,平均值,计数,最大值,最小值,偶数和等统计性问题,功能非常强大,具体用法可以查看笔者之前的博客,链接如下:巧用js数组方法reduce,一个方法实现数组求和,平均值,计数,最大值,最小值,偶数和等常见统计问题

13.find()返回满足条件的数组中第一个元素的值,如果不存在则返回undefined,不改变原数组

 <script>
    const arr = [10, 20, 20, 50, 30, 30, 20]
    const res = arr.find(item => item > 25);
    const res1 = arr.find(item => item == 25);
    console.log(arr);              //[10, 20, 20, 50, 30, 30, 20]
    console.log(res);              //50
    console.log(res1);            //undefined
  </script>

14.findindex():返回满足条件的数组中第一个元素的索引。否则返回 -1,不改变原数组

  <script>
    const arr = [10, 20, 20, 50, 30, 30, 20]
    const res = arr.findIndex(item => item > 25);
    const res1 = arr.findIndex(item => item == 25);
    console.log(arr);              //[10, 20, 20, 50, 30, 30, 20]
    console.log(res);              //3
    console.log(res1);            //-1
  </script>

15.indexof():返回数组中找到给定元素的第一个下标，如果不存在，则返回 -1

  <script>
    const arr = [10, 20, 20, 50, 30, 30, 20]
    const res = arr.indexOf(50);
    const res1 = arr.indexOf(25);
    console.log(arr);              //[10, 20, 20, 50, 30, 30, 20]
    console.log(res);              //3
    console.log(res1);            //-1
  </script>

16.forEach():无返回值,用于遍历数组，相当于for循环的高级写法;

  <script>
    const arr = [3, 6, 5, 7, 8, 9, 4]
    const res = arr.forEach(item => {
      if (item % 3 == 0) {
        console.log(item);       //3 6 9
      }
    })      
    console.log(res);           //undefined
  </script>

17.array.every():检测数组元素的每个元素是否都符合条件,如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。不会改变原始数组。

const arr = [1, 2, 3, 4, 5];
arr.every((item) => item === 3); // false
const arr1 = [2, 4, 6, 8, 10];
arr1.every((item) => item%2 === 0); // true

18.array.some():检测数组元素中是否有元素符合指定条件

        let arr = [20, 61, 80, 95, 100]
        let res = arr.some((item, index) => {
            if( item < 0 ){
                return true
            }
        })
         
        console.log(res)      //false

19.array.reverse():反转数组的元素顺序,会改变原数组;

const arr = [1, 2, 3, 4, 5];
arr.reverse() // [5, 4, 3, 2, 1]
arr // [5, 4, 3, 2, 1]

20.array.sort():对数组的元素进行排序

const array = [4, 1, 3, 2, 10];
array.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

21.array.concat():连接两个或更多的数组，并返回新的数组

  <script>
    const arr1 = [3, 6, 5, 4, 5]
    const arr2 = [5, 2, 2, 6, 7]
    const res = arr1.concat(arr2)
    console.log(res);     // [3, 6, 5, 4, 5, 5, 2, 2, 6, 7]
  </script>

22.array.fill():使用一个固定值来填充数组

const arr = [1, 2, 3, 4, 5];
arr.fill(3); // [3, 3, 3,3,3]

23.array.from():从具有 length 属性或可迭代对象的任何对象返回 Array 对象,可用于字符串转数组,伪数组转数组

  <script>
    const str = 'abcdefg'
    const res = Array.from(str)
    console.log(res);   //['a', 'b', 'c', 'd', 'e', 'f', 'g']
  </script>

24.array.includes():判断一个数组是否包含一个指定的值

const arr = [1, 2, 3, 4, 5];
arr.includes(3); // true
arr.includes(6); // false

25.arr.toString():把数组转换为字符串,并返回结果 

 const arr = [4, 3, 5, 6, 5, 7]
    const res = arr.toString()
    console.log(res);   //4,3,5,6,5,7   数组成功转字符串

isArray():判断对象是否为数组

entries():返回数组的可迭代对象;

keys():返回数组的可迭代对象,包含原始数组的键(key)

valueof():返回数组对象的原始值

copywithin():从数组的指定位置拷贝元素到数组的另一个指定位置中

lastIndexOf():搜索数组中的元素,并返回它最后出现的位置