JavaScript筆記 · Bozo技術筆記

## 數據類型 ~~~ 不區分整數和浮點數,統一用Number表示字符串是用單引號或者雙引號括起來起來的任意文本布爾值只有true和false兩種值 &&與運算,都為true結果才是true ||或運算,都為false結果才是false !非運算,把布爾值取反比較運算符 == 會自動轉換數據類型再比較 === 不會自動轉換數據類型,如果數據類型不一致返回false null表示一個空的值和0以及字符串''不同 undefined表示值為定義 JavaScript數據可以包括任意數據類型對象是一組鍵值組成的無須集合,要獲取一個對象的屬性用對象變量.屬性名如果一個變量沒有通過var聲明,那么該變量自動被聲明為全局變量 ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#字符串 "字符串")字符串 ~~~ 拼接用+號 toUpperCase()把一個字符串變成大寫 toLowerCase()把一個字符串全部變成小寫 indexOf()會搜索制定字符串出現的位置 substart()返回制定索引區間的字符串 ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#數組 "數組")數組 ~~~ 可以包含任意數據類型通過索引賦值時,如果索引超過了范圍,會引起數組大小變化 indexOf() 搜索一個指定元素位置 slice()截取數組部分元素然后返回 push()向末尾添加若干元素 pop()刪除最后一個元素 unshift()向頭部添加若干元素 shift()把第一個元素刪掉 sort()對數組元素進行排序 reverse() 反轉數組元素 splice()可以指定插入和刪除元素 concat()鏈接另一個Array join()把當前數據的每個元素用指定字符串鏈接起來 ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#對象 "對象")對象 ~~~ 是一種無序的集合數據類型,由若干鍵值對組成 JavaScript的對象是動態類型,可以自由的給他添加和刪除屬性使用in檢測是否有某一個屬性,也會判斷父類中 ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#iterable "iterable")iterable 用于遍歷Map和Set | ~~~ 123456789 ~~~ | ~~~ for (var x of a) { // 遍歷Array alert(x);}for (var x of s) { // 遍歷Set alert(x);}for (var x of m) { // 遍歷Map alert(x[0] + '=' + x[1]);} ~~~ | for…in 會便利新添加的元素,不在lenght之內的也會打印 for…of只循環集合本身的元素 ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#函數 "函數")函數 ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#定義如下 "定義如下:")定義如下: ~~~ function abs(x) { if (x >= 0) { return x; } else { return -x; } } ~~~ * function 指出這個是一個函數定義 * abs是函數的名稱 * (x)括號內的是函數的參數,以,分割 * {…}之間的代碼是函數體,可以包含若干語句 * 一單執行到return函數就會執行完畢,并講結果返回 ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#第二種定義函數方式 "第二種定義函數方式")第二種定義函數方式 ~~~ var abs = function(x){ if(x>=0){ return x; } } ~~~ 上面這種是一個匿名函數,沒有函數名,將函數賦值給了變量abs,通過abs就可以調用該函數 ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#調用函數 "調用函數")調用函數 ~~~ abs(10); ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#arguments "arguments")arguments 在函數內部調用,指向當前函數的使用者傳入的所有參數,類似一個Array,常用于判斷傳入參數的個數 ~~~ function foo(x) { if(arguments.lengtg==0){ return; } alert(x); // 10 for (var i=0; i<arguments.length; i++) { alert(arguments[i]); // 10, 20, 30 } } foo(10, 20, 30); ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#rest參數 "rest參數")rest參數 ~~~ function foo(a, b, ...rest) { console.log('a = ' + a); console.log('b = ' + b); console.log(rest); } foo(1, 2, 3, 4, 5); // 結果: // a = 1 // b = 2 // Array [ 3, 4, 5 ] ~~~ rest參數寫在最后,前面用…表示,當有多余的參數以數組的形式交給變量rest ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#變量作用域 "變量作用域")變量作用域 ~~~ 使用var定義的變量是局部變量,只能再方法體中使用,不用var定義的變量是全局變量,實際上是它是賦值給window的一個變量,比如alert也是定義再window. 為了避免全局變量沖突,可以講所有的變量和函數全部綁定到一個全局變量中 var MYAPP = {}; // 其他變量: MYAPP.name = 'myapp'; MYAPP.version = 1.0; ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#let "let")let let可以代替var申明一個塊級作用域的變量 ~~~ function foo() { var sum = 0; for (let i=0; i<100; i++) { sum += i; } i += 1; // SyntaxError ~~~ } ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#常量 "常量")常量 ~~~ 使用const關鍵字來定義一個常量 const PI = 3.14; ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#方法 "方法")方法在一個對象中綁定的函數,稱為這個對象的方法. 定義: ~~~ var smile = { name:Smie, birth:1980, age:function(){ var y = new Date().getFullYear(); returt y-this.birth; } }; smile.age();//今年和明年調用就是不同的值 ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#This "This")This ~~~ this指向被調用的對象,如果我們單獨調用帶有this的函數,該this指向全局對象,也就是window. ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#apply "apply")apply 控制this的指向,接受兩個參數,第一個是需要綁定this變量,第二個是函數本身的參數 ~~~ function getAge(){ vaar y = new Date().getFullYear(); return y-this.birth; } var smile = { name :'Smile' age:getAge } smile.age();//yes getAge.apply(smile,[])//yew this指向smile,參數為空 ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#裝飾器 "裝飾器")裝飾器利用apply(),可以動態改變函數行為比如:下面的統計一個函數被調用的次數 ~~~ var count = 0; var oldParseInt = parseInt;//保存原函數 var oldParsent = function(){ count+=1; return oldParseInt.apply(null,arguments);//調用原函數 } // 測試: parseInt('10'); parseInt('20'); parseInt('30'); count; // 3 ~~~ ## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#高階函數 "高階函數")高階函數一個函數接受另一個函數作為參數,這種函數就稱為高階函數編寫高階函數，就是讓函數的參數能夠接收別的函數。 ~~~ function add (x,y,f){ return f(x)+f(y); } 當我們調用add(-5,6)時,參數f分別接受-5,6進行計算 ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#map "map")map 當由一個函數f(x)=x2,要把這個函數作用在一個數組[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map實現如下： ~~~ function pow(x){ return x*x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow);// [1, 4, 9, 16, 25, 36, 49, 64, 81] map()傳入的參數是pow，即函數對象本身。 ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#reduce "reduce")reduce 把一個函數作用在這個Array的[x1, x2, x3…]上,這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算. ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#filter "filter")filter 用于把Array的某些元素過濾掉,然后返回剩下的元素,它接受一個函數,把傳入的函數依次作用于每個元素,根據返回值決定保留還是丟棄把一個Arrat中的空字符串刪除 ~~~ var arr = ['A', '', 'B', null, undefined, 'C', ' ']; var r = arr.filter(function(s){ return s && s.trim(); }) ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#sort "sort")sort Array的sort()方法默認把所有的元素先轉換成String再排序,比較的是ASCLL碼,對于兩個元素x和y，如果認為x y，則返回1. 對字符串排序 ~~~ var arr = ['Google', 'apple', 'Microsoft']; arr.sort(function(s1,s2){ x1=s1.toUpperCase(); x2=s2.toUpperCase(); if(x1<x2){ return -1; } if(x1>x2){ return 1; } return 0; });// ['apple', 'Google', 'Microsoft'] ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#閉包 "閉包")閉包當有一個求和的函數,我們不想直接得到值,而是根據需求再計算,可以不返回求和的結果,而是求和的函數注意:返回函數不要引用任何循環變量,或者后續會發生變化的變量 ~~~ function lazy_sum(arr){ var sum = function(){ return arr.reduce(function(x,y){ return x+y; }) } return sum; } 當我們調用lazy_sum()時返回的并不是結果,而是求和函數 var f = lazy_sum([1,2,3,4,5]);//function sum(); f();//15 調用函數f時,才是真正求和結果 ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#箭頭函數 "箭頭函數")箭頭函數相當于匿名函數,簡化了函數定義 ~~~ x => x*x; 相當于 function(x){ return x*x; } ~~~ 另一種包含多條語句 ~~~ x =>{ if(x>0){ return x*x; }else{ return -x*x; } } ~~~ 如果參數不是一個,就要用()擴起來 ~~~ //兩個參數 (x,y)=>x*y+y*y; //無參數 ()=>3.14 ~~~ 返回一個對象 ~~~ x=>({foo:x}) ~~~ ### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#generator生成器 "generator生成器")generator生成器 ~~~ 可以在執行過程中多次返回 ~~~ ## 標準對象 * typeof操作符用來獲取對象的類型 * 使用new創建一個包裝對象 * 用String()來轉換任意類型到string * 可以直接使用if(var)()來做boolean判斷 * 判斷Array要使用Array.isArray(arr); * 判斷null要使用myVar===null ## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#Date "Date")Date 用來表示日期和時間 ~~~ var now = new Date(); now.getFullYear();//2016 now.getTime();//時間戳 ~~~ ## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#RegExp "RegExp")RegExp JavaScript有兩種方式創建一個正則表達式 ~~~ var re1 = /^\d{3}\-\d{3,8}$/; var re2 = new RegExp('ABC\\-001'); 調用RegExp的test()方法測試給定字符串是否符合條件 re1.test('010-12345');//true ~~~ ### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#切分字符串 "切分字符串")切分字符串正常寫法 ~~~ 'a b c'.split(' ');//['a','b','c'] ~~~ 正則匹配多個空格 ~~~ 'a b c'.split(/\s+/);//['a','b','c'] ~~~ ### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#分組 "分組")分組用()表示提取的分組 ~~~ var re = /^(\d{3})-(\d{3,8})$/; //調用exec提取出子串 re.exec('010-12345'); // ['010-12345', '010', '12345'] re.exec('010 12345'); // null ~~~ ## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#面向對象編程 "面向對象編程")面向對象編程 JavaScript創建一個對象都會設置一個原型,指向他的原型對象 ~~~ var arr = [1,2,3]; arr ----> Array.prototype ----> Object.prototype ----> null ~~~ ### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#構造函數 "構造函數")構造函數 ~~~ 首先定義一個普通函數 function Student(name) { this.name = name; this.hello = function () { alert('Hello, ' + this.name + '!'); } } 調用new創建一個對象 var xiaoming = new Student('小明'); xiaoming.name;//小明 xiaoming.hello();//hello 新創建的xiaoming原型鏈 xiaoming ----> Student.prototype ----> Object.prototype ----> null ~~~ prototype屬性來指向xiaoming的原型對象如果我們創建了很多個Student()對象,而這些對象都不是同一個hello()函數,而這些對象只需要共享一個函數就可以了,而要它們共享一個hello函數只需要將函數移動到這些對象的共同原型上就可以了,也就是 ~~~ function Student(name) { this.name = name; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); }; ~~~ ### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#原型繼承 "原型繼承")原型繼承 * 定義一個新的構造函數,并在內部調用Call()調用希望”繼承”的構造函數,并綁定this * 借助中間函數?`F`?實現原型鏈繼承,最好通過封裝的inherits函數完成； * 繼續在新的構造函數的原型上定義新方法 ### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#class-繼承 "class 繼承")class 繼承關鍵字class從ES6引入的,用class編寫Student ~~~ class Student{ constructor(name){ this.name=name; } hello(){ alert('Hello,'+this.name+'!'); } } ~~~ class繼承 ~~~ class PrimaryStudent extends Student{ constructor(name,grade){ super(name); this.grade=grade; } myGrade(){ alert(this.grade); } } ~~~