JavaScript中数组常用的方法


前言

本文讲解了js中数组常用的方法,如果本文对你有所帮助请三连支持博主。


在这里插入图片描述


下面案例可供参考

常用数组方法

1、 join( )

join()方法:将数组的元素组起一个字符串,以separator为分隔符,省略的话则默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

	var arr = [1,2,3];
    console.log(arr.join());    // 1,2,3
    console.log(arr.join('-')); // 1-2-3
    console.log(arr); // 原数组不变

2、push()与 pop()

push()可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的长度
pop()数组末尾移除最后一项,减少数组的length值,然后返回移除项

	 var arr =['a','b','c'];
     var arrPush= arr.push('d','e')
     console.log(arr);  // ['a', 'b', 'c', 'd', 'e']
     console.log(arrPush);//   5
     
     var arrPop = arr.pop()
     console.log(arrPop ); // e
     console.log(arr);  // ['a', 'b', 'c', 'd']

     var arrPop2  = arr.pop('c','d');
     console.log(arrPop2); // d
     console.log(arr);   // ['a', 'b', 'c']
    //pop()里面没有参数,即使有参数,也是删除最后一项

3、shift()与 unshift()

shift() 删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined

unshift() 将参数添加到原数组的开头,并返回数组的长度。

这组方法和上面的 push() 和 pop() 方法正好对应,一个是操作数组的开头,一个是操作数组的结尾

	 var arr = ['c','d','e']
     var arrUnshift = arr.unshift('a','b');
     console.log(arr);   // ['a', 'b', 'c', 'd', 'e']
     console.log(arrUnshift ); // 5

     var arrShift = arr.shift();
     console.log(arrShift );  //  a
     console.log(arr);   //  ['b', 'c', 'd', 'e']

4、sort()

sort:按升序排列数组项,即最小的值位于最前面,最大的值排在最后面

   var arr1 = ['d','b','a','c'];
   console.log(arr1.sort()); // ['a', 'b', 'c', 'd']

   arr2 = [13,24,51,3];
   console.log(arr2.sort()); // [13,24,3,51]
   console.log(arr2);  // [13,24,3,51] (原数组被改变)
	
//为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便于我们指定那个值位于哪个值的前面
	function fn(a,b){
    
    
		return a-b
	}
	console.log(arr2.sort(fn))//[3,13,24,51]

5、reverse()

反转数组项的顺序

 var arr = [13,54,3,10,87];
 console.log(arr.reverse()); // [87, 10, 3, 54, 13]
 console.log(arr);   //  [87, 10, 3, 54, 13] 原数组改变 */

6、slice()

slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。

 var arr = [1,3,5,7,9,11];
 var arrCopy = arr.slice(1);
 var arrCopy2 = arr.slice(1,4);
 var arrCopy3 = arr.slice(1,-2);
 var arrCopy4 = arr.slice(-4,-2);
 console.log(arr);     // [1,3,5,7,9,11] 
 console.log(arrCopy);  
 // [3,5,7,9,11] arrCopy只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。
 console.log(arrCopy2); // [3,5,7]  arrCopy2设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。    
 console.log(arrCopy3); // [3,5,7] arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。 
 console.log(arrCopy4); // [5,7,9] arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)。 


7、splice()

很强大的数组方法,它有很多种用法,可以实现删除,插入和替换。

  • 删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数 例如:splice(0,2)会删除数组中的前两项
  • 插入(参数:起止,删除,增加):可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项数和要插入任意数量的项,插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
  • 替换(参数:起止,删除,替换):可以向指定位置插入任意数量的项,且同时删除任意数量的项 只需指定 3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
// 删除:可以删除任意数量的项,传入2个参数,要删除的第一项的位置和要删除的项数,
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);  
 // (0,2)表示删除前两项
console.log(arr); // [5,7,9,11];
console.log(arrRemoved); // [1,3]; 
 // 返回从原始数组中删除的项,若没有删除任何项,则返回空数组

// 插入:可以向指定位置插入任意数量的项,传3个参数,第一个为起始位置,第二个为要删除的项,第三个为要插入的项
var arrRemoved2 = arr.splice(2,0,4,6);   
// 例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
console.log(arr); //[5,7,4,6,9,11]
console.log(arrRemoved2);  // []

// 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,传入3个参数,第一个为起始位置,第二个要删除的项数,第三为要插入的任意数量的项,插入的项数不必与删除的项数相等
var arrRemoved3 = arr.splice(1,1,2,4);  
// 例如,splice (1,1,2,4)会删除当前数组位置 2 的项,然后再从位置 2 开始插入2和4。
console.log(arr);
  // [5,2,4,4,6,9,11]
console.log(arrRemoved3);
 // [7]


8、concat()

concat():将参数添加到原数组,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组,在没有concat()方法,传递参数的情况下,它只是复制当前数组并返回副本。

  var arr  =[1,3,5,7];
  var arrCopy = arr.concat(9,[11,13]);
  console.log(arrCopy); // [1,3,5,7,9,11,13]
  console.log(arr); // [1,3,5,7]  原数组未被修改
 从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面
  如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢?
        
   var arr2 = [1,3,5,7];
   var arrCopy2 = arr2.concat([9,[11,13]]);
   console.log(arrCopy2);  // [1, 3, 5, 7, 9, Array(2)]
   console.log(arrCopy2[5]);  // [11, 13] */
//上述代码中,arrCopy2数组的第五项是一个包含两项的数组,也就是说concat方法只能将传入数组中的
//每一项添加到数组中,
// 如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy2中


在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_71170351/article/details/128993943