JavaScript 语法：数组的定义及其常用属性与方法

作者:WangMin

格言:努力做好自己喜欢的每一件事

当一个程序需要用到多个数据的时候，这时我们就需要用到数组来将这些数据集合起来，以便后期调用。接下来就开始学习吧！！

数组的定义方法

1 、第一种数组声明方式：var 数组名 = [元素1, 元素2, .....]，这种定义方式比较常用。例如：

var arr=[1,2,3];
var arr1=['字符串',1,null];

arr -- 变量名

2、第二种数组声明方式：var 数组名 = new Array(元素1, 元素2, 元素3, ........)，这种方式是系统内部定义数组的一种方式。例如：

var arr=new Array(1,2,3);
var arr1=new Array('字符串',1,null);

这种方式还可以这样定义，如下：

var arr=new Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;
console.log(arr);//arr=new Array(1,2,3)

3、两种声明方式的区别

当两种定义方式只有一个值时，分别表达的含义如下：

• var arr=[10]；表示数组长度为1, 数组元素为10，也就是说这个数组只有 10这一个数据。
• var arr = new Array(10)；表示的是数组长度为10, 数组元素为空，取值取到的是undefined。

数组的三个要素、取值与赋值

1、数组的三个要素：

• 下标：用来记录每个元素的位置, 用来取值和赋值
  
  这里需要 注意：JavaScript中数据的下标从 0 开始
  
  

• 元素：数组中的数据

• 长度：数组中元素的个数。获取数组长度可以使用数组的一个属性 length，用法:数组名.length，它返回的是一个number类型的数据，如下：

var arr=[1,2,3];
arr.length;//3

2、数组的取值：

• 数组的取值是 数组名[下标]。

var arr=[1,2,3];
arr[0];// 1
arr[1];// 2
arr[2];// 3

• 如果下标在最大下标范围内, 就取到对应的元素值，如果超过最大下标, 取到的值是undefined。

var arr=[1,2,3];
arr[0];// 1
arr[1];// 2
arr[2];// 3
arr[3];// undefined

这里的数组长度为3，但下标是从 0 开始的，当我们要获取数组中的第4个数据时，它超过了我们定义的数组的长度，程序执行时无法找到第4个数据，会返回 undefined。

• 取数组第一个值，数组名[0]。取最后一个值，数组名[数组名.length - 1]。

var arr=[1,2,3,4];
arr[0];// 1
arr[arr.length-1];// 3

3、数组的赋值：

数组名[下标] = 值。

• 如果下标没有超过最大下标，是修改数组中的值。如下：

var arr=[1,2,3,4];
arr[0]=5;
console.log(arr[0]);//5

注意：原本 arr[0]=1 ，但是在下面 arr[0]=5 相当于给 arr[0] 重新赋值，所以 arr[0]就被重新赋值为 5，即arr[0]=5。

• 如果超过最大下标，向数组中添加元素。如下：

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

• 如果添加的元素下标不是连续的，它就是个不连续数组。如下：

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

数组打印出来如下：



从上面的例子我们只给数组添加了一个arr[5]=5，添加了一个元素获取长度却是6。其实arr[5]=5你是给第6个元素赋了值，前面没有赋值的元素为空，你写了arr[5]=5之后，数组就变成了上图所示：arr=[1,2,3,4,,5]。

数组的常用方法

1、join()：将数组的所有元素放入一个字符串，通过分隔符进行隔开，不会改变原来的数组。 如下：

var arr=[1,2,3,4];
var str=arr.join('-');
console.log(str);//"1-2-3-4"
console.log(typeof str);//string

注意：join()可以添加一个参数，这个参数表示自己想用的分隔符，默认为逗号，这里我用的是 '-'。

2、sort(): 对数组中的数据进行排序，默认为升序，也就是数据从小到大排列，并且返回排过序的新数组，会改变原来的数组。这个排序方法是针对字符的排序，所以当数组用到这个排序方法时，需要先将数组中的数据用toString()方法转为字符串，然后在进行比较。

情况一：当数组全部为数字时，需要将数字转换为字符串类型，再逐位比较，3是大于11的，因为首位3>1，所以3与11需要调换位置，以此这样比较下去，不要与Number型的数据排序混淆，例子如下：

var arr=[3,11,8,2,29];
console.log(arr.sort()); // [11, 2, 29, 3, 8]

注意：这里的比较是逐位比较，把字符串中的第一位依次比较，第一位较小的排在前面，较大的排在后面；当字符串中的第一位相同时，就比较字符串的第二位，第二位较小的排在前面，较大的排在后面，依次类推。

情况二：当数组中有字符串时，比较的时候，因为首位的英文字母通过 ASCII码 可以转为相应的数值，再根据数值比较。例子如下：

var arr=["hello","a","e",2,29];
console.log(arr.sort());//[2, 29, "a", "e", "hello"]

这里提到的 ASCII码 可以点击链接进去了解一下，以后再详细解释。

情况三：当数组中的值要进行真正数值的比较时，需要传参，sort(callback)，callback为回调函数，这个函数应该具有两个参数，比较这两个参数，然后返回一个用于说明这两个值的相对顺序的数字（a-b），例子如下：

var arr=[6,2,45,829];
function fn (a,b){
　　　　return a-b;
 }
console.log(arr.sort(fn));//[2, 6, 45, 829]

注意：比较函数可以按照自己的排序方式来自定义函数。

3、push():向数组末尾添加一个或多个元素，返回的是数组新的长度，会改变原来的数组。例子如下：

var arr=[6,2,45,829];
console.log(arr.push(8));// 5
console.log(arr.push(63,25));// 7

4、shift()：删除数组中的第一元素，并返回删除的数据，会改变原来的数组。例子如下：

var arr=[6,2,45,829];
console.log(arr.shift());// 6

5、unshift()：在数组的首位新增一个或多数据，并且返回新数组的长度，会改变原来的数组。例子如下：

var arr=[6,2,45,829];
console.log(arr.unshift(36));// 5

6、pop()：删除数组的最后一位，并且返回删除的数据，会改变原来的数组，例子如下：

var arr=[6,2,45,829];
console.log(arr.pop()); //829

7、slice()：截取指定位置的数组，并且返回截取的数组，不会改变原数组，这个方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。例子如下：

var arr=[6,2,45,829,56,48];
console.log(arr.slice(0,2)); //[6, 2]
console.log(arr.slice(3));//[829, 56, 48]
console.log(arr.slice(-4,-2));// [45, 829]
console.log(arr.slice(-3));//  [829, 56, 48]
console.log(arr.slice(1,-3));//   [2, 45]

8、splice()：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。这个方法接收多个参数splice(start,num,data1,data2,...)，strat表示从第几位开始；num表示删除的数量，如果后面还跟有删除数量相同的参数时，表示替换删除元素，例子如下：

var arr=[6,2,45,829,56,48];
console.log(arr.splice(3,3,"1","2","3"));// [829, 56, 48]
console.log(arr);//[6, 2, 45, "1", "2", "3"]

9、concat()：合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组。例子如下：

var arr=[6,2,45,829,56,48];
var arr1=["1","2","3"];
console.log(arr.concat(arr1));//[6, 2, 45, 829, 56, 48, "1", "2", "3"]

更多数组方法可查阅：JavaScrpt Array对象参考手册

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!