【学习笔记五】

写在前面：

如题，这篇是看《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);//Nicholasconsole.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:29displayInfo({name:'Greg'});//Name:Greg//这种传递参数的模式最适合需要向函数传入大量可选参数的情形//比如一些插件的配置方式

【Array】

这部分除了js高程的学习笔记，还有之前看数据结构的时候从网上摘下来的几个方法的实际运用函数。

//shift和unshift都会改变原数组var arr=['a','b','c'];console.log(arr.toString());//返回以，分隔值的字符串 a,b,cconsole.log(arr.valueOf());//返回数组 [ 'a', 'b', 'c' ]var retn=arr.shift();console.log(retn);//返回被删项，aretn=arr.unshift('A');console.log(retn);//返回数组新长度，3console.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-joinvar 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,dogconsole.log('----------------------------');//indexOf-lastIndexOf//indexOf()判断参数值是否存在，存,返第一个出现该元素的下标，不存,返-1;//.lastIndexOf()反序查找//IE9+\Firefox2+\Safari3+\Opera9.5+\Chromevar 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 0var lastindex=names.lastIndexOf('Clayton');console.log("Found Clayton at position " + lastindex);//Found Clayton at position 3console.log('----------------------------');//splicevar 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的元素前面加入0console.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+\Chromevar numbers=[1,2,3,4,5];//every每一项都返回真时返回真，some只要有一项返回真就返回真var everyr=numbers.every(function(item,index,thearray){return item>2;});console.log(everyr);//falsevar somer=numbers.some(function(item,index,thearray){return item>2;});console.log(somer);//truefunction 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 evenconsole.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('----------------------------');//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("")); // fyiconsole.log('----------------------------');//forEach无返回值var foreachr=numbers.forEach(function(item, index,thearray) {    return item++;});console.log(foreachr);//undefinedconsole.log(numbers);//[ 1, 2, 3, 4, 5 ]console.log('-----------------------------');//归并方法//IE9+\Firefox3+\Safari4+\Opera10.5+\Chromevar values=[1,2,3,4,5];var sum=values.reduce(function(prev,cur,index,thearray){    return prev+cur;});console.log(sum);//15console.log(values);//[ 1, 2, 3, 4, 5 ]var rsum=values.reduceRight(function(prev,cur,index,thearray){    return prev+cur;});console.log(rsum);//15console.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.000Zconsole.log(new Date('May 25,2018'));//2018-05-24T16:00:00.000Zconsole.log(Date.now());//1504850147543console.log(+new Date());//1504850147544console.log(new Date(2017,8,8,13,50).toLocaleString());//2017-9-8 13:50:00console.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());//1504849800000console.log(new Date(2017,8,8,14,00).toDateString());//Fri Sep 08 2017console.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-8console.log(new Date(2017,8,8,13,50).toLocaleTimeString());//13:50:00console.log(new Date(2017,8,8,13,50).toUTCString());//Fri, 08 Sep 2017 05:50:00 GMTconsole.log('-----------------------------');

【RegExp】

var pattern1=/[bc]at/gi;var pattern2=new RegExp('[bc]at','ig');console.log(pattern1.test('bcattttaffbcat'));//trueconsole.log(pattern2.test('bactccbcatbca'));//trueconsole.log(pattern1.toString());///[bc]at/giconsole.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);//3console.log(matches.input);//fa mom and dad and baby and baby adsfdaconsole.log(matches[0]);//mom and dad and babyconsole.log(matches[1]);// and dad and babyconsole.log(matches[2]);// and babyconsole.log(matches[3]);//undefinedconsole.log('-----------------------------');var text='cat,bat,sat,fat';var pattern4=/.at/;var matches=pattern4.exec(text);console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern4.lastIndex);//0matches=pattern4.exec(text);console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern4.lastIndex);//0//非全局模式下，每次调用exec返回的都是第一个匹配项，且lastIndex始终不变var pattern5=/.at/g;var matches=pattern5.exec(text);console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern5.lastIndex);//3matches=pattern5.exec(text);console.log(matches.index);//5console.log(matches[0]);//batconsole.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);//shconsole.log(RegExp.$2);//t}var pattern=/(.)hort/g;if(pattern.test(text)){console.log(RegExp.input);//this has been a short summerconsole.log(RegExp.leftContext);//this has been a console.log(RegExp.rightContext);// summerconsole.log(RegExp.lastMatch);//shortconsole.log(RegExp.lastParen);//sconsole.log(RegExp.multiline);//false或undefined}//Opera不支持input、lastMatch、lastParen、multiline//IE不支持multilineconsole.log('-----------------------------');

【Function】

function sum(num1,num2){return num1+num2;}console.log(sum(10,10));//20var anotherSum=sum;console.log(anotherSum(10,10));//20sum=null;console.log(anotherSum(10,10));//20console.log('-----------------------------');console.log(sum1(1,1));//2function 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));//120var anotherFactorial=factorial;factorial =function(){return 0;};console.log(anotherFactorial(5));//120console.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));//24console.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);//redsayColor.call(o);//bluevar 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);//7console.log('-----------------------------');//字符串的模式匹配方法var text='cat, bat, sat, fat';var pattern=/.at/;//match方法类似于RegExp的exec，接收一个参数模式var matches=text.match(pattern);console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern.lastIndex);//0//search返回第一个匹配的索引，没找到返回-1var pos=text.search(/at/);console.log(pos);//1pos=text.search(/ab/);console.log(pos);//-1//replacevar result=text.replace('at','ond');console.log(result);//cond, bat, sat, fatresult=text.replace(/at/g,'ont');console.log(result);//cont, bont, sont, fontresult=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 brickconsole.log(determineOrder('yellow'));//yellow is equal to yellowconsole.log(determineOrder('zoo'));//yellow comes before zoo//同时因为函数没有返回值所以还会返回一个undefinedconsole.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);//NaNconsole.log(Infinity%Infinity);//NaNconsole.log(Infinity*0);//NaNconsole.log(Infinity/2);//Infinityconsole.log(Infinity%2);//NaNconsole.log("a">3);//false，'a'被解释为NaNconsole.log("23"<"3");//true，比较的是字符串第一个字符'2'和'3'的字符编码50和51console.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('-----------------------------');