《JavaScript高级程序设计 第3版》-学习笔记-3
P84-P137页，
这一章看的真久，这个月事太多了。有些内容在代码注释里没提出来了
1、JS强大的数组类型，元素类型任意，提供了非常多的操作数组的方法和属性
1 /* 2 数组类型 3 */ 4 5 //stack 6 var colors = ['red','blue']; 7 colors.push('brown'); 8 console.log(colors); 9 console.log(colors.length); 10 var item = colors.pop(); 11 console.log(item); 12 console.log(colors); 13 14 //队列 15 colors = []; 16 var count = colors.push('red','green'); 17 console.log(count); 18 console.log(colors); 19 count = colors.push('black'); 20 console.log(count); 21 item = colors.shift(); 22 console.log(item); 23 console.log(colors); 24 console.log(colors.length); 25 26 //pop 与 unshift搭配可以实现反向队列 27 28 29 30 31 //重新排序 32 var values = [1,2,3,4,5,6]; 33 values.reverse(); 34 console.log(values); 35 36 values = [0,1,5,10,15]; 37 values.sort();//sort方法默认进行字符串比较，即调用toString方法比较结果 38 console.log(values); 39 40 //为了实现自定义排序，可以这样 41 function comp(var1,var2){ 42 return var1 - var2; 43 } 44 45 values.sort(comp); 46 console.log(values); 47 48 /* 49 数组操作方法 50 */ 51 52 53 //数组复制合并 54 var colors1 = ['red','green','blue']; 55 var colors2 = colors1.concat('yellow',['black','brown']); 56 console.log(colors1); 57 console.log(colors2); 58 59 60 //slice方法，这个方法的操作不会影响原来的数组 61 colors = ['red','green','blue','yellow','purple']; 62 colors2 = colors.slice(1); 63 var colors3 = colors.slice(1,4); 64 console.log(colors2); 65 console.log(colors3); 66 67 //splice方法，最强的数组操作方法 68 //删除 69 colors.splice(0,2);//要删除的第一项的位置和要删除的项数 70 console.log(colors); 71 //插入 72 colors.splice(2,0,'red','green');//起始位置、0（要删除的项）和要插入的项-‘red’，‘green’ 73 console.log(colors); 74 //替换 75 colors.splice(2,1,'white');//起始位置，删除项数，插入项 76 console.log(colors); 77 //这个方法的返回值是被删除的数组，如果没有删除，返回一个空数组 78 79 console.log(colors.indexOf('green')); 80 console.log(colors.lastIndexOf('green')); 81 82 //数组迭代方法 83 //every，都返回ture才返回true 84 numbers = [1,2,3,4,5,4,3,2,1]; 85 var everyRes = numbers.every(function(val,index,arr){ 86 return (val > 2); 87 }); 88 console.log(everyRes); 89 90 //some，只要有一项为true，则结果为true 91 var someRes = numbers.some(function(val,index,arr){ 92 return val > 2; 93 }); 94 console.log(someRes); 95 96 //filter，返回该函数会返回true的项构成的数组 97 var filterRes = numbers.filter(function(val ,index,arr){ 98 return val > 2; 99 }); 100 console.log(filterRes); 101 102 //map，返回函数调用结果形成的数组; 103 var mapRes = numbers.map(function(val,index,arr){ 104 return val * 2; 105 }); 106 console.log(mapRes); 107 108 //forEach，这个方法没有返回值 109 numbers.forEach(function(val,index,arr){ 110 //执行操作 111 });
2、Date类型
1 /* 2 Date类型 3 */ 4 5 var now = new Date(); 6 console.log(now); 7 8 var someDate = new Date(Date.parse('May 25,2005'));//与new Date('May 25,2005)等价 9 console.log(someDate); 10 11 var y2k = new Date(Date.UTC(2012,5,8));//2012年6月8日 12 console.log(y2k); 13 14 var start = Date.now(); 15 start = +new Date();//这样是为不支持Date.now的浏览器兼容，把Date对象转换成字符串 16 17 //日期类支持大于小于操作符 18 console.log(now > start); 19 20 //日期格式化 21 var date = new Date(); 22 23 console.log(date.toLocaleDateString());//2015-03-29; 24 console.log(date.getFullYear()+'...'+(date.getMonth()+1)+'...'+date.getDate());
3、强大的正则类型
1 /* 2 RegExp类型 3 */ 4 5 var exp = /^\d+$/ig;//必须转义(\)的元字符 ( [ { \ ^ $ | ) ? * + . ] } 6 console.log(exp.test('12324234a')); 7 8 var expEmail = /^\w+@\w+\.\w+\.?\w*$/i; 9 console.log(expEmail.test('lvyahui8@126.com')); 10 console.log(expEmail.test('lvyahui8@126.com.')); 11 console.log(expEmail.test('lvyahui8@126.com.cn')); 12 console.log(expEmail.test('lvyahui8@126.co-')); 13 var expEmail2 = new RegExp('^\\w+@\\w+\\.\\w+\\.?\\w*$','i'); 14 console.log(expEmail2.test('lvyahui8@126.com')); 15 console.log(expEmail2.test('lvyahui8@126.com.')); 16 console.log(expEmail2.test('lvyahui8@126.com.cn')); 17 console.log(expEmail2.test('lvyahui8@126.co-')); 18 19 //exec方法 20 var text = 'mom and dad and baby'; 21 var pattern = /mom( and dad( and baby)?)?/gi; 22 var matches = pattern.exec(text); 23 console.log(matches.index); 24 console.log(matches.input); 25 console.log(matches[0]); 26 console.log(matches[1]); 27 console.log(matches[2]); 28 29 text = 'cat, bat, sat, fat'; 30 pattern = /.at/; 31 matches = pattern.exec(text); 32 console.log(matches.index); 33 console.log(matches[0]); 34 console.log(pattern.lastIndex); 35 36 matches = pattern.exec(text); 37 console.log(matches.index); 38 console.log(matches[0]); 39 console.log(pattern.lastIndex); 40 41 pattern = /.at/g; 42 matches = pattern.exec(text); 43 console.log(matches.index); 44 console.log(matches[0]); 45 console.log(pattern.lastIndex); 46 47 matches = pattern.exec(text); 48 console.log(matches.index); 49 console.log(matches[0]); 50 console.log(pattern.lastIndex);
4、函数类型，函数类型也是对象，也有属性和方法
1 /* 2 Function 类型 3 */ 4 5 function sum(num1,num2){ 6 return num1+num2; 7 } 8 var sum2 = function(num1,num2){ 9 return num1+num2; 10 }; 11 12 var otherName = sum2; 13 console.log(otherName(3,2)); 14 15 //函数并不能重载的根本原因在于函数名只是个指针，重新申明一个函数只是修改了函数指针的值 16 function factorial(num){ 17 if(num<=1){ 18 return 1; 19 } 20 else{ 21 return num * arguments.callee(num-1);//将函数的执行过程与函数名解耦 22 } 23 } 24 /* 25 window.color = 'red'; 26 var o = {color:'blue'}; 27 function sayColor(){ 28 console.log(this.color); 29 } 30 sayColor();//'red' 当在网页的全局作用域调用函数时，t在该函数里，this对象指向window 31 o.sayColor = sayColor; 32 o.sayColor();//'blue' 33 //函数名只是个指针，全局sayCOlor和o.sayCOlor指向的是同一个函数 34 */ 35 function sayName(name){} 36 function cp(a,b){} 37 function pt(){} 38 console.log(sayName.length);//1 39 console.log(cp.length);//2 40 console.log(pt.length);//0 41 42 43 /* 44 函数属性和方法 45 */ 46 47 //属性，length，prototype 48 49 function person(name,age){ 50 this.name = name; 51 this.age = age; 52 function getName(){ 53 return this.name; 54 } 55 } 56 57 console.log(person.length);//1 58 console.log(person.prototype);//{} 59 60 61 //function apply，call 62 function callSum1(num1,num2){ 63 return sum.apply(this,arguments); 64 } 65 66 function callSum2(num1,num2){ 67 return sum.apply(this,[num1,num2]); 68 } 69 70 function callSum3(num1,num2){ 71 return sum.call(this,num1,num2); 72 } 73 74 console.log(callSum1(10,10));//因为在全局作用域中调用，所以 75 console.log(callSum2(10,10)); 76 console.log(callSum3(10,10)); 77 78 var o = {color:'blue'}; 79 80 function sayColor(){ 81 console.log(this.color); 82 } 83 84 //这里输出为undefined 是因为当前运行环境不在浏览器，也就是不在window的作用域，this指针并不指向window 85 console.log(this); //{} 86 sayColor(); //red 87 sayColor.call(this); //red 88 sayColor.call(window); //red 89 90 sayColor.call(o); //blue 91 92 //bind方法 93 var window = {color:'red'}; 94 var o = {color:'blue'}; 95 96 function sayColor(){ 97 console.log(this.color); 98 } 99 100 var objSayColor = sayColor.bind(o); 101 objSayColor();
5、基本包装类型
1 /* 2 基本包装类型 3 */ 4 5 //String 6 var s1 = 'come.text'; 7 var s2 = s1.substring(2); 8 //使用new关键字创建的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类的对象， 9 //则只存在于一行代码的执行瞬间，然后立刻被销毁，所以不能动态为基本类型值添加属性和方法 10 s1 = 'come text'; 11 s1.color = 'red'; 12 console.log(s1.color);//undefined 13 14 var obj = new Object('some test'); 15 console.log(obj instanceof String);//true 16 17 //注意，使用new 调用构造函数与直接调用同名的转型函数是不一样的 18 var value = '25'; 19 var number = Number(value); 20 console.log(typeof number);//number 21 22 var obj = new Number(value); 23 console.log(typeof obj);//object 24 25 26 27 28 //--Boolean 29 var falseObj = new Boolean(false); 30 var result = falseObj && true; 31 32 console.log(result); 33 34 var falseValue = false; 35 result = falseValue && true; 36 console.log(result); 37 38 console.log(typeof falseObj);//object 39 console.log(typeof falseValue); 40 console.log(falseObj instanceof Boolean); 41 console.log(falseValue instanceof Boolean); 42 43 //--Number 44 var numberObject = new Number(10); 45 console.log(numberObject.toString());//10 46 console.log(numberObject.toString(2));//1010 47 console.log(numberObject.toString(8));//12 48 console.log(numberObject.toString(16));//a 49 console.log(numberObject.toFixed(2)); 50 //如果长度过长，以最大接近小数位进行舍入 51 console.log((new Number(10.0047)).toFixed(2));//10.00 52 console.log((new Number(10.005)).toFixed(2));//10.01 53 //String 54 var strValue = "我是lvyahui"; 55 console.log(strValue.length); //即使是双字节字符也算一个字符 56 57 console.log('String Start'); 58 //String 类型 59 //模式匹配 60 //match方法，找到第一个匹配的 61 var text = "hello world,lvyahui"; 62 var pattern = /.l/; 63 var matches = text.match(pattern); 64 console.log(matches.index);//1 65 matches.every(function(i){ 66 console.log(i); 67 }); 68 console.log(pattern.lastIndex);//0 69 70 //search 方法，返回第一个匹配字符串的位置 71 var pos = text.search(/l/); 72 console.log(pos); 73 //replace 方法，两个参数，如果第一个参数是字符串的话，只会替换第一个字符。要想替换所有的字符串，必须使用正则 74 text = "hello,this is 15$,you &mi" 75 var repRes = text.replace(/l/g,"w"); 76 console.log(repRes); 77 repRes = text.replace(/(l)/g,"w $1"); 78 console.log(repRes); 79 80 function htmlEscpae(text){ 81 return text.replace(/[<>"&]/g,function(match,pos,originalText){ 82 switch (match) { 83 case "<": 84 return "<"; 85 break; 86 case ">": 87 return ">"; 88 break; 89 case "&": 90 return "&"; 91 break; 92 case "\"": 93 return """; 94 break; 95 } 96 }); 97 } 98 99 console.log(htmlEscpae("<p class=\"greeting\">hello world!</p>")); 100 101 var colorText = "red,blur,,green,yellow"; 102 var c1 = colorText.split(","); 103 var c2 = colorText.split(",",2);//指定数组的大小 104 var c3 = colorText.split(/[^\,]/); 105 console.log(c1); 106 console.log(c2); 107 console.log(c3);
在所有JS代码执行之前就存在两个内置对象Global和Math对象，不能直接访问Global对象，但Web浏览器中window对象承担了该角色
