JS数组方法

460 阅读5分钟

数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响

数组常用方法

  • sort():对数组的元素进行排序。
  • reserse():反转数组的元素排序。
  • join():将所有数组元素连接到一个字符串中。
  • push():将一个新元素添加到数组中(最后位置)。
  • pop():从数组中删除最后一个元素。
  • shift(),删除第一个数组元素,并将所有其他元素移位到较低的索引。
  • unshift():将新元素添加到数组中(在开始处),并取消旧元素。
  • splice():用于向数组中添加新项目(拼接数组),返回一个包含已删除项目的数组。
  • slice():将一个数组切成一个新数组,但是并不会从原数组中删除任何元素。
  • concat():合并数组,通过合并连接现有数组来创建新的数组(不会改变原有数组,只是返回一个新数组),可以采用任意数量的数组参数。
  • indexOf():检测当前值在数组中第一次出现的位置索引
  • lastIndexOf():检测当前值在数组中最后一次出现的位置索引

1. join()

join()方法用于把数组中的所有元素转换一个字符串
元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符

  var app = [1,2,3];
        console.log(app); 
        console.log(app.join());   
        console.log(app.join("~")); 

控制台输出

image.png

2. sort()

  • sort():对数组的元素进行排序。 sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

  var app1 = ["a", "c", "b", "d "];
        console.log(app1.sort());  
        app2 = [3, 4, 1, 7];
        console.log(app2.sort());   
        console.log(app2);   

控制台

image.png

注意哟,默认sort()函数按照字符串顺序对值进行排序。如果是对数字排序的话会产生不正确的结果,例如31大于100,因为3比1大。

我们可以通过一个比值函数来解决这个问题:

        var app3 = [11, 85, 3, 90, 20, -3, 24, 17, 16, 23];
            app3.sort(function(a, b){
                return a - b
            });
            console.log(app3);

控制台 image.png

这样就可以实现对数字的升序排序,如果要实现降序排序,可以使用b - a

3. reverse()

reverse() 方法用于反转数组中的元素,也就是逆向排序。

        var app = ["张三", "王二", "麻子", "李四"];
        console.log(app.reverse());   
        console.log(app);  //原数组改变

控制台

image.png

4. shift() 和 unshift()

  • shift(),删除第一个数组元素,并将所有其他元素移位到较低的索引。

  • unshift():将新元素添加到数组中(在开始处),并取消旧元素。

            var app = ["李四","王二","麻子"];
            var count = app.unshift("张三","刘子");  
            console.log(app);   
            var item = app.shift();
            console.log(item); 
            console.log(app);   

控制台

image.png

5. splice()

splice():是一个很强大的数组方法,它有很多种用法,可以实现删除、插入和替换

1. 删除元素,并返回删除的元素

可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(1,2)会删除数组中的第二项以及后一个。

    var app = [1,2,3,4,5,6,7];
            var app2= app.splice(1,2);
            console.log(app);  
            console.log(app2); 

控制台 image.png

2. 向指定索引处添加元素

可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。

            var app = [1,2,3,4,5];
            var app2= app.splice(5,0,6,7);
            console.log(app);  

控制台 image.png

3. 替换指定索引位置的元素

可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

            var app = [1,2,3,4,5];
            var app2= app.splice(2,1,9,8);
            console.log(app);  

控制台
image.png

6. indexOf()和 lastIndexOf()

接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。

indexOf():从数组的开头(位置 0)开始向后查找。

lastIndexOf:从数组的末尾开始向前查找。

indexOf() 的用法为:

str.indexOf( str1 [,startIndex] )

对象/参数说明:

  • str 是字符串对象,也就是被检索的字符串;
  • str1 参数是要查找的子串,也就是用于指定需要查找的内容,既可以是一个字符,也可以是一个字符串;
  • startIndex 参数用于指定查找的起始位置,该参数可以省略,省略时表示从 0,即第一个字符开始查找。 lastIndexOf() 的参数含义和注意事项和indexOf() 方法的完全相同

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符

            var app = [1,3,5,7,7,5,3,1];
            console.log(app.indexOf(5));  
            console.log(app.lastIndexOf(5));   
            console.log(app.indexOf(5,2));  
            console.log(app.lastIndexOf(5,4));   
            console.log(app.indexOf("5"));  

控制台

image.png

7. push()和 pop()

  • push():将一个新元素添加到数组中(最后位置)。
  • pop():从数组中删除最后一个元素。
            var app = ["李四","王二","麻子"];
            var count = app.push("张三","刘子");
            console.log(app);   
            var item = app.pop();
            console.log(item);  
            console.log(app);

控制台

image.png

8. slice()

slice()方法可以将一个数组切成一个新数组,可以从已有数组中返回选定的元素,但是并不会从原数组中删除任何元素。

语法:

array.slice(start,end)

start 必需参数,规定从什么地方开始选取,如果是负数,那么则规定从数组尾部开始算起的位置;end 可选参数,规定从何处结束选取,它是数组片段结束处的数组下标。

            var app = [1,2,3,4,5,6,7];
            var app1 = app.slice(3,6);
            var app2 = app.slice(1,4);
            var app3 = app.slice(1,-2);
            var app4 = app.slice(-4,-1);  
            console.log(app1);  
            console.log(app2);  
            console.log(app3);   
            console.log(app4);  

控制台

image.png

9. concat()

concat()方法用于合并数组,通过合并连接现有数组来创建新的数组(不会改变原有数组,只是返回一个新数组),可以采用任意数量的数组参数。

语法:

string.concat(string1, string2, ..., stringX)

            var app1 = [1,2];
            var app2 = [3,4];
            var tet = app1.concat(app2);
            console.log(tet);
            // 合并多个数组,需要使用逗号将数组进行分隔
            var app3 = [5,6]
            var tet = app1.concat(app2,app3);
            console.log(tet);

控制台

image.png