javascrit 数组方法总结（数组对象、栈，队列、重排序、操作数组方法、位置方法、归并方法、迭代方法）

系统管理员 2021-11-16 23:10 226阅读 0赞

### 一.数组对象 　  　作用：使用单独的变量名来存储一系列的值。   JavaScript中创建数组有两种方式. ###

（一）使用 Array 构造函数：

var arr1 = new Array(); //创建一个空数组

var arr2 = new Array(2); // 创建一个数组并指定长度为2，注意不是上限，是长度（长度不是固定的）

arr2["name0"]="xdp";//arr2第一个元素
           arr2["name1"]="gacl";//arr2第二个元素
           arr2["name2"]="xtxd";//arr2第三个元素，arr2虽然在声明时指明了长度为2，但是还是可以添加超过其指明长度的元素

var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组，并初始化数组的内容

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

var arr4 = \[\]; //创建一个空数组

var arr5 = \[20\]; // 创建一个包含1项的数组

var arr6 = \["lily","lucy","Tom"\]; // 创建一个包含3个字符串的数组

### 二.数组方法 ###

数组转换方法	       
    	    join()
    	栈  (改变原数组)
    		1、push()
    		2、pop  ()
    	队列 (改变原数组)
    		3、push()
    		4、shift()
    	重排序方法(改变原数组)
    		5、reverse()
    		6、sort()
    	操作方法
    		7、数组拼接方法      concat（）
    		8、创建子数组方法	slice()
    		9、数组删改方法		splice()  (split)
    	位置方法
    		10、indexOf(search,start)
    		11、lastIndexOf()
    	归并方法
    		reduce( )
    		reduceRight( )
    	迭代方法
    		map()
    		forEach()
    		filter()
    		some()
    		every()

##### 数组转换方法 join(字符串) #####

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

Array.join() join()方法只接收一个参数，用作分隔符的字符串，然后返回包含所有数组项的字符串 如果不给join()方法传入任何值，则使用逗号作为分隔符

var a = [1,2,3];
    	console.log(a.join());			//'1,2,3'
    	console.log(a.join(' '));		//'1 2 3'
    	console.log(a.join(''));		//'123'
    	var b = new Array(10);
    	b.join('-');					//'---------';9个连字符组成的字符串

若join()方法的参数是undefined，标准浏览器以逗号为分隔符返回字符串，而IE7-浏览器以’undefined’为分隔符返回字符串

toString() -> 可以将一个数组转化成“,”分割的形式，如\[1,2,3,4\].toString() -> “1,2,3,4”

###### ps1:如果数组中的某一项的值是null或者undefined，则该值在join()方法返回的结果中以空字符串表示 ######

#### 栈和队列方法 ####

##### 栈 #####

push和pop从数组的尾部添加，从尾部删除。

栈是一种LIFO(Last-First-Out，后进先出)的数据结构，也就是最新添加的项最早被移除。

而栈中项的插入和移除，只发生在一个位置——栈的顶部。栈只能从栈顶操作，半开口。

##### 1.push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 #####

##### 2.pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。  #####

var a = ['a', 'b', 'c'];
    		console.log(a,a.pop());			 // ['a', 'b'] 'c'
    		console.log(a,a.pop(0));		 // ['a', 'b'] 'c'

###### ps2:给pop参数传其他数字不起作用，也不报错。还是只删除最后一项。 对空数组使用pop()方法，不会报错，而是返回undefined ######

##### 队列 #####

push从数组尾部添加，shift从数组前端删除。

队列数据结构的访问规则是FIFO(first-in-first-out，先进先出)。 队列在列表的末端添加项，从列表的前端移除项。

##### 3.shift()方法移除数组中的第一个项并返回该项，同时数组的长度减1。 #####

var a = ['a', 'b', 'c'];
    		console.log(a,a.shift());			//['b', 'c'] 'a'
    		var arr6 = [1];
    		console.log(arr6,arr6.shift()); 	//[] 1
    		
    		对空数组使用shift()方法，不会报错，而是返回undefined
    		
    		var a = [];
    		console.log(a,a.shift());			// [] undefined

##### 4.unshift()方法在数组前端添加任意个项并返回新数组长度。 #####

var a = ['a', 'b', 'c'];
    		console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

当传入多个参数时，是一次性插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致

var a = ['a', 'b', 'c'];
    		console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6

在IE7-浏览器中，unshift()方法的返回值总是undefined

总结：  
长的是添加（push，unshift），短的是删除（pop，shift）。  
添加的可以接收多个参数并返回增加后数组的长度，删除的一次只能删一个并返回删除项。  
删除操作对空数组使用，不会报错，会返回undefined。  
都是对原数组进行修改

##### 重排序方法  #####

##### 5.reverse()方法用于反转数组的顺序，返回经过排序之后的数组；而原数组顺序也发生改变  #####

var array = [1,2,4,3,5];
    		console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
    		var array = ['str',true,3];
    		console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

##### 6.sort()   (1).没有使用参数, 将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。sort方法会调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组，而原数组顺序也发生改变。 #####

var array = [2,1,4,3,5];
    		console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
    		var array = ['3str',3,2,'2'];
    		console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
    		
    		如果数组包含undefined元素，它们会被排到数组的尾部
    		
    		sort()方法比较的也是字符串，因此会出现以下的这种情况：
    		
    		var array = [1,5,10,50];
    		console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]
    		为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

(2)arrayObject.sort(sortby) 参数可选。规定排序顺序。必须是函数。  
比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

//升序
    		function com(value1,value2){ 
    			if(value1<value2){ 
    				return -1;
    			}else if(value1>value2){ 
    				return 1;
    			}else{ 
    				return 0;
    			}
    		}
    		var values=[0,1,3,5,15,10];
    		values.sort(com);
    		alert(values); 			//0,1,3,5,10,15
    
    		//逆序
    		function com1(value1,value2){ 
    			if(value1<value2){ 
    				return 1;
    			}else if(value1>value2){ 
    				return -1;
    			}else{ 
    				return 0;
    			}
    		}
    		var values=[0,1,3,5,15,10];
    		values.sort(com1);
    		alert(values);		 //15,10,5,3,1,0

##### 操作方法(数组拼接方法)  #####

##### 7.concat()方法基于当前数组中的所有项创建一个新数组，先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。所以concat()不影响原数组。  #####

如果不给concat()方法传递参数时，它只是复制当前的数组；
    var arr = [1,2,3];
    console.log(arr,arr.concat()); 			//[1,2,3] [1,2,3]
    
    如果参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中；
    console.log(arr,arr.concat([6,7,8],[77,33,44]));
    //[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44]
    var arr1 = [4,5,6];
    console.log(arr,arr.concat(arr1)); 		 //[1,2,3] [1,2,3,4,5,6]
    
    如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。
    console.log(arr,arr.concat(4,5));		 //[1,2,3] [1,2,3,4,5]
    console.log(arr,arr.concat(4,[5,[6,7]]));//[1,2,3] [1, 2, 3, 4, 5, [6,7]]

浅拷贝  
如果不提供参数，concat()方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是如果数组成员包括复合类型的值（比如对象），则新数组拷贝的是该值的引用。  
//该方法实际只复制了数组的第一维。  
数组第一维存放的是第二维的引用，而第二维才是实际存放他们的内容

var numbers = [1,2];
    var newNumbers = numbers.concat();
    console.log(numbers,newNumbers);//[1,2] [1,2]
    numbers[0] = 0;
    console.log(numbers,newNumbers);//[0,2] [1,2]
    
    var numbers = [[1,2]];
    var newNumbers = numbers.concat();
    console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
    numbers[0][0] = 0;
    console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

##### 操作方法(创建子数组方法)  #####

##### 8.slice()方法基于当前数组中的一个或多个项创建一个新数组，接受一个或两个参数，最后返回新数组，所以slice()不影响原数组。  #####

slice(start,end)方法需要两个参数start和end，返回这个数组中从start位置到(但不包含)end位置的一个子数组。左闭右开\[)。

var a=[1,2,3,4]
    		console.log(a,a.slice(0,1))		//[1, 2, 3, 4] [1]

如果end为undefined或不存在，则返回从start位置到数组结尾的所有项

var a=[1,2,3,4];
    		console.log(a,a.slice(0))				// [1, 2, 3, 4] [1, 2, 3, 4]
    		console.log(a,a.slice(0,undefined))		// [1, 2, 3, 4] [1, 2, 3, 4]

如果没有参数，则返回原数组

var a=[1,2,3,4];
    		console.log(a,a.slice())				// [1, 2, 3, 4] [1, 2, 3, 4]

start和end无法交换位置  
如果start是负数，则start = max(length + start,0)  
如果end是负数，则end = max(length + end,0)

console.log(a,a.slice(-2,-1))	// [1, 2, 3, 4] [3]
    		console.log(a,a.slice(-2,1))	// [1, 2, 3, 4] []
    		console.log(a,a.slice(-2,3))	// [1, 2, 3, 4] [3]
    		总之，第一个参数<第二个参数

如果不提供参数，slice()方法返回当前数组的一个浅拷贝

slice有个技巧，其实后面两个参数差的值就是数组里留的数量，比如\[1,2,3,4,5\].slice(1,4),截取出来的数组长度就是3。

##### 操作方法(数组删改方法)  #####

##### 9.splice() 方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，该方法会改变原数组。splice()返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组 #####

如果只提供一个元素，相当于将原数组在指定位置拆分成两个数组
    splice()的第一个参数start指定了插入或删除的起始位置。
    	var a=[1,2,3,4]
    	console.log(a,a.splice(1))			//[1] [2, 3, 4]
    
    
    第二个参数number指定了应该从数组中删除的元素的个数。
    	var a=[1,2,3,4]
    	console.log(a,a.splice(1,2))			// [1, 4] [2, 3]
    
    如果后面还有更多的参数，则表示这些就是要被插入数组的新元素
    	var a=[1,2,3,4]
    	console.log(a,a.splice(0,0,"1","2"))	// ["1", "2", 1, 2, 3, 4] []

##### 位置方法  #####

##### 10.indexOf(search,start) 方法接收search和start两个参数，返回search首次出现的位置，如果没有找到则返回-1。 search参数表示要搜索的项；使用严格相等运算符（===）进行比较,返回下标 #####

var a=[1,2,3,4]
    	a.indexOf(4,0)			//3
    	a.indexOf(5,0)			//-1
    	a.indexOf(4)			//3
    	a.indexOf(4,1)			//3,当start的值小于等于搜索值的下标时，都返回原来的下标
    	a.indexOf(4,4)			//3,当start的值大于搜索值的下标时，都返回原-1

##### 11.lastIndexOf(search,start) 方法与indexOf()不同，lastIndexOf()从右向左查找。 接收search和start两个参数，返回search第一次出现的位置，如果没有找到则返回-1       #####

##### 归并方法  #####

ES5 为数组增加了两个归并数组的方法：reduce( ) 和 reduceRight( ) 。这两个方法都会迭代数组的所有项，然后构建一个最终返回值。 其中 reduce 从第一项开始向后遍历，reduceRight( ) 则从最后一项开始向前遍历。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给这两个方法的函数接收四个参数：前一个值，当前值，项的索引和数组对象。这个函数返回的任何值都会作为第一个参数传给下一项。

var values = [1, 2, 3, 4, 5]
    	// 只传一个函数，不设置归并初始值
    	var res1 = values.reduce(function(prev, cur, index, array){ 
    	    return prev - cur;
    	})
    	// 传两个参数，给定归并初始值
    	var res2 = values.reduce(function(prev, cur, index, array){ 
    	    return prev - cur;
    	}, 5)
    	alert(res1) // -13 1-2-3-4-5=-13
    	alert(res2) // -10 5-1-2-3-4-5=-10

var values = [1, 2, 3, 4, 5]
    	var res1 = values.reduceRight(function(prev, cur, index, array){ 
    	    return prev - cur;
    	})
    	var res2 = values.reduceRight(function(prev, cur, index, array){ 
    	    return prev - cur;
    	}, 5)
    	alert(res1) // -5 5-4-3-2-1=-5
    	alert(res2) // -10 5-5-4-3-2-1=-10
    
    	利用以上特性可以求和

##### 迭代方法  #####

有5个迭代方法，每个方法都接收两个参数。第一个参数是一个函数第二个参数是函数的作用域对象(可选)-影响this值，其中第一个参数的函数又有三个参数(item,index,arrSelf)。这5个方法都不会改变数组本身。

### 详情 ###

https://blog.csdn.net/weixin\_44797182/article/details/97031400  
  
  
map()方法对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组

forEach()方法对数组中的每一项运行给定函数，这个方法没有返回值。本质上与for循环迭代数组一样。如果需要有返回值，一般使用map方法  
　　forEach()方法除了接受一个必须的回调函数参数，第二个参数还可以接受一个可选的上下文参数(改变回调函数里面的this指向)

filter()方法对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项  
filter()方法还可以接受第二个参数，指定测试函数所在的上下文对象(this对象)

some()方法对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。并且当且仅当数值中的所有元素调用判定函数都返回false，它才返回false  
　在空数组上调用some()方法会返回false

every()方法对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true；