第三讲：引用类型
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>
示例代码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>
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>
示例代码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>
示例代码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>
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>
