ES6使用‘箭头’ (=>)定义函数
var f = v => v;
1、箭头函数特性
1)函数体内的this值,绑定的定义时所在的作用域的this
2)不可以当做构造函数
3)不可以使用arguments对象,(可以是用...rest代替)
2、语法:()=> { }
变形:1)不传参,代码只有返回值
var add = ()=> 2; console.log(add());
2)传一个参数
var add = a => a+2; console.log(add(a));
3)传多个值
var add = (a,b) => a+b; console.log(add(1,2));
4)如果返回是个对象,需要使用()包裹
var add = (a,b) => ({num:a+b}); console.log(add(10,10));
5)函数体内有逻辑时,必须加大括号,并且手动返回想要返回的值
var add = (a,b) =>{ if(a<b){ return a; } }; console.log(add(1,10));
3、特性解析
es5中定义的函数内部的this是调用时确定的哦,而箭头函数里的this是在定义时确定的,绑定的定义时所在的作用域的this
document.onclick= () => { setTimeout( () => { console.log(this); } ,1000) console.log(this); } //两处打印的都是window
4、函数扩展
函数的默认值,给形参直接赋值,并且函数体内不能使用let或者const再次声明,会报错
//es5实现的默认值
function fn(a){ a = a || 10; //此时不保险 console.log(a); } fn(0); //10 fn(''); //10
//ES6里面,并且函数体内不能重复声明形参变量
function fn(a=10){
console.log(a)
}
fn(0);
rest参数,rest参数(形式为 ...变量名),用于获取函数的多余参数,直接把实参放在数组中,可以取代arguments,arguments是实参的集合(类数组),而rest是实参的数组
function fn(){
console.log(arguments);
}
fn(1,2,3,4);
//rest参数
function fn(...arr){
console.log(arr);//此时arr就是真实的数组
}
fn(1,2,3)
//可以分开
function fn(a,b,...arr){
console.log(a);
console.log(b);
console.log(arr);//此时arr就是真实的数组
}
5、对象扩展
1)变量名和属性名形同时,可以直接写入变量名
2)函数可以省略function关键字
3)Object.assign()
用于合并对象,将源对象的可枚举的属性复制到目标对象中
var licanv=10; var obj = { //lincanv : lincanv
lincanv //属性名和变量名一样的时候,可以这么简写
} console.log(obj)
一般用于写功能模块时使用
var util = (function (){ function add(){}; function isFunction(){}; function isArray(){}; return { add, isFunction, isArray } })(); util.add()
另外对象内定义函数时,可以简写直接写函数
var obj = { // fn:function(){} function(){} }
Object.assign()方法
var o = {a:1} var o2 = {b:2} var o3 = {c:3} //将o2、o3的属性复制到o上,一起都用for in来操作 //es6使用assign Object.assign(o,o1,o2); console.log(o)
Object.assign一般用封装插件
function fn(option){ let defaults = { a:'默认1', b:'默认2', c:'默认3' } Object.assign(defaults,option); console.log(defaults); } //参数为可选传入 fn({ a:1, b:2, c:3 })