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>
时间： 2024-10-12 00:10:04