首页 > 编程语言 >15 JavaScript ES6中的箭头函数

15 JavaScript ES6中的箭头函数

时间:2023-08-22 16:25:31浏览次数:63  
标签:ES6 15 函数 括号 JavaScript 箭头 let return name

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

标签:ES6,15,函数,括号,JavaScript,箭头,let,return,name
From: https://www.cnblogs.com/zczhaod/p/17648733.html

相关文章

  • Javascript关于对象的理解
    对象的概念  对象是一个包含数据和方法的集合。  下面,我们通过实例探索对象。首先,创建一个对象varperson={};  如果在控制台输入person,将会得到 [objectObject] 这时,我们就创建了一个空的对象,接着,我们需要向空对象中添加数据或方法varperson={name:[......
  • javascript学习笔记第五天
    今天的笔记functiongetusergradesum(arr=[])传递数组进入匿名函数,假设不确定数组是否会为空可以默认传一个空的数组进入,这样不会报错在匿名方法里面,return之后就直接结束函数了三元运算符好像不能同时使用两个return,例如i>l?returni:retuenl,这样子会报错return时......
  • 13 JavaScript关于prototype(超重点)
    13JavaScript关于prototype(超重点)prototype是js里面给类增加功能扩展的一种模式.写个面向对象来看看.functionPeople(name,age){this.name=name;this.age=age;this.run=function(){console.log(this.name+"在跑")}}p1=newPeople("......
  • 机器学习15种常用数学符号!
    作者:小雨姑娘,康涅狄格大学,Datawhale成员“整理不易,点赞三连↓......
  • 12 JavaScript 关于eval函数
    12eval函数eval本身在js里面正常情况下使用的并不多.但是很多网站会利用eval的特性来完成反爬操作.我们来看看eval是个什么鬼?从功能上讲,eval非常简单.它和python里面的eval是一样的.它可以动态的把字符串当成js代码进行运行.s="console.log('我爱你')";eval(s);也......
  • Web_JavaScript_客户端监测;
    //client_detection.js客户端监测//client自动运行varclient=function(){//呈现引擎varengine={ie:0,gecko:0,webkit:0,khtml:0,opera:0,//完整版本号ver:null......
  • JavaScript中的字符串
    在JavaScript中,用于表示文本的类型称为字符串(String)。字符串是一个不可变的有序序列,由16位值组成,其中每个值代表一个Unicode字符。字符串的length属性表示它包含的16位值的数量。JavaScript的字符串(以及数组)使用从零开始的索引,因此第一个16位值的索引是0,第二个值的索引是1,依此类推......
  • Educational Codeforces Round 153 (Rated for Div. 2)
    Preface最近CF状态烂得一批,已经连续两场被D题腐乳了,再这样下去就真成抱队友大腿的混子了但没想到因为D题比赛时贪心过的人太多了,后面一波叉掉了比赛时过的\(\frac{1}{3}\)的人导致竟然还能上分我是没想到的没抓住暑假大好的上分机会,等开学后再想冲分就难咯A.NotaSubstring......
  • JavaScript基础之基于数据类型和引用数据类型
    数据类型JavaScript的数据类型有7中,包括6个基本类型和一个引用类型基本数据类型:number,string,boolean,null,undefined,symbol引用数据类型:object(数组、对象、函数、正则等)基本数据类型和引用数据类型的区别存储方式基本类型:基本数据类型的值直接存储在改变量所分配的内存......
  • 《HTML CSS JavaScript 网页制作》JavaScript基本知识(简介、语法、事件、对象)
    一、JavaScript简介1、JavaScript特点脚本语言:是一种解释型的脚本语言,在程序运行过程中逐行进行解释;基于对象:可以创建对象,也能使用现有的对象;简单:采用的是弱类型的变量类型,对使用的数据类型未作出严格的要求;动态性:采用事件驱动,不需要经过web服务器就可以对用户的输入作出响应;跨平台......