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

15 JavaScript ES6中的箭头函数的更多相关文章

  1. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  2. ES6中的箭头函数与普通函数的区别

    箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...

  3. es6中的(=>)箭头函数

    x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...

  4. ES6中的箭头函数和普通函数有什么区别?

    1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...

  5. JS ES6中的箭头函数(Arrow Functions)使用

    转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...

  6. ES6中的箭头函数的语法、指向、不定参数

    箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...

  7. 聊聊 ES6 中的箭头函数

    首先来两点: 当只有一个参数的时候,那么 () 可以省略 当只有一个 return 的时候,那么 {} 可以省略 当函数体内只有一条语句的时候,那么 {} 也可以省略 下面来几个简单的例子来对比 ES ...

  8. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  9. es6学习笔记--箭头函数

    基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...

  10. 现代JavaScript—ES6+中的Imports,Exports,Let,Const和Promise

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.freecodecamp.org/news/learn-modern-jav ...

随机推荐

  1. 2021-07-20 JavaScript中关于eval()方法

    eval()常见用途 1.使用ajax获取到后台返回的json数据时,使用 eval 这个方法将json字符串转换成对象数组 let jsonString = JSON.stringify({fang ...

  2. 多线程系列(十) -ReadWriteLock用法详解

    一.摘要 在上篇文章中,我们讲到ReentrantLock可以保证了只有一个线程能执行加锁的代码. 但是有些时候,这种保护显的有点过头,比如下面这个方法,它仅仅就是只读取数据,不修改数据,它实际上允许 ...

  3. 【代码更新】SPI时序——AD数模数转换

    [代码更新]SPI时序--AD数模数转换 AD芯片手册:https://www.ti.com.cn/cn/lit/ds/symlink/ads8558.pdf?ts=1709473143911& ...

  4. redis---面经

    redis 偏应用的总结:redis 应用 Redis是什么? Redis是什么 对象 字符串 自增,键值对. SDS数据结构记录长度,已经使用,和总共长度,并且提前多余出容量,防止一直扩容缩容. 字 ...

  5. 图片动态操作,利用SeekBar控制属性示例,适配屏幕解决方案

    需求为,让图片适配屏幕大小,并且可以用一个滑块来控制图片的旋转,用一个滑块来控制图片大小,核心语法思路,控制图片的大小, 核心语法为:mImageView.setLayoutParams(new Li ...

  6. GoLand打开后Project消失

    一直用的好好的Goland,突然不能用了,左边栏Project"消失"了. 如下: 解决方法 遇到上面问题,一般情况是GoLand的cache问题,这个时候要将GoLand清理一下 ...

  7. 春风吹又生的开源项目「GitHub 热点速览」

    随着上周知名 Switch 开源模拟器 Yuzu(柚子)被任天堂起诉,该项目作者就删库了,但还是要赔偿任天堂数百万美元.此事还在 GitHub 上掀起了一波 Yuzu fork 项目的小浪潮,正所谓野 ...

  8. clickhouse快速上手和问题记录

    clickhouse官方中文社区实战经验:手把手教你搭建单机clickhouse开发环境 我是用的是centOS7的虚拟机, 官方教程中的:sudo /etc/init.d/clickhouse-se ...

  9. vscode复制相对路径时是反斜杠\,改为正斜杠/ [转]

    痛点:复制路径的时候斜杠不对 解决:explorer.copyRelativePathSeparator 设置 在跳出来的设置页面的搜索栏里输入explorer.copyRelativePathSep ...

  10. C++实现一个简单的生产者-消费者队列

    本文的代码都是ChatGPT生成,我只是做了微小的调整和整合,AI提示词如下: 设计一个C++类,支持生产者-消费者模型,可以通过size函数获取剩余数量 可能第一次生成的不一定合适,多刷新几次. 生 ...