JavaScript中数组操作方法汇总

Js中的数组操作方法
  我们在学习工作中，经常需要对数组和字符进行操作，但是操作方法多样，很容易忘记或者记混，这里，我对它们的操作方法的种类以及各自的应用做了相应的总结和代码演示，希望可以对你们有所帮助。

数组操作方法
  一、对数组的简单操作主要分为三类，普通的增删改查，遍历、专用方法操作，下面，我会逐介绍并附上代码。
  普通的增删改查需要通过索引index来完成。我们先声明一个数组如下所示：var arr = [34,64,“hello”,true,undefined];
1、增：arr[arr.length] = “world”;console.log(arr);
  注意：利用此方法增加数组里的数据只能在末尾。
2、删：arr.length = 3;console.log(arr);
  这里是利用了数组的长度，我们可以重新设置数组的长度，实现删除效果，这里也只能删除后边的数据。
3、改：arr[2] = “world”;console.log(arr);
  对index是2的数据进行更改。
4、查：`console.log(arr[0]);``
  也是通过index索引逐个查找，这里当然也可以根据实际问题，循环操作。

二、数组的遍历

方法1：for循环配合索引实现遍历（最常见）
实例代码如下：

		var arr = [34,64,"hello",true,undefined];
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i]);
        }

遍历结果：

方法2、forEach方法
  数组的专属遍历方法，1个参数：回调函数，在回调函数身上又有三个参数.
三个参数分别代表，value:数组的每一项；index:数组每一项的索引，array：要遍历的数组名。
写法示例如下：

	var arr = [34,64,"hello",true,undefined];
	var f = arr.forEach(function(value,index,array){
        console.log(value);
    });
    console.log(f)

打印结果为：

除了这两种遍历方法，还有其他的比如：for-in遍历：这个遍历一般作为对象的专属遍历。还有我们后边要介绍到的map()方法，**filter()**方法，every（）方法都可以实现遍历数组，但是这些我们可以自主了解下，不常用（基本没人用）。

数组专属操作方法
  数组的专属操作方法是内容比较多，这里我也做了一个分类，会修改原数组的操作方法和不会修改原数组的操作方法。不会修改原数组的方法又分成了原有的和ES5新增的，下面我将对这些内容做更详尽的介绍。

一、会修改原数组的操作方法
1、arr.push（data1,data2…）;
功能：在最后一位新增一个或多个数据，返回长度。
示例如下：

 	var arr = [1,2,3];
    console.log(arr.push("hello"));  //4
    console.log(arr);                //[1,2,3,"hello"]---原数组改变
    console.log(arr.push("a","b"));  //6
    console.log(arr);                //[1,2,3,"hello","a","b"]---原数组改变

2、arr.pop()
功能：删除最后一位，并返回删除的数据。
示例如下

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

3、arr.unshift(newData1,newData2…)
功能：在第一位新增一或多个数据，返回长度。
示例如下

	var arr = [1,2,3];
    console.log(arr.unshift("hello"));  //4
    console.log(arr);                   //["hello",1,2,3]---原数组改变
    console.log(arr.unshift("a","b"));  //6
    console.log(arr);                   //["a","b","hello",1,2,3]---原数组改变

4、arr.shift()
功能：删除第一位，并返回删除的数据。
示例如下

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

5、arr.splice(index,num,a…)
功能：从index处开始删除num（可以0个，相当于指定位置添加数据）个数据，用a（可以多个都会被添加上）来替换，返回被删除的数据
示例如下

6、arr.sort()
功能：排序（字符规则），返回结果
示例如下

 	var arr = [1,2,5,7,9];
    arr.push(3);
    // sort：默认会按照字符的排序规则，升序
   // 需要传入回调函数，在回调函数身上右接收两个参数，返回这两个参数的差，可以按照数值的排序规则进行排序.固定写法。记住就好。
  	arr.sort(function(a,b){
         return a-b;
    });
    console.log(arr);

7、arr.reverse()
功能：反转数组，返回结果
示例如下

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

总结：实现新增的都会返回长度，实现删除的都会返回被删除的值，查询等返回结果

二、不会改变原数组的操作方法
原有的
1、arr.concat()
功能：合并数组，并返回合并之后的数据,
示例如下：

	var arr1 = [1,2,3]
    var arr2 = arr1.concat();
    console.log(arr1);           //[1,2,3]---原数组
    console.log(arr1 === arr2);  //false
    console.log(arr2);           //[1,2,3]---原数组的副本
    
    console.log(arr1.concat("hello","world"));           //[1,2,3,"hello","world"]
    console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));   //[1,2,3,"a","b",[3,4],{"name":"admin"}]
    console.log(arr1);           //[1,2,3]

2、arr.join()
功能：使用分隔符，将数组转为字符串并返回例如arr.join("")
示例如下：

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

3、arr.toString()
功能：直接转为字符串，并返回（中间会有原有的，）
示例如下：

 	var arr = [1,2,3];
    console.log(arr.toString());     //1,2,3
    console.log(arr);                //[1,2,3]---原数组未改变

4、arr.slice()
功能：截取，从第一个参数位，截取到第二个参数位的前一个
示例如下：

 	var arr = ["Tom","Jack","Lucy","Lily","May"];
    console.log(arr.slice(1,3));        //["Jack","Lucy"]
    console.log(arr.slice(1));          //["Jack","Lucy","Lily","May"]
    console.log(arr.slice(-4,-1));      //["Jack","Lucy","Lily"]
    console.log(arr.slice(-2));         //["Lily","May"]
    console.log(arr.slice(1,-2));       //["Jack","Lucy"]
    console.log(arr);                   //["Tom","Jack","Lucy","Lily","May"]---原数组未改变

5、arr.valueOf()
功能：返回数组对象的原始值，即使被改变了已经
示例如下：

 	var arr = [1,2,3];
    console.log(arr.valueOf());         //[1,2,3]
    console.log(arr);                   //[1,2,3]
    //为了证明返回的是数组自身
    console.log(arr.valueOf() == arr);  //true

ES5新增的
1、arr.indexOf(value,start)
功能：value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数，存在返回索引，不存在返回-1;
示例如下：

 	var arr = ["h","e","l","l","o"];
    console.log(arr.indexOf("l"));        //2
    console.log(arr.indexOf("l",3));      //3
    console.log(arr.indexOf("l",4));      //-1
    console.log(arr.indexOf("l",-1));     //-1
    console.log(arr.indexOf("l",-3));     //2

2、arr.map()
功能：主要功能：可以用来获取数组中的数据，进行操作，并返回成新数组
示例如下：

 	//功能1：同forEach
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.map(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self))
    })

// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true

    //功能2：每次回调函数的返回值被map组成新数组返回
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.map(function(value,index,self){
        return "hi:"+value;
    })
    console.log(a);     //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
    console.log(arr);   //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

3、arr.filter()
功能：过滤，回调函数每次返回值为true时，会将这个遍历到的值放在新的数组中，在filter结束后，返回这个数组；如果为false，跳过
示例如下：

 	//功能1：同forEach
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self))
    })

// 打印结果为：
// Tom--0--true
// Jack--1--true
// Lucy--2--true
// Lily--3--true
// May--4--true

    //功能2：当回调函数的返回值为true时，本次的数组值返回给filter，被filter组成新数组返回
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);         //["Jack", "Lucy", "Lily"]
    console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

4、arr.every()
功能：判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。every()接收一个回调函数作为参数，这个回调函数需要有返回值
示例如下：

 	//demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
    })

// 打印结果为：
// Tom--0--true
//因为回调函数中没有return true，默认返回undefined，等同于返回false

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return value.length < 4;
    })

// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
//因为当遍历到Jack时，回调函数到return返回false，此时Jack已经遍历，但是后面数据就不再被遍历了

    //demo3:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return true;
    })

// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因为每个回调函数的返回值都是true，那么会遍历数组所有数据，等同于forEach功能

5、arr.some()
功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
示例如下：

 	//demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return value.length > 3;
    })

// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return true;
    })

// 打印结果为：
// Tom--0--true

    //demo3:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr == self))
        return false;
    })

// 打印结果为：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true

6、arr.lastIndexOf()
功能：反向检测数组中是否存在指定数据，存在返回索引，不存在返回-1
示例如下：

 	var arr = ["h","e","l","l","o"];
    console.log(arr.lastIndexOf("l"));        //3
    console.log(arr.lastIndexOf("l",3));      //3
    console.log(arr.lastIndexOf("l",1));      //-1
    console.log(arr.lastIndexOf("l",-3));     //2
    console.log(arr.lastIndexOf("l",-4));     //-1

结语
  希望我的这些总结可以为你省去寻找的精力，可以为你们带来方便，也是我对自己掌握情况的一个总结，欢迎留言评论转载。
原文链接：https://blog.csdn.net/qq_38110274/article/details/102876331