🧑🎓 个人主页：《爱蹦跶的大A阿》
🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》
✨ 前言
函数是JavaScript这个语言的核心,而如何处理函数的参数是函数编程中非常关键的问题。传统的JavaScript在处理不定参数以及数组的时候需要些枯燥乏味的代码。好在ES6给了我们两个光明的武器:Rest参数和Spread语法。 hoje我们一起来看看这两种语法糖独特的魅力所在。
✨ 正文
一、Rest参数
- Rest参数语法
Rest参数语法允许我们将一个不定数量的参数表示为一个数组:
function(...args) {// ...
}- Rest参数的使用场景
- 将多个参数合并成数组
- 获取函数的多余参数
- 实现多个参数与数组的转换
- 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对象的区别
- rest参数将多余的参数放入数组中,而arguments对象是一个类数组对象
- rest参数需要用(...args)的语法声明,而arguments对象不需要声明
- rest参数显式包含了某个函数的所有参数,arguments对象包含了所有参数但不会在函数签名中反映出来
- rest参数的长度
rest参数的长度由实参决定,它取决于函数调用时实际传入的参数个数。
function foo(...args) {console.log(args.length);
}foo(1); // 1
foo(1, 2, 3); // 3二、Spread语法
- Spread语法概念
Spread语法可以将数组、对象在语法层面展开成多个参数或者元素。
- Spread语法的使用场景
- 将数组转为参数序列
- 复制数组
- 合并数组
- 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开发者!
