js中数组方法总结---详细

js中数组方法总结—详细

前言

数组在javascript中是比较基础的，但是在后期的实际开发和模块项目中，不可或缺，十分重要，今天来对数组的所有方法进行总结。

一、数组的创建方法？

JavaScript中创建数组有两种方式

（一）使用 Array 构造函数：

var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组

（二）使用数组字面量表示法：

var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组

二、数组的常规操作方法

1.数组遍历

1，普通for循环，经常用的数组遍历

var arr = [1,2,0,3,9];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

2，forEach，数组自带的循环，主要功能是遍历数组

arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);

})

forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

3,map遍历，map即是 “映射”的意思 用法与 forEach 相似

arr.map(function(value,index){
    console.log('map遍历:'+index+'--'+value);
});

map遍历支持使用return语句，支持return返回值

4，for…of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值，而for…in主要获取对象的属性名。

    var arr1 = [1, 2, 3]
    for (let i of arr1){
        console.log(i)
    }

    // 遍历普通对象报错
    var obj2 = {fname:1, name2:22}
    for(let val of obj2){
        console.log(val)
    }

2.数组的增删查改

一、增
1、push()
可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度。例如：

var arr = [];
var len = arr.push(1);
console.log(arr);  // [1]
console.log(len);  // 1
len = arr.push(2,3);
console.log(arr);  // [1,2,3]
console.log(len);  // 3

2、unshift()
该方法与push()类似，也可接收任意数量的参数，只不过是将参数逐个添加至数组前端而已，同样返回新数组长度。

var len = arr.unshift(0);
console.log(arr);  // [0, 1, 2, 3]
console.log(len);  // 4
len = arr.unshift(-2,-1);
console.log(arr);   // [-2, -1, 0, 1, 2, 3]
console.log(len);   // 6

3、concat()
该方法与push()方法有点类似，同样是将元素添加至数组末尾，只不过这个数组已经不是原来的那个数组了，而是其副本，所以concat()操作数组后会返回一个新的数组。具体用法如下：

① 不传参数，返回当前数组副本
② 传递一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中
③ 传递非数组参数，这些参数就会被直接添加到结果数组的末尾

var arr1 = arr.concat(4,[5,6]);
console.log(arr);   // [-2, -1, 0, 1, 2, 3]
console.log(arr1);   // [-2, -1, 0, 1, 2, 3, 4, 5, 6]

4、splice()
前面的三个方法都具有很大局限性，因为不是添加到数组前就是数组后，而splice()就不一样了，它非常灵活和强大。灵活是因为它可以添加元素到数组的任意位置，强大是因为它除了可以添加元素之外还具有删除和替换元素的功能（这个后面会陆续讲到）。

splice()可以向数组指定位置添加任意数量的元素，需要传入至少3个参数： 起始位置、0（要删除的元素个数）和要添加的元素。

arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr);  // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]

二、删
1、pop()
与push()方法配合使用可以构成后进先出的栈，该方法可从数组末尾删除最后一项并返回该项。

var item = arr.pop();
console.log(item);   // 3
console.log(arr);   // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

2、shift()
与push()方法配合使用可以构成先进先出的队列，该方法可删除数组第一项并返回该项。

var item = arr.shift();
console.log(item);  // -2
console.log(arr);  // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

3、slice()
该方法同concat()一样是返回一个新数组，不会影响原数组，只不过slice()是用来裁剪数组的，返回裁剪下来的数组，具体用法如下：

var arr2 = arr.slice(2,6);
console.log(arr);  // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2);  // [0.2, 0.4, 0.6, 0.8]

4、splice()

arr.splice(2,4);
console.log(arr);  // [-1, 0, 1, 2]

三、改
接使用splice()向指定位置插入任意数量的元素，且同时删除任意数量的元素。

arr.splice(2,1,0.5,1,1.5);
console.log(arr);   //  [-1, 0, 0.5, 1, 1.5, 2]

四、查
indexOf()和lastIndexOf()

var index = arr.indexOf(0);
console.log(index);   // 1
index = arr.indexOf(3,0);
console.log(index);   // -1

二、使用循环等原理实现数组的方法

1，遍历数组

这里只列举最常规的，方法有很多种，不一一列举
1，for(){}遍历数组

<script type="text/javascript">
 <!--
var arr = new Array(13.5,3,4,5,6);
for(var i=0;i<arr.length;i++){
 arr[i] = arr[i]/2.0;
}
alert(arr);
 //-->
 </script>

2，,for in循环遍历数组

<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>

2，数组排序

方法也有非常多
1，冒泡排序（从后向前） 是数组排序的原理

var array = [1,4,-8,-3,6,12,9,8];
function sort(arr){
    for(var j=0;j<arr.length-1;j++){
    //两两比较，如果前一个比后一个大，则交换位置。
       for(var i=0;i<arr.length-1-j;i++){
            if(arr[i]>arr[i+1]){
                var temp = arr[i];
                arr[i] = arr[i+1];
                arr[i+1] = temp;
            }
        } 
    }
}
sort(array);
document.write(array);

2，JavaScript的sort()方法 简单无脑

var array = [1,4,-8,-3,6,12,9,8];
function compare(val1,val2){
    return val1-val2;
};
array.sort(compare);
document.write(array);

3， 快速排序：递归思想，两边快速的排序，冒泡排序的改进

var array = [1,4,-8,-3,6,12,9,8];
function quickSort(arr){
//如果数组长度小于等于1，则返回数组本身
    if(arr.length<=1){
        return arr;
    }
    //定义中间值的索引
    var index = Math.floor(arr.length/2);
    //取到中间值
    var temp = arr.splice(index,1);
    //定义左右部分数组
    var left = [];
    var right = [];
    for(var i=0;i<arr.length;i++){
    //如果元素比中间值小，那么放在左边，否则放右边
        if(arr[i]<temp){
            left.push(arr[i]);
        }else{
            right.push(arr[i]);
        }
    }
    return quickSort(left).concat(temp,quickSort(right));
}
document.write(quickSort(array));

4，原生JS排序

function order(arr){
    var len=arr.length;
    var max=0; // 定义一个变量max,用于保存数组中的最大值。
    var num=0; // 定义一个变量num,用于保存数组中最大值的位置。
    var mid=0; // 定义一个变量mid,用于交换最大值和最后一个值。
    for(var i=len-1;i>0;i--){
        max=arr[0];
        for(var j=0;j<=i;j++){
            if(max<=arr[j]){ 
                max=arr[j]; // 获取数组中最大值
                num=j;
            }
        }
        mid=arr[i]; // 将数组最后一个元素的值赋给中间变量；
        arr[num]=mid; // 将中间变量赋给最大值的元素；
        arr[i]=max; // 将最大值赋给数组最后一个元素；
    }
    return arr;

3，数组翻转

1，js用for循环模拟数组翻转

 var arr=[1,2,3,4,5,6];
var arr1=[];

//console.log(arr.reverse());

方法一：取最后一个元素放到arr1中

for(var i=0;i<arr.length;i++){
   //元素下标的长度=长度-1-i
    arr1[i]=arr[arr.length-1-i];
}
console.log(arr1);

 

方法二：

for(var i=arr.length-1;i>=0;i--){
  arr1[arr1.length]=arr[i];
}

4，数组去重

1、简单的去重方法

* */
function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

第二种：

	<script type="text/javascript">
		function quit(arr) {
			var arr1 = [];
			for (var i = 0;i <= arr.length - 1;i++) {
				if(arr1.indexOf(arr[i]) === -1) {
					arr1.push(arr[i]);
				}
			}
			return arr1;
		}
	  	var demo = quit([2,6,8,1,9,2,1,8,9,4,7,4,3,7]);
	  	console.log(demo);
	</script>

第三种：

		<script type="text/javascript">
			var arr = [2,9,6,1,3,2,8,7,11,22,35];
			var arr1 = [];
			var j = 0;
			for (var i = 0;i < arr.length;i++) {
				if (arr[i] > 5) {
					arr1[j] = arr[i];   // arr1[arr1.length] = arr[i];
					j++;
				}
			}
			console.log(arr1);
			
//			数组的去重
			var arr2 = [0,2,3,5,7,9,1,6];
			var arr3 = [];
			for (var i = 0;i < arr2.length;i++) {
				if (arr[i] != 0) {
					arr3[arr3.length] = arr[i];
				}
			}
			console.log(arr3);
		</script>

4，第四种

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

4，查找数组中重复项以及下标

let arr= [1,2,3,4,5,1,2];
let rep = [];
arr.forEach((item,index)=>{
	if(arr.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
        let obj = {};
        obj.key = (arr.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标   
		obj.value = item;
        rep.push(obj);
	}
});
console.log(rep);

二、数组原有方法和ES5新增方法

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); // [1, 2, 3]（原数组不变）

2、push()和pop()

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

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头，并返回数组的长度 。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4、sort()
sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

var arr1 = ["a", "d", "c", "b"];
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](元数组被改变)

5、reverse()
reverse()：反转数组项的顺序。

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

6、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](原数组未被修改)

7、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,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

8、splice()
splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
功能非常强大

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

9、indexOf()和 lastIndexOf()

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

10、forEach()
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

11、map()
map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

12、filter()
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

还有许多其他方法，不经常使用，会查手册即可。