ES5和ES6筆記

JS對象

JSON.stringify(obj/arr) //js對象或數組轉換爲json對象或數組

JSON.parse(json) //json對象或數組轉換爲js對象或數組

var obj = {name: 'Tom'}
 obj = JSON.stringify(obj)
 console.log(obj); //{"name":"Tom"} String
 obj = JSON.parse(obj)
 console.log(obj); //{ name: 'Tom' } Object

　　

JS數組

Array.prototype.indexOf(value) //獲得值在數組中的第一個索引

Array.prototype.LastIndexOf(value)  //獲得值在數組中的最後一個索引

Array.prototype.forEach(function(item,index){}) //遍歷數組

Array.prototype.map(function(item,index){ return item+1 }) //遍歷數組返回一個新的數組，返回加工以後的值
//item每一個+1

Array.prototype.filter(function(item,index){}) //遍歷過濾出一個新的子數組，返回條件爲true的值

　　

JS函數

區別bind()與call()和aplly()?

1. 都能指定函數中的this
2. call和apply是當即調用函數
3. bind是將函數返回
4. 傳入參數的形式

Function.prototype.bind(obj) //將函數內的this綁定爲obj，並將函數返回

    foo.call(obj,33,44)
    foo.apply(obj,[33,44])
    foo.bind(obj,33,44)() //獲得返回的函數，須要再後面加括號才能當即調用
    //bind傳參方式和call同樣

    setTimeout(function(){
        console.log(this)
    }.bind(obj),1000) //這裏的this指向obj

　　

let關鍵字

特色： 在塊級做用域內有效 不能重複聲明 不會預處理，不存在提高

應用： 循環遍歷加監聽

console.log(i) //報錯
let i = 1
let i = 1 //報錯

　

const關鍵字

做用：定義一個常量

特色： 不能修改 其餘特色同let

應用： 保存不用改變的數據

變量的解構 賦值

從對象或數組中提取數據，並賦值給變量（多個）

let obj = {name:'Tom' , age:12}
let {name , age} = obj //等於賦obj.name和obj.age中的值

let arr = [1,3,5,'abc',true]
let [a,b,c,d,e] = arr //根據下標來給值
let[,,a,b] = arr //a==5,b=='abc

function foo({name,age}){  // let {name,age} = obj
    console,log(name , age)
}
foo(obj)

　　

模板字符串

簡化字符串的拼接 模板字符串必須用到``包含 變化的部分用${xxx}定義

let obj ={name:'Tom' ,age:12}
let str = `個人名字叫：${obj.name}，個人年齡是：${obj.age}`

　　

簡化的對象寫法

省略同名的屬性值 省略同名的function

let name = 'Tom'
let age =39
let obj = {
    name:name,
    age:age,
    getName: function(){
        return this.name
    }
}

//在es6中
let obj = { //同名的屬性能夠省略不寫
    name,
    age,
    getName(){ //能夠省略函數的:function
        return this.name
    }
}

　　

箭頭函數詳解

做用：定義匿名函數

基本語法： 沒有參數：()=> console.log('xxxx) 一個參數:i=>i+2 大於一個參數：(i,j)=> i+j 函數體不用大括號:默認返回結果 函數體若是有多個語句，須要用{}包圍，如有須要返回的值，須要手動返回

使用場景：多用於定義回調函數

箭頭函數的特色：

1.簡潔

2.箭頭函數沒有本身的this，箭頭函數的this不是調用時候決定的，而是在定義的時候處在的對象就是他的this

3.擴展理解：箭頭函數的this看外層是否有函數，若是有，外層函數的this就是內部箭頭函數的this，若是沒有則this是window

let fun = ()=> console.log('xxx')
fun() //xxx

let fun = (i,j)=> console.log(i+j) 
fun(1,2) //3

let fun = (x,y) => {
    x+y  //undefined

    return x+y //3
    //只有一條語句時一般把{}省略，會自動返回執行結果
}
fun(1,2)

btn1.onclick = () =>{
            alert(this) //點擊btn1以後發現this指向window
}
let obh = {
    name:'Tom'
    getName(){
        btn1.onclick = () =>{
            alert(this)
        }
    }
}
obj.getName() //點擊btn1以後發現this指向obj

　　

點點點運算符

用途：

1.rest（可變）參數，用來取代arguments，但比arguments靈活，只能是最後部分形參參數，後面不能跟其餘形參

2.擴展運算符

何爲arguments

funciton foo(a,b){
    console.log(arguments)
    arguments.callee() //指向函數自己
    arguments.forEach(function(item,index){
        console.log(item,index) //報錯
    })
}
foo(1,2) 
//arguments是個僞數組

funciton foo(...value){ //經過三點運算符收集的實參造成數組賦給value
    console.log(arguments)
    console.log(value) //真數組，取代了arguments
    value.forEach(function(item,index){
        console.log(item,index) // 1，0
    })
}
foo(1)

funciton foo(a,...value){ //經過三點運算符收集的實參造成數組賦給value
    console.log(arguments)
    console.log(value) //真數組，取代了arguments,[2]
    value.forEach(function(item,index){
        console.log(item,index) // 2，0
    })
}
foo(1,2) //第一個1給了形參a

let arr = [1,6]
let arr1 = [2,3,4,5]
//console.log(...arr1) 至關於把arr1數組遍歷把每一個值拿出來變成2,3,4,5
arr = [1, ...arr1,6]  //[1,2,3,4,5,6]

　　

形參默認值

function Fun(x=0,y=0){
    this.x=x
    this.y=y
}
let fun = new Fun(1,2)
fun.x //1
fun.y //2

let fun1 = new Fun()
fun.x //0
fun.y //0

　　

Promise對象

理解：

1.Promise對象：表明了將來某個將要發生的事件(一般是一個異步操做)

2.有了Promise對象，能夠將異步操做以同步的流程表達出來，避免了層層嵌套的回調函數（回調地獄:回調函數多的時候有不少嵌套，中間某個環節出了問題，很差解決，由於回調函數沒法控制。還有一種回調函數之間的耦合度比較高，互相有依賴關係，致使不可預期的錯誤發生）

3.ES6的Promise是一個構造函數，用來生成promise實例

使用promise的基本步驟（2步）

//建立promise對象
    let promise = new Promise((resolve,reject)=>{
        //初始化promise狀態爲pending
        //執行異步操做，一般是發送ajax請求，開啓定時器
        console.log(111)
        setTimeout(()=>{
            console.log(333) 
            //根據異步任務的返回結果來去修改promise狀態
            //異步任務執行成功
            resolve('hh成功了') //自動修改promise的狀態爲fullfilled 成功狀態
            //異步任務執行失敗
            reject('失敗了~') //修改promise的狀態爲rejected 失敗狀態
        },2000)
    })
    console(222) // 111 222 333 

    //調用promise的then()
    promise.then((data)=>{
        //成功的回調，當狀態還爲初始化時，不會調用,狀態變爲成功時調用
        console.log(data) //hh成功了
    } , (error)=>{
        //失敗的回調，狀態變爲失敗時調用
        console.log(error) //失敗了~
    })

　　

promise對象的3個狀態 1.pending：初始化狀態 2.fullfilled：成功狀態 3.rejected：失敗狀態

應用： 使用promise實現超時處理

使用promise封裝處理ajax請求

symbol

概念：ES6中添加了一種原始數據類型symbol

特色：

1.symbol屬性對應的值是惟一的，解決命名衝突問題

2.symbol值不能與其餘數據進行計算，包括同字符串拼串

3.for in，for of遍歷時不會遍歷symbol屬性

使用：

//調用symbol函數獲得symbol值
let symbol = Symbol()   //不像構造函數要去new
console.log(symbol) //Symbol()
let obj ={name:'Tom',age:12}
//obj.sex = '男'
//obj.symbol = 'hello' 只是給obj添加了一個叫symbol的屬性
obj[symbol] = 'hello'  //obj多了symbol():'hello' 

//for in , for of不能遍歷symbol屬性
for(let i in obj){
    console.log(i) //沒有symbol
}


//能夠去定義常量
const Person_key = Symbol('person_key')
console.log(Person_key) //Symbol(person_key)


//傳參標識
let symbol2 = Symbol('one')
let symbol3 = Symbol('two')
console.log(symbol2 == symbol3) //false
console.log(symbol2,symbol3)  //Symbol(one) Symbol(two)

　　

內置symbol值 ES6提供了11個內置的Symbol值，指向語言內部的使用方法 Symbol.iterator屬性指向該對象的默認遍歷器方法

iterator遍歷器

概念：iterator是一種藉口機制，爲各類不一樣的數據結構提供統一的訪問機制

做用

1.爲各類數據結構提供一個統一的，簡便的訪問接口

2.使得數據結構的成員可以按某種次序排列

3.ES6創造了一種新的遍歷命令for of循環，iterator接口主要供for of消費

工做原理：

1.建立一個指針對象（遍歷器對象），指向數據結構的起始位置

2.第一次調用next方法，指針自動指向數據結構的第一個成員

3.接下來不斷調用next方法，指針會一直日後移動，直到指向最後一個成員

4.每調用next方法返回的是一個包含value和done的對象，{value:當前成員的值 , done:布爾值} *value表示當前成員的值，done對應的布爾值表示當前的數據結構是否遍歷結束 *當遍歷結束的時候value返回undefined，done返回true

原生具有iterator接口的數據（可用for of遍歷）

擴展理解： 1.當數據結構上部署了Symbol.iterator接口，該數據就是能夠用for of遍歷 2.當使用for of去遍歷目標數據時，該數據會自動尋找Symbol.iterator屬性

//模擬指針對象（遍歷器對象）
function myIterator(arr){ //iterator接口
    let nextIndex = 0 //記錄指針位置
    return {
        //遍歷器對象
        next: function(){
            return nextIndex < arr.length?{value:arr[nextIndex++],done:false}:{value:undefined,done:true}            
        }
    }
}
let arr = [4,1,65,'abc']
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next()) //4
console.log(iteratorObj.next())  //1
console.log(iteratorObj.next())  //65
console.log(iteratorObj.next())   //'abc' 
console.log(iteratorObj.next())   //undefined true

//將iterator接口部署到指定的數據類型上，可使用for of去循環遍歷
//數組，字符串，arguments，set容器，map容器
//對象沒有iterator接口

for(let i of arr){
    console.log(i) //4,1,65,'abc'
}

let str = 'abcdefg'
for(let i of str){
    console.log(i) //a,b,c,d,e,g
}

function fun(){
    for(let i of arguments){
        console.iog(i)
    }
}
fun(1,4,5,'abc') //1,4,5,'abc'


let targetData = { //等同於在指定的數據內結構上部署了iterator接口
                    //當使用for of去遍歷某一個數據結構時，首先去找Symbol.iterator，找到了就去遍歷，沒有就報錯
    [Symbol.iterator]:function(){
        let nextIndex = 0 //記錄指針位置
        return {
        //遍歷器對象
        next: function(){
            return nextIndex < this.length?{value:this[nextIndex++],done:false}:{value:undefined,done:true}            
        }
    }
    }
}

//使用三點運算符，解構賦值，默認調用iterator接口
let arr2 = [1,6]
let arr3 = [2,3,4,5]
arr2 = [1,...arr3,6]
let [a,b] = arr2
console.log(a,b) //1,2

　　

Genrator函數

概念：

1.ES6提供的解決異步編程方案之一

2.Genrator函數是一個狀態機，內部封裝了不一樣狀態的數據

3.用來生成遍歷器對象 4.可暫停函數（惰性求值），yield可暫停，next方法可啓動。每次返回的是yield後的表達式結果

特色：    1.function與函數名之間有個*號

　　　　2.內部用yield表達式來定義不一樣的狀態

　　　　3.generator函數返回的是指針對象，而不會執行函數的內部邏輯

　　　　4.調用next方法函數內部邏輯開始執行，遇到yield表達式中止，返回{value: field後的表達式結果,done:布爾值}

　　　　5.再次調用next方法會從上一次中止時的yield處開始，直到最後 6.yield語句返回結果一般爲undefined，當調用next方法時，傳參內容會做爲啓動時yield語句的返回值

function* generatorExample(){
        console.log(1)
        let result = yield 'hello'  //狀態值爲hello
        console.log(result) //aaaaaaa 不傳的話爲undefined
        console.log(2)
        yield 'generator'  //狀態值爲generator
        return '3'
    }
    let MG = generatorExample()
    //MG.next() //1  沒有2第一次在'hello'暫停了
    console.log(MG.next()) //{value: 'hello',done:false}
    console.log(MG.next('aaaaaaa'))  //2 {value:'generator',done:false}
    console.log(MG.next())  //{value:3,done:true}

    //對象的symbol.iterator屬性 指向遍歷器對象
    let obj ={name:'Tom',age:39}
    for(let i of obj){
        console.log(i) //報錯
    }
    obj[symbol.iterator] = function* myTest(){
        //返回一個遍歷器對象，至關於給對象認爲部署了一個iterator接口
        yield 1
        yield 2
        yield 3
    }
    for(let i of obj){
        console.log(i) //1 2 3 
    }

　　

async函數

概念： 真正意義上去解決異步回調的問題，同步流程表達異步操做

本質：Generator的語法糖

語法： async function foo(){ await 異步操做; await 異步操做; }

特色：    1.不須要像Generator去調用next方法，遇到await等待，當前的異步操做完成就往下執行

　　　　2.返回的老是Promise對象，能夠用then方法進行下一步操做

　　　　3.async取代Generator函數的星號*，await取代yield

　　　　4.語意上更爲明確，使用簡單，暫時沒有任何反作用

function foo(){
    return new Promise(resolve => {
        setTimeout(resolve,2000)
    })
}
async function test(){
    console('開始執行'，new Date().toTimeString())
    await foo()
    console('執行結束'，new Date().toTimeString())
}
text() //開始執行 隔了兩秒 執行結束

//async裏的await返回值
function fun1(){
    return 1
}
async function fun(){
    let result = await fun1()
    console.log(result)
}
fun() //1

async function fun(){
    let result = await Promise.resolve('aaa') //直接把Promise對象改成成功狀態
    console.log(result) //aaa
    result = await Promise.reject('bbb')
    console.log(result) //報錯
}
fun()

　　

class類使用

1.經過class定義類，實現類的繼承

2.在類中經過constructor定義構造方法

3.經過new來建立類的實例

4.經過extends來實現類的繼承

5.經過super調用父類構造方法

6.重寫從父類繼承的通常方法

function Person(name,age){
    this.name = name 
    this.age = age
}
let person = new Person('Tom',12)
 
//定義一我的物的類
class Person {
    //類的構造方法
    constructor(name , age){
        this.name = name
        this.age = age
    }
    //類的通常方法
    showName(){
        console.log(this.name)
    } //放在實例對象的隱式原型上
}
let person = new Person('Tom',12)
person.showName() //Tom

class StarPerson extends Person{
    constructor(name,age,salary){
        super(name,age)//調用父類的構造方法
        this.salary = salary
    }
    showName(){
        //父類的方法重寫
        console.log(this.name,this.age,this.salary)
    }
}
let p1 = new StarPerson('Jack',20,5000) 
console.log(p1)
p1.showName()

　　

字符串擴展

1.includes(str):判斷是否包含指定的字符串

2.startsWith(str):判斷是否以指定字符串開頭

3.endsWith(str):判斷是否以指定字符串結尾

4.repeat(count):重複指定次數

let str = 'a'
console.log(str.includes('a')) //true
console.log(str.startsWith('b')) //false
console.log(str.endsWith('a')) //true
console.log(str.repeat(5)) //aaaaa

　　

數組方法的擴展

1.Array.from(v):能夠將僞數組或可遍歷對象轉換成真實數組

2.Array.of(v1,v2,v3):將一系列值轉換成數組

3.find(function(value,index,arr){return true}):找出第一個知足條件返回true的元素

4.findIndex(function(value,index,arr){return true}):找出第一個知足條件返回true的元素下標

let arr = [2,3,4,3,6]
let a = arr.find(function (item,index){
    return item>=4
})
console.log(a) //4

　　

對象方法擴展

1.Object.is(v1,v2) 判斷兩個數據是否徹底相等

2.Object.assign(target,source1,source2) 將源對象的屬性複製到目標對象上

3.直接操做__proto__屬性

console.log(0 == -0) //true
console.log(Object.is(0,-0)) //flase
console.log(Object.is(NaN,NaN))//true 由於是用字符串的形式來判斷

let obj = {}
let obj1 = {name:'Tom' , age:12}
let obj2 = {name:'Jack' , age:20}
let obj3 = {salary:5000}
Object.assign(obj,obj1,obj2,obj3)
console.log(obj) //{ name: 'Jack', age: 20, salary: 5000 }

let obj1={}
let obj2 ={money:50000}
obj1.__proto__ =obj2
console.log(obj1.money); //obj1.__proto__指向了obj2這個對象，obj1能夠經過原型鏈尋找獲得這個對象的屬性

　　

深度克隆

let str = 'abcd'
let str2 = str
str2 = ''
console.log(str) //abcd

//拷貝數組/對象 沒有生成新的數據，而是複製了一份引用
let arr = {1,4,{name:'Tom',age:12}}
let arr2 = arr
arr2[0] = 'abcd'
console.log(arr[0]) //abcd 

　　

淺拷貝(對象/數組)： 特色：拷貝的是引用，修改拷貝之後的數據會影響原數據,使得原數據不安全

深拷貝(深度克隆)： 特色：拷貝的時候生成新數據，修改新數據不會影響原數據

拷貝數據： 基本數據類型：拷貝後生成一份新的數據，修改拷貝之後的數據不會影響原數據

對象數組：拷貝後不會生成新的數據，而是拷貝的是引用。修改拷貝以後的數據會影響原來的數據

拷貝數據的方法：

1.直接賦值給一個變量 淺拷貝

2.Object.assign() 淺拷貝

3.Array.prototype.concat() 淺拷貝

4.Array.prototype.slice(startIndex,endIndex) 截取子數組 淺拷貝

5.ISON.parse(JSON.stringify()) 深拷貝(深度克隆)，拷貝的數據裏不能有函數，處理不了，由於這兩個方法只能傳入原生的JS對象或數組，傳入函數轉過來發現函數變成null

let obj = {name:'Tom'}
let obj2 = Object.assign(obj)
console.log(obj2)
obj2.name = 'Jack'
console.log(obj.name) //Jack

let arr = [1,2,{name:'Tom'}]
let arr2 = arr.concat() 
arr2[2].name = 'a'
console.log(arr[2].name) //a
let arr3 = arr.slice() //至關於傳整個數組[1,2,{name:'a'}]
arr3[2].name = 'b'
console.log(arr[2].name) //b

let arr = [1,2,{name:'Tom'}]
let arr2 = JSON.stringify(arr) //arr2是個JSON數組，是個字符串
arr2 = JSON.parse(arr2)
arr2[2].name = 'Jack'
console.log(arr[2].name) //Tom

　　

如何實現深度克隆? 拷貝數據裏有對象或數組，還要繼續遍歷對象或者數組拿到裏面的每一項的值，一直到拿到的都是基本數據類型，而後再去複製，這就是深度克隆

知識點儲備： 如何判斷數據類型：arr ---> Array null--->Null

1.typeof返回的數據類型：String Number Boolean Undefined Object Function

2.Object.prototype.toString.call(obj)

let result = 'abcd'
resunlt = null
result = [1,2,3]
console.log(Object.prototype.toString.call(result)) //[Object String] [Object Null] [Object Array]
console.log(Object.prototype.toString.call(result).slice(8,-1)) //String Null Array
for in 循環對象的到屬性名 數組獲得下標
    function checkType(tarhet){
        return Object.prototype.toString.call(target).slice(8,-1)
    }
    console.log(checkType(result)) //Array

    //實現深度克隆 針對對象數組
    function clone(target){
        //判斷拷貝的數據類型
        //result是最終克隆的數據
        let result,targetType = checkType(target)
        if(targetType === 'Objcect'){
            result = {}
        }
        else if(targetType ==='Array'){
            result = []
        }
        else{
            return target
        }

        //遍歷目標數據
        for(let i in target){
            //獲取遍歷數據結構的每一項值
            let value = target[i]
            //判斷目標結構裏的每一值是否存在對象/數組
            if(checkType(value) ==='Object' || checkType(value) === 'Array'){
                //繼續遍歷取到的value值
                result[i] = clone(value)
            }else{ //獲取到的value是基本數據類型或者函數
                 result[i] =value
            }
           
        }
        return result
    }

let arr = [1,2,{age:12}]
let arr2 = clone(arr)
arr2[2] = 'a'
console.log(arr , arr2); //[ 1, 2, { age: 12 } ] [ 1, 2, 'a' ]

　　

Set和Map容器

1.Set容器：無序不可重複的多個value的集合體 Set() Set(array) add(value) delete(value) has(value) clear() size()

2.Map容器：無序的key不重複的多個key-value的集合體 Map() Map(array) set(key,value) //添加 get(value) delete(value) has(value) clear() size()

let set = new Set([1,2,3,4,2,1])
console.log(set) //[1,2,3,4]
set.add(7)
console.log(set.size)//5 
set.clear()//清空set

let map = new Map([['key','value'],[36,'age']])
map.set(78,'hh')
console.log(map) //Map { 'key' => 'value', 36 => 'age', 78 => 'hh' }
map.delete(36)
console.log(map)//Map { 'key' => 'value' , 78 => 'hh' }

　　

Array.prototype.includes(value) :判斷數組中是否包含指定value

let arr = [1,2,3,4,'abc']
console.log(arr.includes('a')) //false