【JavaScript】箭头函数入门

箭头函数

本文将通过实际例子来介绍箭头函数的入门环节，介绍信息主要以代码注释呈现。

引入

demo01_sum.js

// 函数通常以函数声明的方式定义
// function 函数名(参数1, 参数2, ...) {
//     return 函数表达式;
// }
function sum1(num1, num2) {
    return num1 + num2;
}
console.log("sum1(1, 2) = " + sum1(1, 2)); // 3

// 另一种定义函数的语法：函数表达式(与函数声明几乎等价)
// 代码定义了一个变量sum并将其初始化为一个函数
// let 函数名 = function(参数1, 参数2, ...) {
//     return 函数表达式;
// };
let sum2 = function(num1, num2) {
    return num1 + num2;
}; // 注意：这里的函数末尾是有分号的，与任何变量初始化语句一样。
console.log("sum2(2, 3) = " + sum2(2, 3)); // 5

// 箭头函数：这是 ECMAScript 6 新增的定义函数表达式的方式
let sum3 = (num1, num2) => {
    return num1 + num2;
};
console.log("sum3(3, 4) = " + sum3(3, 4)); // 7

参数括号

demo02_参数括号.js

// 对于参数的括号：
// 如果只有一个参数，那么可以用、也可以不用括号
// 只有没有参数、或者有多个参数的情况下，才需要使用括号

// 一个参数的情况(以下两种写法都有效)：
// let 函数名 = (参数名) => { return 函数表达式; };
let double1 = (x) => { return 2 * x };
console.log("double1(2) = " + double1(2)); // 4
// let 函数名 = 参数名 => { return 函数表达式; };
let double2 = x => { return 2 * x };
console.log("double2(2) = " + double2(2)); // 4

// 没有参数的情况(需要括号)
// let 函数名 = () => { return 函数表达式; };
let getRandom = () => { return Math.random(); };
console.log("getRandom() = " + getRandom()); // 4

// 多个参数的情况(需要括号)
// let 函数名 = (变量1, 变量2, ...) => { return 函数表达式; };
let sum = (a, b) => { return a + b; };
console.log("sum(1, 3) = " + sum(1, 3)); // 4

// 无效的写法(含有多个参数但是没有添加括号)：
// let multiply = a, b => { return a * b; };

大括号

demo03_大括号.js

// 箭头函数也可以不使用大括号，但会改变函数的行为
// 使用大括号说明包含"函数体"，可以定义多条语句
// 如果不使用，那么箭头后面只能有一行代码，并且省略大括号会隐式返回这行代码值

// 以下两种写法都有效，且都返回相应的值
// let 函数名 = (变量名) => { return 表达式; };
let double1 = (x) => { return 2 * x; };
console.log("double1(12) = " + double1(12)); // 24

// let 函数名 = (变量名) => 表达式;
let double2 = (x) => 2 * x;
console.log("double2(12) = " + double2(12)); // 24

// 可以赋值
let value = {}; // 创建一个空的value对象
let setName = (x) => x.name = "张三"; // 定义函数，给传入的对象x的name属性赋值
setName(value); // 对value对象调用setName函数
console.log(value.name); // 输出"张三"

// 无效的写法(省略大括号时写了return的情况)：
// let multiply = (a, b) => return a * b;

函数举例：show方法

demo04_show.js

// 定义show函数，输出传入show函数的第二个值

// 普通函数中使用arguments
function show1() {
    console.log("show1(1, 2) = " + arguments[1]);
}
show1(1, 2); // 2

// 箭头函数(没有自身的arguments，是父级作用域的arguments)，所以我们可以通过在箭头函数外写一层普通函数，来使用arguments
function show2() {
    let show = () => {
        console.log("show2(1, 2) = " + arguments[1]);
    }
    show();
}
show2(1, 2); // 2

// 使用扩展操作符
let show3 = (...args) => {
    console.log("show3(1, 2) = " + args[1]);
}
show3(1, 2); // 2

默认参数

demo05_默认参数.js

// 箭头函数也可以使用默认参数，此时在只有一个参数时的情况下，括号不可省略
let demo = (name = '张三') => `他叫${name}`;
console.log(demo()); // 他叫张三

简化写法

demo06_简化写法.js

// 输出数组中字符串的长度

let arr = [
    'a',
    'aa',
    'aaaa',
    'aaa'
];

let arr1 = arr.map(function (arr) {
    return arr.length;
});
console.log("arr1 = " + arr1); // [1, 2, 4, 3]

// 上面的普通函数可以改写成如下的箭头函数
let arr2 = arr.map((arr) => {
    return arr.length;
});
console.log("arr2 = " + arr2); // [1, 2, 4, 3]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
let arr3 = arr.map(arr => {
    return arr.length;
});
console.log(("arr3 = " + arr3)); // [1, 2, 4, 3]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
let arr4 = arr.map(arr => arr.length);
console.log(("arr4 = " + arr4)); // [1, 2, 4, 3]

简化写法2

demo07_简化写法2.js

// 取出数组中所有小于100的数，乘以2并求和，输出结果
const nums = [10, 20, 30, 400, 500, 60]

// 1.基本方法
// 取出所有小于100的数字
let nums11 = []
for (let n of nums) {
    if (n < 100) { 
        nums11.push(n)
    }
}
// 将所有小于100的数字进行转化：全部*2
let nums12 = []
for (let n of nums11) {
    nums12.push(n * 2)
}
// 将num12数组中所有的数字相加，得到最终的结果
let total1 = 0
for (let n of nums12) {
    total1 += n
}
console.log("基本方法的结果 = " + total1); // 240

// 2.使用函数的方法
// 使用filter函数获得小于100的数，存在nums21中
let nums21 = nums.filter(function (n) {
    return n < 100
})
// 使用map函数将小于100的数乘以2，存在nums22中
let nums22 = nums21.map(function (n) {
    return n * 2
})
// 使用reduce函数，对nums22中所有的数求和
let total2 = nums22.reduce(function (preValue, n) {
    return preValue + n
}, 0)
// 第一次遍历：preValue=0   n=20
// 第二次遍历：preValue=20  n=40
// 第三次遍历：preValue=60  n=80
// 第四次遍历：preValue=140 n=100
// 240
console.log("函数方法的结果 = " + total2); // 240

// 3.简化方法
let total3 = nums.filter(function (n) {
    return n < 100
}).map(function (n) {
    return n * 2
}).reduce(function (preValue, n) {
    return preValue + n
}, 0)
console.log("简化方法的结果 = " + total3); // 240

// 4.最终简化
let total4 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
console.log("最终方法的结果 = " + total4); // 240