代码改变世界

javascript 高程二 第五章(引用类型)-上

2011-07-05 21:31  jalen  阅读(361)  评论(0编辑  收藏  举报
/*
	 * 引用类型是一种数据结构,用于将数据和功能组织一起,它也经常被称作类。这中称呼并不妥当。
	 * 引用类型有时候也会称为对象定义。因为他们是描述一类对象所具有的属性和方法。
	 * 对戏那个是某个特定引用类型的实例、
	 *
	 * Object类型
	 * 对象字面量定义对象时,该对象的最后一个属性,应没有逗号,否则会在IE6 和OPera中出现错误
	 * 用过对象字面量定义对象时,不用调用Object的构造函数(Firefox除外)
	*/
	var My = {
		name : "jalen",
		job : "F2E",
		skills : "xhtml1.1,css2.1,php,js",
		getSkills : function(){
			return this.skills;
		}
	}
	console.log(My.getSkills());	//xhtml1.1,css2.1,php,js
	console.log(My['job']);			//F2E 使用方括号语法时,应该将访问的属性以字符串的形式放在括号中,
	
	/*
	 * Array类型 中的每一项可以保存任何类型的数据。
	 * 使用数组字面量创建数组时,也不会调用Array构造函数(Firefox除外)
	 * 创建数组基本二种方式:1.使用Array构造函数创建
	 *						  2.使用数组字面量方括号表示,
	 * 如果知道数组要保存的数量,可预先给构造函数传递该数量 var arr = new Array(20); 每一项的初始值都是undefined
	 * 可传递数组中的包含项,var arr = new Array('key1','key2','key3');
	*/
		//var options = [1,2,];		//IE下有bug 会出现1,2,undefined,其他浏览器值有1,2两个值
		//var values = [,,,,,,];	//同上,不推荐这样创建。[undefined, undefined, undefined, undefined, undefined, undefined]

		var colors = ['red','blue','green'];
		alert(colors[0]);				//red
		colors[2] = 'black';			//修改第三项
		colors[3] = 'gray';				//新增第四项 通过索引值自动加1的长度
		console.log(colors)				//["red", "blue", "black", "gray"]
		console.log(colors.length);		//4

		//可通过length来新增和删除新项,looking following ths code:
		
		colors.length = 2;
		console.log(colors[2]);			//长度设置为2,会删除第三项和第四项。
		console.log(colors);			//["red", "blue"]
		
		colors.length = 5;				//如果将length设置大于数组项目的值,新增的每一项都会取得undefined
		console.log(colors);			//["red", "blue", undefined, undefined, undefined]
		
		//利用length属性,可方便的在数组末尾添加新项。
		
		var options = [1,2,3,4,'fuck','shit','nice','aggress'];
		console.log(options.length);			//8
		options[options.length]='action';		//末尾增加字符串action
		options[options.length]='lastString';	//末尾增加字符串lastString
		console.log(options.length);			//10
		console.log(options);	//[1, 2, 3, 4, "fuck", "shit", "nice", "aggress", "action", "lastString"]

		//数组的最后一项的索引值是length-1;
		var vals = ['aa','bb','cc'];
		vals[99] = '第一百个索引为99,length为100';
		console.log(vals.length);
		console.log(vals); //索引位置从3~98的每一项都是undefined

		/*
		 * 转换方法
		 * 所有对象都具有toLocaleString(),toString(),和valueOf()方法,调用数组的toString()和valueOf()会返回相同的值
		 * 即数组中的每个字符串形式拼接而成的一个以逗号分隔的字符串,实际上为创建这个字符串会调用数组中每一项的
		   toString()方法
		*/

		var arr = ['red','green','what?','astrophysics',null,undefined];
		console.log(arr.toString());	//red,green,what?,astrophysics
		console.log(arr.valueOf());		//["red", "green", "what?", "astrophysics"]
		console.log(arr);				//["red", "green", "what?", "astrophysics"]
		alert(arr);						//red,green,what?,astrophysics alert接受字符串参数,所以后台会调用toString()

		//toLocaleString

		var son1 = {
			toLocaleString : function(){
				return "ToLocale";
			},
			toString : function(){
				return "toString";
			}
		};
		var son2 = {
			toLocaleString : function(){
				return "ToL-Value";
			},
			toString :function(){
				return "toS-value";
			}
		}

		var father = [son1,son2];

		alert(father);					//toString,toS-Value  调用了数组每一项的toString()方法
		alert(father.toString());		//toString,toS-value  同上
		alert(father.toLocaleString());	//ToLocale,ToL-Value  调用了数组每一项的toLocaleString()方法

		//以上都以逗号分隔的字符串形式返回数组项,可使用join()使用不同的分隔符来构建字符串。

		var options = ['adult video','sex girl','some hand',3,'baby',null,undefined];
		console.log(options.join('|'));		//adult video|sex girl|some hand|3|baby||
		console.log(options.join('%'));		//adult video%sex girl%some hand%3%baby%%
		console.log(options.join('/'));		//adult video/sex girl/some hand/3/baby//
		console.log(options.join('\\'));	//adult video\sex girl\some hand\3\baby\\

		//notes:如果数组中的某一项的值是null或undefined,那么该值在join(),toString(),toLocaleString(),valueOf()中返回的结果中以空字符串表示。

		/*
		 * 栈方法 数组可以表现的和栈一样 
		 * 栈是一种LIFO(last-in-first-out)后进先出的数据结构,最新增加的项最早被移除。
		 * 栈中的插入叫推入,也可以理解为压入,移除叫做弹出。只发生在一个位置-栈的顶部
		 * 为数组提供了push()和pop()方法,来模拟类似栈的行为。
		 * push()方法可以接受任意数量的参数,逐个增加到数组末尾。返回修改后的数组长度。
		 * pop()方法从数组末尾移除最后一项,减少数组的length值,返回移除的项。
		*/

		var arr = [];
		var countArr = arr.push('red','green','gray');
		console.log(countArr);				// 3	修改后的数组长度。

		var countArr = arr.push('black','yellow');
		console.log(countArr);				// 5	修改后的数组长度。

		var item = arr.pop();				
		console.log(item);					// yellow 移除最后一项,返回移除的项
		console.log(arr);					//["red", "green", "gray", "black"] 
		
		arr.push('myGod');					//增加一项
		console.log(arr);					//["red", "green", "gray", "black","myGod"]
		arr[5] = 'lastObject';				// 增加一项
		console.log(arr.length);			// 6

		var lastItem = arr.pop();			//取得最后一项,并移除
		console.log(lastItem);				// lastObject

		/*
		 * 队列方法
		 * 栈数据的访问规则是LIFO,而队列数据结构的访问规则是FIFO(first-in-first-out)先进先出。
		 * 队列在列表的末端添加项,从列表的顶端移除项。
		 * shift()方法能够移除数组中的第一项并返回该项,同事数组的长度减去一。
		 * unshift()方法和shift用途相反,能够在数组的前端增加任意个数的项并返回新数组的长度。
		*/

		var arr = ['one','2','3','4'];
		var count = arr.push('li8n','li9n');
		console.log(count);					// 6

		var count = arr.push('li10n');
		console.log(count);					// 7

		var item = arr.shift();				//取得第一项,删除该项,并返回该项
		console.log(item);					// one

		var item2 = arr.pop();				//取得最后一项,并移除。
		console.log(item2);					// li10n

		console.log(arr.length);			// 5
		console.log(arr);					//["2", "3", "4", "li8n", "li9n"]

		//相反的方向模拟队列 先进后出。使用unshift()和pop()

		var ops = ['task1','task2','task3','extends'];
		var counts = ops.unshift('green','red','yellow');
		console.log(counts);				// 7

		var list = ops.pop();			
        console.log(list);					// extends
		var list = ops.pop();
		console.log(list);					// task3
		console.log(ops);					// ["green", "red", "yellow", "task1", "task2"]

		// ie对js的实现有个偏差,其中unshift()返回的是undefined,而不是新数组的长度。
		// notes: shift() 从数组的前端移除,并返回该项。pop() 从数组的末端移除,并返回该项。
		// unshift() 从数组的前端增加任意项,并返回新数组的长度。push() 从数组的末端增加任意项,并返回新数组的长度。

		var arr = [];
		var ops = [];
		for(var i = 0; i< 10 ; i++){
			arr.push(i);
			ops.unshift(i);
		}
		console.log(arr);					// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
		console.log(ops);					// [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

		/*
		 * 重排序方法
		 * reverse()方法会反转数组项的顺序,也就是逆向。
		 * sort()方法按照升序排列数组项,该方法会调用每个数组项的toString()方法,然后比较得到的字符串,
		   即使数组里每一项都是数值比较的也是转换后的字符串。
		 * 
		*/

		var values = [1,5,10,2,2,7,40,18];
		values.reverse();
		console.log(values);		// [18, 40, 7, 2, 2, 10, 5, 1]

		values.sort();
		console.log(values);		// [1, 10, 18, 2, 2, 40, 5, 7]

		//因为sort()方法 比较的是转换后的字符串,所以得不到想要的结果。但,sort()可接受一个比较函数作为参数,
		//以便我们指定那个值位于那个值前面。
		
		//compare函数原理:如果第一个参数应该位于第二个之前则返回一个负数(2-3),如果像个参数相等返回0(2-2);
		//如果第一个参数应该位于第二个之后则返回一个正数(3-2)。

		function compare(val1,val2){
			if(val1  < val2){
				return -1;
			}else if(val1 > val2){
				return 1;
			}else{
				return 0;
			}
		}
		values.sort(compare);
		console.log(values);		//	[1, 2, 2, 5, 7, 10, 18, 40]

		//以上代码是升序,可以改下代码为降序

		function descCompare(val1,val2){
			if(val1  < val2){
				return 1;
			}else if(val1 > val2){
				return -1;
			}else{
				return 0;
			}
		}
		values.sort(descCompare);
		console.log(values);		// [40, 18, 10, 7, 5, 2, 2, 1]

		var trac = ['roadmap','reslove','assign','viewtrac','tickets','newTickets'];
		trac.sort(compare);
		console.log(trac);			// ["assign", "newTickets", "reslove", "roadmap", "tickets", "viewtrac"]
		trac.sort(descCompare);
		console.log(trac);			// ["viewtrac", "tickets", "roadmap", "reslove", "newTickets", "assign"]

		//reverse()和sort()方法的返回值是经过排序之后的数组

		//对于数值类型或者其valueOf()方法会返回属性类型的对象类型。可使用更见的比较函数

		function numCompare(value1,value2){
				return value2-value1;
		}
		var arr = [1,2,4,55,22,44,13,19,8,100,0];
		arr.sort(numCompare);
		console.log(arr);		//[100, 55, 44, 22, 19, 13, 8, 4, 2, 1, 0]

		// return value1-value2, 升序;  return value2-value1,降序

		/*
		 * 操作方法
		 * concat()方法基础当前的数组中的所有项创建一个新数组。
		 * 这个方法会创建当前数组的一个副本,然后将接受到的参数添加到这个副本的末尾。然后返回新构建的数组。
		 * 在没有给concat()传递参数的情况下,他只是复制当前数组并返回副本。
		*/

		var colors = ['red','blue','green'];
		var copyColors = colors.concat('yellow',['black','brown']);
		console.log(copyColors);		//["red", "blue", "green", "yellow", "black", "brown"]
		console.log(colors);			//["red", "blue", "green"] 原数组保持不变


		// slice()方法 能够基于当前数组中的一或多项创建一个新数组,但不会影响原始数组
		// 接受二个参数,一个是起始位置,一个是结束位置。返回项的起始和结束位置。
		// 接受一个参数,返回的该参数的指定位置开始到当前数组末尾的所有项。

		var names = ['green','jalen','tom','peter','ryan','jason','gergon','huchao','monkey','cat'];
		var names1 = names.slice(2,8);
		console.log(names.length);			//10
		console.log(names1);				//["tom", "peter", "ryan", "jason", "gergon", "huchao"]
		var names2 = names.slice(5);
		console.log(names2);				//["jason", "gergon", "huchao", "monkey", "cat"]
		//如果参数中有一个负数,则用数组的长度加上该数来确定相应的位置。
		var names3 = names.slice(-3,-9);

		console.log(names3);				// [] 如果结束位置小于起始位置,则返回空数组

		var names4 = names.slice(-6,9);
		var names5 = names.slice(4,9);
		console.log(names4);				// ["ryan", "jason", "gergon", "huchao", "monkey"]
		console.log(names5)					// ["ryan", "jason", "gergon", "huchao", "monkey"]
		
		/*
		 * splice()方法 主要用途是向数组的中部插入项,splice始终都会返回一个数组,该数组中包含了原数组中删除的项
		   主要有三种方法。
		 * 删除——可以删除任意数量的项,接受2个参数,要删除的第一项的位置和删除项数。
		 * 插入(这词太邪恶了)——指定位置插入任意数量的项,接受3个参数:起始位置,要删除的项数,要插入的项(可以是多个)。
		 * 替换——向指定位置插入任意数量的项,并同时删除任意数量的项。接受三个参数:起始位置,要删除的项数,和要插入的任意数量的项
		*/

		var colors = ['red','green','yellow','blue'];
		var removed = colors.splice(0,3);
		console.log(removed);				// ["red", "green", "yellow"] 删除的三项
		console.log(colors);				// ["blue"] colors中的剩余项

		var removed1 = removed.splice(2,0,'gray','light','orange');
		console.log(removed1);				// [] 返回的删除项数为空
		console.log(removed);				// ["red", "green", "gray", "light", "orange", "yellow"] 从第2个位置插入三项
		var removed2 = removed.splice(3,2,'java','php','python');
		console.log(removed2);				// ["light", "orange"] 返回删除的2项
		console.log(removed);				// ["red", "green", "gray", "java", "php", "python", "yellow"]将删除的项数替换掉。

		//Notes:其实插入和替换都一样。替换只是把第2个参数给了具体的数字,作为要替换的项数

学习笔记,记录学习的过程。