您现在的位置:首页 >> 前端 >> 内容

es6箭头函数使用场景

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

  核心提示: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();

 

Tags:ES S6 6箭 箭头 
作者:网络 来源:不详