ES6-11箭头函数:简化回调函数,使得表达更加简洁

ES6 允许使用“箭头”(=>)定义函数。

//箭头函数
let f = v => v;

// 等同于
let f = function (v) {
  return v;
};
箭头函数的注意点 :
        1) 如果形参只有一个,则小括号可以省略
        2) 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的 执行结果
        3) 箭头函数 this 指向声明时所在作用域下 this 的值
        4) 箭头函数不能作为构造函数实例化
        5) 不能使用 arguments

写法

//1.通用写法

let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}

//2.省略小括号的情况

let fn2 = num => {
return num * 10;
};


//3.省略花括号的情况

let fn3 = score => score * 20;


//4.this 指向声明时所在作用域中 this 的值

let fn4 = () => {
console.log(this);
}

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭头函数使得表达更加简洁。下面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。

const isEven = n => n % 2 === 0;
const square = n => n * n;

箭头函数的一个用处是简化回调函数。

/**
* 例1
*/

// 普通函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

/**
* 例2
*/
// 普通函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适

你可能感兴趣的:(es6,javascript,es6,前端)