likes
comments
collection
share

"JavaScript函数魔法：从闭包到ES6，解锁高效编码的秘密"

作者站长头像
站长
· 阅读数 23

JavaScript是一种功能强大的脚本语言，广泛应用于Web开发中。随着ECMAScript 6（ES6）的推出，JavaScript引入了一系列新特性，极大地丰富了开发者的工具箱。本文将深入探讨JavaScript函数中的几个高级技巧，包括闭包、arguments对象以及ES6提供的rest参数和扩展运算符，同时介绍箭头函数如何简化编程模式。

下面让我们调动起来思考思考问题吧，实在不行那就：

"JavaScript函数魔法：从闭包到ES6，解锁高效编码的秘密"

一、闭包：函数与作用域的故事

闭包（Closure）是JavaScript中一个重要的概念，它允许一个函数访问并操作其外部作用域内的变量。闭包的形成通常涉及函数嵌套函数的场景，其中内部函数可以“记住”并访问外部函数的作用域链。这种机制使得变量可以在函数调用结束后仍然存活，为异步编程、模块化设计和数据封装提供了强大的支持。

例如，考虑以下代码片段：

function outer() {
    var message = "Hello World!";
    function inner() {
        console.log(message);
    }
    return inner;
}
var myFunction = outer();
myFunction(); // 输出 "Hello World!"

在这个例子中，outer函数返回了inner函数，即使outer函数已经执行完毕，inner函数依然可以访问message变量，这就是闭包的力量。

二、Arguments：灵活的参数管理

在ES6之前，JavaScript的函数可以接收不定数量的参数，这些参数被存储在一个类数组对象arguments中。arguments对象允许我们通过索引访问参数，也可以使用.length属性获取参数的数量。然而，arguments并不具备真正的数组方法，如forEach、join或reduce，这在某些场景下可能限制了其灵活性。

function add(a, b) {
    console.log(Object.prototype.toString.call(arguments))
    // console.log(arguments.length);
    
    // for (let i = 0; i < arguments.length; i++) {
    //     console.log(arguments[i]);
    // }
    // arguments.forEach(function(item) {
    //     console.log(item);
    // })
    // console.log(arguments.reduce);
    if (arguments.length < 2) {
        console.log('参数数量不对')
        return 
    }
    const items = Array.from(arguments);
    // console.log(Object.prototype.toString.call(items));
    
    return items.reduce((prev, cur) => prev + cur, 0)
}
add(1, 2)

下面是对以上代码的分点解析：

1. arguments对象

arguments是一个特殊的类数组对象，它在函数体内可用，包含函数调用时传递的所有参数。尽管它看起来像数组，但实际上并不是真正的数组，因此不具有数组原型上的方法，如forEach或reduce。它主要提供对参数的索引访问和.length属性，用于确定传递了多少个参数。

2. 类数组对象与真正的数组

在JavaScript中，任何具有.length属性和正整数索引的非数组对象都可以称为类数组对象。arguments就是一个典型的例子。虽然它可以像数组一样通过索引访问元素，但它缺少数组原型上的方法。为了将类数组对象转换为真正的数组，可以使用Array.from()方法或扩展运算符...。

3. Array.from()方法

Array.from()是ES6引入的方法，用于将类数组对象或其他可迭代对象转换为真正的数组。这在需要使用数组方法时非常有用，比如在add函数中，我们使用Array.from(arguments)将arguments转换为数组items，以便后续使用reduce方法。

4. reduce方法

reduce是数组的一个强大方法，用于将数组中的元素缩减为单个值。它接受一个回调函数作为参数，该函数有两个参数：累积器（accumulator）和当前值（currentValue）。累积器是回调函数每次调用的返回值，它在迭代过程中累积结果。在add函数中，reduce方法用于累加所有参数，初始值设为0。

"JavaScript函数魔法：从闭包到ES6，解锁高效编码的秘密"

大错特错了那就！！！

然而，随着ES6的出现，arguments的使用逐渐减少，因为ES6提供了更强大的rest参数和扩展运算符。

三、ES6的Rest参数与扩展运算符

  • ES6引入了rest参数语法，允许我们以更简洁的方式收集不定数量的参数到一个数组中。rest参数由三个点（...）组成，可以放在参数列表的末尾，如下所示：
function add(...args) {
    return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 输出6

在上面的例子中，...args收集所有传递给sum函数的参数，并将它们作为一个数组传递给reduce方法，大大简化了求和的过程。

  • 此外，扩展运算符同样由三个点（...）组成，但用于将数组或类数组对象转换为真正的数组，或者将数组的元素展开到函数调用或数组字面量中。例如，我们可以使用扩展运算符将arguments转换为数组：
function toRealArray() {
    return [...arguments];
}
console.log(toRealArray(1, 2, 3)); // 输出 [1, 2, 3]

四、箭头函数：简化函数声明

箭头函数是ES6引入的另一种函数声明方式，它比传统的function关键字更加简洁，并且自动绑定this值。箭头函数的一个关键特性是它不创建自己的arguments对象，而是访问外层作用域的arguments，或者使用rest参数来替代。

例如，使用箭头函数重写上述求和函数：

const add = (...args) => args.reduce((a, b) => a + b, 0);
console.log(add(1,2,3)) // 输出6

箭头函数的简洁性和对this的自动绑定使其成为处理事件监听器、回调函数等场景的理想选择。

五、结论

JavaScript函数的高级技巧，如闭包、arguments对象的使用以及ES6的rest参数和扩展运算符，为开发者提供了更多控制程序流程的能力。掌握这些技巧不仅能提升代码的效率和可读性，还能促进更复杂的编程模式和设计模式的应用。随着ES6标准的普及，开发者应充分利用这些新特性，编写更现代、更优雅的JavaScript代码。

转载自:https://juejin.cn/post/7388278660149510194
评论
请登录