JavaScript 数组详解

• JavaScript 数组详解

1.认识数组

• 1)、内置对象是JS语言自带的对象，提供了一些基本的功能提供开发者使用。常用的内置对象有 Math,String,Array,Date等。

• 2)、数组就是对象，可以存储多个不同类型的数据。

• 3)、【对象】属性（变量）和方法（函数）的集合。

2.创建数组

• 1)、【内存】栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放。 堆区：需要手动开辟，并且需要手动释放。

• 2)、【new】(1)在堆区开辟内存空间来存储对象。(2)返回堆区的引用。

   var arr = new Array();
   // 栈区   堆区
   // 变量   数组对象
   //通过栈区的引用访问堆区的对象
  

• 3)、【构造方法创建数组】

   //(1)创建空数组
   var arr = new Array();
   
   //(2)创建确定容量的数组
   var arr = new Array(10);
   
   //(3)创建一个拥有一些数据的数组
   var arr = new Array(1,2,"Tom",true);

• 4)、【字面量法创建数组】

   //(1)创建空数组
   var array = [];
   
   //(2)创建一个拥有一些数据的数组
   var array = [1,2,"Tom",true];

3.数组的访问（赋值与取值）

• 1)、数组元素的访问：直接通过数组下标访问
• 2)、赋值与取值：通过数组下标取值，并可以对其进行赋值

var array = [1,2,3,4,5];
 
 //取值
 var val = array[2];
 console.log(val); //3
 
 //赋值
 array[2] = 6;
 console.log(array[2]); //6

4.数组的遍历

• 1)、快速遍历for-in

 
 //in在前面针对于数组来说是数组下标
 var array = [1,2,3,4,5];
 
 for(var i in array){
 
	 console.log(i);//0,1,2,3,4
	 
	 console.log(array[i]);//1,2,3,4,5
 }

• 2)、for循环遍历

 //for循环按顺序遍历
 var array = [1,2,3,4,5];
 
 for(var i=0; i<array.length;i++){
 
	 console.log(array[i]);//1,2,3,4,5
 
 }
 

• 3)、forEach遍历

var array = [1,2,3,4,5];

array.forEach(function(item,index,array){

	console.log(index+"-"+item);

});

//0-1,1-2,2-3,3-4,4-5

5.数组的长度，元素的更新，增加和删除

• 1)、【数组长度】

//(1)数组元素的个数

//(2)length不计算非正规（数字）下标

//(3)数组最多可以包含4294967295个项，基本上可以满足任何编程的需求。

• 2)、【数组长度的增加】

//数组长度的增加，默认值为undefined
var array = [1,2,3];

array.length = 5;

console.log(array); //[1,2,3,undefined,undefined]

• 3)、【数组长度的减少】

//数组长度的减少，多余的删除

var array = [1,2,3,4,5];

array.length = 3;

console.log(array); //[1,2,3]

• 4)、【添加数组元素】

var array = [1,2,3];

//添加元素的位置小于数组长度，数组元素替换
array[2] = 10;

console.log(array); //[1,2,10]

//添加元素的位置大于数组长度，则数组长度自动补齐，默认赋值undefined
array[5] = 20;

console.log(array); //[1,2,10,undefined,undefined,20]

• 5)、【删除数组元素】

//注：数组长度不会改边，只是对应的值删除为undefined
var array = [1,2,3,4,5];

delete array[2];

console.log(array); //[1,2,undefined,4,5]

6.数组中常用的方法

• 1)、【push(item1,item2,…)】

//(1)功能：在数组末尾添加一个或多个元素

//(2)参数：要添加的元素

//(3)返回值：添加元素后数组的长度
var array = [1,2,3];

var ret = array.push(4,5,6);

console.log(ret);//6

console.log(array);//[1,2,3,4,5,6]

• 2)、【unshift(item1,item2,…)】

//(1)功能：在数组的开头添加一个或多个元素

//(2)参数：要添加的元素

//(3)返回值：添加元素后数组的长度
var array = [1,2,3];

var ret = array.unshift(4,5,6);

console.log(ret);//6

console.log(array);//[4,5,6,1,2,3]

• 3)、【pop()】

//(1)功能：删除数组末尾一个元素

//(2)参数：无

//(3)返回值：被删除的元素
var array = [1,2,3];

var ret = array.pop();

console.log(ret);//3

console.log(array);//[1,2]

• 4)、【shift()】

//(1)功能：在数组的开头删除一个元素

//(2)参数：无

//(3)返回值：被删除的元素
var array = [1,2,3];

var ret = array.shift();

console.log(ret);//1

console.log(array);//[2,3]

• 5)、【join(str)】

//注：并不会改变原数组
//(1)功能：将数组的元素用参数字符串拼接成一个新的字符串

//(2)参数：一个字符串

//(3)返回值：拼接的结果
var array = [1,2,3];

var ret = array.join("-");

console.log(array);//[1,2,3]

console.log(ret);//1-2-3

• 6)、【reverse()】

//注：会改变原数组
//(1)功能：倒置数组元素

//(2)参数：无

//(3)返回值：倒置后的数组
var array = [1,2,3];

var ret = array.reverse();

console.log(array);//[1,2,3]

console.log(ret);//[3,2,1]

• 7)、【slice(startIndex,endIndex)】

//注：不包含endIndex下标出的元素，不会改变原数组
//(1)功能：在数组中，从startIndex下标开始一直截取到endIndex下标之前

//(2)参数：开始和结束下标

//(3)返回值：截取的数据数组
var array = [1,2,3,4,5];

var ret = array.slice(1,3);

console.log(array);//[1,2,3,4,5]

console.log(ret);//[2,3]

• 8)、【splice(下标,个数,item1,item2,…)】

//注:将会改变原数组
//(1)功能：在数组中间添加或删除一些元素
//1、添加:从下标为1的位置删除0个元素,并添加两个元素8,9  注意:如果下标大于原数组最大的下标,都是在数组最后添加元素
var array = [1,2,3,4,5];

var ret = array.splice(1,2,8,9);

console.log(array);//[1,8,9,4,5]

console.log(ret);//[2,3]

//如果下标大于原数组最大的下标，都是在数组最后添加元素。
var ret1 = array.splice(8,2,8,9);

console.log(array);//[1,8,9,4,5,8,9]

console.log(ret1);//[]

//2、删除:从下标为1的位置删除2个元素(2,3),并添加两个元素8,9,返回含有被删除元素的数组。  注意：如果省略可选参数，则从下标开始删除对应个数的元素，返回删除元素的数组
var array = [1,2,3,4,5];

var ret = array.splice(1,2);

console.log(array);//[1,4,5]

console.log(ret);//[2,3]

//如果省略可选参数，则从下标开始删除对应个数的元素，返回删除元素的数组
var ret1 = array.splice(1,1);

console.log(array);//[1,5]

console.log(ret1);//[4]
//(2)参数：
//1.下标：必需，规定从何处添加/删除元素，该参数是开始插入和（或）删除的数组元素下标，必须是数字。
//2.个数：必需，规定应该删除多少个元素，必须是数字，但可以是"0"。如果未规定此参数，则删除从index开始到原始数组结尾的所有元素。
//3.item1,item2,...:可选，要添加到数组的新元素。

//(3)返回值：含有被删除的元素的数组.

• 9)、【concat()】

//注：拼接后数组的元素将按照传入参数的顺序排序 ，不改变原数组
//(1)功能：将多个数组拼接成一个数组

//(2)参数：一个或多个数组或元素

//(3)返回值：拼接之后新的数组
var array = [1,2];

var newArray = array.concat([3,4],"a",true);

console.log(array); //[1,2]

console.log(newArray); //[1,2,3,4,"a",true]

• 10)、【indexOf(item)】

//(1)功能：从数组的左侧开始查找对应第一次出现的参数元素的下标

//(2)参数：要查找的元素值

//(3)返回值：如果找到了返回该元素的下标值，否则返回-1
var array = [1,2,3,4,5];

var ret = array.indexOf(4);

console.log(array); //[1,2,3,4,5]

console.log(ret); //3

console.log(array.indexOf(6)); //-1

• 10)、【lastIndexOf(item)】

//(1)功能：从数组右侧开始查找对应第一次出现的参数元素的下标值

//(2)参数：要查找的元素

//(3)返回值：如果找到了返回该元素的下标值，否则返回-1
var array = [1,2,3,4,5];

var ret = array.indexOf(4);

console.log(array); //[1,2,3,4,5]

console.log(ret); //3

console.log(array.indexOf(6)); //-1

7.数组排序

• 1)、【冒泡排序】

//(1)原理：冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样每一趟会将最小或则最大的元素浮到顶端，最终达到完全有序。

//(2)公式：
var array = [4,5,2,8,6];

for(var i = 0; i<array.length; i++){
	for(var j =0;j<array.length-1-i;j++){
		if(array[j]<=array[j+1]){
			var tmp = array[j];
			array[j] = array[j+1];
			array[j+1] = tmp;
		}
	}
}
console.log(array); //[8,6,5,4,2]

• 2)、【sort()】

//默认升序排序：
var array = [4,5,2,3,1];

array.sort();

console.log(array); //[1,2,3,4,5]

//sort()调用每一项的toString()方法，然后比较得到的字符串，确定如何排序

//排降序，需要给出排序的标准，排序的标准是一个函数。
var array = [4,5,2,3,1];

//降序排序
array.sort(function(v1,v2){
	if(v1 < v2 ){
		return 1;
	}
	return -1;
});
console.log(array); //[5,4,3,2,1]

8.迭代方法

//ECMAScript5为数组定义了5个迭代方法，每个方法接收两个参数，一个是每一项运行的函数，一个是运行该函数的作用域对象，
//传入这些方法的函数会接受3个参数：数组项的值，该项在数组中的位置，数组对象本身。

• 1)【every()】

//对数组中的每一项给定函数，如果该数组中的每一项都返回true,则返回true
var array = [1,2,3,4,5];

var retVal = array.every(function(item,index,array){
return item>2; //false
//return item<6; //true
});
console.log(retVal);

• 2)【filter()】

//对数组中的每一项运行给定函数，返回该函数返回true的项组成的数组。
var array = [1,2,3,4,5];

var retVal = array.filter(function(item,index,array){
return item>2;
});
console.log(retVal); //[3,4,5]

• 3)【forEach()】

//对数组中的每一项运行给定函数，这个方法没有返回值
var array = [1,2,3,4,5];

var retVal = array.filter(function(item,index,array){
//执行某些操作

});

• 4)【map()】

//对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
var array = [1,2,3,4,5];

var retVal = array.map(function(item,index,array){
return item * 2;
});
console.log(retVal); //[2,4,6,8,10]

• 5)【some()】

//对数组中的每一项运行给定函数，只要其中有一项返回true，则返回true，与every()相反。
var array = [1,2,3,4,5];

var retVal = array.some(function(item,index,array){
return item>2;
});
console.log(retVal); //true

9.归并方法

ECMAScript5还新增了两个归并方法，这两个方法都会迭代数组的所有项，然后构成一个最终返回的值

• 1)【reduce()】

//语法 arr.reduce([callback,initalValue])
//callback(previousValue,currentValue,currentIndex,array)
/*
 * 这个函数返回的任何值都会作为第一个参数自动传递给下一项
 * previousValue：上一次调用回调函数返回的值，或者是提供的初始值(initalValue)
 * currentValue:数组中当前被处理的元素
 * currentIndex：当前被处理元素在数组中的索引，即currentValue的索引，如果有initalValue初始值，从0开始，否则从1开始
 * array:调用reduce()函数的数组
 */

initalValue 可选参数，作为第一次调用callback的第一个参数
var array = [1,2,3,4,5];

var retVal = array.reduce(function(prev,cur,index,array){
	//实现数组累加求和
	return prev + cur;
});
console.log(retVal); //15

• 2)【reduceRight()】

//从数组的最后一项开始，向前遍历到第一项
//eg:reduce()一样，方向相反。