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