JavaScript 数组相关知识

不论是JavaScript亦或是PHP,我们所使用的变量都是用来存储数据,一般情况下一个变量只能存储一个内容。假设你想存储20名学生的学号,那么就需要20个变量来存储,如果需要存储更多数据,那就会变的更麻烦。所以这里我们用数组就能很好的解决问题,一个数组变量可以存放多个数据。

数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的

使用数组之前首先要创建,而且需要把数组本身赋至一个变量。

语法

var myarray=new Array();

var myarray=[];

我们创建数组的同时,还可以为数组指定长度,长度可任意指定。

var myarray= new Array(6); //创建数组,存储6个数据。

TIPS

  1. 创建的新数组是空数组,没有值,如输出,则显示undefined。
  2. 虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。

下面创建一个数组,用于存储常用的网站系统

var myarray=new Array(); //创建一个新的空数组
myarray[0]='WordPress'; //存储第1个网站系统
myarray[1]='Thinkphp'; //存储第2个网站系统
myarray[2]='Dedecms'; //存储第3个网站系统
myarray[3]='EmpireCMS'; //存储第4个网站系统

TIPS

数组每个值有一个索引号,从0开始。

我们还可以用简单的方法创建上面的数组和赋值:

第一种方法:

var myarray = new Array('WordPress','Thinkphp','Dedecms','EmpireCMS');//创建数组同时赋值

第二种方法:

var myarray = ['WordPress','Thinkphp','Dedecms','EmpireCMS'];//直接输入一个数组(称 “字面量数组”)

TIPS

数组存储的数据可以是任何类型(数字、字符、布尔值等)

数组属性length

如果我们想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。

语法:

myarray.length; //获得数组myarray的长度

TIPS

因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组长度</title>
<script>
    var mynum=new Array(80,90,78,68);
    document.write("数组的长度是:"+ mynum.length ); //返回值:数组的长度是:4
</script>
</head>
<body>
</body>
</html>

indexOf

可以通过indexOf()来搜索一个指定的元素的位置

语法

array.indexOf(item,start)

参数

  1. item 必须。查找的元素。
  2. start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length – 1。如省略该参数,则将从字符串的首字符开始检索。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>indexOf</title>
<script>
    var arr = [10, 20, '30', 'xyz'];
    document.write(arr.indexOf(10)); //0
    document.write(arr.indexOf(20)); //1
    document.write(arr.indexOf('30')); //2
    document.write(arr.indexOf('xyz')); //3
</script>
</head>
</body>
</html>

slice

slice()就是对应String的substring()版本,它截取数组的部分元素,然后返回一个新的组数组

语法

array.slice(start,end)

参数

  1. start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
  2. end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slice</title>
<script>
    var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    document.write(arr.slice(0, 4)); // 从索引0开始,到索引4结束,但不包括索引4: ['A', 'B', 'C', 'D']
    document.write(arr.slice(3)); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
</script>
<body>
</body>
</head>
</html>

TIPS

slice()的起止参数包括开始索引,不包括结束索引。

如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个数组

push和pop

push()向数组的末尾添加若干元素,并返回新的长度。

语法

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

pop()则把数组的最后一个元素删除掉并返回删除的元素。

参数

  1. 必需。要添加到数组的元素。

语法

array.pop()

实例

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>push和pop</title>
<script>
    var arr = [1, 2];
    document.write(arr.push(3, 4)); // 返回Array新的长度: 4
    document.write(arr.pop()); // pop()返回4
    document.write(arr); // [1, 2, 3]
    //空数组继续pop不会报错,而是返回undefined
</script>
</head>
<body>
</body>
</html>

unshift和shift

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

语法

array.unshift(item1,item2, ..., itemX)

参数

  1. 可选。向数组起始位置添加一个或者多个元素。

shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

语法

array.shift()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unshift和shift</title>
<script>
    var arr = [1, 2];
    document.write(arr.unshift(3, 4)); // 返回Array新的长度: 4
    document.write(arr); // [3, 4, 1, 2]
    document.write(arr.shift()); // 3
    document.write(arr); // [4, 1, 2]
    // 空数组继续shift不会报错,而是返回undefined
</script>
</head>
<body>
</body>
</html>

sort

sort()可以对当前数组进行排序,它会直接修改当前数组的元素位置,直接调用时,按照默认顺序排序

语法

array.sort(sortfunction)

参数

  1. sortfunction 可选。规定排序顺序。必须是函数。

TIPS

排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

注意:当数字是按字母顺序排列时”40″将排在”5″前面。

使用数字排序,你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sort</title>
<script>
    var arr = ['B', 'C', 'A'];
    arr.sort();
    document.write(arr); //A, B, C

    var myarr = new Array("80","16","50","6","100","1");
    function sortNum(a,b) {
        return b - a; //降序排列,a-b是升序
    }
    document.write(myarr.sort(sortNum)); //100,80,50,16,6,1
</script>
</head>
<body>
</body>
</html>

reverse

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

语法

array.reverse()

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>reverse</title>
<script>
    var arr = ['B', 'C', 'A'];
    arr.reverse()
    document.write(arr); //A,C,B
</script>
</head>
<body>
</body>
</html>

splice

splice()方法是修改数组的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素

语法

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

参数

  1. index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
  2. howmany 必需。规定应该删除多少元素。必须是数字,但可以是 “0”。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
  3. item1, …, itemX 可选。要添加到数组的新元素

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>splice</title>
<script>
    var arr = ['WordPress', 'Dedecms', 'Ecms', 'Thinkphp'];
    // 从索引1开始删除2个元素,然后再添加两个元素:
    document.write(arr.splice(1, 2, 'Opencart', 'Shopify'));
    document.write(arr); // ['WordPress', 'Opencart', 'Shopify', 'Thinkphp']
    // 只删除,不添加:
    arr.splice(1, 2); // ['Dedecms', 'Ecms']
    arr; // ['WordPress', 'Thinkphp']
    // 只添加,不删除:
    arr.splice(1, 0, 'Opencart', 'Shopify'); // 返回[],因为没有删除任何元素
    arr; // ['WordPress', 'Dedecms', 'Opencart', 'Shopify', 'Thinkphp']
</script>
</head>
<body>
</body>
</html>

concat

concat()方法把当前的数组和另一个数组连接起来,并返回一个新的数组

语法

array.concat(arrayX,arrayX,......,arrayX)

参数

  1. arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>concat</title>
<script>
    var arr = ['A', 'B', 'C'];
    var added = arr.concat([1, 2, 3]);
    document.write(added); // ['A', 'B', 'C', 1, 2, 3]
</script>
</head>
<body>
</body>
</html>

TIPS

请注意,concat()方法并没有修改当前数组,而是返回了一个新的数组。实际上,concat()方法可以接收任意个元素和数组,并且自动把数组拆开,然后全部添加到新的数组里

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join()方法是一个非常实用的方法,它把当前数组的每个元素都用指定的分隔符连接起来,然后返回连接后的字符串。

语法

array.join(separator)

参数

separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>join</title>
<script>
	var arr = ['A', 'B', 'C', 1, 2, 3];
	document.write(arr.join('-')); // 'A-B-C-1-2-3'
</script>
</head>
<body>
</body>
</html>

TIPS

如果数组的元素不是字符串,将自动转换为字符串后再连接

多维数组

多维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子。

二维数组的表示: myarray[ ][ ]

二维数组的定义方法

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]