ES5,6,7筆記(持續更新中~~~)

重要版本

- es5 : 09年發佈
 - es6 : 15年發佈, ECMA2015
 - es7 : 16年發佈, ECMA2016 (微變)

ES5部分新增內容

嚴格模式
    - use strict聲明
    - 必須用var定義變量
    - 禁止自定義函數this指向window
    - eval建立本身的做用域,避免函數不安全
    - 對象不容許有重名的屬性

JSON對象
    - JSON.stringify(obj/arr) //對象(數組)變字符
    - JSON.parse(json)        //字符變對象(數組)

Object擴展

Object經常使用的兩個靜態方法:
    - Object.create(prototype,[descriptors])
        - 以對象爲原型對象建立新對象,並擴展能夠描述的屬性
            - value: 指定值
            - writable: false //是否可修改
            - configurable: false //是否可刪
            - enumerable: false //是否可列舉
    - Object.defineProperties(Object,descriptors)
        - 指定對象擴展多個屬性
            - get //獲取這個屬性時惰性創建屬性值
            - set //修改這個屬性時觸發的函數(外部修改無效)
對象自己的兩個方法:
    - get propertyName(){} //獲取propertyName時惰性創建屬性值
    - set propertyName(data){} //修改時觸發的函數(外部修改無效)

Array擴展

Array.prototype.indexOf(value)
Array.prototype.lastIndexOf(value)
Array.prototype.forEach(function(item,index){}) //同步遍歷,arguments僞數組不能夠用
Array.prototype.map(function(item,index){})
Array.prototype.filter(function(item,index){})

Function擴展

-bind //改變返回
    -call apply//改變執行(js)

ES6部分新增內容

let和const

- let
        - 塊級做用域有效
        - 不可重複定義
        - 不會變量提高
        - 特別地,循環定義時let僅第一次有效,不一樣於var爲全局變量
    - const
        - 定義常量
        - 其他同let

 解構賦值

- 對象或數組

模板字符串

- `${}`

對象簡寫方法

- 變量key value同名
    - 函數func(){}

箭頭函數

- 官方:箭頭函數無本身的this(因此按照閉包原理:this不是在調用的時候決定的,而是在定義的時候所處的對象就是this)
    - 沿做用域鏈,有外層函數就是外層函數的this,無直到最外層則爲window

 三點擴展運算符

- 函數可變參數
        - 只可放在最後
    - 擴展運算符
        - 展開數組元素

形參的默認值

- 定義函數時能夠給函數參數設定形參默認值

Promise

- Promise是一個構造函數,能夠生成promise實例對象
    - 解決異步操做的回調地獄問題(實際未解決)
    - promise實例對象的三個狀態
        - 初始化狀態pending
        - 操做成功狀態fullfilled
        - 操做失敗狀態rejected
    - 建立實例對象
        let promise = new Promise((resolve, reject)=>{
            // pending狀態下:放置異步操做代碼與構造函數外同步執行
           // fullfilled狀態下:操做成功調用resolve(valueSuccess)函數傳值
           // rejected狀態下:操做失敗調用reject(valueErr)函數傳值
        })
        promise.then((valueSuccess)=>{}, (valueErr)=>{})//響應成功或失敗進而執行代碼,兩者只有先調用的會有做用

 Symbol

Symbol是es6新增的一個原始數據類型(String,Number,Boolean,Null,Undefined,Object)
    -Symbol產生的值是惟一的,可作key,只能夠obj[symbol]形式
    -Symbol值不能夠和其餘類型進行計算
    -遍歷時(for in,for of)不會遍歷出Symbol的屬性
    -傳參作標識 let symbol = Symbol('標識')

Interator(迭代器)

做用:
    - iterator是一種接口機制,提供一個統一的訪問接口(在Symbol.interator屬性上部署接口)
    - 是數據結構能夠按照某種次序排列
    -將iterator接口部署到數據類型(數組,字符串,arguments僞數組,set容器,map容器)上,可使用新命令for of(對象不能夠哦)
    -三點運算符,解構賦值,其實默認調用interator接口
原理:
    - 建立一個遍歷器對象(指針對象),指向數據結構的起始位置
    - 第一次調用next()方法,指針指向成員,依次向下
        - next()方法返回{value:當前成員的值,done:布爾值}
        - 遍歷結束value值爲undefined,done爲true
            let myInterator = (arr) => {
                let temp = 0
                return {
                    next() {
                        return temp < arr.length ? {value: arr[temp++], done: false} : {value: undefined, done: true}
                        }
                    }
                }
            }
        }
        -部署原理
        let data = {
        [Symbol.interator]: myInterator函數原理(arr改爲this原對象data)
        }

 Generator(生成器)

概念 
　　 - 解決異步編程方法之一(也未實際解決)
　　 - 惰性求值(能夠暫停),yield暫停,next啓動
用法原理 - 代碼演示 function* Generator() { yield 'first' let two = yield 'second' //two等於 哈哈 next傳入的參數給上一次的返回結果 return 'four' } let myGenerator = Generator() //生成一個Interator指針對象,代碼不執行 console.log(myGenerator.next()) console.log(myGenerator.next()) console.log(myGenerator.next('哈哈')) console.log(myGenerator.next())
 // { value: 'first', done: false } // { value: 'second', done: false } // { value: 'four', done: true } // { value: undefined, done: true }

爲對象添加Symbol.interator爲遍歷器屬性可用for of
let obj = {name: 'wang', age: 22}
obj[Symbol.interator] = function* myGenerator(){
　　yield 1
　　yield 2
　　yield 3
}
for(let item of obj){console.log(item)} //分別爲1,2,3


用法實例(未真正解決)
　　- 代碼

function getNews(url) {
    fetch(url).then(r => r.json()).then(data => {
        //異步獲取的數據
　　　　　　getGenerator.next(data)
    })
}
function firstDoSomething(data) {
    //執行的操做
}
function* myGenerator() {//本來的一層層回調操做在這裏,類同步執行
    let data = yield getNews('哈哈')
    yield firstDoSomething(data)
    // yield secondDoSomething(data) yield一層層異步獲取以後處理函數
}
let getGenerator = myGenerator()
getGenerator.next()

 async(ES7)

async
    - 解決異步回調問題
    - Generator的語法糖
    - async老是返回一個Promise對象,可用其方法(如then)
    - Generator的語法糖,async相似取代*, await相似取代yield
代碼
async function first() {
    return new Promise(resolve => {
        //執行異步操做
        let data = {}
        resolve(data) //reject會報錯,通常用傳resolve('錯誤信息')來處理
    })
}
async function test() {
    //await普通函數獲取是return值
    //await async獲取是promise的resolve參數值或reject且報錯
    //
    let data = await first()
    console.log(data)
    // await second 回調嵌套層的每一個操做,與Generator思想同樣
    // await third
}
test()

 class類

class Person extends Father { //extends Father繼承
    constructor(name, age, sex) { //經過constructor函數建立實例對象
        super(name, age) //調用父類構造函數,有父必寫
        this.sex = sex
    }
    // function fun(){}不容許
    fun() { //方法綁在原型上
        console.log(this.sex)
    }
}
let obj = new Person('wang', 15, 'boy')
obj.fun()

ES6模塊化

字符串,數值,數組,對象擴展方法

字符串
    - string.includes(str) //判斷是否包含指定的字符串
    - string.startsWith(str) //是否以指定字符串開頭
    - string.endsWith(str)
    - string.repeat(count) //字符串變成重複的次數

數值
    - 二進制和八進制表示: 二進制0b, 八進制0o
    - Number.isFinite(Infinity)  //判斷是不是有限大的數
    - Number.NaN(num)         //判斷是不是NaN
    - Number.isInteger(num)  //判斷是不是整數
    - Number.parseInt(str)     //將字符串轉化爲數值,首含即取(Number首含爲NaN)
    - Math.trunc(num)           //去除小數部分

數組
    - Array.from(v) //將僞數組或可遍歷對象變成真數組
    - Array.of(v1,v2,v3) //將參數返回成一個數組
    - arr.find(callback)  //callback(item, index)類filter,返回知足條件的第一個值
    - arr.findIndex(callback) //同上,返回第一個索引

對象
    - Object(v1, v2) //判斷兩個數據是否相等
        - 嚴格比較(相似===)
        - Object.is(0, -0) 不等 //類表面字符串形式比較
        - Object.is(NaN, NaN) 相等
    - let temp = Object.assign(target, source1, source2, source3) //將source123的屬性賦值給target,target與temp徹底同樣
    - 能夠經過obj.__proto__修改對象的隱式原型

 深度克隆(拷貝)

拷貝數據的方法
    - 直接賦值=                             //淺拷貝
    - Object.assign()                      //淺拷貝,一層深度值類型深拷,引用類型淺了
    - Array.prototype.concat()             //淺拷貝,同上
    - Array.prototype.slice()              //淺拷貝,同上
    - JSON.parse(JSON.stringify())         //深拷貝,JSON.stringify不支持函數,Symbol,undefined

 

Object.prototype.toString.call()
    -調用原生的未被重寫的toString
    -皆可判斷成Number,String,Boolean,Null,Undefined,Array,Function,Object,Symbol字符串
深度克隆代碼
    - 克隆自定義的函數其實並非真正克隆,如本身增長屬性的狀況也會修改
let a = function (){}
let b = a
b['test'] = 'test'
console.log(a['test']) //test

代碼實現
function deepClone(a) {
    let type = Object.prototype.toString.call(a).slice(8, -1)
    if (type === 'Object' || type === 'Array') {
        let result
        if (type === 'Object') {
            result = {}
        } else {
            result = []
        }
        for (let i in a) {
            result[i] = deepClone(a[i])
        }
        return result
    } else {
        return a
    }
}

 Set和Map容器

Set容器
    - 無序不可重複的多個值得集合體
    - new Set(array)
    - add(value)
    - delete(value)
    - has(value)
    - clear()
    -size
Map容器
    - 無序key不可重複的key-value集合體
    - new Map([[key1, value1], [key2, value2]])
    - set(key,value)
    - get(key)
    - delete(key)
    - has(key)
    - clear()
    - size

for of

可遍歷
    - 字符串
    - 數組
    - 僞數組
    - Set
    - Map
    - 沒有對象

ES7部分新增內容

async

上文講過

指數(冪)運算符

console.log(5**3) //125

擴展方法

數組
    - Array.prototype.includes(value) //判斷數組中是否有value