【前端学习]】javascript数组（Array)

学习思维导图

  

前言

    最近几年，前端技术发展迅速，涌现出了大量的框架和插件，在项目开发的过程中，大大小小框架要用到无数个，要想快速掌握这些框架的，前端的基础知识是必须要掌握的，不然太影响开发效率了. 

    而我个人记忆力有不太好，学了容易忘记，所以采有的学习方式是先学习资料，然后整理成思维导图。一来方便记忆，二来方便以后的复习。 这就是为什么一开始就上思维导图的原因。下面将根据思维导图来做一些详细说明。

JS数组的特点

    数组大小可以动态变化。 部分编程语言（如java),创建数组时，必须要明确指定数组的大小（length),存储元素时，超出数组的大小会出异常，而JS不是这样的，数组定义时不需要指定数组大小（指定了也没什么用），存储元素时不用考虑到数组的大小以及下表值。

      数组中可以存储不同类型的元素。 java语言，数组只能存储同一种类型的元素，要不全部是int、要不全部是String，而JS中的数组不是这样的，一个数组中可以同时存储int和String。

      数组元素不是存储在一段连续的内存集合。 java语言，创建数组时，会根据数组的定义分配一段连续的内存用来存储元素，而JS中不是这样的，它的元素可能存储在不连续的内存区。

可参照下面代码加深理解：

var  arr = new Array(2);  //定义一个数组
arr[0] = 'a0';
arr[1] = 'a1';
arr[2] = 'a2';   //数组大小可动态变化，赋了3个元素
// var arr=['a1','a2','a3']  定义数组推荐的方式

arr[4] = 4;  //数组中的元素可以是不同类型 

console.log(arr[3]);   //undefined   不定义值也是可以的
arr[3] = 'a3';</span></span>

JS数组的操作 - 增加/删除元素

     增加元素很简单，直接指定数组下标，然后赋值即可。这里主要描述下增加/删除数组元素相关的API。

     push: 将一个或多个新元素添加到数组结尾，并返回数组新长度

     unshift: 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

     pop: 移除最后一个元素并返回该元素值

     shift: 移除最前一个元素并返回该元素值，数组中元素自动前移

可参照下面代码加深理解：

console.log(arr.toString()); //a0,a1,a2,a3,4 Array重写了toString()方法
//当前对象是数组么？
console.log(Object.prototype.toString.call(arr) === '[object Array]');  //true

arr.push('p1');  //添加元素到数组结尾
console.log(arr.toString());  //a0,a1,a2,a3,4,p1

arr.unshift('unsf1');  //添加元素到数组开头
console.log(arr.toString()); //unsf1,a0,a1,a2,a3,4,p1

arr.pop(); // 删除掉数组结尾元素
console.log(arr.toString()); //unsf1,a0,a1,a2,a3,4

arr.shift(); //删除掉数组头元素
console.log(arr.toString()); //a0,a1,a2,a3,4</span></span>

JS数组的操作 - 排序

    这里主要描述两个API:

    reverse: 反转元素（最前的排到最后、最后的排到最前）。注意：此时是在原有的数组上进行修改

    sort([compare]):  对数组元素进行排序。注意，排序时，首先会调用元素的toStirng()方法将元素转换成字符串，然后比较个元素的字符串形式进行最后的排序。

 可参照下面代码加深理解：

var arr1 = [1,2,9,23,7];

var  newArr = arr1.slice(0);  //克隆arr1 不让arr1值受影响
// var  newArr = arr1.contact();  这样克隆也是可以的
newArr.reverse()  //将数组倒过来
console.log(newArr.toString());  //7,23,9,2,1

newArr = arr1.slice(0);
newArr.sort();   //将数组排序
console.log(newArr.toString());  //1,2,23,7,9

newArr = arr1.slice(0);
newArr.sort(function(a,b){   //重新排序，我要的不是那个
	return a - b;
});
console.log(newArr.toString());   //1,2,7,9,23</span></span>

JS数组的其它API - splice

    splice是数组中非常强大的一个方法，通过该方法，基本上可以对数组进行任何复杂的添加和删除操作，该方法参数主要分三段： 第一个参数为数组的起始下标，第二个参数为数组要删除元素的个数（0表示不删除），后面的参数为插入到数组的元素值（从第一个参数标识的起始下表后开始插入元素）。

 可参照下面代码加深理解：

var arr2 = [1,2,9,23,27,5,4];

arr2.splice(3,2); //删除从下标为3开始的后2个元素
console.log(arr2.toString());  //1,2,9,5,4

// 在下标为为3后插入 in1 in2 in3
arr2.splice(3,0,'in1','in2','in3');
console.log(arr2.toString());  //1,2,9,in1,in2,in3,5,4
</span></span>

JS数组的其它API - every /filter /forEach /map

     ECMAScript5为数组定义了这几个方法，每个方法都接收两个参数： 在数组每一项元素上运行的函数和函数的作用域对象（可选）。由于针对于这几个方法，部分浏览器是不支持的（如IE8以下），所以使用的使用要慎重。

   every: 对数组中每一个元素都运行函数，如果该函数对每一项都返回true,则every执行结果为true

   filter: 对数组中每一个元素都运行函数,返回函数执行返回true的元素

   forEach: 对数组中每一个元素都运行函数,该方法没有返回值

   map：对数组中每一个元素都运行函数, 返回由每次函数执行的结果组成的数组

 可参照下面代码加深理解：

// arr2 =  1,2,9,in1,in2,in3,5,4
//只要数组里的类型为数字的元素
var arr3 = arr2.filter(function(ele,index,arr2) {
    return typeof ele == 'number';
});

// 现在数组里元素都是数字了吧？
var isAllNumber = arr3.every(function(ele,index,arr3){
     return typeof ele == 'number';
});

//注意：原数组的值是不变的
console.log(arr2.toString());  //1,2,9,in1,in2,in3,5,4
console.log(arr3.toString()); //1,2,9,5,4
console.log(isAllNumber); // true

// 数组中每个元素都要翻10倍
var arr4 = arr3.map(function(ele,index,arr2) {
	return ele*10;
});
console.log(arr4.toString());  //10,20,90,50,40

var arr5 = arr4.slice(1,3);  //只要下标为2或3的元素
console.log(arr5.toString());  // 20,90

arr5.forEach(function(ele,index,arr){
	console.log("模拟插入元素到数据库："+ele);
});
//模拟插入元素到数据库：20
//模拟插入元素到数据库：90</span></span>

总结

    文章很大部分讲解的是数组的API，可能有些人比较奇怪和不屑，API有什么好说的，用的时候直接查文档就行了。我以前也是这么认为的，可以在开发的过程中，我发现查询API非常耗时，影响开发效率。还有个原因就是，我认为在采用一门编程语言进行业务实现时，不仅要让代码正确的运行，同时你的写的代码要符合这门语言的编码规范，语言要有可读性，例如，如果有个需求是要求在数组中插入2个元素时，如果你不知道splice方法，那很可能会采用for循环遍历数组实现数组的插入和移动。如果你的同事看到这些代码，是不是感觉很无语？