好程序員web前端培訓(xùn)分享JavaScript學(xué)習(xí)筆記之ES5-創(chuàng)新互聯(lián)

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

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

　　 比如我們使用的微信

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

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

　　 ECMAScript 就是 js 的語法

　　 以前的版本沒有某些功能

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

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

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

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

　　 這個過程是需要時間的

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

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

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

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

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

數(shù)組方法之 forEach

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

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

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

   // 在這個函數(shù)內(nèi)部    // item 就是數(shù)組中的每一項(xiàng)    // index 就是每一項(xiàng)對應(yīng)的索引    // arr 就是原始數(shù)組    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)}

數(shù)組方法之 map

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

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

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

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

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

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

·  等價于

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)容過濾出來

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

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

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

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

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

·  等價于

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

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

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

JSON的兩個方法

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

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

JSON.parse

·  JSON.parse  是將 json 格式的字符串轉(zhuǎn)換為 js 的對象或者數(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 的對象

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

JSON.stringify

·  JSON.parse  是將 json 格式的字符串轉(zhuǎn)換為 js 的對象或者數(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 格式的對象字符串

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

this 關(guān)鍵字

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

·  可以讓我們直接使用的

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

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

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

function   fn()   {

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

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

var   obj   =   {

   fn :   function   ()   {

     console.log( this )

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

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

setTimeout( function   ()   {

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

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

div.onclick   =   function   ()   {

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

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

( function   ()   {

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

call 和 apply 和 bind

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

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

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

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

call

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

·  語法：  函數(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ù)內(nèi)部的 this 指向 window

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

·  使用 call 方法的時候

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

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

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

apply

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

·  語法：  函數(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ù)內(nèi)部的 this 指向 window

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

·  使用 apply 方法的時候

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

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

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

bind

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

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

·  語法：  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)用的時候，不會執(zhí)行 fn 這個函數(shù)，而是返回一個新的函數(shù)

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

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

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

分享題目：好程序員web前端培訓(xùn)分享JavaScript學(xué)習(xí)筆記之ES5-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article0/cdijio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、云服務(wù)器、微信公眾號

廣告

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