JavaScript Array原生类型的扩展

Posted on 2008-05-21 17:53 陈亮阅读(773) 评论(0) 收藏举报

Array原生类型
     长度可变数组对象数组对象
             --0开始
            --最大长度 2^32-1=4294967295
     构造Array对象
          --new Array():空数组
          --new Array(3):长度为3的数组
          --new Array(1,"hello"):构造有2个元素的数组
Array.prototype
          length属性:数组长度,可读写
          toString()/toLocaleString()方法:
               --返回逗号分割的字符串
               --两种的区别是得到每个对象字符串的方式
          concate([item1[,item2[,......]]])方法
               --返回一个新数组,保存了原数组所有元素和所有的参数
          push([item1[,item2[,......]]])方法
               --在数组尾添加一个或多个元素
          pop方法:
               --从数组尾去除并返回元素
          shift方法:
               --从数组头去除并返回元素
          unshift([item1[,item2[,......]]])方法:
               --在数组头添加一个或多个元素
          join(separator)方法:
               --返回以separator作为分隔符得到一个连续所有元素的字符串
          reverse()方法:
               --将数组内所有的元素逆转
          sort(conmpareFunction)方法
               --参数为一个方法,用于比较两个元素
               --省略了参数则直接使用<,==,>比较两个元素
          slice(start,end)方法:
               --返回新数组,不影响旧数组
               --包含从下标start开始到下标end-1的元素
               --如果省略end则包含从下标start开始至末尾的所有元素
               --如果参数为负数,则表示数组的"倒数"第几个下标(即下标为n+array.length)
               --如果start元素在end元素之后或相同,则返回空数组
          splice(start,deleteCount[,item1[,item2[,......]]])方法:
               --最灵活的方法,影响到当前数组
               --从下标start的元素开始,删除deleteCount个元素,并在当前start位置开始插入剩余元素
               --删除元素:splice(2,1)
               --插入元素:splice(2,0,"hello","world")
               --替换元素:splice(2,1,"hello","world")

<body>
2

<div id="message" />
3

function display(text)
5

{
6

document.getElementById("message").innerHTML += (text + "<br />");
7

}
8

Array.prototype.display = function()
11

{
12

display("Array的值: "+this);
13

}
14

var array = new Array(1,2,3,4,5,6);
16

display("new Array(1,2,3,4,5,6)");
17

array.display(); // [1,2,3,4,5,6]
18

display("<hr />");
19

//push([item1[,item2[,

]]])方法
21

// --在数组尾添加一个或多个元素
22

array.push(7,8);
23

display("array.push(7,8)")
24

array.display(); //[1,2,3,4,5,6,7,8]
25

display("<hr />");
26

//shift方法:
28

//从数组头去除并返回元素
29

array.shift();
30

display("array.shift() ");
31

array.display(); //[2,3,4,5,6,7,8]
32

display("<hr />");
33

//unshift([item1[,item2[,

]]])方法:
36

//在数组头添加一个或多个元素
37

array.unshift(9);
38

display("array.unshift(9)");
39

array.display(); // [9, 2, 3, 4, 5, 6, 7,8]
40

display("<hr />");
41

//pop方法:
43

//从数组尾去除并返回元素
44

array.pop();
45

display("a.pop();" );
46

array.display(); // [9, 2, 3, 4, 5, 6, 7]
47

display("<hr />");
48

//concate([item1[,item2[,

]]])方法
50

//返回一个新数组,保存了原数组所有元素和所有的参数
51

var out=array.concat(10,11,12);
52

display("array.concat(10,11,12);");
53

display("返回的结果:"+out);//[9, 2, 3, 4, 5, 6, 7,10,11,12]
54

array.display(); // [9, 2, 3, 4, 5, 6, 7]
55

display("<hr />");
56

//join(separator)方法:
59

//返回以separator作为分隔符得到一个连续所有元素的字符串
60

var out = array.join("|");
61

display("array.join(\"|\");");
62

display("返回的结果:"+out); //[9|2|3|4|5|6|7]
63

array.display();
64

display("<hr />");
65

//slice(start,end)方法:
68

// --返回新数组,不影响旧数组
69

// --包含从下标start开始到下标end-1的元素
70

// --如果省略end则包含从下标start开始至末尾的所有元素
71

// --如果参数为负数,则表示数组的"倒数"第几个下标(即下标为n+array.length)
72

// --如果start元素在end元素之后或相同,则返回空数组
73

out =array.slice(3,5);
75

display("array.slice(3,5);");
76

display("返回的结果:"+out); //[4,5]
77

out =array.slice(3,-1);
79

display("array.slice(3,-1);");
80

display("返回的结果:"+out); //[4,5,6]
81

array.display(); //[9, 2, 3, 4, 5, 6, 7]
83

display("<hr />");
84

//splice(start,deleteCount[,item1[,item2[,

]]])方法:
87

// --最灵活的方法,影响到当前数组
88

// --从下标start的元素开始,删除deleteCount个元素,并在当前start位置开始插入剩余元素
89

// --删除元素:splice(2,1)
90

// --插入元素:splice(2,0,"hello","world")
91

// --替换元素:splice(2,1,"hello","world")
92

//删除
94

array.splice(2,1);
95

display(" array.splice(2,1);");
96

array.display(); //[9, 2, 4, 5, 6, 7]
97

//替换
99

array.splice(2,1,99);
100

display("array.splice(2,1,99);");
101

array.display(); //[9,2,99,5,6,7]
102

103

//插入
104

array.splice(2,0,66,77,88);
105

display("array.splice(2,0,66,77,88);");
106

array.display(); //[9,2,66,77,88,99,5,6,7]
107

display("<hr />");
108

109

//reverse()方法:
110

// --将数组内所有的元素逆转
111

array.reverse();
112

display("array.reverse();");
113

array.display(); //[7,6,5,99,88,77,66,2,9]
114

display("<hr />");
115

116

//sort(conmpareFunction)方法
117

// --参数为一个方法,用于比较两个元素
118

// --省略了参数则直接使用<,==,>比较两个元素
119

120

array.sort();
121

display("array.sort();");
122

array.display(); //[2,5,6,66,7,77,88,9,99]
123

display("<hr />");
124

125

array.sort(function(x,y){return x-y;});
126

display("array.sort(function(x,y){return x-y;});");
127

array.display(); //[2,5,6,7,9,66,77,88,99]
128

display("<hr />");
129

130

array.sort(function(x,y){return y-x;});
131

display("array.sort(function(x,y){return y-x;});");
132

array.display(); //[99,88,77,66,9,7,6,5,2]
133

display("<hr />");
134

135

</script>
136

</body>

Array原生类型的扩展
     都是静态方法为了和其他的类库兼容
          Array.enqueue(array,item)
               --"入队列"操作,将item添加至array末尾.
          Array.dequeue(array)
               --"出队列操作",返回并删除array的第一个元素
          Array.add(array, item);
               --将item元素添加到array末尾
          Array.addRange(array,items)
               --将items数组中所有元素添加至array末尾.
          Array.contains(array,item)
               --如果array中包含item元素,者返回true,否则返回false.
          Array.clear(array)
               --清除array中的所有元素
          Array.insert(array,index,item)
               --将item插入至array中下标为index的位置
          Array.remove(array,item)
               --从array中移除item元素
          Array.removeAt(array,index)
               --从array总移除下标为index的元素
          Array.clone(array)
               --返回一个与array相同的新数组.创建 Array 对象的浅表副本。
          Array.parse(value)
               --将表示数组的JSON字符变为一个数组对象
          Array.indexOf(array,item,start)
               --获得item在array中的下标,从下标为start开始查找.如果array中没有item元素那么将返回-1
          Array.forEach(array,method,instance)
               --以instance为上下文this引用,将array中的每个元素依次作为参数,循环调用method方法

Array.forEach方法的使用

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

//构造一个数组

var a = ['a', 'b', 'c', 'd'];

var result = '';

function appendToString(element, index, array) {

result += element + this + index + ',';

}

//Array.forEach(array,method,instance)

// --以instance为上下文this引用,将array中的每个元素依次作为参数,循环调用method方法

//依次把数组a的4个元素传入appendToString函数内 .

// 第一次传入appendToString(element, index, array)的参数分别是 ('a',0,'|') result保存的值是 a|0,

// 第二次传入appendToString(element, index, array)的参数分别是 ('b',1,'|') result保存的值是 a|0,b|1,

// 第三次传入appendToString(element, index, array)的参数分别是 ('c',2,'|') result保存的值是 a|0,b|1,c|2,

// 第四次传入appendToString(element, index, array)的参数分别是 ('d',3,'|') result保存的值是 a|0,b|1,c|2,d|3,

Array.forEach(a, appendToString, '|');

//reuslt的值 a|0,b|1,c|2,d|3,

alert(result);

</script>

</div>

</form>

</body>

</html>

刷新页面返回顶部

公告

JavaScript Array原生类型的扩展