java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）
2018-08-13 16:24
831 查看
1、Arrays数组对象的创建方式
方式一:
var 变量名=new Array(); //创建一个长度为0的数组.
方式二:
var 变量名=new Array(长度); //创建一个指定长度的数组对象
方式三:
var 变量名=new Array("元素1","元素2".......);//注意：这里是“小括号”，而不是“花括号”。和java不一样
方式四:
var 变量名=["元素1","元素2","元素3"........];//注意：这里是“中括号”，而不是“花括号”。和java不一样
实例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 </head>
7 <script type="text/javascript">
8 var arr=new Array(3);
9 arr[1001]=10;
10 document.write(arr.length+"</br>");//返回值：1002
11 var arr1=new Array("狗娃","狗剩","铁蛋");
12 document.write(arr1.length+"</br>");//返回值：3
13 var arr2=["张三","李四","王五","赵六"];
14 document.write(arr2.length);//返回值：4
15 </script>
16 <body>
17 </body>
18 </html>
1.1、Arrays数组的常用方法
sort()：对当前数组进行排序，并返回已经进行了排序的此Array对象。不会创建新对象，是在指定数组中直接进行排序。
reverse()：对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。不会创建新对象，是在指定数组中直接进行排序。
push( [item1 [item2 [. . . [itemN ]]]] )：将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。
pop()：移除数组中的最后一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
shift()：移除数组中的第一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])：将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])：移除从start位置开始指定的deleteCount个元素，并插入新元素，从而修改concat([item1[, item2[, . . . [, itemN]]]])。
返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。
要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。
如果某一项为数组，那么添加其内容到 array1 的末尾。
如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。
slice(start, [end])：返回一个包含了指定的部分元素的数组。将返回索引大于等于start且小于end的一段。原数组不变。
join(separator)：把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。如果数组中有元素没有定义或者为 null，将其作为空字符串处理。
实例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 </head>
7 <script type="text/javascript">
8 //正序排序
9 var arr=[5,1,2,10,3];
10 arr.sort(sortNumber);//不要sortNumber，的结果：1,10,2,3,5, 原因：他是一位一位的比较(字符串)。
11 for(var index in arr){
12 document.write(arr[index]+",");//返回值：1,2,3,5,10,
13 }
14 function sortNumber(num1,num2){//作用：保证该数组以整数的形式，按大小排序
15 return num1-num2;
16 }
17
18 //倒序排序
19 document.write("</br>");
20 arr.reverse();
21 for(var index in arr){
22 document.write(arr[index]+",");//返回值：10,5,3,2,1,
23 }
24
25 //添加、加载进去
26 document.write("</br>");
27 arr.push(100);
28 for(var index in arr){
29 document.write(arr[index]+",");//返回值：10,5,3,2,1,100,
30 }
31
32 //删除最后一个元素
33 document.write("</br>");
34 document.write(arr.length);//返回值：6
35 document.write("</br>");
36 document.write("删除最后一个元素并返回该元素："+arr.pop());//返回值：100
37 //删除第一个元素
38 document.write("</br>");
39 document.write("删除第一个元素并返回该元素："+arr.shift());//返回值：10
40
41 //经过上面多步操作之后，该数组中留下来的元素
42 document.write("</br>");
43 for(var index in arr){
44 document.write(arr[index]+",");//返回值：5,3,2,1,
45 }
46
47 //将指定的元素插入到数组的首位(下标为0的位置)
48 document.write("</br>");
49 arr.unshift(99);
50 for(var index in arr){
51 document.write(arr[index]+",");//返回值：99,5,3,2,1,
52 }
53
54 //移除从下标为0开始，并往后数两个(即：删除了两个元素99和5)；并且向删除指定元素的位置插入85,70,80这三个元素。
55 document.write("</br>");
56 arr.splice(0,2,85,70,80);
57 for(var index in arr){
58 document.write(arr[index]+",");//返回值：85,70,80,3,2,1,
59 }
60
61 //返回指定下标区间内的元素
62 document.write("</br>");
63 var subArr=arr.slice(1,4);
64 document.write("返回指定下标区间内的元素："+subArr+"</br>");//返回值：70,80,3
65
66 //用指定的分隔符分隔开的元素
67 document.write("用指定的分隔符分隔开的元素："+subArr.join("_")+"</br>");//返回值：70_80_3
68 </script>
69 <body>
70 </body>
71 </html>
实例结果图
1.2、例子
JavaScript文件（ArrayTool.js）
1 // JavaScript Document
2 /*
3 需求:自定义一个js文件,在js文件中定义一个数组工具对象,
4 该工具对象要找到一个最大值的方法,与找到元素对应下标的索引方法
5 */
6 var tool=new ArrayTool();
7 function ArrayTool(){
8 //找最大值
9 this.getMax=function(arr){
10 var max=arr[0];
11 for(var i=0;i<arr.length;i++){
12 if(arr[i]>max){
13 max=arr[i];
14 }
15
16 }
17 return max;
18 }
19
20 //找到对应元素的下标
21 this.searchEls=function(arr,target){
22 for(var i=0;i<arr.length;i++){
23 if(arr[i]==target){
24 return i;
25 }
26 }
27 return -1;
28 }
29 }
HTML文件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <script src="ArrayTool.js"></script> 6 <script type="text/javascript"> 7 var arr=[12,7,99,80,90]; 8 var max=tool.getMax(arr); 9 document.write(max+"</br>"); 10 var index=tool.searchEls(arr,90); 11 document.write(index+"</br>") 12 </script> 13 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 14 <title>无标题文档</title> 15 </head> 16 17 <body> 18 </body> 19 </html>
结果图
2、prototype原型属性
2.1、prototype要注意的细节
1.prototype是函数(function)必备的一个属性(即:保留属性)，只要有function，就一定有prototype属性
2.prototype的值是一个对象
3.可以任意修改函数的prototype属性值
4.一个对象会自动拥有prototype的所有成员属性和方法
2.2、例子
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 </head>
7 <script type="text/javascript">
8 //Array里面的原型模型的getMax方法=function()。
9 Array.prototype.getMax=function(){//找最大值
10 var max=this[0];
11 for(var index=1;index<this.length;index++){
12 if(this[index]>max){
13 max=this[index];
14 }
15 }
16 return max;
17 }
18
19 //找指定数值的下标
20 Array.prototype.searchEls=function(target){
21 for(var index=0;index<this.length;index++){
22 if(this[index]==target){
23 return index;
24 }
25 }
26 return -1;
27 }
28
29 var index=new Array(12,18,21,99,88);
30 var max=index.getMax();
31 document.write("最大值："+max+"</br>");//返回值：99
32
33 var index1=index.searchEls(18);
34 document.write("下标值："+index1+"</br>");//返回值：1
35
36 var arr=[13,22,80,70,60,90];
37 var max1=arr.getMax();
38 document.write("最大值："+max1+"</br>");//返回值：90
39 </script>
40 <body>
41 </body>
42 </html>
结果图
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/9469009.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java基础65 JavaScript中的Window对象（网页知识）
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
- java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）
- java基础知识（三）对象数组
- java基础62 JavaScript中的函数（网页知识）
- 【JavaScript基础知识】——对象和数组
- java基础67 JavaScript通过关系找节点、添加附件（网页知识）
- javascript中面向对象中对象，属性，原型链和一些扩展知识总结
- javascript学习篇之对象和数组创建等基础知识代码笔记
- java基础59 JavaScript运算符与控制流程语句（网页知识）
- java基础61 JavaScript循环语句之while、do...while、for及for...in循环（网页知识）
- JavaScript为对象原型prototype添加属性的两种方式
- java 对象转换成Javascript prototype数组
- java基础69 JavaScript产生伪验证码（网页知识）
- java基础68 JavaScript城市联动框（网页知识）
- javascript 对象及原型继承有关的属性：constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等
- Java基础知识_day09_(对象数组,ArrayList集合)
- javascript基础：prototype原型（属性、方法）
- 详解JavaScript基础知识（JSON、Function对象、原型、引用类型）
- 对象数组、集合、链表(java基础知识十五)