Javascript剩余参数、arguments对象和柯里化函数

GISer_Jinger

于 2024-10-12 21:36:10 发布

阅读量683

点赞数 17

分类专栏： Javascript 面试题目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_55049655/article/details/142886602

版权

Javascript 同时被 2 个专栏收录

141 篇文章 1 订阅

订阅专栏

面试题目

123 篇文章 1 订阅

订阅专栏

在JavaScript中，函数的剩余参数（Rest Parameters）和arguments对象都是用于处理函数接收的不定数量参数的机制。虽然它们的功能相似，但使用方式和适用场景有所不同。下面详细解释这两个概念。

剩余参数（Rest Parameters）

剩余参数是ES6（ECMAScript 2015）引入的一种语法糖，用于将不定数量的参数表示为一个数组。使用剩余参数可以使代码更加简洁和易读。

语法

剩余参数通过在参数名前加上三个点（...）来定义。

function sum(...numbers) {  
  return numbers.reduce((total, num) => total + num, 0);  
}  
  
console.log(sum(1, 2, 3, 4)); // 输出: 10

特点

数组形式：剩余参数总是以数组的形式接收所有传递给函数的参数。
命名参数：剩余参数具有明确的名称，可以像普通数组一样使用。
不会与arguments对象共存：如果函数使用了剩余参数，则不能同时访问arguments对象。

示例

function showArgs(...args) {  
  console.log(args); // 输出: [1, 2, 3, 'hello']  
}  
  
showArgs(1, 2, 3, 'hello');

`arguments`对象

arguments对象是一个类数组对象，包含了传递给函数的所有参数。它是一个早期JavaScript（ES5及以前）的机制，用于处理不定数量的参数。

语法

arguments对象不需要显式声明，它会在函数体内部自动创建。

function showArguments() {  
  for (let i = 0; i < arguments.length; i++) {  
    console.log(arguments[i]);  
  }  
}  
  
showArguments(1, 2, 3, 'hello'); // 分别输出: 1, 2, 3, 'hello'

特点

类数组对象：arguments对象是一个类数组对象，包含length属性和索引元素，但并不是一个真正的数组，因此没有数组的方法（如push、pop等）。不过，可以使用Array.prototype.slice.call(arguments)将其转换为数组。
自动创建：在函数体内，arguments对象会自动创建，无需显式声明。
与剩余参数不共存：如果函数使用了剩余参数，则不能访问arguments对象。

示例

function exampleFunction() {  
  console.log(arguments.length); // 输出: 4  
  console.log(arguments[0]); // 输出: 1  
  console.log(arguments[3]); // 输出: 'hello'  
    
  // 将arguments转换为数组  
  const argsArray = Array.prototype.slice.call(arguments);  
  console.log(argsArray); // 输出: [1, 2, 3, 'hello']  
}  
  
exampleFunction(1, 2, 3, 'hello');

对比

语法：剩余参数使用...语法，而arguments是一个自动创建的类数组对象。
可读性：剩余参数具有明确的名称，代码更简洁和易读。
数组方法：剩余参数是一个真正的数组，可以使用数组的所有方法；而arguments是一个类数组对象，需要转换后才能使用数组方法。
共存：如果函数使用了剩余参数，则不能访问arguments对象。

总结

在现代JavaScript开发中，建议使用剩余参数来处理不定数量的参数，因为它语法简洁、代码易读，并且是一个真正的数组对象。而arguments对象则主要用于兼容旧版本的JavaScript代码。

柯里化（Currying）是函数式编程中的一种技术，它将一个接收多个参数的函数，转换成一系列接收一个单一参数的函数。每个函数返回下一个函数，直到最后一个函数返回结果。这种技术允许你将一个复杂的函数分解成更小的、更易于管理的部分。

在JavaScript中，柯里化函数通常通过闭包来实现。闭包允许函数访问其词法作用域中的变量，即使该函数在词法作用域之外执行。

柯里化的基本实现

下面是一个简单的柯里化函数的例子：

function curry(fn) {  
  // 获取函数的参数个数  
  const arity = fn.length;  
  
  // 内部递归函数  
  function curried(...args) {  
    // 如果传递的参数数量小于原函数的参数数量  
    if (args.length >= arity) {  
      // 直接调用原函数并返回结果  
      return fn(...args);  
    } else {  
      // 否则返回一个新的函数，该函数继续接收剩余的参数  
      return function(...moreArgs) {  
        return curried(...args, ...moreArgs); // 递归调用curried函数  
      };  
    }  
  }  
  
  return curried;  
}  
  
// 示例函数，接收两个参数并返回它们的和  
function add(a, b) {  
  return a + b;  
}  
  
// 对示例函数进行柯里化  
const curriedAdd = curry(add);  
  
// 使用柯里化后的函数  
console.log(curriedAdd(2)(3)); // 输出: 5  
console.log(curriedAdd(1, 4)); // 输出: 5

柯里化的应用场景

部分应用（Partial Application）：
你可以通过提供部分参数来创建一个新的函数，该函数接收剩余的参数。这在处理需要多个步骤才能完成的计算时非常有用。
延迟计算（Lazy Evaluation）：
柯里化允许你延迟计算直到所有必要的参数都可用。这可以提高性能，因为它避免了不必要的计算。
函数组合（Function Composition）：
柯里化使得函数组合变得更加容易，因为你可以将每个函数都转换成接收单个参数的函数，然后依次调用它们。
创建高阶函数（Higher-Order Functions）：
柯里化后的函数可以更容易地与其他函数结合使用，创建新的、具有更复杂行为的函数。

注意事项

柯里化会增加函数的调用开销，因为每次调用都会返回一个新的函数。
对于已经接收了所有必要参数的函数，最好直接调用它而不是返回一个新的函数，以避免不必要的性能开销。
在实际开发中，要根据具体的需求和性能考虑来决定是否使用柯里化。

const curring = name => element => element[name];

这段代码定义了一个名为 curring 的函数，但它实际上展示了柯里化（Currying）的一个简单例子。柯里化是一种将接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。让我们逐步分析这段代码：

函数定义：
- curring 是一个函数，它接受一个参数 name。
返回另一个函数：
- curring 函数返回一个新的函数，这个新的函数接受一个参数 element。
返回结果：
- 这个新返回的函数，当被调用时，会返回 element[name] 的值。这里，name 是最初传给 curring 函数的参数，而 element 是传给返回的新函数的参数。

使用示例

假设我们有一个对象，它有几个属性，我们想要通过一个动态指定的属性名来获取对应的属性值。

const person = {  
  name: 'Alice',  
  age: 30,  
  job: 'Engineer'  
};  
  
// 使用 curring 函数获取 name 属性的值  
const getName = curring('name'); // getName 现在是一个函数，等待一个 element 参数  
console.log(getName(person)); // 输出: 'Alice'  
  
// 使用 curring 函数获取 age 属性的值  
const getAge = curring('age'); // getAge 现在是一个函数，等待一个 element 参数  
console.log(getAge(person)); // 输出: 30