第三讲：引用类型

时间：2015-02-18 15:14:06 阅读：157 评论：0 收藏：0 [点我收藏+]

标签：

3.0、学习目标

　　–掌握数组的概念、特性、常用方法

　　–掌握Object，学会使用对象

　　–了解其他引用类型对象

3.1、本讲包括的内容如下：

　　-数组

　　-Object

　　-其他引用类型

3.2、数组

　　•在ECMAScript中数组是非常常用的引用类型了。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。那么首先要说的就是数组也是一种对象。

　　•特点：

　　　　–“数组”即一组数据的集合。

　　　　–js数组更加类似java的容器。长度可变，元素类型也可以不同！

　　　　–数组长度随时可变！随时可以修改！（length属性）

　　•常用方法：

　　　　–push、pop

　　　　–shift、unshift

　　　　–splice、slice

　　　　–concat、join、sort、reverse等

　　•对于ECMAscript5这个版本的Array新特性补充：

　　　　–位置方法：indexOf lastIndexOf

　　　　–迭代方法：every filter forEach some map

　　　　–缩小方法：reduce reduceRight

示例代码1：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5         <title>Untitled Document</title>
  6         <script type=text/javascript charset=utf-8>
  7             
  8                 /**
  9                  *      数组本身也是对象
 10                  *      js中数组类似于java里的map容器 长度可随意改变 ,元素类型任意
 11                  * 
 12                  */
 13                 //  var arr = new Array();
 14                 //     var arr = [1,2,3,4,true ,‘abc‘ , new Date()] ;
 15                 //  alert(arr.length);
 16                 //  arr.length = 5 ;
 17                 //  alert(arr.toString()); // [object object]
 18                 
 19                 
 20                 /**
 21                  *  push 和 pop 方法
 22                  */
 23                 //var arr = [new Date(),false] ;
 24                 //var result = arr.push(1,2,true);    //push方法向数组中追加元素(返回值为新数组的长度)
 25                 //alert(arr);
 26                 //alert(result);
 27                 //var obj = arr.pop();        //从数组的尾部移除一个元素(返回值为移除的元素)
 28                 //alert(arr);
 29                 //alert(obj);
 30                 
 31                 /**
 32                  * shift 和 unshift 方法
 33                  */
 34                 //var  arr = [1,2,3, true , new Date()];
 35                 //var r1 = arr.shift();            //从头部移除一个元素(返回移除的元素)
 36                 //alert(arr);
 37                 //alert(r1);
 38                 //var r2 = arr.unshift(10,false);    //从头部插入多个元素(返回新数组的长度)
 39                 //alert(arr);
 40                 //alert(r2);
 41                 
 42                 /**
 43                  * splice、slice 方法 (截取的方法)
 44                  * splice方法操作数组本身
 45                  * slice方法不操作数组本身
 46                  * 
 47                  */
 48                 
 49                 // splice: 第一个参数 :起始位置
 50                 //             第二个参数 ：表示截取的个数
 51                 //             第三个参数以后:表示追加的新元素个数
 52                 
 53                 //var arr = [1,2,3,4,5];
 54                 //arr.splice(1,2,3,4,5);    // 134545
 55                 //alert(arr);
 56                 
 57                 // slice：//返回截取的内容 //截取范围 (左闭右开区间)
 58                 //var arr = [1,2,3,4,5];
 59                 //var reuslt = arr.slice(2,4);   
 60                 //alert(reuslt);        //3,4     
 61                 
 62                 //操作数组的方法: concat join
 63                 
 64                 //var arr1 = [1,2,3];
 65                 //var arr2 = [true , 4 , 5];
 66                 
 67                 //var reuslt = arr1.concat(arr2);        //合并粘连的操作(不操作数组本身)
 68                 //alert(reuslt);
 69                 
 70                 //var result = arr1.join(‘-‘);        //在每个元素之间加入内容(不操作数组本身)
 71                 //alert(arr1); 
 72                 //alert(result);
 73                 
 74                 /**
 75                  * sort排序 
 76                  * reverse倒叙
 77                  */
 78                 var arr1 = [5,2,1,4,3];
 79                 var arr2 = [10,2,4,1,7];
 80                 
 81                 //arr1.sort();
 82                 //arr1.reverse();        //倒叙排序 是按照集合的位置进行倒叙的
 83                 //alert(arr1);
 84                 //arr2.sort();
 85                 //alert(arr2);        // 1 10 2 4 7
 86                 
 87                 function compare(value1 , value2){
 88                     if(value1 < value2){
 89                         return -1 ;
 90                     } else if(value1 > value2){
 91                         return 1 ; 
 92                     } else {
 93                         return 0 ;
 94                     }
 95                 }
 96                 arr2.sort(compare);
 97                 alert(arr2);
 98                 
 99                 
100                 
101         </script>
102     </head>
103     <body>
104     </body>
105 </html>

View Code

示例代码2：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Untitled Document</title>
 6         
 7         <script type=text/javascript charset=utf-8>
 8                         
 9                         var arr = [1,2,3,4,5,4,3,2,1];
10                         
11                         /*
12                         //新加位置的方法: indexOf lastIndexOf
13                         // 1个参数的时候表示传值 返回索引位置(index从0开始)
14                         //var index = arr.indexOf(4);
15                         // 2个参数的时候 第一个参数表示起始位置 第二个参数还是值 
16                         //var index = arr.indexOf(4,4);
17                         //alert(index);
18                         //他们查找数组比较的时候 ‘===‘    
19                         // lastIndexOf 
20                         //var index = arr.lastIndexOf(2);
21                         //alert(index);
22                         */
23                         
24                         //5个新加迭代的方法
25                         //every :对于数组每一个元素进行一个函数的运行 如果都返回true 最后则返回true 如果有一个返回false最后结果则返回false
26                         /*
27                         var result = arr.every(function(item , index , array){
28                             return item > 2 ;
29                         });
30                         alert(result);
31                         */    
32                         //filter :对于数组的每一个元素进行一个函数的运行 给定的函数去执行 把过滤后的结果返回 
33                         /*
34                         var result = arr.filter(function(item , index , array){
35                             return item > 2 ;
36                         });
37                         alert(result);
38                         */
39                         //forEach :循环数组每一项的值 并执行一个方法 
40                         /*
41                         arr.forEach(function(item, index, array){
42                                 alert(item);
43                         });
44                         */
45                         //map 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕后 把新的结果返回
46                         /*
47                         var result = arr.map(function(item, index, array){
48                             return item*2;
49                         });
50                         alert(result);                        
51                          */
52                         //some :对于数组每一个元素进行一个函数的运行 如果有一项返回true 最后则返回true 如果每一项都返回false最后结果则返回false
53                         /*
54                         var result = arr.some(function(item, index, array){
55                             return item >=5 ;
56                         });
57                         alert(result);
58                         */
59                         
60                         //reduce    reduceRight
61                         //变量的起始位置不同  
62                         //前一个值 , 当前值 , 索引位置 , array
63                         /*
64                         var result = arr.reduce(function(prev , cur , index , array){
65                                     return prev + cur ;
66                         });
67                         alert(result);
68                         */
69                         /*
70                         var result = arr.reduceRight(function(prev , cur , index , array){
71                                     return prev + cur ;
72                         });
73                         alert(result);
74                         */                        
75         </script>
76     </head>
77     <body>
78     </body>
79 </html>

View Code

3.3、Object

　　•我们目前为止大多数引用类型都是Object类型的实例，Object也是ECMAScript中使用最多的一种类型（就像java.lang.Object一样，Object类型是所有它的实例的基础）。

　　　　–Object类型的创建方式、使用

　　　　–对于Object类型应用for in 枚举循环

　　•Object每个实例都会具有下列属性和方法：

　　　　–Constructor: 保存着用于创建当前对象的函数。（构造函数）

　　　　–hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在。

　　　　–isPrototypeOf(Object): 用于检查传入的对象是否是另外一个对象的原型。

　　　　–propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。

　　　　–toLocaleString()：返回对象的字符串表示。该字符串与执行环境的地区对应.

　　　　–toString():返回对象的字符串表示。

　　　　–valueOf():返回对象的字符串、数值或布尔表示。

示例代码1：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Untitled Document</title>
 6         <script type=text/javascript charset=utf-8>
 7                 
 8                 //Object 所有类的基础类 
 9                 
10                 //var obj = new Object();
11                 var obj = {} ;        // 实例化对象
12                 // 给对象设置属性
13                 obj.name = ‘张3‘;
14                 obj.age  = 20 ; 
15                 //obj.sex  = ‘男‘;
16                 obj["birthday"] = ‘1980-08-07‘;
17                 obj.say = function(){
18                     alert(‘hello world!‘);                    
19                 }
20                 
21                 // 访问对象的属性或方法
22                 //alert(obj.name);
23                 //alert(obj.age);
24                 //obj.say();
25                 
26                 // delete 操作符 删除对象的属性或方法的
27                 /*
28                 delete obj.age ;
29                 delete obj.say ;
30                 
31                 alert(obj.name);
32                 alert(obj.age);
33                 alert(obj.sex);
34                 obj.say();
35                 */
36                 
37                 // 如何去变量一个js对象  for in 语句式
38                 /*
39                 for(var attribute in obj) {
40                     alert(attribute +" : "+ obj[attribute]);
41                 }
42                 */
43                 //Constructor保存对象的创建函数
44                 //alert(obj.constructor);
45                 //var arr = [] ; 
46                 //alert(arr.constructor);
47                 
48                 //hasOwnProperty(propertyName) 用于检测给定属性在对象中是否存在
49                 //alert(obj.hasOwnProperty(‘sex‘));
50                 
51                 //isPrototypeOf(Object) 检测原型 
52                 
53                 //检测给定的属性是否能被for in 所枚举出来 
54                 //alert(obj.propertyIsEnumerable(‘say‘));
55             
56             
57             
58         </script>
59     </head>
60     <body>
61     </body>
62 </html>

View Code

示例代码2：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Untitled Document</title>
 6         <script type=text/javascript charset=utf-8>
 7             
 8             
 9                 function Map(){
10                     
11                     // private 
12                     var obj = {} ;// 空的对象容器,承装键值对
13                     
14                     // put 方法
15                     this.put = function(key , value){
16                             obj[key] = value ;        // 把键值对绑定到obj对象上
17                     }
18                     
19                     // size 方法 获得map容器的个数
20                     this.size = function(){
21                             var count = 0 ; 
22                             for(var attr in obj){
23                                 count++;
24                             }
25                             return count ; 
26                     }
27                     
28                     // get 方法 根据key 取得value
29                     this.get = function(key){
30                         if(obj[key] || obj[key] === 0 || obj[key] === false){
31                             return obj[key];
32                         } else {
33                             return null;
34                         }
35                     }
36                     
37                     //remove 删除方法
38                     this.remove = function(key){
39                         if(obj[key] || obj[key] === 0 || obj[key] === false){
40                             delete obj[key];                        
41                         }
42                     }
43                     
44                     // eachMap 变量map容器的方法
45                     this.eachMap = function(fn){
46                             for(var attr in obj){
47                                 fn(attr, obj[attr]);
48                             }
49                     }
50                     
51                     
52                 }
53             
54                 //模拟java里的Map
55                 var m = new  Map();
56                 m.put(‘01‘ , ‘abc‘);
57                 m.put(‘02‘ , false) ;
58                 m.put(‘03‘ , true);
59                 m.put(‘04‘ , new Date());
60                 
61                 //alert(m.size());
62                 
63                 //alert(m.get(‘02‘));
64                 //m.remove(‘03‘);
65                 //alert(m.get(‘03‘));
66                 
67                 m.eachMap(function(key , value){
68                      alert(key +" ："+ value);
69                 });
70             
71         </script>
72     </head>
73     <body>
74     </body>
75 </html>

View Code

示例代码3：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Untitled Document</title>
 6         
 7         <script type=text/javascript charset=utf-8>
 8             
 9             
10             var arr = [2,1,2,10,2,3,5,5,1,10,13];    //object
11             
12             
13             // js对象的特性 : 在js对象中 key 是永远不会重复的 
14             /*
15             var obj = new Object();
16             obj.name = ‘z3‘;
17             obj.age = 20 ;
18             //alert(obj.name);
19             obj.name = ‘w5‘;
20             alert(obj.name);
21             */
22             
23             // 1 把数组转成一个js的对象
24             // 2 把数组中的值,变成js对象当中的key
25             // 3 把这个对象 再还原成数组
26             
27             // 把数组转成对象
28             function toObject(arr){
29                 var obj = {} ; // 私有的对象
30                 var j ;
31                 for(var i=0 , j= arr.length ; i<j; i++){
32                         obj[arr[i]] = true ;
33                 }
34                 return obj ;
35             }
36             
37             // 把这个对象转成数组
38             function keys(obj){
39                 var arr = [] ; // 私有对象
40                 for(var attr in obj){
41                     if(obj.hasOwnProperty(attr)){        //YUI底层代码
42                         arr.push(attr);
43                     }
44                 }
45                 return arr ;
46             }
47             
48             //综合的方法 去掉数组中的重复项
49             function uniq(newarr){
50                 return keys(toObject(newarr));
51             }
52             
53             alert(uniq(arr));
54             
55             
56             
57 
58             
59             
60             
61             
62             
63             
64             
65         </script>
66     </head>
67     <body>
68     </body>
69 </html>

View Code

3.4、其他引用类型

　　•单体对象：

　　　　–Global对象（全局）这个对象不存在，无形的对象

　　　　•其内部定义了一些方法和属性：encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、 unescape

　　　　–Math对象

　　　　•内置的Math对象可以用来处理各种数学运算

　　　　•可以直接调用的方法：Math.数学函数（参数）

　　　　•求随机数方法：Math.random(),产生 [0，1) 范围一个任意数

　　•Date对象

　　　　–获取当前时间的一系列详细方法

　　•基本包装类型：Boolean、String、Number和java的用法类似

　　•Function类型、RegExp类型（以后学习）

示例代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Untitled Document</title>
 6         <script type=text/javascript charset=utf-8>
 7             
 8             /*
 9             //Global 全局的 终极的 兜底的对象  (不存在的)
10             
11             var uri = ‘http://www.bjsxt.com cn‘;
12             //encodeURI 、encodeURIComponent
13             var str1 =     encodeURI(uri); // %20            // (url : // 不会进行编码)
14             var str2 =     encodeURIComponent(uri);        //常用的方法 (任何不标准的文字都会进行编码)
15             
16             //alert(str1);
17             //alert(str2);
18             //decodeURI、decodeURIComponent
19             //alert(decodeURI(str1));
20             //alert(decodeURIComponent(str2));
21             */
22             
23             /*
24             //eval(string) 方法 无形的javascript解析器
25             
26             //var str1 = "var a = 10 ; var b = 20;";
27             //eval(str1);
28             //alert(a+b);
29             // 数组字符串 直接使用: eval(stringarr);
30             // {name:z3 , age:20}
31             var strobj = "{name:‘z3‘ , age:20}";
32             var obj = eval(‘(‘+strobj+‘)‘);
33             alert(obj.name);
34             */
35             
36             
37             //parseInt parseFloat 
38             /*
39             var num1 = parseInt(‘20‘);
40             var num2 = parseFloat(‘20.5‘);
41             alert(num1 + ‘   ‘ + num2);
42             alert(typeof num1);
43             alert(typeof num2);
44             */
45             
46             //escape unescape   URI
47             
48             /*
49             var str1 = ‘尚学堂‘;
50             var str2 = escape(str1);
51             alert(str2);
52             var str3 = unescape(str2);
53             alert(str3);
54             */
55             /*
56             //isNaN // 如果不是number类型 true  是number类型 false
57             
58             var num1 = ‘10‘;
59             var num2 = ‘abcd10e‘;
60             alert(isNaN(num2));
61             
62             //在js里面 只有NaN 自己不等于自己本身的
63             
64             if(NaN == NaN){
65                 alert(‘相等‘);
66             } else {
67                 alert(‘不等‘)
68             }
69             */
70             
71             /*
72             //Date 日期类型
73             
74             var date = new Date();
75             //alert(date);
76             
77             var year = date.getFullYear();
78             var month = date.getMonth() + 1 ; 
79             var da   = date.getDate();
80             var day  = date.getDay();
81             var hours = date.getHours();
82             var min   = date.getMinutes();
83             var sc    = date.getSeconds();
84             document.write(‘今天是‘ + year + ‘年‘ + month + ‘月 ‘ + da+ ‘日‘ + hours +‘:‘ + min +‘:‘ +sc+ ‘星期‘ +day );
85             document.write(‘\n‘ + date.getTime());
86             */
87             
88             
89             
90         </script>
91     </head>
92     <body>
93     </body>
94 </html>

View Code

第三讲：引用类型

标签：

原文地址：http://www.cnblogs.com/pangcq2015/p/4295766.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行