【JS006】ES6的学习笔记之箭头函数

日期：2021年8月13日
作者：Commas
注释：如果您觉得有所帮助，帮忙点个赞；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
(ง •_•)ง 积跬步以致千里，ES6的学习笔记
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

一、箭头函数的定义

定义：ES6 允许使用=>来定义函数，因为它很像一个箭头（=>），所以我们称其定义的函数为箭头函数

普通函数定义	箭头函数定义
let f = function(){}	let f = () => {}

其中，圆括号()内部写形式参数，大括号{}内部写函数业务逻辑；

• 普通函数的定义及调用：

//普通函数
let add = function(n1,n2){
    return n1 + n2;
};
let result = add(1,1);
console.log(result);  //控制台输出：2

• 箭头函数的定义及调用

//箭头函数
let add = (n1,n2) => {
    return n1 + n2;
};
let result = add(1,1);
console.log(result);  //控制台输出：2

二、箭头函数的简写

说明	箭头函数
完整箭头函数	let f = (形参) => {业务逻辑}
省略圆括号	let f = 形参 => {业务逻辑}
省略大括号	let f = (形参) => 业务逻辑
省略圆、大括号	let f = 形参 => 业务逻辑

其中，圆括号()内部写形式参数，大括号{}内部写函数业务逻辑；

1. 省略圆括号()
   条件：当形参（即：形式参数）有且只有一个的时候，可以省略圆括号()；

//（1）完整箭头函数
let addOne1 = (n) => {
    return n + 1;
};
console.log(addOne1(1));
//控制台输出：2

//（2）省略圆括号
let addOne2 = n => {
    return n + 1;
};
console.log(addOne2(1));
//控制台输出：2

2. 省略大括号{}
   条件：当函数业务逻辑中的代码体只有一条语句的时候，可以省略大括号{}，同时必须省略Return关键字，语句执行结果即为返回值；

//（1）完整箭头函数
let add1 = (n1,n2) => {
    return n1 + n2;
};
console.log(add1(1,1));
//控制台输出：2

//（2）省略大括号
let add2 = (n1,n2) => n1 + n2;
console.log(add2(1,1));
//控制台输出：2

3. 省略圆括号()和大括号{}
   条件：同时满足1和2的条件

//（1）完整的箭头函数
let square1 = (n) => {
    return n * n;
};
console.log(square1(2));
//控制台输出：4

//（2）省略圆括号、省略大括号
let square2 = n => n * n;
console.log(square2(3));
//控制台输出：9

三、箭头函数的注意事项

内容	普通函数	箭头函数
是否有this对象	√	×
是否可以当作构造函数	√	×
是否可以使用arguments对象	√	×
是否可以使用yield命令	√	×

1、箭头函数没有this对象，箭头函数内的this始终指向函数声明所在作用域下的this的值，即：“箭头函数this === 函数声明所在作用于下的this”

window.name = "猫博士";
let mao={
    "name":"猫师"
};

//（1）普通函数
let getNameByCommon = function(){
    return this.name;
};
console.log(`${getNameByCommon.name}:${getNameByCommon()}`);
//控制台输出：getNameByCommon:猫博士
console.log(`${getNameByCommon.name}:${getNameByCommon.call(mao)}`);
//控制台输出：getNameByCommon:猫师

//（2）箭头函数
let getNameByArrow = () => {
    return this.name;
};
console.log(`${getNameByArrow.name}:${getNameByArrow()}`);
//控制台输出：getNameByArrow:猫博士
console.log(`${getNameByArrow.name}:${getNameByArrow.call(mao)}`);
//控制台输出：getNameByArrow:猫博士

知识加油站：
1、ES6 规定，函数的name属性，返回该函数的函数名；
2、示例中有使用到模板字符串，可参考《【JS004】ES6的学习笔记之模板字符串》

2、箭头函数不可以作为构造函数

//（1）普通函数，可以作为构造函数
//HeroByCommon= function(name,occupation){
function HeroByCommon(name,occupation){
    //姓名
    this.name = name;
    //职业
    this.occupation = occupation;
};
ZGL = new HeroByCommon("诸葛亮","法师");
console.log(ZGL);
//控制台输出：
//Hero {name: "诸葛亮", occupation: "法师"}


//（2）箭头函数，不可以作为构造函数
let HeroByArrow = (name,occupation) => {
    //姓名
    this.name = name;
    //职业
    this.occupation = occupation;
};
ZGL = new HeroByArrow("诸葛亮","法师");
console.log(ZGL);
//控制台输出：
//Uncaught TypeError: HeroByArrow is not a constructor

3、箭头函数不可以使用arguments对象

//（1）普通函数
//let argsByCommon = function(){
function argsByCommon(){
    console.log(arguments);
}
argsByCommon();
//控制台输出：
//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon(1,2,3);
//控制台输出：
//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon([1,2,3]);
//控制台输出：
//Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon("a","b","c");
//控制台输出：
//Arguments(3) ["a", "b", "c", callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon(["a","b","c"]);
//控制台输出：
//Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon({"k1":"v1"});
//控制台输出：
//Arguments [{…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//（2）箭头函数
let argsByArrow = () => {
    console.log(arguments);
}
argsByArrow();
//控制台输出：arguments is not defined at argsByArrow
argsByArrow(1,2,3);
//控制台输出：arguments is not defined at argsByArrow
argsByArrow([1,2,3]);
//控制台输出：arguments is not defined at argsByArrow
argsByArrow("a","b","c");
//控制台输出：arguments is not defined at argsByArrow
argsByArrow(["a","b","c"]);
//控制台输出：arguments is not defined at argsByArrow
argsByArrow({"k1":"v1"});
//控制台输出：arguments is not defined at argsByArrow

4、箭头函数不可以使用yield命令

• 这个以后写迭代器的时候，再详细讲，暂且跳过。

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/119673122