JavaScript基础——引用类型

对象在JavaScript中被称为引用类型的值，而且有一些内置的引用类型可以用来创建特定的对象，总结如下：

1）引用类型与传统面向对象程序设计中的类相似，但实现不同；

2）Object是一个基础类型，其他所有类型都从Object继承了基本的行为；

3）Array类型是一组值的有序列表，同时还提供了操作和转换这些值的功能；

4）Date类型提供了有关日期和时间的信息，包括当前日期和时间以及相关的计算功能；

5）RegExp类型是ECMAScript支持正则表达式的一个接口，提供了最基本的和一些高级的正则表达式功能。

函数实际上是Function类型的实例，因此函数也是对象；而这一点正是JavaScript最有特色的地方。

由于函数是对象，所以函数也拥有方法，可以用来增强其行为。

因为有了基本包装类型，所以JavaScript中的基本类型值可以被当作对象来访问。

三种基本包装类型分别是：Boolean、Number和String。以下是它们共同的特征：

1）每个包装类型都映射到同名的基本类型；

2）在读取模式下访问基本类型值时，就会创建对应的基本包装类型的一个对象，从而方便了数据操作；

3）操作基本类型值的语句已经执行完毕，就会立即销毁新创建的包装对象。

在所有代码执行之前，作用域中就已经存在两个内置对象：Global和Math。

在大多数ECMAScript实现中都不能直接访问Global对象；不过，Web浏览器实现了承担该角色的window对象。

全局变量和函数都是Global对象的属性。Math对象提供了属性和方法，用于辅助完成复杂的数学计算任务。

/* * 引用类型 */function cl(x){    console.log(x);}//5.1 Object类型//创建Object实例的方式有两种：var person=new Object();//使用new操作符后跟Object构造函数person.name="Jason";person.age=23;var person={    //使用对象字面量创建Object实例    name:"Jason",    age:29};//使用对象字面量向函数传递大量可选参数function displayInfo(args){    var output="";    if(typeof args.name=="string"){        output+="Name:"+args.name+"\n";    }    if(typeof args.age=="number"){        output+="Age:"+args.age+"\n";    }    cl(output);}displayInfo({name:"Jenny",age:25});displayInfo({name:"Danny"});//5.2 Array类型//创建数组的基本方式有两种：var colors=new Array(); //1.使用Array构造函数,new操作符可以省略var colors=new Array(20);   //可指定数组长度var colors=new Array("red","blue","green");var colors=["red","blue","green"];//2.使用数组字面量表示法// 通过length属性可以从数组的末尾移除项或向数组添加新项colors.length=2;cl(colors[2]);//=>undefinedcolors[colors.length]="black";//在位置2处添加blackcolors[colors.length]="brown";//在位置3处添加browncl(colors); //=>["red","blue","black","brown"]//5.2.1 检测数组 value instanceof Array;Array.isArray(value)//5.2.2 转换方法 toString()、valueOf()、join()var colors=['red','blue','green'];cl(colors.toString());  //=>返回字符串：red,blue,greencl(colors.valueOf());   //=>返回数组：['red','blue','green']cl(colors.join("||"));  //=>返回字符串：red||blue||green// 5.2.3栈方法 push()、pop()var colors=['red','blue','green'];var count=colors.push('black','white');//添加到数组尾部并返回修改后数组的长度cl(count);  //=>5var item=colors.pop();//返回最后一项cl(item);//=>'white'// 5.2.4队列方法 shift()、unshift()var colors=['red','blue','green'];var item=colors.shift();    //移除并返回数组第一项cl(item);   //=>'red'var count=colors.unshift('white','black');//添加到数组首端并返回修改后的数组长度cl(count);  //=>4// 5.2.5 重排序方法 reverse()和sort()var values=[1,2,3,4,5];cl(values.reverse());//=>[5,4,3,2,1] 反转数组var values=[0,1,5,10,15];cl(values.sort());  //=>[0,1,10,15,5] 按转换后字符串顺序排序// sort()方法可以接收一个比较函数作为参数，来指定排序规则function compare(value1,value2){    return value1-value2;}cl(values.sort(compare));//=>[0, 1, 5, 10, 15] 按数值大小排序//5.2.6 操作方法 concat()、slice()、splice()var colors=['red','green','blue'];var colors2=colors.concat('yellow',['black','brown']);//合并并返回新数组cl(colors2);    //=> ["red", "green", "blue", "yellow", "black", "brown"]var colors=['red','green','blue','yellow','purple'];var colors2=colors.slice(1);    //从位置1开始到末尾创建新数组var colors3=colors.slice(1,4);  //从位置1到3创建新数组cl(colors2);//=>['green','blue','yellow','purple']cl(colors3);//=>['green','blue','yellow']var colors=['red','green','blue'];var removed=colors.splice(0,1); //从位置0开始，删除一项并返回删除项cl(colors);//=>["green", "blue"]var colors=['red','green','blue'];var inserted=colors.splice(1,0,'yellow','orange');//从位置1开始，删除0项，插入指定项cl(inserted);//[] 返回的是空数组cl(colors); //=>["red", "yellow", "orange", "green", "blue"]var colors=['red','green','blue'];var replaced=colors.splice(1,1,'yellow','orange');//从位置1开始，删除1项，插入指定项cl(replaced);//=>['green'] 返回删除项数组cl(colors);//=>["red", "yellow", "orange", "blue"]//5.2.7 位置方法 indexOf()、lastIndexOf()var numbers=[1,2,3,4,5,4,3,2,1];cl(numbers.indexOf(4)); //=>3 从位置0开始查找4，返回索引位置3cl(numbers.indexOf(2,3));   //=>7 从位置3开始查找2，返回索引位置7cl(numbers.indexOf(8)); //=>-1，数组中找不到8，返回-1//5.2.8 迭代方法 every()、filter()、foreach()、map()、some()var numbers=[1,2,3,4,5,4,3,2,1];var everyResult=numbers.every(function(item,index,array){    return (item>2);});cl(everyResult);//=>falsevar someResult=numbers.some(function(item,index,array){    return (item>2);});cl(someResult);//=>truevar filterResult=numbers.filter(function(item,index,array){    return (item>2);});cl(filterResult);//=>[3, 4, 5, 4, 3]var mapResult=numbers.map(function(item,index,array){    return item*2;});cl(mapResult);//=>[2, 4, 6, 8, 10, 8, 6, 4, 2]var arr=[];numbers.forEach(function(item,index,array){    item=item*3;    arr.push(item);});cl(arr);//=> [3, 6, 9, 12, 15, 12, 9, 6, 3]//5.2.9 缩小方法 reduce()、reduceRight()var values=[1,2,3,4,5];var sum=values.reduce(function(prev,cur,index,array){   return prev+cur;});cl(sum);//=>15//5.3 Date类型var now=new Date();//本地当前时间var y2k=new Date(2000,0);//本地时间2000年1月1日午夜零时var allFives=new Date(2005,4,5,17,55,55);//本地时间2005年5月5日下午5:55:55var start=Date.now();var stop=Date.now();var result=stop-start;//间隔时间//5.3.1 Date继承的方法 toString()、toLocaleString()、valueOf()var date1=new Date(2015,0,1);var date2=new Date(2015,1,1);cl(date1<date2);//=>true//5.3.2 日期格式化方法//toDateString()、toTimeString()、toLocaleDateString()、toLocaleTimeString()、toUTCString()//5.3.3 日期/时间组件方法 查APIvar now=new Date();var year=now.getFullYear();//=>2015var month=now.getMonth()+1;//=>11  注：0代表1月var date=now.getDate();//=>10var day=now.getDay();//0表示星期日，6代表星期六switch(day){    case 0:day='日';break;    case 1:day='一';break;    case 2:day='二';break;    case 3:day='三';break;    case 4:day='四';break;    case 5:day='五';break;    default:day='六';}var hours=now.getHours();//=>0~23var minutes=now.getMinutes();//=>0~59var seconds=now.getSeconds();//=>0~59cl('当前时间：'+year+'年'+month+'月'+date+'日 星期'+day+' '+hours+':'+minutes+':'+seconds);//5.4 RegExp类型var pattern1=/[bc]at/i; //匹配第一个"bat"或"cat",不区分大小写var pattern2=new RegExp("[bc]at","i"); //与pattern1等价，只不过使用构造函数创建var regex=/cat/;cl(regex.test("catastrophe"));//=>truevar regex2=new RegExp('cat','g');cl(regex2.test("catastrophe"));//=>true// 5.4.1 RegExp实例属性 global、ignoreCase、lastIndex、multiline、sourcevar pattern1=/\[bc\]at/i;cl(pattern1.global);//=>falsevar pattern2=new RegExp("\\[bc\\]at","i");cl(pattern2.source); //=>"\[bc\]at"//5.4.2 RegExp实例方法 exec()、test()var text="mom and dad and baby";var pattern=/mom( and dad( and baby)?)?/gi;var matches=pattern.exec(text);//返回匹配项信息的数组，没有则返回nullcl(matches.index);//=>0 匹配项在数组中的位置cl(matches.input);//=>"mom and dad and baby" 应用正则表达式的字符串cl(matches[0]);//=>"mom and dad and baby"cl(matches[1]);//=>" and dad and baby"cl(matches[2]);//=>" and baby"var text="000-00-0000";var pattern=/\d{3}-\d{2}-\d{4}/;if(pattern.test(text)){    cl("该字符串符合规则");}var pattern=new RegExp("\\[bc\\]at","gi");cl(pattern.toString());//=>/\[bc\]at/gi 返回的是正则表达式的字面量//5.4.3 RegExp构造函数属性 input、lastMatch、lastParen、leftContext、multiline、rightContextvar text="this has been a short summer";var pattern=/(.)hort/g;if(pattern.test(text)){    cl(RegExp.input);       //=>"this has been a short summer"    cl(RegExp.lastMatch);   //=>"short"    cl(RegExp.lastParen);   //=>"s"    cl(RegExp.leftContext); //=>"this has been a "    cl(RegExp.multiline);   //=>false    cl(RegExp.rightContext);//=>" summer"}//5.4.4 模式的局限性//5.5 Function类型function sum1(num1,num2){    return num1+num2;};cl(sum1(10,10)); //=>20var anotherSum=sum1;cl(anotherSum(10,10));  //=>20//sum=null;cl(anotherSum(10,10));  //=>20 函数名仅仅是指向函数的指针//5.5.1 没有重载function addSomeNumber(num){    return num+100;}function addSomeNumber(num){    return num+200;}var result=addSomeNumber(100);//=>300//5.5.2 函数声明与函数表达式：理解先编译后执行//5.5.3 作为值的函数function callSomeFunction(someFunction,someArgument){    return someFunction(someArgument);}function getGreeting(name){    return "Hello,"+name;}var result2=callSomeFunction(getGreeting,"Messi");cl(result2);    //=>Hello,Messi//从一个函数中返回另一个函数function createComparisonFunction(propertyName){    return function(object1,object2){        var value1=object1[propertyName];        var value2=object2[propertyName];        return value1-value2;    }}var data=[{name:"Jason",age:26},{name:"Alex",age:24}];data.sort(createComparisonFunction("age"));cl(data[0].name);   //=>Alex 按年龄大小排序//5.5.4 函数内部属性//两个特殊对象 arguments和thisfunction factorial(num){    if(num<=1){        return 1;    }else{        return num*factorial(num-1);    }}//消除函数的执行与函数名的紧密耦合，可用arguments.calleefunction factorial(num){    if(num<=1){        return 1;    }else{//arguments.callee是一个指针，指向拥有arguments对象的函数        return num*arguments.callee(num-1);    }}var trueFactorial=factorial;factorial=function(){    return 0;}cl(trueFactorial(5));   //=>120cl(factorial(5));   //=>0//this对象：this引用的是函数据以执行的环境对象window.color="red";var o={color:"blue"};function sayColor(){    cl(this.color);}sayColor(); //=>redo.sayColor=sayColor; //给对象o添加sayColor方法o.sayColor();//=>blue//caller属性：保存着调用当前函数的引用function outer(){    inner();}function inner(){    //cl(inner.caller);    cl(arguments.callee.caller); //更松散的耦合}outer();    //=> outer()//5.5.5 函数属性和方法//length属性：函数希望接收的命名参数的个数//prototype保存引用类型的所有实例方法//apply()、call()：在特定的作用域中调用函数，即设置函数体内this对象的值function sum3(num1,num2){    return num1+num2;}function callSum1(num1,num2){    return sum3.apply(this,arguments);}function callSum2(num1,num2){    return sum3.apply(this,[num1,num2]);}cl(callSum1(10,10));//=>20cl(callSum2(10,10));//=>20//apply()接收的第二个参数必须是数组，而call()接收的参数必须逐个列举出来function callSum3(num1,num2){    return sum3.call(this,num1,num2);}cl(callSum3(10,10));//=>20//apply()和call()最大的作用是能扩充函数赖以运行的作用域,使对象不需要与方法有任何耦合关系window.color="red";var o={color:"blue"};function sayColor(){    cl(this.color);}sayColor(); //=>redsayColor.call(this);    //=>redsayColor.call(window);  //=>redsayColor.call(o);   //=>blue//bind():创建一个函数的实例，其this值会绑定到传给bind()函数的值var objectSayColor=sayColor.bind(o);objectSayColor();   //=>blue//5.6 基本包装类型 Boolean、Number和Stringvar s1="some text";var s2=s1.substring(2);cl(s2); //=>me text//转型函数与使用new调用基本包装类型的构造函数var value="25";var number=Number(value);//转型函数cl(typeof number);  //=>"number"var obj=new Number(value);cl(typeof obj); //=>"object"//5.6.1 Boolean类型 建议永远不要使用Boolean对象var falseObject=new Boolean(false);var result=falseObject && true;//布尔表达式中的所有对象都会被转换为truecl(result); //=>true// 5.6.2 Number类型var num=10;cl(num.toFixed(2)); //"10.00" 适合处理货币值cl(num.toExponential(1));//1.0e+1var num=99;cl(num.toPrecision(1)); //"1e+2"cl(num.toPrecision(2)); //"99"cl(num.toPrecision(3)); //"99.0"//5.6.3 String类型var stringValue="hello world";cl(stringValue.length); //=>11//5.6.3.1 字符方法 charAt()和charCodeAt()cl(stringValue.charAt(1));  //=>"e" 给定位置的字符cl(stringValue.charCodeAt(1));  //=>"101" 给定位置的字符编码cl(stringValue[1]); //=>"e"//5.6.3.2 字符串操作方法 concat()、slice()、substr()、substring()var stringValue="hello ";var result=stringValue.concat("world");var result=stringValue+"world"; //更常用"+"cl(result); //hello worldvar stringValue="hello world";cl(stringValue.slice(-3));  //=>"rld"cl(stringValue.substring(-3));  //=>"hello world"cl(stringValue.substr(-3)); //=>"rld"cl(stringValue.slice(3,-4));    //=>"lo w"cl(stringValue.substring(3,-4));    //=>"hel"cl(stringValue.substr(3,-4));   //""(空字符串)//5.6.3.3 字符串位置方法 indexOf()、lastIndexOf()var stringValue="Lorem ipsum dolor sit amet,consectetur adipisicing elit";var positions=[];var pos=stringValue.indexOf("e");while(pos>-1){    positions.push(pos);    pos=stringValue.indexOf("e",pos+1);}cl(positions.length);//=>5 字符串中有5个"e"//5.6.3.4 删除空格：trim()  还有trimLeft() trimRight()//5.6.3.5 字符串大小写 toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocalUpperCase()//5.6.3.6 字符串的模式匹配方法//match() 本质上与调用RegExp的exec()方法相同var text="cat,bat,sat,fat";var pattern=/.at/;var matches=text.match(pattern);//返回匹配项数组cl(matches[0]);//=>"cat"// search()方法var pos=text.search(pattern);//返回匹配项的索引位置cl(pos);    //=>0// replace()方法var result=text.replace("at","ond");//只替换第一个子字符串cl(result); //=>cond,bat,sat,fatvar result=text.replace(/at/g,"ond");//替换所有匹配的字符串cl(result); //=>cond,bond,sond,fond//split()方法var colorText="red,blue,green,yellow";var colors1=colorText.split(",");   //=> [red,blue,green,yellow]var colors2=colorText.split(",",2); //=> [red,blue]var colors3=colorText.split(/[^\,]+/);//=>["", ",", ",", ",", ""]//5.6.3.7 比较两个字符串 localeCompare()var stringValue="yellow";cl(stringValue.localeCompare("brick")); //=>1cl(stringValue.localeCompare("yellow"));  //=>0cl(stringValue.localeCompare("zoo"));   //=>-1//5.6.3.8 formCharCode()方法：接收一或多个字符编码，然后将它们转换成一个字符串cl(String.fromCharCode(104,101,108,108,111));   //=>"hello"//5.6.3.9 HTML方法 尽量不要使用，已经过时//5.7 单体内置对象 Global、Math//5.7.1 Global对象//5.7.1.1 URI编码方法 encodeURI()、encodeURIComponent()var uri="http://www.wrox.com/illegal value.htm#start";cl(encodeURI(uri));//=>http://www.wrox.com/illegal%20value.htm#startcl(encodeURIComponent(uri));//=>http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start//URI解码方法，与编码方法对应：decodeURI()、decodeURIComponent()//5.7.1.2 eval()方法，相当于一个完整的ECMAScript解析器，需谨慎使用//5.7.1.3 Global对象的属性//特殊值如undefined、NaN以及Infinity，原生引用类型的构造函数如Object、Function等都是Global对象的属性//5.7.1.4 window对象 在浏览器环境中，将Global作为window对象的一部分加以实现//5.7.2 Math对象//5.7.2.1 Math对象的属性,可查APIcl(Math.PI);//=>3.141592653589793//5.7.2.2 min()和max()方法var values=[1,2,3,4,5,6,7,8];var max=Math.max.apply(Math,values);cl(max);//5.7.2.3 舍入方法 ceil()、floor()、round()cl(Math.ceil(25.4));    //=>26 向上舍入cl(Math.floor(25.4));   //=>25  向下舍入cl(Math.round(25.4));   //=>25  四舍五入//5.7.2.4 随机数 random()var num=Math.floor(Math.random()*10+1); //=>1~10之间的随机数function selectForm(lowerValue,upperValue){    var choices=upperValue-lowerValue+1;    return Math.floor(Math.random()*choices+lowerValue);}var num=selectForm(2,10);//=>2~10之间的随机数var colors=["red","green","blue","yellow","black","purple","brown"];var color=colors[selectForm(0,colors.length-1)];cl(color);//=>colors数组中随机颜色//5.7.2.5其他方法，查看API