前端基础之JavaScript数组

引言

数组是最简单的数据结构，学习数组其实为了对学习javascript数据结构和算法扎基础。由数组衍生的栈、队列、树、图、集合，排序和搜索等结构与算法是每一位程序员应该掌握的，并且可以充分运用，以提高代码质量。

1.创建和初始化数组

var array1 = new Array();
var array2 = new Array(7);
var array3 = new Array('Monday',2,true,'kingboss');
var array4 = [];
var array5 = ['Monday',2,true,'kingboss'];

2.访问数组和length属性

console.log(array5.length);
console.log(array5[4]);//undefined，length+1

##3. 添加和删除元素 ##

var array = [0,1,2,3,4,5];
array[2] = 'tow'; // [0,1,'two',3,4,5]
array.push(6,7); // [0,1,'two',3,4,5,6,7]
array.pop(); // [0,1,'two',3,4,5,6]
array.unshift(-2,-1); // [-2,-1,0,1,'two',3,4,5,6]
array.shift(); // [-1,0,1,'two',3,4,5,6]
array.splice(2,3); // [-1,0,4,5,6]
array.splice(2,0,999,999); //[-1,0,999,999,4,5,6]
array.splice(2,2,88,88); // [-1,0,88,88,4,5,6]

4.二维和多维数组

定义二维数组：

// 方法一
var arr = [];
arr[0] = [72,75,79];
arr[1] = [81,79,75];
// 方法二
var arr = [];
arr[0] = [];
arr[0][0] = 72;
arr[0][1] = 75;
arr[0][2] = 79;
arr[1] = [];
arr[1][0] = 81;
arr[1][1] = 79;
arr[1][2] = 75;

遍历二维数组：

function printMatrix(){
	for(var i = 0; i < arr.length; i++){
		for(var j = 0;j < arr[i].length; j++){
			console.log(arr[i][j]);
		}
	}
}

定义三维数组：

var arr3 = [];
for(var i = 0;i < 3; i++){
	arr3[i] = [];
	for(var j = 0;j < 3; j++){
		arr3[i][j] = [];
		for(var k = 0;k < 3;k++){
			arr3[i][j][k] = i+j+k;
		}
	}
}

遍历三维数组：

for(var i = 0;i < arr3.length; i++){
	for(var j = 0;j <arr3[i].length; j++){
		for(var k = 0;k < arr3[i][j].length; k++){
			console.log(arr3[i][j][k]);
		}
	}
}

四维或多维数组以此类推=====>

5.JavaScript的数组方法

• concat

  var zero = 0;
  var arr1 = [1,2,3];
  var arr2 = [-1,-2,-3];
  var arr = arr2.concat(zero,arr1);//[-1,-2,-3,0,1,2,3]
  //concat方法向数组传递数组、对象或者元素。数组会按该方法传入参数顺序连接指定数组。
  

• 迭代器函数every,some,forEach,map,filter,reduce

  //判定函数isEven()
  var isEven = function(x){
  	console.log(x);
  	return(x % 2 === 0);
  }
  var numbers = [1,2,3,4];
  //every会迭代数组中每个元素，直到返回false，执行结束
  numbers.every(isEven);
  //some会迭代数组中每个元素，直到返回true，执行结束
  numbers.some(isEven);
  //forEach会迭代整个数组，与for循环结果相同
  numbers.forEach(function(x){
  	console.log((x % 2 === 0));
  });
  //map迭代整个数组，并且返回新数组，数组中保存判定结果
  var myMap = numbers.map(isEven);//[false,true,false,true]
  //filter,迭代数组，筛选数组，返回的新数组由使函数返回true的元素组成
  var evenNumber = numbers.filter(isEven);//[2,4]
  //reduce,接受一个函数作为参数，该函数由previousValue、currentValue、index、array。该函数返回一个将被叠加到累加器的值，reduce执行结束后会返回累加器
  numbers.reduce(function(previous,current,index){
  	return previous + current;
  });//10
  

• 排序函数reverse、sort

  var num = [1,2,3,4,5,10,11,12,13,14];
  var str = ["Ana","ana","john","John"];
  num.reverse();//[14,13,12,11,10,5,4,3,2,1]
  //sort排序时，把元素默认为字符串进行比较，并且按照字符串ASCII值进行比较所以会出现以下结果
  num.sort();//[1,10,11,12,13,14,2,3,4,5]
  str.sort();//["Ana","John","ana","john"]
  //自定义排序==数值比较函数
  function compare(a,b){
  	if(a < b){
  		return -1;
  	}else if(a > b){
  		return 1;
  	}else{
  		return 0;
  	}
  };
  num.sort(compare);
  //自定义排序==字符串比较
  str.sort(function(a,b){
  	if(a.toLowerCase()<b.toLowerCase()){
  		return -1;
  	}else if(a.toLowerCase()>b.toLowerCase()){
  		return 1;
  	}else{
  		return 0;
  	}
  })
  

• 搜索方法indexOf()和lastIndexOf

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

• 数组转换为字符串toString()和join()

  var number = [1,2,3,4,5];
  console.log(number.toString());//1,2,3,4,5
  console.log(number.join('-'));//1-2-3-4-5
  

结束语

数组作为js数据存储结构，在不同方面发挥着举足轻重的作用，灵活运用数组工具，前提是记忆并理解操作数组的方法。fighting！！！