开云(中国)Kaiyun·官方网站

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

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

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

语法

var myarray=new Array();

var myarray=[];

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

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

TIPS

创建的新数组是空数组，没有值，如输出，则显示undefined。
虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为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)

参数

item 必须。查找的元素。
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)

参数

start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-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()则把数组的最后一个元素删除掉并返回删除的元素。

参数

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

语法

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)

参数

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

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)

参数

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)

参数

index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
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)

参数

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