箭头函数理解

箭头函数理解

科技前沿 • 2025-01-28 20:46 • 阅读 43

大家好，我是讯享网，很高兴认识大家。

箭头函数

介绍

ES6中允许使用=>来定义函数。

箭头函数允许我们用更短的语法定义函数。箭头函数可用于替代传统函数function() {}。

const fn = () => {} //代表把一个函数赋值给fn

基本语法

let fn = function (name) { 
    // 函数体 return `Hello!`; }; //es6写法:箭头函数 let fn = (name) => { 
    // 函数体 return `Hello!`; };

讯享网

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数，省去关键字function。

函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中

箭头函数的参数

①如果箭头函数没有参数，写空括号

讯享网

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

②如果箭头函数有一个参数，可以省去包裹参数的括号

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

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

讯享网let fn = (val1, val2, val3, val4) => { 
    return [val1, val2, val3, val4]; }

箭头函数的函数体

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

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

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

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

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

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

箭头函数

介绍

基本语法

箭头函数的参数

箭头函数的函数体

相关推荐