Code Copied

图解javascript数组

1. js数组声明

js的数组声明即Array对象的创建。
Array对象的创建有三种方式。

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

image

1.1 声明默认数组

// 数组默认声明方式1
var arr1 = [];
// 数组默认声明方式2
var arr2 = new Array();

arr1[0] = 1;
arr1[1] = "str";

arr2[0] = 2;
arr2[1] = new Date(2014, 4, 8);

document.getElementById('result1').innerHTML = "数组arr1的长度:" + arr1.length;
document.getElementById('result2').innerHTML = "数组arr2的第二个元素是:" + arr2[1];

image

[]和Array对象声明方式是等同的,这两种方式推荐第1种,var arr1 = [];实际上就是创建js的Array对象。

javascript是弱类型的语言,数组元素中可以包含不同类型的属性,一个Array对象中可以包含int, string, date, Array, object等类型数据。

1.2 声明带长度的数组

//声明带长度的Array对象
var arr = new Array(10);
document.getElementById('result1').innerHTML = "数组arr的长度是:" + arr.length + ",第8个元素的值是:" + arr[7] + ",第11个元素的值是:" + arr[10];

document.getElementById('result2').innerHTML = "第8个元素的值是否为null:" + (arr[7] == null) + ",第11个元素的值是否为null:" + (arr[10] == null);

image

在声明默认长度的数组时,所有未初始化的元素都是null,超出数组下表的元素也是null。

1.3 声明并且直接初始化数组

// 方式1
var arr1 = [1, "str1", new Date(2014, 3, 8)];
// 方式2
var arr2 = new Array(2, "str2", new Date(2014, 3, 9));

var html1 = "";
var html2 = "";
for (var i = 0; i < arr1.length; i++) {
    html1 += "arr1第" + i + "个元素是:" + arr1[i] + "<br />";
}
for (i = 0; i < arr2.length; i++) {
    html2 += "arr2第" + i + "个元素是:" + arr2[i] + "<br />";
}

document.getElementById('result1').innerHTML = html1;
document.getElementById('result2').innerHTML = html2;

image

声明并直接初始化数组时也有两种方式,仍然推荐方式1,通过[]方式直接赋值。

1.4 二维数组和多维数组的声明

javascript在声明二维数组或多维数组时,并不能用如下方式去声明

var arr = [][2];
arr[0][0] = 1;
arr[0][1] = 2;
arr[1][0] = 3;
arr[1][1] = 4;

// 这里会报出一个js错误: arr is undefined.
document.getElementById('result').innerHTML = arr[1][1];

SNAGHTML248ab412

[]方式只能声明一维数组,声明多维数组时不能用[][]…这种方式。

var arr = [];
arr[0] = [];
arr[1] = [];
arr[0][0] = 1;
arr[0][1] = 2;
arr[1][0] = 3;
arr[1][1] = 4;

document.getElementById('result').innerHTML = "arr数组第一行第一列arr[1][1]的值是:" + arr[1][1];

或者显式地使用Array对象

var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[0][0] = 1;
arr[0][1] = 2;
arr[1][0] = 3;
arr[1][1] = 4;

document.getElementById('result').innerHTML = "arr数组第一行第一列arr[1][1]的值是:" + arr[1][1];

image

同理,声明多维数组的方式如下:

var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[0][0] = 1;
arr[0][1] = 2;
arr[1][0] = 3;
arr[1][1] = 4;

arr[2] = new Array();
arr[2][0] = new Array();
arr[2][1] = 5;
arr[2][0][0] = "这是一个字符串";

document.getElementById('result').innerHTML = "arr数组arr[2][0][0]的值是:" + arr[2][0][0];

image

从上面的代码中,可以得出一条结论:javascript在概念上是不存在多维数组的,但由于Array对象中能够存储任何类型的值,所以我们能够通过向Array数组中存放另一个Array对象来实现多维数组

2. js数组方法的使用

Array对象总共包含14个方法

image

2.1 contact()方法

contact()方法用于连接两个或多个数组,并返回一个新数组,该方法不会改变现有的数组。

语法:

arrayObject.concat(arrayX,arrayX,......,arrayX)
图解:
image
var arr1 = ["a","b","c"];
var arr2 = ["d","e","f"];
var arr3 = arr1.concat(arr2); // arr3现在是["a","b","c","d","e","f"]

var html = "";
for(var i = 0 ; i < arr3.length; i++){
    html += arr3[i] + ",";
}
html = html.substring(0, html.length - 1);
document.getElementById('result').innerHTML = html;

image

2.2 toString()方法

toString()方法将数组转换为字符串,并返回该字符串。
语法

arrayObject.toString()

图解:

image

2.1节中用toString()方法输出结果更为简便。

var arr1 = ["a","b","c"];
var arr2 = ["d","e","f"];
var arr3 = arr1.concat(arr2); // arr3现在是["a","b","c","d","e","f"]

document.getElementById('result').innerHTML = arr3.toString();

2.3 join()方法和字符串的split()方法

join()方法能够把数组的所有元素根据指定字符放入一个字符串。

语法:

arrayObject.join(separator)

separator参数可选,不指定separator时使用逗号作为分隔符。

split()方法是把字符串按照指定字符进行分割,并返回一个数组。split()方法虽然不是数组的方法,但它和数组有关,split()方法和join()方法是一对方法。

语法:

stringObject.split(separator,howmany)

separator参数是必须的,可以是字符串或正则表达式。如果separator是空字符串””,那么这个字符串的每个字符都会被分割。
howmany参数可选,该参数可指定返回数组的最大长度。

图解:

image

var str1 = "a,b,c,d,e,f";
var arr1 = str1.split(',', 3); // arr1是["a","b","c"]
var str2 = arr1.join(','); // str2是"a,b,c"

document.getElementById('result1').innerHTML = "arr数组的长度:" + arr1.length;
document.getElementById('result2').innerHTML = "str2的值是:" + str2;
document.getElementById('result3').innerHTML = "arr1数组的toString()方法和调用join(',')方法后输出的结果是一样的:" + arr1.toString();

image

在result3中调用的toString()方法返回的字符串和调用join(“,”)方法后返回的字符串是一样的。

2.4 push()方法和pop()方法

push()方法在数组的末尾添加一个或者多个元素,并返回新的长度。

语法:

arrayObject.push(newelement1,newelement2,....,newelementX)

pop()方法删除数组的末尾元素,并返回该元素。

语法:

arrayObject.pop()
图解:
image
var arr = ["a","b","c"];

arr.push("d","e","f"); // arr现在是["a","b","c","d","e","f"]

document.getElementById('result1').innerHTML = "调用push()方法后arr数组的元素是:" + arr.toString();

arr.pop(); // arr现在是["a","b","c","d","e"]

document.getElementById('result2').innerHTML = "调用pop()方法后arr数组的元素是:" + arr.toString();

image

2.5 shift()方法和unshift()方法

shift()方法删除数组的第一个元素,并返回该元素。

语法:

arrayObject.shift()

unshift()方法向数组的开头添加一个或多个元素,并返回新的长度。

语法:

arrayObject.unshift(newelement1,newelement2,....,newelementX)

unshift()方法必须至少有一个参数。

图解:

image

var arr = ["a", "b", "c"];
var ele = arr.shift(); // ele现在是a, arr现在是["b","c"]

document.getElementById('result1').innerHTML = "变量ele是:" + ele + "<br />调用shift()方法后arr数组的元素是:" + arr.toString();

arr.unshift("d", "e", "f"); // arr现在是["d","e","f",b","c"]

document.getElementById('result2').innerHTML = "调用unshift()方法后arr数组的元素是:" + arr.toString();

image

2.6 splice()方法

splice()方法可以向数组中删除或者添加元素,它返回的是被删除的元素,该元素也是数组。

语法:

arrayObject.splice(index,howmany,item1,.....,itemX)

index参数:删除元素的开始位置,howmany参数:删除元素的个数,如果是0就不删除。index和howmany是必须的。
item1,…….,itemX参数:可选参数,向数组添加新的元素。

根据语法可以看出splice()方法非常灵活。
当删除方法使用时,可以在任意位置删除元素;

image
当添加方法使用时,可以在任意位置插入元素(参数index等于数组长度时,相当于push()方法);

image
当删除并且添加方法使用时,相当于元素替换,可以在任意位置替换元素。

image

var arr = ["aaa","bbb","cccc","ddd","eee","fff"];

// 1. splice()方法之元素删除
var splicedArr = arr.splice(2,2); // arr现在是["aaa","bbb","eee","fff"]

document.getElementById('result1').innerHTML = "splice()方法之元素删除:arr数组的元素是:" + arr.toString() + "<br /> splicedArr数组的元素是:" + splicedArr;

// 2. splice()方法之元素添加
splicedArr = arr.splice(2,0,"ggg");

document.getElementById('result2').innerHTML = "splice()方法之元素添加:arr数组的元素是:" + arr.toString() + "<br /> splicedArr数组的元素是:" + splicedArr;

// 2. splice()方法之元素替换
splicedArr = arr.splice(2,1,"ccc","ddd");

document.getElementById('result3').innerHTML = "splice()方法之元素替换:arr数组的元素是:" + arr.toString() + "<br /> splicedArr数组的元素是:" + splicedArr;

image

2.7 slice()方法

slice()方法可以获取数组中选定的元素,相当于返回一个子数组。

语法:

arrayObject.slice(start,end)

start参数:必须参数,指定从何处开始选取,end参数:可选,指定从何处结束选取。如果指定end参数,则将选定从start一直到数组末尾的元素。

图解:

image

var arr = ["a","b","c","d","e","f"];

// 指定start和end
var slicedArr = arr.slice(2,4);

document.getElementById('result1').innerHTML = "调用slice()方法后arr数组的元素是:" + arr.toString() + "<br /> splicedArr数组的元素是:" + slicedArr;

// 指定start
slicedArr = arr.slice(2);

document.getElementById('result2').innerHTML = "调用slice()方法后arr数组的元素是:" + arr.toString() + "<br /> splicedArr数组的元素是:" + slicedArr;

image

2.8 reverse()方法

reverse()方法用于颠倒数组中元素的顺序。

语法:

arrayObject.reverse()

图解:

image

var arr = ["a", "b", "c", "d", "e", "f"];

//reverse()方法改变原来的数组后,并返回改变后的数组
var arr2 = arr.reverse(); // arr现在是["f","e","d","c","b","a"]

document.getElementById('result1').innerHTML = "调用reverse()方法后arr数组的元素是:" + arr.toString() + '<br /> arr2数组的元素是:' + arr2;

image

2.9 sort()方法

sort()方法用于对数组进行排序。

语法:

arrayObject.sort(sortby)

sortby是可选参数,当sort()方法无参数进行调用时,将使用字符的默认排序方式(ASCII码排序)。如果指定了sortby参数,则会按照sortby()方法进行排序。

var arr = ["b", "c", "B", "e", "D", "A", "f", "a", "d"];

// 升序排列
function sortAsc(v1, v2) {
    return v1 > v2;
}

// 降序排列
function sortDesc(v1, v2) {
    return v1 < v2;
}

document.getElementById('result1').innerHTML = "调用无参数sort()方法后arr数组的元素是:" + arr.sort();
document.getElementById('result2').innerHTML = "调用sortAsc方法后arr数组的元素是:" + arr.sort(sortAsc);
document.getElementById('result3').innerHTML = "调用sortDesc方法后arr数组的元素是:" + arr.sort(sortDesc);

image

3. 参考引用以及下载

javascript reference: http://javascript-reference.info/

w3c school: http://www.w3school.com.cn/jsref/jsref_obj_array.asp

本文ppt下载:http://blog.64cm.com/files/javascript/Javascript%20Array.pptx