【学习笔记五】 - js引用类型 《js高程》1-5章的代码笔记
2017-09-09 01:04
639 查看
写在前面:
如题,这篇是看《js高程》这本书的代码部分的笔记,大部分是第5章的引用类型,还有一些其他的js基础知识。
笔记是按个人情况来记的,所以可能不是全部的内容都特别详细,不过都是很基础的东西,毕竟新手。
反正个人而言,全部看完这些代码弄懂,感觉收获还是很大的。
直接上代码,详见代码注释。
下面的代码是在sublime text3上编辑在nodejs上运行过的。
【Object】
这部分掺杂一些看视频《网易web前端微课程》时候的笔记
【Array】
这部分除了js高程的学习笔记,还有之前看数据结构的时候从网上摘下来的几个方法的实际运用函数。
【Date】
【RegExp】
【Function】
【String】
【Math】
下面两函数感觉都比较实用
其他基础知识代码笔记
如题,这篇是看《js高程》这本书的代码部分的笔记,大部分是第5章的引用类型,还有一些其他的js基础知识。
笔记是按个人情况来记的,所以可能不是全部的内容都特别详细,不过都是很基础的东西,毕竟新手。
反正个人而言,全部看完这些代码弄懂,感觉收获还是很大的。
直接上代码,详见代码注释。
下面的代码是在sublime text3上编辑在nodejs上运行过的。
【Object】
这部分掺杂一些看视频《网易web前端微课程》时候的笔记
//Object类型相关代码 function Car(type,color,id){ this.id=id; this.type=type; this.color=color; } var benz=new Car('benz','black',12345); for(var key in benz){ console.log(key+':'+benz[key]); } //for-in循环输出的属性名顺序是不可预测的,因浏览器而异 Car.prototype.start=function(){ console.log(this.type+'start'); } for(var key in benz){ console.log(key+':'+benz[key]); } for(var key in benz){ if(benz.hasOwnProperty(key)){ console.log(key+':'+benz[key]); } } console.log('-----------------------------'); function setName(obj){ obj.name='Nicholas'; obj=new Object(); obj.name='Greg'; } var person=new Object(); setName(person); console.log(person.name);//Nicholas console.log('-----------------------------'); 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'; } console.log(output); } displayInfo({ name:'Nicholas', age:29 }); //Name:Nicholas //Age:29 displayInfo({ name:'Greg' }); //Name:Greg //这种传递参数的模式最适合需要向函数传入大量可选参数的情形 //比如一些插件的配置方式
【Array】
这部分除了js高程的学习笔记,还有之前看数据结构的时候从网上摘下来的几个方法的实际运用函数。
//shift和unshift都会改变原数组 var arr=['a','b','c']; console.log(arr.toString());//返回以,分隔值的字符串 a,b,c console.log(arr.valueOf());//返回数组 [ 'a', 'b', 'c' ] var retn=arr.shift(); console.log(retn);//返回被删项,a retn=arr.unshift('A'); console.log(retn);//返回数组新长度,3 console.log('-----------------------------'); //sort //比较函数 function compare(value1,value2){ if(value1<value2){ return -1; } if(value1>value2){ return 1; }else{ return 0; } } var values=[2,6,9,4,0,-1]; values.sort(compare); console.log(values);//[ -1, 0, 2, 4, 6, 9 ] //sort()通过调用每个项的toString()转型方法,然后比较得到的字符串再排序 //比较函数在第一个参数应在第二个之后排序的情况下返回1, //在第一个在第二个之前排序要返回-1, //故 比较函数还可以写成: function comp(value1,value2){ return value2-value1; } var values=[2,6,9,4,0,-1]; values.sort(compare); console.log(values);//[ -1, 0, 2, 4, 6, 9 ] console.log('-----------------------------'); //split-join var sentence = "the quick brown fox jumped over the lazy dog"; //split以' '分割字符串成数组 var words=sentence.split(' '); for (var i = 0; i < words.length; i++) { console.log('word'+i+':'+words[i]); } //join以' '连接数组元素成字符串 var str1=words.join(' '); console.log(str1);//the quick brown fox jumped over the lazy dog //toSring将数组元素用','连接成字符串 var str2=words.toString(); console.log(str2);//the,quick,brown,fox,jumped,over,the,lazy,dog console.log('----------------------------'); //indexOf-lastIndexOf //indexOf()判断参数值是否存在,存,返第一个出现该元素的下标,不存,返-1; //.lastIndexOf()反序查找 //IE9+\Firefox2+\Safari3+\Opera9.5+\Chrome var names = ["David","Cynthia","Raymond","Clayton","Jennifer"]; var name = 'David'; var position = names.indexOf(name); if (position >= 0) { console.log("Found " + name + " at position " + position); } else { console.log(name + " not found in array."); } //Found David at position 0 var lastindex=names.lastIndexOf('Clayton'); console.log("Found Clayton at position " + lastindex);//Found Clayton at position 3 console.log('----------------------------'); //splice var nums = [1,2,3,7,8,9]; var newElements = [4,5,6]; nums.splice(3,0,newElements); console.log(nums); // [ 1, 2, 3, [ 4, 5, 6 ], 7, 8, 9 ] var nums = [1,2,3,7,8]; nums.splice(3,0,4,5,6); console.log(nums);//[ 1, 2, 3, 4, 5, 6, 7, 8 ] var nums = [1,2,3,100,200,300,400,4,5]; var removed=nums.splice(3,4);//返回被删项 console.log(nums); //[ 1, 2, 3, 4, 5 ] console.log(removed);//[ 100, 200, 300, 400 ] var nums = [1,2,3,4,5,6]; nums.splice(0,0,0);//在下标为0的元素前面加入0 console.log(nums);//[ 0, 1, 2, 3, 4, 5, 6 ] nums.splice(5,0,0);//splice对原数组发生改变 console.log(nums);//[ 0, 1, 2, 3, 4, 0, 5, 6 ] console.log('----------------------------'); //数组迭代的五个方法,不会改变原数组 //IE9+\Firefox2+\Safari3+\Opera9.5+\Chrome var numbers=[1,2,3,4,5]; //every每一项都返回真时返回真,some只要有一项返回真就返回真 var everyr=numbers.every(function(item,index,thearray){return item>2;}); console.log(everyr);//false var somer=numbers.some(function(item,index,thearray){return item>2;}); console.log(somer);//true function isEven(num) {//是偶数返回true return num % 2 == 0; } var nums = [2, 4, 6, 8, 10]; var even = nums.every(isEven); if (even) { console.log("all numbers are even"); } else { console.log("not all numbers are even"); } //all numbers are even console.log('----------------------------'); //filter返回函数返回true的项组成的数组 var numbers=[1,2,3,4,5]; var filterr=numbers.filter(function(item,index,thearray){return item>2;}); console.log(filterr);//[ 3, 4, 5 ] function isEven(num) { return num % 2 == 0; } function isOdd(num) { return num % 2 != 0; } var nums = []; for (var i = 0; i < 20; ++i) { nums[i] = i + 1; } var evens = nums.filter(isEven); console.log("Even numbers: "); console.log(evens);//[ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ] var odds = nums.filter(isOdd); console.log("Odd numbers: "); console.log(odds);//[ 1, 3, 5, 7, 9, 11, 13, 15, 17, 19 ] //下面使用 filter() 筛选所有成绩及格的分数: function passing(num) { return num >= 60; } var grades = []; for (var i = 0; i < 20; ++i) {//随机产生20个[0-100]的成绩 grades[i] = Math.floor(Math.random() * 101); } var passGrades = grades.filter(passing); console.log("All grades:"); console.log(grades);//[ 12, 21, 62, 81, 2, 2, 41, 67, 66, 8, 81, 96, 92, 71, 54, 0, 70, 40, 79, 93 ] console.log("Passing grades: "); console.log(passGrades);//[ 62, 81, 67, 66, 81, 96, 92, 71, 70, 79, 93 ] //可以使用 filter() 方法过滤字符串数组 //下面这个例子过滤掉了那些不包含“cie” 的单词 function afterc(str) { if (str.indexOf("cie") > -1) { return true; } return false; } var words = ["recieve","deceive","percieve","deceit","concieve"]; var misspelled = words.filter(afterc); console.log(misspelled); // [ 'recieve', 'percieve', 'concieve' ] console.log('----------------------------'); d19b //map返回每次函数调用结果组成的数组 var numbers=[1,2,3,4,5]; var mapr=numbers.map(function(item, index,thearray) { return item*item; }); console.log(mapr);//[ 1, 4, 9, 16, 25 ] console.log(numbers);//[ 1, 2, 3, 4, 5 ] function curve(grade) { return grade += 5; } var grades = [77, 65, 81, 92, 83]; var newgrades = grades.map(curve); console.log(newgrades); // [ 82, 70, 86, 97, 88 ] function first(word) { return word[0]; } var words = ["for", "your", "information"]; var acronym = words.map(first); console.log(acronym)//[ 'f', 'y', 'i' ] console.log(acronym.join("")); // fyi console.log('----------------------------'); //forEach无返回值 var foreachr=numbers.forEach(function(item, index,thearray) { return item++; }); console.log(foreachr);//undefined console.log(numbers);//[ 1, 2, 3, 4, 5 ] console.log('-----------------------------'); //归并方法 //IE9+\Firefox3+\Safari4+\Opera10.5+\Chrome var values=[1,2,3,4,5]; var sum=values.reduce(function(prev,cur,index,thearray){ return prev+cur; }); console.log(sum);//15 console.log(values);//[ 1, 2, 3, 4, 5 ] var rsum=values.reduceRight(function(prev,cur,index,thearray){ return prev+cur; }); console.log(rsum);//15 console.log(values);//[ 1, 2, 3, 4, 5 ] var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, ['a','b','c']);//['a','b','c']作为归并基础的初始值 console.log(flattened);//[ 'a', 'b', 'c', 0, 1, 2, 3, 4, 5 ] //reduce() 方法也可以用来将数组中的元素连接成一个长的字符串 function concatWords(previousValue,currentValue) { return previousValue+currentValue; } var words = ["the ", "quick ","brown ", "fox "]; var sentence = words.reduce(concatWords); console.log(sentence); //the quick brown fox //reduceRight()从右到左 var sentence = words.reduceRight(concatWords); console.log(sentence); // fox brown quick the console.log('----------------------------');
【Date】
console.log(new Date(2017,8,8,13,50));//2017-09-08T05:50:00.000Z console.log(new Date('May 25,2018'));//2018-05-24T16:00:00.000Z console.log(Date.now());//1504850147543 console.log(+new Date());//1504850147544 console.log(new Date(2017,8,8,13,50).toLocaleString());//2017-9-8 13:50:00 console.log(new Date(2017,8,8,13,50).toString());//Fri Sep 08 2017 13:50:00 GMT+0800 (中国标准时间) console.log(new Date(2017,8,8,13,50).valueOf());//1504849800000 console.log(new Date(2017,8,8,14,00).toDateString());//Fri Sep 08 2017 console.log(new Date(2017,8,8,14,00).toTimeString());//14:00:00 GMT+0800 (中国标准时间) console.log(new Date(2017,8,8,13,50).toLocaleDateString());//2017-9-8 console.log(new Date(2017,8,8,13,50).toLocaleTimeString());//13:50:00 console.log(new Date(2017,8,8,13,50).toUTCString());//Fri, 08 Sep 2017 05:50:00 GMT console.log('-----------------------------');
【RegExp】
var pattern1=/[bc]at/gi; var pattern2=new RegExp('[bc]at','ig'); console.log(pattern1.test('bcattttaffbcat'));//true console.log(pattern2.test('bactccbcatbca'));//true console.log(pattern1.toString());///[bc]at/gi console.log(pattern1.toLocaleString());///[bc]at/gi //RegExp实例集成的toLocalString和toString返回正则表达式的字面量,与创建正则表达式方式无关 console.log('-----------------------------'); var re=null,i; for (var i = 0; i < 5; i++) { re=/cat/g; console.log(re.test('catastrophe')); } //在ECMAScript3中,第一个循环体实际上只创建了一个RegExp实例, //所以在循环中再次调用test()会失败。 //第一次匹配后,第二次调用从索引为3的字符开始, //下一次又从头开始。 //在ECMAScript5中,正则表达式字面量必须像直接调用RegExp构造函数一样,每次都重新创建一个实例。 //IE9+\Firefox4+\Chrome支持 for (var i = 0; i < 5; i++) { re=new RegExp('cat','g'); console.log(re.test('catastrophe')); } console.log('-----------------------------'); var text='fa mom and dad and baby and baby adsfda'; var pattern3=/mom( and dad( and baby)?)?/gi; var matches=pattern3.exec(text); console.log(matches.index);//3 console.log(matches.input);//fa mom and dad and baby and baby adsfda console.log(matches[0]);//mom and dad and baby console.log(matches[1]);// and dad and baby console.log(matches[2]);// and baby console.log(matches[3]);//undefined console.log('-----------------------------'); var text='cat,bat,sat,fat'; var pattern4=/.at/; var matches=pattern4.exec(text); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern4.lastIndex);//0 matches=pattern4.exec(text); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern4.lastIndex);//0 //非全局模式下,每次调用exec返回的都是第一个匹配项,且lastIndex始终不变 var pattern5=/.at/g; var matches=pattern5.exec(text); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern5.lastIndex);//3 matches=pattern5.exec(text); console.log(matches.index);//5 console.log(matches[0]);//bat console.log(pattern5.lastIndex);//7 //全局模式下每次调用exec返回下一个匹配项,且lastIndex会增加 //RegExp有9个用于储存捕获组的构造函数属性,调用exec或test时被自动填充 var text='this has been a short summer'; var pattern=/(..)or(.)/g; if(pattern.test(text)){ console.log(RegExp.$1);//sh console.log(RegExp.$2);//t } var pattern=/(.)hort/g; if(pattern.test(text)){ console.log(RegExp.input);//this has been a short summer console.log(RegExp.leftContext);//this has been a console.log(RegExp.rightContext);// summer console.log(RegExp.lastMatch);//short console.log(RegExp.lastParen);//s console.log(RegExp.multiline);//false或undefined } //Opera不支持input、lastMatch、lastParen、multiline //IE不支持multiline console.log('-----------------------------');
【Function】
function sum(num1,num2){ return num1+num2; } console.log(sum(10,10));//20 var anotherSum=sum; console.log(anotherSum(10,10));//20 sum=null; console.log(anotherSum(10,10));//20 console.log('-----------------------------'); console.log(sum1(1,1));//2 function sum1(num1,num2){ return num1+num2; } //console.log(sum2(1,1));//报错,'sum2 is not a function' var sum2=function(num1,num2){ return num1+num2; }//函数位于初始化语句中,不是一个函数声明,解析器不会有函数声明提示的过程 console.log('-----------------------------'); function factorial(num){ if(num<=1){ return 1; }else{ return num*arguments.callee(num-1) } //arguments的callee属性指向拥有这个arguments对象的函数 //严格模式下arguments.callee会报错 //这样写解除了factorial与num的耦合 } console.log(factorial(5));//120 var anotherFactorial=factorial; factorial =function(){return 0;}; console.log(anotherFactorial(5));//120 console.log(factorial(5));//0 //严格模式下可以这样写 var factorial=(function f(num){ if(num<=1){ return 1; }else{ return num*f(num-1) } }); var anotherFactorial=factorial; factorial=null; console.log(anotherFactorial(4));//24 console.log('-----------------------------'); function outer(){ inner(); } function inner(){ console.log(arguments.callee.caller); } outer();//[Function: outer] //如果是alert会显示outer的源代码 //caller中保存着调用当前函数的函数的引用 console.log('-----------------------------'); //apply()和call()能够扩充函数赖以运行的作用域 //最大的好处是,让对象不需要与方法有任何耦合 //window.color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } //sayColor();//red //sayColor.call(window);//red sayColor.call(o);//blue var objSayColor=sayColor.bind(o); objSayColor();//blue,即使在全局作用域中调用这个函数也返回blue
【String】
//查找字符串中指定的某个字母 var str='mfoakp fkpofkpowk fkokfoaofkpa kfwo'; var positions=new Array(); var pos=str.indexOf('f'); var count=0; while(pos>-1){ positions.push(pos); pos=str.indexOf('f',pos+1); count++; } console.log(positions);//[ 1, 7, 11, 18, 22, 26, 32 ] console.log(count);//7 console.log('-----------------------------'); //字符串的模式匹配方法 var text='cat, bat, sat, fat'; var pattern=/.at/; //match方法类似于RegExp的exec,接收一个参数模式 var matches=text.match(pattern); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern.lastIndex);//0 //search返回第一个匹配的索引,没找到返回-1 var pos=text.search(/at/); console.log(pos);//1 pos=text.search(/ab/); console.log(pos);//-1 //replace var result=text.replace('at','ond'); console.log(result);//cond, bat, sat, fat result=text.replace(/at/g,'ont'); console.log(result);//cont, bont, sont, font result=text.replace(/(.at)/g,'word:$1');//使用最近一次匹配结果中的内容 console.log(result);//word:cat, word:bat, word:sat, word:fat //当replace的第二个参数是函数时 function htmlEscape(text){ return text.replace(/[<>"&]/g,function(match,pos,thetext){ switch(match){ case '<':return '<'; case '>':return '>'; case '&':return '&'; case '"':return '"'; } }); } console.log(htmlEscape('<p class=\"greeting\">hello!</p>')); //<p class="greeting">hello!</p> console.log('-----------------------------'); var colorText='red,blue,green,yellow'; console.log(colorText.split(','));//[ 'red', 'blue', 'green', 'yellow' ] //split的第二个参数限制数组长度 console.log(colorText.split(',',2));//[ 'red', 'blue' ] //最后一项和第一项是空串,因为通过正则表达式指定的分隔符出现在了字符串的开头‘red’和末尾‘yellow’ console.log(colorText.split(/[^\,]+/));//[ '', ',', ',', ',', '' ] console.log('-----------------------------');
【Math】
下面两函数感觉都比较实用
var str='yellow'; function determineOrder(value){ var result=str.localeCompare(value); if(result<0){ console.log('yellow comes before '+value); }else if(result>0){ console.log('yellow comes after '+value); }else{ console.log('yellow is equal to '+value); } } console.log(determineOrder('brick'));//yellow comes after brick console.log(determineOrder('yellow'));//yellow is equal to yellow console.log(determineOrder('zoo'));//yellow comes before zoo //同时因为函数没有返回值所以还会返回一个undefined console.log('-----------------------------'); function selectFrom(lowerValue,upperValue){ var choices=upperValue-lowerValue+1; return Math.floor(Math.random()*choices+lowerValue); } console.log(selectFrom(2,8));//返回[2,8]区间的数 var colors=['red','green','blue','yellow','black','purple','brown']; console.log(colors[selectFrom(0,colors.length-1)]);//任意返回一个数组项 console.log('-----------------------------');
其他基础知识代码笔记
console.log(Infinity/Infinity);//NaN console.log(Infinity%Infinity);//NaN console.log(Infinity*0);//NaN console.log(Infinity/2);//Infinity console.log(Infinity%2);//NaN console.log("a">3);//false,'a'被解释为NaN console.log("23"<"3");//true,比较的是字符串第一个字符'2'和'3'的字符编码50和51 console.log('-----------------------------');
var i='helloworld'; switch(i){ case 1: console.log(1); break; case 2: console.log(2); break; case 3: //合并两种情况 case 4: console.log('3 or 4'); break; case 'a': console.log('a'); break; case 'hello'+'world'://case后可以是表达式 console.log('hello world'); break; case i>10 && i<20: console.log('...'); break; default: console.log('other'); } console.log('-----------------------------');
相关文章推荐
- 引用类型1——JS学习笔记2015-6-23(第64天)
- js学习笔记 chapter5 引用类型
- 《JS高程》引用类型学习笔记
- js学习笔记:引用类型——Array
- js学习笔记:引用类型——Object
- 引用类型2 Array——JS学习笔记2015-6-24(第65天)
- js学习笔记:引用类型——RegExp
- 引用类型2 Array(转换方法和栈方法)——JS学习笔记2015-6-25(第66天)
- JS 引用类型 Math 对象 JS学习笔记2015-7-3(第74天)
- 《JS高程》基本类型和引用类型的值学习笔记
- js学习笔记:引用类型——单体内置对象
- js学习笔记:引用类型——Date
- js学习笔记-引用类型
- js学习笔记:基本类型和引用类型
- JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
- 【js学习笔记-053】js中的面向对象技术------枚举类型
- C#学习笔记10:Try-catch的用法和引用类型、值类型整理
- 五、引用类型[js笔记]
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- c#学习笔记:C#值类型和引用类型区别