总结js数组的方法介绍及应用

字符串方法详见： js中常用的字符串中方法总结及详解_AI_huihui的博客-CSDN博客

---

目录

一、常用数组方法

ES5常用

ES6新增方法

二、方法举例理解

 push()

unshift()

pop()

shift()

reverse()

sort()

splice()

concat()

join()

slice()

toString()

valueOf()

indexOf()和lastIndexOf()

forEach()

map()

filter()

every()

some()

 reduce()

reduceRight()

includes()

find()

findIndex()

fill()

copyWithin()

flat()

flatMap()

 三、其他

from()

 of()

---

一、常用数组方法

1. ES5常用

   方法名	功能	是否会改变原数组	返回值
   push()	向数组末尾添加一个或多个元素	是	返回新的数组长度
   unshift()	向数组开头添加一个或多个元素	是	返回新的数组长度
   pop()	删除最后一个元素	是	返回被删除的元素
   shift()	删除第一个元素	是	返回被删除的元素
   reverse()	翻转数组里的元素	是	返回翻转后的数组
   sort()	可以将数组元素进行排序,默认为升序顺序排序 以字母顺序(字符串Unicode码点)	是	返回新的数组
   splice()	指定位置进行数组删除,再进行添加任意个数的元素(从第几个开始,要删除几个,替换为什么)	是	返回删除的数组元素
   concat()	连接两个或多个数组来创建一个新数组,不影响原数组	否	返回合并后的新数组
   join()	按照分隔符拼接数组中的每一个元素,最终得到一个字符串	否	返回拼接后的字符串
   slice()	对数组进行截取	否	返回被截取了的元素
   toString()	把数组转换为字符串	否	返回字符串
   valueOf()	返回数组对象本身	否	返回数组对象本身
   indexOf()	查询数组中的某个元素在数组中第一次出现的位置	否	如果找到返回索引位置,没有找到返回-1
   lastIndexOf()	从最后到开头查询数组中某个元素第一次出现的位置	否	如果找到返回索引位置,没有找到返回-1
   forEach()	遍历数组,每次循环都执行被传入的回调函数	否	undefined
   map()	遍历数组,每次循环都执行被传入的回调函数,再根据回调函数返回值生成一个新数组	否	返回新数组
   every()	对数组的每一项都运行给定的函数	否	每一项都返回 ture,则返回 true,有一项为false则返回false
   filter()	遍历数组中的每一个元素,并每遍历一次就会调用传递过来的回调函数,把符合条件的元素筛选出来并放入新数组中	否	返回满足条件的元素的新数组
   some()	对数组的每一项都运行给定的函数	否	任意一项返回 ture,则返回 true,都不满足则返回false
   reduce()	遍历数组,每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	否	返回计算结果
   reduceRight()	从后到前遍历数组,每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	否	返回计算结果

2. ES6新增方法

   includes()	判断数组中是否存在该元素	否	返回boolean值
   find()	遍历数组,执行传入的回调函数,找到数组中符合当前搜索规则的第一个元素并返回，并终止搜索	否	返回满足条件的第一个元素,没有则返回undefined
   findIndex()	遍历数组,执行传入的回调函数,找到数组中符合当前搜索规则的第一个元素下标,不存在则返回-1	否	返回满足条件的第一个元素下标,没有则返回-1
   fill()	用新元素替换掉数组内的元素，可以指定替换下标范围	否	返回新数组
   copyWithin()	选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围	是	返回当前数组
   flat()	用于多次嵌套的数组“拉平”，变成一维的数组	否	返回新数组
   flatMap()	flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次)	否	返回新数组

二、方法举例理解

1.  push()

    push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组，可以一次添加多个元素push(data1,data2....)

   var a = [2,3,4];
   var b = a.push(5);
   console.log(a); //[2,3,4,5]
   console.log(b); //4

2. unshift()

    unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组

   var arr = [2,3,4,5];
   console.log(arr.unshift(3,6)); //6
   console.log(arr); //[3, 6, 2, 3, 4, 5]

3. pop()

    pop() 方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组

   var arr = [2,3,4];
   console.log(arr.pop()); //4
   console.log(arr); //[2,3]

4. shift()

    shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组

   var arr = [2,3,4];
   console.log(arr.shift()); //2
   console.log(arr); //[3,4]

5. reverse()

    reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组

   var arr = [2,3,4];
   console.log(arr.reverse()); //[4, 3, 2]
   console.log(arr); //[4, 3, 2]

6. sort()

    按照 Unicode code 位置排序，默认升序

   var fruit = ['cherries', 'apples', 'bananas'];
   console.log(fruit.sort());; // ['apples', 'bananas', 'cherries']
   var a = [1, 10, 21, 2];
   console.log(a.sort());; // [1, 10, 2, 21]

7. splice()

    splice() 方法可删除以下标处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从数组中删除了元素，则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改

   var a = [1,2,3,4];
   console.log(a.splice(1,0,9)); //[]
   console.log(a); // [1,9,2,3,4]
   var b = [5,6,7,8];
   console.log(b.splice(1,1,3)); //[6, 7]
   console.log(b); //[5, 3, 8]

8. concat()

    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本

   var arr1 = [1,2,3];
   var arr2 = [4,5];
   var arr3 = arr1.concat(arr2);
   console.log(arr1); //[1, 2, 3]
   console.log(arr3); //[1, 2, 3, 4, 5]

9. join()

    join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组

   var arr = [2,3,4];
   console.log(arr.join()); //2,3,4
   console.log(arr); //[2, 3, 4]

10. slice()

     返回一个新的数组，包含从开头到 end （不包括该元素）的 arrayObject 中的元素。返回选定的元素，该方法不会修改原数组

    var arr = [2,3,4,5];
    console.log(arr.slice(1,3)); //[3,4]
    console.log(arr); //[2,3,4,5]

11. toString()

     把数组转换为字符串

    let a = [1, 2, 3, 4]
    console.log(a.toString()); //1,2,3,4

12. valueOf()

     返回数组的原始值（一般情况下其实就是数组自身）

    let a = [1, 2, 3, 4]
    console.log(a.valueOf()); //[1,2,3,4]
    console.log(a); //[1,2,3,4]

13. indexOf()和lastIndexOf()

     都接受两个参数：查找的值、查找起始位置 不存在，返回 -1 ；存在，返回位置

    var a = [1,2,3,4,5];
    console.log(a.indexOf(3)); // 2
    console.log(a.indexOf(10)); // -1
     
    if (a.indexOf(7) === -1) {
     console.log('没有7');  //没有7
    }

    let a=[1,2,3,4,5,6,7];
    console.log(a.lastIndexOf(3)); //2 从后往前查找，数组元素的索引不变
    console.log(a.lastIndexOf(-3)); //-1 
    console.log(a.lastIndexOf(3,2)); //2 从索引为2的地方往前找，包括2
    console.log(a.lastIndexOf(3,1)); //-1 从索引为1的地方往前找，没有则返回-1
    console.log(a.lastIndexOf(3,-1)); //2 第二个参数为-1是从倒数第一个开始往前找
    console.log(a.lastIndexOf(3,-5)); //2 第二个参数为-5是从倒数都五个开始往前找

14. forEach()

     forEach()中回调函数三个形参中第一个参数是数组的每一项，第二个参数是数组中每一项的下标，第三个参数是数组本身

    const items = ['item1', 'item2', 'item3'];
    const copy = [];  
    items.forEach(function(item,index,items){
        console.log(item);
        console.log(index);
        console.log(items);
    });

    输出结果:
    

15. map()

     对数组的每一项都运行给定的回调函数，返回每次函数调用的结果组成一个新数组

    var numbers = [1,2,3,4,5,6];
    var double = numbers.map(function(number) {
      return number * 2;
    });
    console.log(double); //[2,4,6,8,10,12]

16. filter()

     对数组的每一项都运行给定的回调函数，返回 结果为 ture 的项组成的数组

    var numbers = [1,2,3,4,5,6,7,8,9];
    var big = numbers.filter(function(n){
     return n > 6;
    });
    console.log(big);  //[7,8,9]

17. every()

     对数组的每一项都运行给定的回调函数，每一项都返回 ture,则返回 true，只要有其中一个为 false ，则返回 false ，若是一个空数组则返回true

    var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var big = numbers.every(function (n) {
        return n > 6;
    });
    var small = numbers.every(function (n) {
        return n <= 9;
    });
    console.log(big);  //false
    console.log(small);  //true

18. some()

     对数组的每一项都运行给定的函数，任意一项返回 ture,则返回 true ，都为 false 则返回 false

    var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var big = numbers.some(function (n) {
        return n > 6;
    });
    var small = numbers.some(function (n) {
        return n < 1;
    });
    console.log(big);  //true
    console.log(small);  //false

19.  reduce()

      遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值,传入到下一次函数中, 返回最终操作的结果 

    1.  reduce()第一个参数是一个回调函数 

           回调函数里面有四个参数 

           第一个参数 累加器

           第二个参数 数组当前项

           第三个参数 数组当前索引

           第四个参数 数组本身

    2. 第二个参数是初始值(可选)
           如果有第二个参数 第一次循环的时候会将第二个参数 赋值给 累加器 currentValue 会从数组第一项开始
           如果没有 累加器的值 是数组的第一个元素 item 他从数组的第二项开始循环

       //不设置初始值
       var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
       var results=numbers.reduce((sum,item) => {
           return sum += item;
       })
       console.log(results);  //45
       //设置初始值
       var resultS=numbers.reduce((sum,item) => {
           return sum += item;
       },1)
       console.log(resultS);  //46

20. reduceRight()

    用法同reduce,不同的是从后向前执行 

21. includes()

     判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误

    var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(numbers.includes('a'));  //false
    console.log(numbers.includes('3')); //false  不自动转换类型
    console.log(numbers.includes(1));  //true

22. find()

    传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回这个元素，并且终止搜索 

    const arr = [1, "2", 3, 3, "2"]
    console.log(arr.find(n => typeof n === "number")) // 1

23. findIndex()

    传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索 

    const arr = [1, "2", 3, 3, "2"]
    console.log(arr.findIndex(n => typeof n === "number")) // 0

24. fill()

     用新元素替换掉数组内的元素，可以指定替换下标范围

    let arr=[1,2,3,4]
    let newArr = arr.fill('a', 1, 3)
    console.log(newArr); //[1,'a','a',4]   不包含最后一个参数

25. copyWithin()

    选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围 

    //arr.copyWithin(target, start, end)
    const arr = [1, 2, 3, 4, 5]
    console.log(arr.copyWithin(3))
     // [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2
    const arr1 = [1, 2, 3, 4, 5]
    console.log(arr1.copyWithin(3, 1)) 
    // [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3
    const arr2 = [1, 2, 3, 4, 5]
    console.log(arr2.copyWithin(3, 1, 2)) 
    // [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

26. flat()

    用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组，对原数据没有影响
    默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity 

    var arr = [1, [2, [3, 4]], 5, 6, [7, 8]];
    console.log(arr.flat(2));  //[1,2,3,4,5,6,7,8]

27. flatMap()

     flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )  

    let list = [1,2,3,4,5,6,7,8];
    let newArr = list.map(function (item, index) {
      return [item, index];
    });
    console.log(newArr);
    
    let newArr = list.flatMap(function (item, index) {
      return [item, index];
    });
    console.log(newArr);

        输出结果为:

                 

 三、其他

1. from()

   将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组 

   const list = ["a", "b", "c"];
   Array.from(list);
   // ["a", "b", "c"]
    
   Array.from('foo');
   // ["f", "o", "o"]

2.  of()

   用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异 

   console.log(Array());  //[]
   console.log(Array(3));  //[<3 empty items>]
   console.log(Array(1, 2, 3));  //[1,2,3]
   console.log(Array.of(3));  //[3]
   console.log(Array.of(1,2,3));  //[1,2,3]