es6總結

ECMAScript 6(簡稱ES6)是於2015年6月正式發佈的JavaScript語言的標準

  • let關鍵字
  • 變量的解構賦值
  • 對象的簡寫屬性
  • 箭頭函數
  • 三點運算符
  • Promise對象
  • Symbol
  • ierator
  • Generator
  • 類的使用
  • async
  • 深度克隆

let關鍵字
let與var類似,用於聲明一個變量
特點:在塊級作用作用域內有效
不能重複聲明,不存在變量提升,不會預處理

變量的解構賦值

// 對選哪個的解構賦值
        let obj = {username:"kobe",age:"41"}
        let{age} = obj
        console.log(age)
        // 數組
        let arr = [1,2,3,"abc"]
        let[a,b] = arr
        console.log(a,b)

        function foo(username,age){
            console.log(username,age)
        }
        foo(obj)

對象的簡寫屬性

		let username = "kobe"
        let age = 41
        let obj = {
            username,
            age,
            getName(){
                return this.username
            }
        }

箭頭函數
特點:
1.簡潔
2.沒有自己的this,箭頭函數的this不是調用的時候決定的,而是在定義的時候處在的對象就是它的this
3.擴展理解:箭頭函數的this看外層是否有函數
有,外層函數的this就是內部箭頭函數的this
沒有,this是window

		let fun = () => console.log("我是鉤子函數")
        	fun()

        // 形參的情況
        // 1.沒有形參的時候
        let fun1 = () => console.log("我是鉤子函數")
        	fun1()

        // 2.只有一個形參的時候()可以省略
        let fun2 = a => console.log(a)
        	fun2("aaaaaa")

        // 3.兩個及兩個以上的形參的時候()不能省略
        let fun3 = (x,y) => console.log(x,y)
        	fun3(1,1)
	
        // 函數體的情況
        // 1.函數體只有一條語句或者是表達式的時候{}可以省略----會自動返回語句執行的結果或者表達式的結果
        let fun4 = (x, y) => x + y
        	console.log(fun4(1,2))

        let fun5 = (x,y) => {
            return x + y
        }
        console.log(fun5(5,5))


        let btn1 = document.getElementById("btn1")
        let btn2 = document.getElementById("btn2")

        btn1.onclick = function(){
            console.log(this)
        }
        let obj = {
            name : "箭頭函數",
            getName(){
                btn2.onclick = () => {
                    console.log(this)
                }
            }
        }
        obj.getName()

三點運算符

		let arr = [1,7]
        let arr1 = [2,3,4,5,6]
        arr = [1,...arr1,7]
        console.log(arr)

Promise對象
Promise對象:代表了未來某個將要發生的事情(異步操作)

Promise對象,可以將異步操作已同步的流程表達出來,避免層層嵌套的回調函數(回調地獄)

			let promise = new Promise((resolve,reject) =>{
            // 初始化promise狀態:pending : 初始化
            console.log("1")
            // 執行異步操作,通常是ajax請求,開啓定時器
            setTimeout(() => {
                console.log("3")
                // 根據異步任務的返回結果去修改promise的狀態
                // 異步任務執行成功
                resolve("略略略") //修改promise的狀態 爲fullfilled 成功的狀態
                // reject("哈哈哈") //修改promise的狀態 爲rejected 失敗的狀態
            },2000)
        })
        console.log("2")

        promise
            .then((data) => {//成功的回調
                console.log(data,"成功了")
            }, (error) => {//失敗的回調
                console.log(error, "失敗了")
            })

Symbol

		// 創建symbol屬性
        let symbol = Symbol()
        console.log(symbol)
        let obj = {usename:"kobe",age:41}
        obj[symbol] = "hi"
        console.log(obj)
        for(let i in obj){
            console.log(obj[i])
        }

ierator
遍歷器(Iterator)是一種接口,爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)

		// 準備一個數據
        let arr = [1,4,3,"aaa"]
        let iteratorObj = myIterator(arr)
        console.log(iteratorObj.next())

        // 將iterator接口部署到指定的數據類型上,可以用for of去遍歷
    
        for(let i of arr){
            console.log(i)
        }

Generator
Generator函數是一個狀態機,
用來生成遍歷器對象
可暫停函數(惰性求值),yield可暫停,next方法可啓動,每次返回的是yield後的表達式結果

特點:
function 與函數名之間有一個星號
內部用yield表達式來定義不同狀態

async
async函數不需要像Generator去調用next方法,遇到await等待,當籤的異步操作完成就往下執行
返回的總是Promise對象,可以用then方法進行下一步操作

		async function foo(){
            return new Promise(resolve => {
                setTimeout(resolve,2000)
            })
        }

        async function test(){
            console.log("開始執行",new Date().toTimeString())
            await foo()
            console.log("執行完畢",new Date().toTimeString())
        }
        test()
        
		async function asyncPrint(){
            let result = await Promise.resolve("promise")
            console.log(result)
        }
        asyncPrint()

類的使用

// 父類
        class Person{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            // 類的一般方法
            showName(){
                console.log(this.name)
            }
        }
        let person = new Person("kobe",41)
        console.log(person)
        person.showName()
//子類
        class StartPerson extends Person{
            constructor(name,age,salary){
                super(name,age) //調用父類的構造方法
                
                this.salary = salary
            }
            // 父類方法重寫
            showName(){
                console.log(this.name,this.age,this.salary)
            }
        }
        let startPerson = new StartPerson("kd",30,101110)
        console.log(startPerson)
        startPerson.showName()

深度克隆
拷貝數據
基本數據類型:
拷貝後會生成一份新的數據,修改拷貝後的數據不會影響原數據
對象/數組
拷貝後不會生成一份新的數據,而是拷貝引用,修改拷貝後的數據會影響原數據

拷貝數據的方法
1,直接賦值給一個變量
2.Object.assign() //淺拷貝
3.Array.prototype.concat() //淺拷貝
4.Array.prototype.slice() //淺拷貝
5.JSON.parse(JSON.stringify()) //深拷貝 。拷貝的數據裏不能有函數

淺拷貝(對象/數組)
特點:拷貝的引用,修改拷貝的數據會影響原數據
深拷貝(深度克隆)
特點:拷貝生成新的數據,修改拷貝的數據不會影響原數據

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章