好程式設計師web前端培訓分享JavaScript學習筆記之ES5

　　好程式設計師 web前端培訓分享 JavaScript學習筆記之ES5， 我們所說的 ES5 和 ES6 其實就是在 js 語法的發展過程中的一個版本而已

　　 比如我們使用的微信

　　 最早的版本是沒有支付功能的

　　 隨著時間的流逝，後來出現了一個版本，這個版本里面有支付功能了

　　 ECMAScript 就是 js 的語法

　　 以前的版本沒有某些功能

　　 在 ES5 這個版本的時候增加了一些功能

　　 在 ES6 這個版本的時候增加了一些功能

　　 因為瀏覽器是瀏覽器廠商生產的

　　 ECMAScript 釋出了新的功能以後，瀏覽器廠商需要讓自己的瀏覽器支援這些功能

　　 這個過程是需要時間的

　　 所以到現在，基本上大部分瀏覽器都可以比較完善的支援了

　　 只不過有些瀏覽器還是不能全部支援

　　 這就出現了相容性問題

　　 所以我們寫程式碼的時候就要考慮哪些方法是 ES5 或者 ES6 的，看看是不是瀏覽器都支援

ES5 增加的陣列常用方法

陣列方法之 forEach

·  forEach  用於遍歷陣列，和 for 迴圈遍歷陣列一個道理

·  語法：  陣列.forEach(function (item, index, arr) {})

var   arr   =   [ 'a' ,   'b' ,   'c' ] // forEach 就是將陣列迴圈遍歷，陣列中有多少項，那麼這個函式就執行多少回 arr.forEach( function   (item,   index,   arr)   {

   // 在這個函式內部    // item 就是陣列中的每一項    // index 就是每一項對應的索引    // arr 就是原始陣列    console.log(item)  

   console.log(index)  

   console.log(arr)   })

·  上面的程式碼就等價於

var   arr   =   [ 'a' ,   'b' ,   'c' ] for   ( var   i   =   0 ;   i   <   arr.length;   i ++ )   {

   fn(arr[i],   i,   arr)} function   fn(item,   index,   arr)   {

   console.log(item)

   console.log(index)

   console.log(arr)}

陣列方法之 map

·  map  用於遍歷陣列，和 forEach 基本一致，只不過是有一個返回值

 

·  語法：  陣列.map(function (item, index, arr) {})

·  返回值： 一個新的陣列

var   arr   =   [ 'a' ,   'b' ,   'c' ] // forEach 就是將陣列迴圈遍歷，陣列中有多少項，那麼這個函式就執行多少回 var   newArr   =   arr.map( function   (item,   index,   arr)   {

   // 函式里面的三個引數和 forEach 一樣    // 我們可以在這裡運算元組中的每一項，    // return 操作後的每一項    return   item   +   '11' })console.log(newArr)   // ["a11", "b11", "c11"]

·  返回值就是我們每次對陣列的操作

·  等價於

var   arr   =   [ 'a' ,   'b' ,   'c' ] var   newArr   =   [] for   ( var   i   =   0 ;   i   <   arr.length;   i ++ )   {

   newArr.push(fn(arr[i],   i,   arr))} function   fn(item,   index,   arr)   {

   return   item   +   '11' }console.log(newArr)

陣列方法之 filter

·  filter  ： 是將陣列遍歷一遍，按照我們的要求把數陣列中符合的內容過濾出來

·  語法：  陣列.filter(function (item, index, arr) {})

·  返回值： 根據我們的條件過濾出來的新陣列

var   arr   =   [ 1 ,   2 ,   3 ,   4 ,   5 ] var   newArr   =   arr.filter( function   (item,   index,   arr)   {

   // 函式內部的三個引數和 forEach 一樣    // 我們把我們的條件 return 出去    return   item   >   2 })console.log(newArr)   // [3, 4, 5]

·  新陣列裡面全都是大於 2 的數字

·  等價於

var   arr   =   [ 1 ,   2 ,   3 ,   4 ,   5 ] var   newArr   =   [] for   ( var   i   =   0 ;   i   <   arr.length;   i ++ )   {

   if   (fn(arr[i],   i,   arr))   {

     newArr.push(arr[i])

   }} function   fn(item,   index,   arr)   {

   return   item   >   2 }console.log(newArr)

JSON 方法

·  json  是一種特殊的字串個是，本質是一個字串

var   jsonObj   =   '{ "name": "Jack", "age": 18, "gender": "男" }' var   jsonArr   =   '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]'

·  就是物件內部的  key  和  value  都用雙引號包裹的字串（必須是雙引號）

JSON的兩個方法

·  我們有兩個方法可以使用  JSON.parse

·  json.stringify  是將 js 的物件或者陣列轉換成為 json 格式的字串

JSON.parse

·  JSON.parse  是將 json 格式的字串轉換為 js 的物件或者陣列

var   jsonObj   =   '{ "name": "Jack", "age": 18, "gender": "男" }' var   jsonArr   =   '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]' var   obj   =   JSON.parse(jsonStr) var   arr   =   JSON.parse(jsonArr) console.log(obj)console.log(arr)

·  obj  就是我們 js 的物件

·  arr  就是我們 js 的陣列

JSON.stringify

·  JSON.parse  是將 json 格式的字串轉換為 js 的物件或者陣列

var   obj   =   {

   name :   'Jack' ,

   age :   18 ,

   gender :   '男' } var   arr   =   [

   {

     name :   'Jack' ,

     age :   18 ,

     gender :   '男'

   },

   {

     name :   'Jack' ,

     age :   18 ,

     gender :   '男'

   },

   {

     name :   'Jack' ,

     age :   18 ,

     gender :   '男'

   }]

var   jsonObj   =   JSON.stringify(obj) var   jsonArr   =   JSON.stringify(arr)

console.log(jsonObj)console.log(jsonArr)

·  jsonObj  就是 json 格式的物件字串

·  jsonArr  就是 json 格式的陣列字串

this 關鍵字

·  每一個函式內部都有一個關鍵字是  this

·  可以讓我們直接使用的

·  重點：  函式內部的 this 只和函式的呼叫方式有關係，和函式的定義方式沒有關係

·  函式內部的 this 指向誰，取決於函式的呼叫方式

·  全域性定義的函式直接呼叫， this => window

function   fn()   {

   console.log( this )}fn() // 此時 this 指向 window

·  物件內部的方法呼叫， this => 呼叫者

var   obj   =   {

   fn :   function   ()   {

     console.log( this )

   }}obj.fn() // 此時 this 指向 obj

·  定時器的處理函式， this => window

setTimeout( function   ()   {

   console.log( this )},   0 ) // 此時定時器處理函式里面的 this 指向 window

·  事件處理函式， this => 事件源

div.onclick   =   function   ()   {

   console.log( this )} // 當你點選 div 的時候，this 指向 div

·  自呼叫函式， this => window

( function   ()   {

   console.log( this )})() // 此時 this 指向 window

call 和 apply 和 bind

·  剛才我們說過的都是函式的基本呼叫方式裡面的 this 指向

·  我們還有三個可以忽略函式本身的 this 指向轉而指向別的地方

·  這三個方法就是  call  /  apply  /  bind

·  是強行改變 this 指向的方法

call

·  call  方法是附加在函式呼叫後面使用，可以忽略函式本身的 this 指向

·  語法：  函式名.call(要改變的 this 指向，要給函式傳遞的引數1，要給函式傳遞的引數2， ...)

var   obj   =   {   name :   'Jack'   } function   fn(a,   b)   {

   console.log( this )

   console.log(a)

   console.log(b)}fn( 1 ,   2 )fn.call(obj,   1 ,   2 )

·  fn()  的時候，函式內部的 this 指向 window

·  fn.call(obj, 1, 2)  的時候，函式內部的 this 就指向了 obj 這個物件

·  使用 call 方法的時候

·  會立即執行函式

·  第一個引數是你要改變的函式內部的 this 指向

·  第二個引數開始，依次是向函式傳遞引數

apply

·  apply  方法是附加在函式呼叫後面使用，可以忽略函式本身的 this 指向

·  語法：  函式名.apply(要改變的 this 指向，[要給函式傳遞的引數1， 要給函式傳遞的引數2， ...])

var   obj   =   {   name :   'Jack'   } function   fn(a,   b)   {

   console.log( this )

   console.log(a)

   console.log(b)}fn( 1 ,   2 )fn.call(obj,   [ 1 ,   2 ])

·  fn()  的時候，函式內部的 this 指向 window

·  fn.apply(obj, [1, 2])  的時候，函式內部的 this 就指向了 obj 這個物件

·  使用 apply 方法的時候

·  會立即執行函式

·  第一個引數是你要改變的函式內部的 this 指向

·  第二個引數是一個  陣列 ，陣列裡面的每一項依次是向函式傳遞的引數

bind

·  bind  方法是附加在函式呼叫後面使用，可以忽略函式本身的 this 指向

·  和 call / apply 有一些不一樣，就是不會立即執行函式，而是返回一個已經改變了 this 指向的函式

·  語法：  var newFn = 函式名.bind(要改變的 this 指向); newFn(傳遞引數)

var   obj   =   {   name :   'Jack'   } function   fn(a,   b)   {

   console.log( this )

   console.log(a)

   console.log(b)}fn( 1 ,   2 ) var   newFn   =   fn.bind(obj)newFn( 1 ,   2 )

·  bind 呼叫的時候，不會執行 fn 這個函式，而是返回一個新的函式

·  這個新的函式就是一個改變了 this 指向以後的 fn 函式

·  fn(1, 2)  的時候 this 指向 window

·  newFn(1, 2)  的時候執行的是一個和 fn 一摸一樣的函式，只不過裡面的 this 指向改成了 obj