JavaScript数组的方法大全

Posted 开到荼蘼223's

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript数组的方法大全相关的知识,希望对你有一定的参考价值。

数组的方法

当我们要对数组进行操作时可以使用数组的方法来更加高效的处理问题,下面对数组常见的几个方法进行分析:

1.push()
该方法可以向数组的末尾添加一个或多个元素并返回数组的新的长度,可以将要添加的元素作为方法的参数,这样这些元素将会自动添加到数组的末尾,该方法会将数组的新的长度作为返回值返回。

        var arr = ["孙悟空","猪八戒","沙和尚"];
        var result = arr.push("唐僧","蜘蛛精","白骨精");
        console.log(arr);//返回新数组
        console.log("result="+result);//返回新数组的长度

在这里插入图片描述
2.pop()
该方法会删除数组最后一个元素并将删除的元素作为返回值返回。

		var arr = ["孙悟空","猪八戒","沙和尚"];
        var result = arr.pop();
        console.log(arr);//返回新数组
        console.log("result="+result);//返回被删除的元素

在这里插入图片描述
3.unshift ( )

该方法可以向数组的开头添加一个或多个元素 并返回新的数组长度。
注意:其他元素索引会依次调整。

	   var arr = ["孙悟空","猪八戒","沙和尚"];
       var result = arr.unshift("牛魔王","二郎神");
       console.log(arr);//返回新数组
       console.log(result);//返回新数组长度

在这里插入图片描述
4.shift ( )
该方法可以删除数组第一个元素并将删除的元素作为返回值返回。

	   var arr = ["孙悟空","猪八戒","沙和尚"];
       var result = arr.shift();
       console.log(arr);//返回新数组
       console.log(result);//返回新数组的长度

在这里插入图片描述
5.slice ( )
可以从数组提取指定元素,该方法不会改变原数组而是将截取到的元素封装到一个新数组中返回。

使用slice方法要设置参数:

  • 第一个参数表示截取开始的位置的索引,包含开始索引
  • 第二个参数表示截取结束的位置的索引,不包括结束索引
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.slice(1,4);
console.log(arr);//原数组
console.log(result);//新数组

在这里插入图片描述
注意:如果不设置第二个参数,则从开始索引后的所有元素。索引可以传递一个负值,如果传递一个负值则从后往前计算。
6.splice( )
该方法可以删除数组中的指定元素,使用splice会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回。

同样使用splice方法也要设置参数:

  • 第一个参数表示开始位置的索引
  • 第二个参数表示删除的数量
  • 第三个参数及以后可以传递一些新的元素,这些元素将会自动插入开始位置索引的前面
	   var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
       var result = arr.splice(1,1,'ss');
       console.log(result);//返回被删除的元素
       console.log(arr);//返回新数组

在这里插入图片描述

数组去重练习

        // 数组去去重练习
        var arr = [1,2,3,2,1,3,4,2,5];
        // 去除数组中重复的数字
        for(var i=0;i<arr.length;i++){
            for(var j=i+1;j<arr.length;j++){
                if(arr[i] == arr[j]){
                    arr.splice(j,1);
				//当删除了以前j所在的元素以后 后边的元素会自动补位
				//此时将不会比较这个元素 需要再比较一次j所在位置的元素 
                    j--;
                }
            }
        }
        console.log(arr);// 1 2 3 4 5

在这里插入图片描述
7.concat ( )
该方法可以连接两个或多个数组,该方法不会对原数组产生影响,并将新的数组返回。

        var arr = ["孙悟空","猪八戒","沙和尚"];
        var arr2 = ["白骨精","玉兔精","蜘蛛精"]
        var arr3 = ["白骨精","玉兔精","蜘蛛精"]
        var result = arr.concat(arr2,arr3,"牛魔王");
        console.log(result);

在这里插入图片描述
8.join ( )
该方法可以将数组转换为字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回。在join( )中可以指定一个字符串作为参数,这个字符串将会成为数组中的元素的连接符,如果不指定连接符,则默认使用,作为连接符。

		var arr = ["孙悟空","猪八戒","沙和尚"];
        result = arr.join();
        console.log(result)

在这里插入图片描述
9.reverse ( )
该方法可以用来反转数组,会直接改变原数组。

		var arr = ["孙悟空","猪八戒","沙和尚"];
        arr.reverse();
        console.log(arr);

在这里插入图片描述
10.sort ( )
该方法可以对数组进行排序,改变原数组,返回新数组,默认会按照Unicode编码进行排序。

        arr = ["b","d","e","a","c"]
        arr.sort();
        console.log(arr)

在这里插入图片描述
11.indexOf(数据)
该方法会返回给定值的第一个索引若给定值不存在返回-1

        console.log(arr.indexOf(12));// 0
        console.log(arr.indexOf('12'));// 3
        console.log(arr.indexOf(-11));// 不存在则返回-1

12.lastIndexOf(数据)
该方法返回给定值的最后一个索引,若给定值不存在返回-1

        var arr = [12,5,23,'12',15,9];
        console.log(arr.lastIndexOf(12));// 0
        console.log(arr.lastIndexOf('12'));// 3
        console.log(arr.lastIndexOf(-11));// 不存在则返回-1

数组去重练习

        // 数组去重
        var arr = [12,5,23,12,15,5,15];
        var newArr = [];
        function unque(arr){
            for(var i=0;i<arr.length;i++){
                if(newArr.indexOf(arr[i])===-1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unque(arr);
        console.log(demo);

在这里插入图片描述

以上是关于JavaScript数组的方法大全的主要内容,如果未能解决你的问题,请参考以下文章

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

几个关于js数组方法reduce的经典片段

JavaScript 数组方法整理大全

JavaScript 数组常用方法大全

几个关于js数组方法reduce的经典片段