深入探索JavaScript中实用而高级的Rest参数和Spread语法

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

??

? 前言

????????函数是JavaScript这个语言的核心,而如何处理函数的参数是函数编程中非常关键的问题。传统的JavaScript在处理不定参数以及数组的时候需要些枯燥乏味的代码。好在ES6给了我们两个光明的武器:Rest参数和Spread语法。 hoje我们一起来看看这两种语法糖独特的魅力所在。

?

? 正文

一、Rest参数

• Rest参数语法

Rest参数语法允许我们将一个不定数量的参数表示为一个数组:

function(...args) {
  // ...
}

• Rest参数的使用场景

1. 将多个参数合并成数组
2. 获取函数的多余参数
3. 实现多个参数与数组的转换

• Rest参数的使用示例

  // 将参数合并成数组
  function concat(...args) {
    return args;
  }
  
  concat(1, 2, 3); // [1, 2, 3]
  
  // 获取函数多余参数
  function max(first, ...nums) {
    let maxValue = first;
    for (let n of nums) {
      if (n > maxValue) {
        maxValue = n;
      }
    }
    return maxValue;
  }
  
  // 实现参数和数组转换
  function f(a, b, ...args) {
    // ...
  }
  
  const args = [1, 2, 3];
  f(...args);

详解：?

• Rest参数与arguments对象的区别

1. rest参数将多余的参数放入数组中,而arguments对象是一个类数组对象
2. rest参数需要用(...args)的语法声明,而arguments对象不需要声明
3. rest参数显式包含了某个函数的所有参数,arguments对象包含了所有参数但不会在函数签名中反映出来

• rest参数的长度

rest参数的长度由实参决定,它取决于函数调用时实际传入的参数个数。

function foo(...args) {
  console.log(args.length);
}

foo(1); // 1
foo(1, 2, 3); // 3

二、Spread语法

• Spread语法概念

Spread语法可以将数组、对象在语法层面展开成多个参数或者元素。

• Spread语法的使用场景

1. 将数组转为参数序列
2. 复制数组
3. 合并数组

• Spread语法的使用示例

  // 将数组转为参数序列
  const arr = [1, 2, 3];
  f(...arr);
  
  // 复制数组
  const arr1 = [...arr]; 
  
  // 合并数组
  const arr2 = [...arr1, ...arr];

?详解：

• 数组展开并不会复制数组

使用Spread语法展开数组时,它产生的是对原数组的引用,而不是数组的副本。

let arr1 = [1, 2];
let arr2 = [...arr1];

arr2.push(3);
console.log(arr1); // [1, 2, 3]

?

• 对象展开进行浅复制

使用扩展运算符复制对象时,它只会进行浅复制。如果对象包含嵌套对象,则只会复制对象的引用。

let obj1 = { foo: { bar: 1 } };
let obj2 = { ...obj1 }; 

obj2.foo.bar = 2;
console.log(obj1.foo.bar); // 2

? 结语

? ? ? ??通过本文的介绍,我们可以看到Rest参数和Spread语法在处理不定参数以及数组操作中具有非常高的表达力。

????????Rest参数为我们处理函数的不定参数提供了极大的便利,我们可以非常灵活方便地将参数合并成数组。Spread语法进行数组展开,使我们可以轻松实现数组的复制和合并。

????????学习并掌握好这两种语法,可以让我们的代码质量得到极大提升。它们是ES6带来的重要的语法糖,值得我们深入探索应用。

????????当然,关于JavaScript的技巧还有很多,我们要保持好奇和探索的心,不断学习,成为优秀的JavaScript开发者!

?