15 JavaScript ES6中的箭头函数

  • 15 JavaScript ES6中的箭头函数已关闭评论
  • 82 次浏览
  • A+
所属分类:Web前端
摘要

什么是箭头函数
ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义。


15 JavaScript ES6中的箭头函数
  1. 什么是箭头函数
    ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义。

  2. 基本语法

// 箭头函数 let fn = (name) => {     // 函数体     return `Hello ${name} !`; };  // 等同于 let fn = function (name) {     // 函数体     return `Hello ${name} !`; }; 

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function。
函数的参数放在=>前面的括号中,函数体跟在=>后的花括号中.

  1. 箭头函数的参数

如果箭头函数没有参数,写空括号。

//没有参数,写空括号     let fn = () => {         console.log('hello');     }; 

如果箭头函数有一个参数,也可以省去包裹参数的括号。

//只有一个参数,可以省去参数括号     let fn = name => {         console.log(`hello ${name}!`)     }; 

如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中。

    let fn = (val1, val2, val3, val4) => {         return [val1, val2, val3, val4];     } 
  1. 箭头函数的函数体

如果箭头函数的函数体只有一句执行代码,简单返回某个变量或者返回一个简单的js表达式,可以省去函数体花括号{ }。

//返回某个简单变量val let f = val => val; // 等同于 let f = function (val) { return val }; //返回一个简单的js表达式num1+num2 let sum = (num1, num2) => num1 + num2; // 等同于 let sum = function(num1, num2) {   return num1 + num2; }; 

如果箭头函数的函数体只有一句代码,返回的不是变量和简单的js表达式,而是一个对象。

//错误写法—花括号会被解释为函数体     let getItem = id => {         id: id,         name: 'gaby'     }; //正确写法     let getItem = id => ({         id: id,         name: 'gaby'     }); 

如果箭头函数的函数体只有一条语句且不需要返回值(最常用于回调函数),加上void关键字

let fn = () => void doesNotReturn(); 

箭头函数用于回调函数

//栗子1 //普通函数     [1, 2, 3].map(function (x) {         return x + x;     }); //ES6箭头函数 [1, 2, 3].map(x => x + x);  
//栗子2 //普通函数     var result = [2, 4, 5, 1, 6].sort(function (a, b) {         return a - b;     }); //ES6箭头函数 	var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);