好程序員web前端培訓(xùn)分享JavaScript學(xué)習(xí)筆記之ES5

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

　所以我們寫代碼的時(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è)字符串

· 就是對(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://bm7419.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)

猜你還喜歡下面的內(nèi)容