核心提示:es6箭头函数使用场景:我们知道es6有很多的新特性,那么本篇我们就来详细介绍一下es6的箭头函数。对于一个知识点的运用无非是了解它的使用场景,这是灵活变通的基础。匿名回调// 按钮的单事件var b...
es6箭头函数使用场景:我们知道es6有很多的新特性,那么本篇我们就来详细介绍一下es6的箭头函数。对于一个知识点的运用无非是了解它的使用场景,这是灵活变通的基础。
匿名回调 // 按钮的单事件 var btn = document.getElementById("button"); btn.addEventListener('click',(event)=>{ console.log(); }) // 作为 Array.prototype.map 的回调 let numbers = [1,2,3,4]; let nums = numbers.map((num)=>{ return num*2; }); //进一步简化 let numbers = [1,2,3,4]; let nums = numbers.map(n => n*2); 函数表达式 Redux 中就是用了箭头函数 const todos = (state = [],action) =>{ switch(action.type){ case ADD_TODO: return [...state,action.text]; default: return state; } }
使用 todos 标识,你可以在任何需要匿名函数箭头函数的地方调用它。不过要小心函数表达式的宿主与普通函数不同。函数及其函数体会自动提升到所在作用域的顶部,函数表达式则被当作普通的变量看待,只有 todos 变量会被提升到作用域顶部,它的值,函数体,则不会。这就是为什么你不能在函数表达式定义之前调用它们的原因。
返回数据 使用return //return const multiply = (x) => { return (y) => { return x*y; } } const muti_x = multiply(2); muti_x(3); //6 muti_x(4); //8 隐式return const multiply = (x) => (y) => x*y; const muti_x = multiply(2); muti_x(3); //6 muti_x(4); //8 返回对象 const return_object = () => ({ id:1, name:'sxx' }); let result = return_object();