好程序員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