[TOC] ## 變量類型 1. 值類型 ``` var a= 100 var b= a a=200 console.log(b) //100 b 的值不受 a 值影響 ``` 2. 引用類型 引用類型:對象、數組、函數 ``` var a={ age: 20} var b= a b.age= 21 console.log(a.age) //21 a 值受到 b 值的影響 ``` ## typeof運算符詳解 ``` typeof undefined // undefined typeof abc // string typeof 123 // number typeof true // boolean typeof t // object typeof [] // object typeof null // object typeof console.log // function ``` `typeof`只能區分值類型 如 `string ,number,boolean, ` 不能區分引用類型 ## 變量計算 - 強制類型轉換 1. 字符串拼接 ```js var a=100+10 // 110 var b=100 + '10' // '10010' ``` 3. ==運算符 ``` 100=="100" //true 0 == '' // true null == undefined // true ``` 5. if語句 ``` var b= 100 if(b){} ``` 7. 邏輯運算 ``` console. log (10 && 0) //0 console. log('' || 'abc) //'abc' console. log( !!window.abc) //true ``` ### 何時使用===和== 除了下面這種其他都是用 `===` 形式寫 ``` if (obj.a= null){ //這里相當于obj.a===nulL|lobj.a=== undefined,簡寫形式 //這是 Jquery源碼中推薦的寫法 } ``` ## JS中的內置函數 Object Array Boolean Number String Function Date Regexp Error ## 如何理解JSON 只是一個 js 對象 ``` JSON.stringify ({a: 10, b: 201}) //js 對象轉json J0SN. parse('{"a":10,"b":20}') //json 轉 js 對象 ``` ## 作用域 ### 全局 ```js //相當于把 變量a 的聲明提前 并且賦值為 undefined var a = undefined console. log (a) //undefined var a =100 //把函數提前 fn('zhangsan') //zhangsan function fn (name){ console. log(name) } ``` ### this this要在執行時才能確認值,定義時無法確認 1. 作為構造函數執行 ``` function Foo(name){ this.name=name console.log(this); //this 為構造函數 } var f = new Foo('zhangsan'); ``` 3. 作為對象屬性執行 ``` var obj = { name:'A', printName:function(){ console.log(this.name) //this 為對象本身 } } obj.printName(); ``` 5. 作為普通函數執行 ``` function fn(){ console.log(this) //this 為 window } fn(); ``` 7. call apply bind ``` function fn1(name){ alert(name); console.log(this) } fn.call({x:100},'zhangsan'); //第一個傳入的就是 this 的值 fn.apply({x:100},['zhangsan']); //apply 參數以數組形式傳入 var fn2 = function (name){ alert(name); console.log(this) // this 為{ y:200} }.bind({y:200}); fn2('zhangsan') ``` ### 作用域 - 沒有塊級作用域 ``` if (true) { var name ='zhangsan' } console.log(name) //zhangsan ``` - 只有函數和全局作用域 ``` var a=100 function fn(){ var a =200 console.log(a) // 200 } console.log(a) //100 fn() ``` ### 閉包 ``` function F1(){ var a = 100 return function(){ console.log(a) } } var f1 = F1() var a =200 f1() //100 ``` #### 真題 創建10 個 a 標簽,點擊彈出對應的順序標記 ``` var i //作用域與閉包考點 for ( i = 0; i<10; i++) { (function(i){ var a = document.createElement('a') a.innerHTML=i+'<br/>' a.addEventListener('click',function(e){ e.preventDefault() alert(i) }) document.body.appendChild(a) })(i) } ``` ## 日期 ``` Date,now()//獲取當前時間毫秒數 var dt= new Date() dt.gettime() //獲取毫秒數 dt.getfullyear() //年 dt.getmonth() // 月(0-11) dt.getdate() // 日 0-31) dt.gethours() //小時(0-23) dt.getminutes() //分鐘(0-59) dt.getseconds() // 秒 (0-59 ``` ## Math Api ``` Math.random() //0.10596426644876211 ``` ## 數組 APi - foreach 遍歷所有元素 ``` var arr =[1,2,3,] arr.age=12 //age 會加入遍歷,但是無法為 undefined arr.forEach(function (item,index){ console.log(index,item) }) 0 1 1 2 2 3 undefined ``` - every 判斷所有元素是否都符合條件 ``` var arr =[1,2,3,4,5] //只有所有元素都滿足要求才會返回 true var result = arr.every(function(item,index){ if(item<4){ return true } }) console.log(result) //false 因為數組不滿足要求 ``` - some 判斷是否有至少一個元素符合條件 ``` var arr =[1,2,3,4,5] // 只要有滿足條件的就返回 true var result = arr.some(function(item,index){ if(item<4){ return true } }) console.log(result) //true ``` - sort 排序 ``` var arr =[1,3,2,4,5] var result = arr.sort(function(a,b){ //從小到大排序 return a-b // return b-a 從大到小 }) console.log(result) //1,2,3,4,5 ``` - map 對元素重新組裝,生成新數組 ```js var arr =[1,2,3,4,5] var result = arr.map(function(item,index){ return '<b>'+item+'<b/>' }) console.log(result) //["<b>1<b/>", "<b>2<b/>", "<b>3<b/>", "<b>4<b/>", "<b>5<b/>"] ``` - filter 過濾符合條件的元素 ``` var arr =[1,2,3,4,5] //返回所有值大于等于2 var result = arr.filter(function(item,index){ if (item>=2) return true }) console.log(result) //[2, 3, 4, 5] ``` ## 對象 APi - for in ```js var obj = { x:100, y:200, z:200 } var key for (key in obj){ //雖然高級瀏覽器可以過濾原型中的屬性,但是加入此判斷可以提高代碼健壯度 if(obj.hasOwnProperty(key)){ console.log(key,obj[key]) } } //輸出 x 100 y 200 z 300 ```