JavaScript系列学习笔记2 —

一、概念与作用

数组是存储数据列表的一种方式。数据列表中的每一列都可以存储一个数据，而且每一列所存储的数据类型可以不同，这些数据被称为数组元素。每个数组元素都有一个索引号，就好似门牌，每一个门牌对应一个数组元素。通过索引号可以方便的查找并引用数组元素。需要注意的是，索引的起始点是从0开始的，而不是从1开始。

数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。通过数组，可以对大量性质相同的数据进行存储、排序、插入及删除等操作。

二、基本结构

JavaScript数组有多种格式。可以选择是否指定数组长度，或者在数组的任意位置使用任意类型的数据。下面介绍定义数组的两种方式：数组构造函数和数组字面量表示法。

2.1 数组构造函数

    var ArrayObj = new Array()var ArrayObj = new Array(Size)var ArrayObj = new Array(Element 0,Element 1,...，Element N)

- ArrayObj：存储Array对象的变量名

- Size：可选项。设置数组长度，由于数组索引是从0开始，所以最末尾的数组元素的索引为Size-1

- ElementN：可选项，指定数组的存储元素。使用该语法时至少有一个元素

注意：第一个语法创建Array对象时，并没有存储元素，所以它的长度为0，用户在为其赋值时，数组元素的总个数便是它的数组长度。

第二个语法创建Array对象时指定数组长度，在对数组赋值时，如果超出了数组的定义长度，Array对象自动的扩充长度（不过最好不好，没意义）。

第三个语法创建Array对象时，便对数组对象进行赋值，其长度就是赋值元素的个数。

2.1 数组字面量表示法

字面量表示提供给了一种更简单的定义数组的方法，使用方括号[]而不是构造函数语法。例如下面两种方法：

    var ArrayObj = []var ArrayObj = [Element 0,Element 1,...，Element N]

第一种字面量表示法对应上述构造函数的第一种，第二张字面量表示法对应上诉构造函数的第三种。

三、Array对象的属性和方法

3.1 Array对象的属性

属性	描述
constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组对象的长度。
prototype	数组对象的属性和方法。

3.2 Array对象的方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	数组元素通过指定的分隔符进行分隔并拼接，最后将结果放入到一个字符串中。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

四、数组元素的访问和存储

4.1 Array对象的元素访问

(1)、通过索引访问Array对象的数组元素

例如：var Element = ArrayObj[2]

注意：Array对象的索引是从0开始的。

(2)、通过Array对象输出所有数组元素

例如：document.write(ArrayObj)

4.2 Array对象的元素存储

(1)、定义Array对象时直接输入数组元素

例如：var ArrayObj = new Array(1,2,3)

这种方法只能在数组元素确定的情况下才可以使用。

(2)、通过索引为Array对象添加元素

例如：ArrayObj[2] = 100

这种方法可以指定Array对象中的任意元素赋值或是修改。

五、常见数组操作的方法

5.1 数组元素的增删改查

(1) 最强大的数组元素操作方法

splice()方法可以说是最强大的数组方法了。它可以从原始数组中添加、删除或替换元素。

语法格式：arrayObject.splice(index,howMony,item1,...,itemX)

- index：必选项。规定添加/删除项目的位置，如果是负数，规定从数组尾部开始算起的位置。

- howMony：必选项。删除的项目数量。如果设置为0，则不会删除项目。

- itemX：可选项。向数组添加的新项目。

var ArrayObj = [1,2,3,4,5]
console.log(ArrayObj.splice(2,0,"插入"))    //1,2,插入,3,4,5
console.log(ArrayObj.splice(1,1))          //1,插入,3,4,5
console.log(ArrayOb .splice(1,2,"修改"))   //1,修改,4,5

注意：该方法是对原始数组进行操作的，所以会改变原始数组。

(2) 数组元素的增加

a、concat()方法将其他数组连接到当前数组的尾端。

语法格式：ArrayObj.concat(array1,array2,...,arrayN)

- arrayN：必选项，连接的值或者数组对象。

var ArrayObj1 = [1,2,3]
var ArrayObj2 = [7,8,9]
var newArray = ArrayObj1.concat(4,5,6).concat(ArrayObj2 )
//newArray的最终结果为1,2,3,4,5,6,7,8,9

b、push()方法向数组末尾添加一个或多个元素，并返回添加后的数组长度。

语法格式：ArrayObj.push(Element1,Element2,...,ElementN)

- ElementN：添加的第N个元素

var ArrayObj = [1,2,3]
var Element = ArrayObj.push(4,5,6)
//Element的值为6，ArrayObj的数组元素为1，2，3，4，5，6

c、unshift()方法向数组开头添加一个或多个元素，返回添加后的数组长度。

语法格式：ArrayObj.unshift(Element1,Element2,...,ElementN)

- ElementN：添加的第N个元素

var ArrayObj = [1,2,3,4,5]
var Element = ArrayObj.unshift(4,5,6)
//Element的值为6，ArrayObj的数组元素为1，2，3，4，5，6

(3) 数组元素的删除

数组元素的删除可以通过索引来修改其元素的值为空，但是缺点就是依旧占用着位置。通过shift()方法和pop()方法可以删除掉头部和尾部的元素，并返回新的数组，从而解决元素占用的问题。

a、shift()方法删除数组中的第一个元素，并返回被删元素的值。

语法格式：ArrayObj.shift()

- ArrayObj：必选项，数组名称。

var ArrayObj = [1,2,3]
var Element = ArrayObj.shift()
//Element的值为1，ArrayObj的元素只有2和3

b、pop()方法删除数组中的最后一个元素，并返回被删元素的值。

语法格式：ArrayObj.pop()

var ArrayObj = [1,2,3]
var Element = ArrayObj.pop()
//Element的值为3，ArrayObj的元素只有1和2

(4) 、数组元素的查询

ECMAScript 5中添加了indexOf()和lastIndexOf()方法，用于从数组中搜索某个元素。indexOf()方法用于从前往后搜索整个数组，而lastIndexOf()方法则从后往前搜索整个数组。如果找到元素，则返回该元素的索引；如果没有找到，则返回-1（因为0是有效的索引）。

var ArrayObj = [1,"Laoye",2,"Laoye",3];
console.log(ArrayObj.indexOf("Laoye")) //索引为1
console.log(ArrayObj.lastIndexOf("Laoye")) //索引为3

5.2 数组元素的排列顺序

(1) 、颠倒数组中元素的顺序reverse()方法

语法格式：ArrayObj.reverse()

var ArrayObj = [1,2,3]
ArrayObj.reverse()
//ArrayObj新的数组元素为3，2，1

(2) 、对数组中的元素进行排序sort()方法

语法格式：ArrayObj.sort(sortby)

- sortby：可选项。规定排序的顺序，如果该方法没有使用参数，则默认按字母顺序对数组中的元素进行排序，并且所有大写字母排在所有小写字母的前面。如果想要按照其他标准进行排序，就需要提供比较函数。

//(1) 按照字母顺序，在原数组上进行排序，不生成副本var ArrayObj = ["H","X","M","A","m","a"]
ArrayObj.sort()
//ArrayObj新的数组元素为A,H,M,X,a,mvar ArrayObj = [100,1000,1,2,2000,200]
ArrayObj.sort()
//ArrayObj新的数组元素为1,100,1000,2,200,2000，这是因为函数会将数值转换为字符串，然后在根据字母顺序对数值的字符串进行排序。//(2) 对数字进行升序或降序排序需要手动写一个排序函数
//2.1 升序排列
function sortNumber(a,b){return a - b
}
var ArrayObj = [100,1000,1,2,2000,200]
console.log(ArrayObj.sort(sortNumber))
//ArrayObj新的数组元素为1,2,100,200,1000,2000//2.2 降序排列
function sortNumber(a,b){return b - a
}
var ArrayObj = [100,1000,1,2,2000,200]
console.log(ArrayObj.sort(sortNumber))
//ArrayObj新的数组元素为2000,1000,200,100,2,1

在上诉代码实例中，我们通过比较函数sortNumber()来对数值进行升降排序。原理是，通过比较函数含有的两个参数，它将计语两个参数的比较结果返回正数、负数或零。

函数通过比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数，例如a 和 b，其返回值如下：

- 若 a < b，排序时a应该出现在b的前面（升序），并且函数返回一个小于0的值。

- 若 a = b，则返回 0。

- 若 a > b，则返回一个大于 0 的值。

function sortNumber(a,b){if(a > b){return 1}else if(a < b){return -1}else{return 0}
}
var ArrayObj = [5,2,3,1,4];
ArrayObj.sort(sortNumber);

上述代码实际经过了如下几个步骤：

第一步：5和2进行比较，结果1，数组发生改变。新数组为：2,5,3,1,4

第二步：5和3进行比较，结果1，数组发生改变。新数组为：2,3,5,1,4

第三步：2和3进行比较，结果-1，数组未发生改变。新数组为：2,3,5,1,4

第四步：5和1进行比较，结果1，数组发生改变。新数组为：2,3,1,5,4

第五步：3和1进行比较，结果1，数组发生改变。新数组为：2,1,3,5,4

第六步：2和1进行比较，结果1，数组发生改变。数组为：1,2,3,5,4

第七步：5和4进行比较，结果1，数组发生改变。数组为：1,2,3,4,5

第八步：3和4进行比较，结果-1，数组未发生改变。数组为：1,2,3,4,5

第九步：5没有下一个兄弟元素，排序完毕

5.3 数组元素的截取

获取数组中的某段数组元素主要使用slice()方法实现，可从已有的数组中返回选定范围内的数组元素。

语法格式：ArrayObj.slice(start,end)

- start：必选项，规定从何处开始选取。如果是负数，规定从数组尾部开始算起的位置。也就是说，-1指的是最后一个元素。

- end：可选项，规定从何处结束选取。如果没有指定该参数，那么切分的数组包含从start到数组末尾的所有元素。如果这个参数是负数，那么它将从数组尾部开始算起。注意：end是结束位置，并不获取该位置上的值。

var ArrayObj = [1,2,3,4,5];
console.log(ArrayObj.slice(0,3))     //1，2，3
console.log(ArrayObj.slice(-0,3))    //1，2，3
console.log(ArrayObj.slice(-2,6))    //4.5
console.log(ArrayObj.slice(-1,2))    //""

从上面实例可以得出，截取的起点只能在终点的左侧，否则截取的结果为空。另外，倘若截取的终点超过了数组长度，那么截取的结果只能到数组的尾部。

5.4 数组对象转换为字符串对象

将数组转换成字符串主要通过toString、toLocaleString和join方法实现。

1、toString()方法将数组转换为字符串，数组中的各元素通过逗号分隔,并返回转换后的结果。

语法格式：ArrayObj.toString()

var ArrayObj = [1,2,3,4,5];
console.log(ArrayObj.toString()) //"1,2,3,4,5"
console.log(typeof ArrayObj)     //object

2、toLocaleString()方法将数组转换成本地字符串。该方法调用每个数组元素的toLocaleString方法，使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

语法格式：ArrayObj.toLocaleString()

var ArrayObj = [1,2,3,4,5];
console.log(ArrayObj.toLocaleString()) //"1,2,3,4,5"

3、join()方法将数组中的元素通过逗号（默认）或者指定的字符串进行分割最终合并为一个字符串。

语法格式：ArrayObj.join(“分隔符”)

注意：如果方法未提供参数，IE 7之前的版本默认使用字符串undefined，为了防止发生这种情况最好还是传递一个参数。

var ArrayObj = [1,2,3,4,5]var Element = ArrayObj.join("")//Element的值为"12345"

六、嵌套数组

数组是可以嵌套，可以将一个数组作为另外一个数组的元素。这样可以提供创建多维数组的能力，比如Java中的二维数组。通过嵌套数组，可以将数据更细化，数据的访问更加快捷和便捷。

例如，一个数组里面同时存储学生的姓名、学号和成绩，如果使用一维数组的话，将是下面的这种情况。

var Student = ["张三",220308,77,"李四",220309,73]

这种写法不但会使数据更加拥挤，而且每个学生还要占用3个索引，如果想要通过遍历处理学生时，那个值对应那个学生将会是一个非常头疼的问题。但是如果使用多维数组的话，不但结构清晰，而且还更容易处理，例如：

var Student = [["张三",220308,77],["李四",220309,73]]
console.log(Student[0][0])     //张三

如果想要循环遍历数组，则代码如下：

for(var i=0;i<Student.length;i++){for(var j=0;j<Student[i].length;j++){console.log(Student[i][j])}}//遍历结果为张三22030877李四22030973

七、判断一个对象是否为数组

使用typeof运算符不能判断一个对象是否为数组，因为typeof arr返回的是object而不是array。

1) arr instanceof Array 返回true

2) arr.constructor == Array 返回true

说明：使用instanceof和constructor判断数组类型的问题在于，它假定只有一个运行环境，如果网页中包含多个框架，那么实际上存在两个以上不同的全局执行环境，进而存在两个不同版本的Array构造函数，如果从一个框架向另一个框架传入一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数，也就是说，object.constructor == Array 会返回false。

原因：Array属于引用型数据，传递过程仅仅是引用地址的传递，每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的Array所对应的构造函数，是子页面的Array对象，父页面进行判断时使用的Array并不等于子页面的Array。

3）Array.isArray(arr)方法返回true

ES5新增了Array.isArray()方法，这个方法的目的是：最终确定一个值是否是数组，不管它是在哪个全局环境创建的。

4）Object.prototype.toString.call(arr) === "[object Array]" 返回true

这是最简单的判断一个对象是否为数组的方法。