Es6 箭頭函數

語法：

普通函數： fn=function(){}

箭頭函數： fn=()=>{}

特性：?

this是靜態的，this始終指向函數聲明時所在作用域下的this的值（使用call，bind改變指向無效）

不能作為構造實例化對象

不能使用arguments變量

箭頭函數簡寫（ 1，省略小括號，當形參只有一個的時候

? ? ? ? ? ? ? ? ? ? ? ? ? 2，省略花括號，當代碼體只有一條語句的時候，此時return必須省略

? ? ? ? ? ? ? ? ? ? ? ? ? ? 而且語句的執行結果就是函數的返回值

）?

//測試call是否可以改變this指向 function getName(){console.log(this.name) }let getName2=()=>{console.log(this.name) }// 設置window對象的this屬性 window.name='小紅花' const school={name: '菊花' }//直接調用 getName() //結果為小紅花 getName2() // 結果為小紅花 因為是在window作用域下//call方法調用 getName.call(school) getName2.call(school)//再次調用 getName() // 菊花 getName2() // 小紅花

箭頭函數適合場景

適合與this無關的回調，定時器，數組方法的回調

不適合與this有關的回調，事件回調，對象的方法

Es6 允許函數有默認值

形參初始值? ? ? 具有默認值的參數，一般位置要靠后（潛規則）

function add(a,b,c=10){return a+b+c } let result = add(1,2) console.log(result)// 13

與解構賦值結合

function connect({host='127.0.0.1',username,password,port}){console.log(host)console.log(username)console.log(password)console.log(port)} connect({host:baidu.com',username:'xiaohong',password:'123',post:336 })

Es6 rest 參數

function date(a,...args){console.log(args)//打印結果['小明','小黃'],可以用數組方法 } date('小紅','小明','小黃')

Es6? 擴展運算符

語法：

const tfboys=['小紅','小明','小黃']function aaa(){console.log(arguments) }aaa(...tfboys) // 等價于aaa('小紅','小明','小黃')

應用——數組

//數組 // 1 數組的合并 const num=[1,2] const num1=[4,5] console.log([...num,...num1])//2 淺拷貝 const dj=['E','G','M'] const arr=[...dj] console.log(arr) // ['E','G','M']// 3 將偽數組轉為真的數組//例如獲取到的元素集合[...偽數組]

應用——對象

//對象 //直接對 對象使用擴展運算符會報錯? let obj = {a:1,b:2}let obj1={...obj} //可以實現淺拷貝let obj2={...obj,a:3,d:4} //用來合并或修改值console.log(obj1) //{a:3,b:2,d:4}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的es6 箭头函数 rest参数 扩展运算符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。