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}