好程序員 web前端培訓(xùn)分享 JavaScript學(xué)習(xí)筆記之ES5， 我們所說(shuō)的 ES5 和 ES6 其實(shí)就是在 js 語(yǔ)法的發(fā)展過(guò)程中的一個(gè)版本而已

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為岳西等服務(wù)建站，岳西等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為岳西企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

　 比如我們使用的微信

　 最早的版本是沒(méi)有支付功能的

　 隨著時(shí)間的流逝，后來(lái)出現(xiàn)了一個(gè)版本，這個(gè)版本里面有支付功能了

　 ECMAScript 就是 js 的語(yǔ)法

　 以前的版本沒(méi)有某些功能

　 在 ES5 這個(gè)版本的時(shí)候增加了一些功能

　 在 ES6 這個(gè)版本的時(shí)候增加了一些功能

　 因?yàn)闉g覽器是瀏覽器廠商生產(chǎn)的

　 ECMAScript 發(fā)布了新的功能以后，瀏覽器廠商需要讓自己的瀏覽器支持這些功能

　 這個(gè)過(guò)程是需要時(shí)間的

　 所以到現(xiàn)在，基本上大部分瀏覽器都可以比較完善的支持了

　 只不過(guò)有些瀏覽器還是不能全部支持

　 這就出現(xiàn)了兼容性問(wèn)題

　 所以我們寫(xiě)代碼的時(shí)候就要考慮哪些方法是 ES5 或者 ES6 的，看看是不是瀏覽器都支持

ES5 增加的數(shù)組常用方法

數(shù)組方法之 forEach

·  forEach  用于遍歷數(shù)組，和 for 循環(huán)遍歷數(shù)組一個(gè)道理

·  語(yǔ)法：  數(shù)組.forEach(function (item, index, arr) {})

var   arr   =   [ 'a' ,   'b' ,   'c' ] // forEach 就是將數(shù)組循環(huán)遍歷，數(shù)組中有多少項(xiàng)，那么這個(gè)函數(shù)就執(zhí)行多少回 arr.forEach( function   (item,   index,   arr)   {

   // 在這個(gè)函數(shù)內(nèi)部    // item 就是數(shù)組中的每一項(xiàng)    // index 就是每一項(xiàng)對(duì)應(yīng)的索引    // arr 就是原始數(shù)組    console.log(item)  

   console.log(index)  

   console.log(arr)   })

·  上面的代碼就等價(jià)于

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)}

數(shù)組方法之 map

·  map  用于遍歷數(shù)組，和 forEach 基本一致，只不過(guò)是有一個(gè)返回值

·  語(yǔ)法：  數(shù)組.map(function (item, index, arr) {})

·  返回值： 一個(gè)新的數(shù)組

var   arr   =   [ 'a' ,   'b' ,   'c' ] // forEach 就是將數(shù)組循環(huán)遍歷，數(shù)組中有多少項(xiàng)，那么這個(gè)函數(shù)就執(zhí)行多少回 var   newArr   =   arr.map( function   (item,   index,   arr)   {

   // 函數(shù)里面的三個(gè)參數(shù)和 forEach 一樣    // 我們可以在這里操作數(shù)組中的每一項(xiàng)，    // return 操作后的每一項(xiàng)    return   item   +   '11' })console.log(newArr)   // ["a11", "b11", "c11"]

·  返回值就是我們每次對(duì)數(shù)組的操作

·  等價(jià)于

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)

數(shù)組方法之 filter

·  filter  ： 是將數(shù)組遍歷一遍，按照我們的要求把數(shù)數(shù)組中符合的內(nèi)容過(guò)濾出來(lái)

·  語(yǔ)法：  數(shù)組.filter(function (item, index, arr) {})

·  返回值： 根據(jù)我們的條件過(guò)濾出來(lái)的新數(shù)組

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

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

·  新數(shù)組里面全都是大于 2 的數(shù)字

·  等價(jià)于

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  是一種特殊的字符串個(gè)是，本質(zhì)是一個(gè)字符串

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

·  就是對(duì)象內(nèi)部的  key  和  value  都用雙引號(hào)包裹的字符串（必須是雙引號(hào)）

JSON的兩個(gè)方法

·  我們有兩個(gè)方法可以使用  JSON.parse

·  json.stringify  是將 js 的對(duì)象或者數(shù)組轉(zhuǎn)換成為 json 格式的字符串

JSON.parse

·  JSON.parse  是將 json 格式的字符串轉(zhuǎn)換為 js 的對(duì)象或者數(shù)組

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 的對(duì)象

·  arr  就是我們 js 的數(shù)組

JSON.stringify

·  JSON.parse  是將 json 格式的字符串轉(zhuǎn)換為 js 的對(duì)象或者數(shù)組

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 格式的對(duì)象字符串

·  jsonArr  就是 json 格式的數(shù)組字符串

this 關(guān)鍵字

·  每一個(gè)函數(shù)內(nèi)部都有一個(gè)關(guān)鍵字是  this

·  可以讓我們直接使用的

·  重點(diǎn)：  函數(shù)內(nèi)部的 this 只和函數(shù)的調(diào)用方式有關(guān)系，和函數(shù)的定義方式?jīng)]有關(guān)系

·  函數(shù)內(nèi)部的 this 指向誰(shuí)，取決于函數(shù)的調(diào)用方式

·  全局定義的函數(shù)直接調(diào)用， this => window

function   fn()   {

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

·  對(duì)象內(nèi)部的方法調(diào)用， this => 調(diào)用者

var   obj   =   {

   fn :   function   ()   {

     console.log( this )

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

·  定時(shí)器的處理函數(shù)， this => window

setTimeout( function   ()   {

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

·  事件處理函數(shù)， this => 事件源

div.onclick   =   function   ()   {

   console.log( this )} // 當(dāng)你點(diǎn)擊 div 的時(shí)候，this 指向 div

·  自調(diào)用函數(shù)， this => window

( function   ()   {

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

call 和 apply 和 bind

·  剛才我們說(shuō)過(guò)的都是函數(shù)的基本調(diào)用方式里面的 this 指向

·  我們還有三個(gè)可以忽略函數(shù)本身的 this 指向轉(zhuǎn)而指向別的地方

·  這三個(gè)方法就是  call  /  apply  /  bind

·  是強(qiáng)行改變 this 指向的方法

call

·  call  方法是附加在函數(shù)調(diào)用后面使用，可以忽略函數(shù)本身的 this 指向

·  語(yǔ)法：  函數(shù)名.call(要改變的 this 指向，要給函數(shù)傳遞的參數(shù)1，要給函數(shù)傳遞的參數(shù)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()  的時(shí)候，函數(shù)內(nèi)部的 this 指向 window

·  fn.call(obj, 1, 2)  的時(shí)候，函數(shù)內(nèi)部的 this 就指向了 obj 這個(gè)對(duì)象

·  使用 call 方法的時(shí)候

·  會(huì)立即執(zhí)行函數(shù)

·  第一個(gè)參數(shù)是你要改變的函數(shù)內(nèi)部的 this 指向

·  第二個(gè)參數(shù)開(kāi)始，依次是向函數(shù)傳遞參數(shù)

apply

·  apply  方法是附加在函數(shù)調(diào)用后面使用，可以忽略函數(shù)本身的 this 指向

·  語(yǔ)法：  函數(shù)名.apply(要改變的 this 指向，[要給函數(shù)傳遞的參數(shù)1， 要給函數(shù)傳遞的參數(shù)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()  的時(shí)候，函數(shù)內(nèi)部的 this 指向 window

·  fn.apply(obj, [1, 2])  的時(shí)候，函數(shù)內(nèi)部的 this 就指向了 obj 這個(gè)對(duì)象

·  使用 apply 方法的時(shí)候

·  會(huì)立即執(zhí)行函數(shù)

·  第一個(gè)參數(shù)是你要改變的函數(shù)內(nèi)部的 this 指向

·  第二個(gè)參數(shù)是一個(gè)  數(shù)組 ，數(shù)組里面的每一項(xiàng)依次是向函數(shù)傳遞的參數(shù)

bind

·  bind  方法是附加在函數(shù)調(diào)用后面使用，可以忽略函數(shù)本身的 this 指向

·  和 call / apply 有一些不一樣，就是不會(huì)立即執(zhí)行函數(shù)，而是返回一個(gè)已經(jīng)改變了 this 指向的函數(shù)

·  語(yǔ)法：  var newFn = 函數(shù)名.bind(要改變的 this 指向); newFn(傳遞參數(shù))

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 調(diào)用的時(shí)候，不會(huì)執(zhí)行 fn 這個(gè)函數(shù)，而是返回一個(gè)新的函數(shù)

·  這個(gè)新的函數(shù)就是一個(gè)改變了 this 指向以后的 fn 函數(shù)

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

·  newFn(1, 2)  的時(shí)候執(zhí)行的是一個(gè)和 fn 一摸一樣的函數(shù)，只不過(guò)里面的 this 指向改成了 obj

網(wǎng)站名稱：好程序員web前端培訓(xùn)分享JavaScript學(xué)習(xí)筆記之ES5
文章路徑：http://jinyejixie.com/article2/igooic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)