0


总结JS中常用的数组的方法大全

总结JS中常用的数组方法

 JS中常用的数组方法总结

数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据。在使用数组时,经常会搭配循环语句使用,从而很方便地对一组数据进行处理。

文章目录


一,JS中创建数组的方式:

在JavaScript中创建数组有两种常见的方式,一种是使用“new Array()”创建数组,另一种是使用“[]” 字面量来创建数组。示例代码如下。

//使用new Array() 创建数组
var arr1 = new Array();// 空数组
var arr2 = new Array('苹果','橘子','香蕉','桃子');// 含有4个元素//使用字面量来创建数组
var arr1 =[];//  空数组
var arr2 =['苹果','橘子','香蕉','桃子'];// 含有4个元素

(1)使用Array构造函数

var color = new Array();
注意:括号里面的参数可以有参数,若为一个数字,表示该数组的长度,如果为多个数字或者一个(多个)
非数字表示的是传递数组中应该包含的值

(2)使用数组字面量

var Array =[];

(3)如何访问数组中的元素
在数组中,每个元素都有索引(或称为下标),数组中的元素使用索引来进行访问。数组中的索引是-一个数字, 从0开始,如图所示。
在这里插入图片描述
访问数组元素的语法为“数组名[索引]”,示例代码如下。

var arr=['苹果','橘子','香蕉','桃子'];
console.log(arr[0]);//输出结果:苹果
console.log(arr[1]);//输出结果:橘子
console.log(arr[2]);//输出结果:香蕉
console.log(arr[3]);//输出结果:桃子
console.log(arr[4]);//输出结果: undefined(数组元素不存在)

二,数组的长度

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

三,数组的方法有数组原型方法,也有从Object对象继承来的方法,这里我们只介绍数组的原型方法,数组原型方法主要有:

 注意:这里仅为JS中常用的数组方法简单概览

1,join()
将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认逗号为分隔符,该方法只接收一个参数:即分隔符
push()和pop()
2,push()可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的长度
3,pop()数组末尾移除最后一项,减少数组的length值,然后返回移除项
shift()和unshift()
4, shift()删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined
5, unshift()将参数添加到原数组的开头,并返回数组到长度。
这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾
6,sort()
sort:按升序排列数组项,即最小的值位于最前面,最大的值排在最后面
在排序时,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序
即使数组中的每一项都是数值,sort()方法比较的是也是字符串,因此会出现以下的几种情况
7,reverse()
反转数组项的顺序
8,concat()
concat():将参数添加到原数组,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组
在没有concat()方法,传递参数的情况下,它只是复制当前数组并返回副本。
9,slice()
slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,
slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
10,splice()
很强大的数组方法,它有很多种用法,可以实现删除,插入和替换。
(1). 删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数
例如:splice(0,2)会删除数组中的前两项
(2). 插入:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项数和要插入任意数量的项,
插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
(3). 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项
只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
注意:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组
11,indexOf()和lastindexOf()(ES5新增)
indexof():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引,其中,从数组的开头(位置0)开始向后查找(从前往后找)
12,lastindexof():接收两个参数:要查找的项个(可选的)表示查找起点位置的索引,其中,从数组的末尾开始向前查找(从后往前找)
此两种方法都返回要查找的项在数组中的位置,或者再没有找到的情况下返回-1,在比较第一个参数与数组中的没有项时,会使用全等操作符。
数组迭代方法:
13,forEach()(ES5新增)
对数组的每一项运行给定函数,该方法没有返回值
14,map()(ES5新增)
对数组的每一项运行给定函数,返回每次函数调用结果所组成的数组
15,filter()(ES5新增)
对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组
16,every()(ES5新增)
对数组中的每一项运行都给定函数,如果该函数对每一项都返回true,则返回true
17,some()(ES5新增)
对数组中的每一项运行给定函数,如果该函数对任意一项返回,则返回true
18,reduce()和reduceRight(ES5新增)
这两个方法都会迭代数组所有的项,然后构建一个最终的值返回

1.join()

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

代码如下(示例):

/**
     * 1,join()方法:将数组的元素组起一个字符串,以separator为分隔符,省略的话则默认用逗号为
     * 分隔符,该方法只接收一个参数:即分隔符
     * */  
    var arr =[1,2,3];
    console.log(arr.join());// 1,2,3
    console.log(arr.join('-'));// 1-2-3
    console.log(arr);// 原数组不变// 通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,
    函数如下:
    function repeatString(str,n){return new Array(n+1).join(str)}
    console.log(repeatString('abc',3));//abcabcabc
    console.log(repeatString('abc',3).length);// 9 

2.push()和pop()

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

代码如下(示例):

/**
     * 2.push()和pop()
     * push()可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的长度
     * pop()数组末尾移除最后一项,减少数组的length值,然后返回移除项
     */
     var arr =['a','b','c'];
     var count = arr.push('d','e')
     console.log(arr);// ['a', 'b', 'c', 'd', 'e']
     console.log(count);//   5
     
     var item = arr.pop()
     console.log(item);// e
     console.log(arr);// ['a', 'b', 'c', 'd']

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

3.shift()和unshift()

shift()删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined
unshift将参数添加到原数组的开头,并返回数组的长度。
这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。

代码如下(示例):

/**
     * 3.shift()和unshift()
     * shift()删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined
     * unshift将参数添加到原数组的开头,并返回数组到长度。
     * 这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组 的结尾
    */
     var arr =['c','d','e']
     var count = arr.unshift('a','b');
     console.log(arr);// ['a', 'b', 'c', 'd', 'e']
     console.log(count);// 5

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

4.sort()

sort:按升序排列数组项,即最小的值位于最前面,最大的值排在最后面
在排序时,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序
即使数组中的每一项都是数值,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()方法可以接收一个比较函数作为参数,以便于我们指定那个值位于哪个值的前面// 比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,// 如果第一个参数应该位于第二个之后则返回一个正数,以下就是一个简单的比较函数。
   function compare(value1,value2){return value1-value2;}
   var arr =[13,54,3,10,87];
   console.log(arr.sort(compare));// [3,10,13,54,87]

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.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中

7.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)。 

8.splice()

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

  1. 删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数 例如:splice(0,2)会删除数组中的前两项
  2. 插入(参数:起止,删除,增加):可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项数和要插入任意数量的项, 插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。
  3. 替换(参数:起止,删除,替换):可以向指定位置插入任意数量的项,且同时删除任意数量的项 只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。 例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。 注意:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组>代码如下(示例):
// 删除:可以删除任意数量的项,传入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]

9.indexOf 和 lastindexOf()

indexof():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引,其中,从数组的开头(位置0)开始向后查找(从前往后找)
lastindexof():接收两个参数:要查找的项个(可选的)表示查找起点位置的索引,其中,从数组的末尾开始向前查找(从后往前找)
此两种方法都返回要查找的项在数组中的位置,或者再没有找到的情况下返回-1,在比较第一个参数与数组中的没有项时,会使用全等操作符。

代码如下(示例):

     var  arr  =[1,3,5,7,7,5,3,1];
        console.log(arr.indexOf(5));// 2
        console.log(arr.lastIndexOf(5));// 5
        console.log(arr.indexOf(5,2));// 2
        console.log(arr.lastIndexOf(5,4));// 2
        console.log(arr.indexOf('5'));// -1 

四,数组的遍历

 var arr =[1,2,3,4,5]for(var i=0;i<arr.length;i++){
         console.log(arr[i]);// 分别打印出 1,2,3,4,5}for( var j in arr){
         console.log(arr[j]);// 分别打印出 1,2,3,4,5}

五,数组的迭代方法

ECMAScript为数组定义了五个迭代方法,每个方法都接收两个参数
要在每一项上面运行的函数和运行该函数的作用域——影响this的值。传入这些方法的函数会接收三个参数(数组项的值,索引,数组本身)

1.foreach()对数组的每一项运行给定函数,该方法没有返回值

代码如下(示例):

  var arr =[1,2,3,4,5];
         arr.forEach(function(item,index,arr){
            console.log(item+'-'+index+'-'+arr);// 1-0-1,2,3,4,5// 2-1-1,2,3,4,5// 3-2-1,2,3,4,5// 4-3-1,2,3,4,5// 5-4-1,2,3,4,5})
         console.log(arr);//[1,2,3,4,5]

1.some()对数组中的每一项运行给定函数,如果该函数对任意一项返回,则返回true

代码如下(示例):

  var arr =[1,2,3,4,5];
   var b = arr.some(function(value){return value >3;})
  console.log(b);// true ,因为4,5大于3,因此也返回true
  let c = arr.some(function(value,index,arr){return value >2&& value >2})
         console.log(c);
         console.log(arr);

3.every()对数组中的每一项运行都给定函数,如果该函数对每一项都返回true,则返回true

代码如下(示例):

 var arr =[1,2,3,4,5];
         var b = arr.every(function(value){return value >3;})
         console.log(b);// false 
         console.log(arr);// [1,2,3,4,5]```

4.filter() 对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组,对数组的变化不会影响到原数组

代码如下(示例):

 var arr =[1,2,3,4,5];
         var a = arr.filter(function(value){return value >3;})
         console.log(a);//[4,5]
         console.log(arr);//[1,2,3,4,5]//  对新数组变化不会影响原数组的改变
        a[1]=100;
        console.log(a);// [4,100]
        console.log(arr);// [1,2,3,4,5]

5.map()对数组的每一项运行给定函数,返回每次函数调用结果所组成的数组,对数组的变化不会影响到原数组

代码如下(示例):

  var arr  =[1,2,3,4,5];
         var a = arr.map(function(value){return value *3;});
         console.log(a);// [3, 6, 9, 12, 15] 
         a[1]=100
         console.log(a);// [3, 100, 9, 12, 15]
         console.log(arr);// [1, 2, 3, 4, 5] *///  之后生成的数组不会影响原数组

六,迭代方法

ES6新增了两个归并数组的方法: reduce() 和 reduceRight() 这两个方法都会迭代数组所有的项,然后构建一个最终的值返回
这两个方法都接收了两个参数:一个在每一项上面调用的函数和(可选)作为归并基础的初始值
给reduce()和reduceright()这两个方法的函数都接收四个参数值:前一个值,当前值,索引,数组对象
这个函数返回的任何值都会作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项

代码如下(示例):

(1) 第一次执行回调函数的时候,pre为1,cur为2,第二次pre为3(1+2的结果)cur为3(数组的第三项),
       依次类推,直到将数组的每一项都有访问一遍,最后返回结果
        var value =[1,2,3,4,5];
        var sum  = value.reduce(function(pre,cur,index,array){return pre + cur;})
        console.log(sum);// reduceRight() 与 reduce() 使用一样,只不过是从后往前遍历 

七,数组的变异

提示:数组的变异:顾名思义,会改变这些方法调用的原始数组

非变异方法: filer(),concat(),slice()深拷贝等这些不会改变原始数组,但总是返回一个新数组,可用新数组替换旧数组。
变异: push()和pop(),shift() 和 unshift(),sort(),splice()
非变异: join(),concat(),slice(),indexOf()和 lastIndexOf() (ES5新增),forEach() (ES5新增),some() (ES5新增),fliter() (ES5新增),map() (ES5新增),every() (ES5新增),reduce()和 reduceRight() (ES5新增)


本文转载自: https://blog.csdn.net/weixin_51749544/article/details/124945146
版权归原作者 哈喽沃德程序猿 所有, 如有侵权,请联系我们删除。

“总结JS中常用的数组的方法大全”的评论:

还没有评论