站内搜索:
首页 >> 前端 >> 内容
es6箭头函数使用场景

时间:2017/4/26 9:15:19

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();

 

  • 上一篇:jsp实验4.(3)cookie的使用
  • 下一篇:javascript数据直接量
  • 返回顶部