ES5我們所說的 ES5 和 ES6 其實就是在 js 語法的發展過程中的一個版本而已比如我們使用的微信最早的版本是沒有支付功能的隨著時間的流逝，後來出現了一個版本，這個版本里面有支付功能了ECMAScript 就是 js 的語法以前的版本沒有某些功能在 ES5 這個版本的時候增加了一些功能在 ES6 這個版本的時候增加了一些功能因為瀏覽器是瀏覽器廠商生產的ECMAScript 釋出了新的功能以後，瀏覽器廠商需要讓自己的瀏覽器支援這些功能這個過程是需要時間的所以到現在，基本上大部分瀏覽器都可以比較完善的支援了只不過有些瀏覽器還是不能全部支援這就出現了相容性問題所以我們寫程式碼的時候就要考慮哪些方法是 ES5 或者 ES6 的，看看是不是瀏覽器都支援ES5 增加的陣列常用方法陣列方法之 forEachforEach 用於遍歷陣列，和 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)}

陣列方法之 mapmap 用於遍歷陣列，和 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)

陣列方法之 filterfilter ： 是將陣列遍歷一遍，按照我們的要求把數陣列中符合的內容過濾出來語法： 陣列.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.parsejson.stringify 是將 js 的物件或者陣列轉換成為 json 格式的字串JSON.parseJSON.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.stringifyJSON.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 指向的方法callcall 方法是附加在函式呼叫後面使用，可以忽略函式本身的 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 指向 windowfn.call(obj, 1, 2) 的時候，函式內部的 this 就指向了 obj 這個物件使用 call 方法的時候會立即執行函式第一個引數是你要改變的函式內部的 this 指向第二個引數開始，依次是向函式傳遞引數applyapply 方法是附加在函式呼叫後面使用，可以忽略函式本身的 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 指向 windowfn.apply(obj, [1, 2]) 的時候，函式內部的 this 就指向了 obj 這個物件使用 apply 方法的時候會立即執行函式第一個引數是你要改變的函式內部的 this 指向第二個引數是一個 陣列，數組裡面的每一項依次是向函式傳遞的引數bindbind 方法是附加在函式呼叫後面使用，可以忽略函式本身的 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 指向 windownewFn(1, 2) 的時候執行的是一個和 fn 一摸一樣的函式，只不過裡面的 this 指向改成了 obj