随着前端技术的不断发展和革新,JavaScript 的进化与传统的计算机语言相仿。新的 ECMAScript 标准也在不断的更新,这些变化可能会使你的代码更清晰、更健壮并能以更有条理的方式处理数据。ES9 中,函数参数和对象扩展运算符 rest,具有很强的实用性,本文将介绍其用法、示例代码以及在实际应用中的总结与指导意义。
函数参数的 rest 运算符
在 ES6 中,我们学习了 Spread 运算符,它可以使用 ...
运算符在一行内复制数组、对象和函数的元素。ES9 中的 rest 运算符在功能上与 Spread 运算符类似,它也使用同样的语法 ...
前缀,但是它对于函数参数进行了扩展。
通常,如果在 JavaScript 中需要传递一个任意长度的参数列表,则使用 arguments
对象,但这种方式不具备数组的一些实用方法。此外,在很多时候,使用参数列表传递不定数量的参数,如下所示:
function sum(x, y, z) { return x + y + z; } console.log(sum(1, 2)); // NaN
如果参数不足,则返回 NaN。为了避免这种情况发生,通常会通过使用 arguments
对象进行动态的参数处理:
-- -------------------- ---- ------- -------- ----- - --- ----- - -- ------- - - -- - - ----------------- ----- ----- -- ------------- - ------ ------ - ------------------ ---- -- - ------------------ -- ---- -- -
这种方式确实可以解决参数不足的问题,但在代码实现和可读性方面都不太理想。在 ES9 中,使用 rest 参数可以很方便地解决这个问题:
-- -------------------- ---- ------- -------- ------------ - --- ----- - -- ------- - - -- - - ------------ ----- ----- -- -------- - ------ ------ - ------------------ -- ---- -- - ------------------ -- -- ---- -- --
这里,...args
表示可接受不定数量的参数,并将其作为一个数组传递到函数体内。在函数体中,你可以像对待数组一样使用args
。
rest 运算符还可以嵌套使用。例如,可以定义一个函数,将前 len 个参数求和,如下所示:
-- -------------------- ---- ------- -------- ------ -- -------- - -- ------------ --- ---- - ------ ----------------- ----- -- --- - ----- - - - -- - ---- - ------ ------ ------ -- --------- ------ ----- - - ---------------------------- -- ----- ------ -- --------- ------ --- ------------------------------ -- -- ------------------------ -- -
对象扩展运算符 rest
对象扩展运算符 rest 与函数参数下的运算符类似,允许你在一个相同的语法下,快速创建一个新的对象或扩展现有的对象。
在ES6中,我们可以用 Spread 运算符将对象合并到一个新对象中:
const person = { name: 'Tom', age: 21 }; const employee = { ...person, title: 'Software Developer' }; console.log(employee); // { name: 'Tom', age: 21, title: 'Software Developer' }
但是,在操作符前加入省略号时,操作符还可以充当一个反向操作,允许你将未命名的参数收集到一个对象中。
例如:
const { name, age, ...remaining } = employee;
此时,remaining
只能接受一个未分配的属性列表。这在处理参数时非常有用,可以允许你仅传递需要的属性信息到函数中,而在重新分配对象时过滤未使用的属性。
function logEmployeeInfo({ name, age, ...info }) { console.log(name, age, Object.keys(info)); } logEmployeeInfo(employee);
在上面的示例中,对象 employee
的 name 和 age 属性将分配到相应的变量中,而其余的属性将被放在 info 对象中,此处通过 Object.keys(info)
方法输出剩余属性的键列表。
这种基于对象扩展运算符的技术还可用于过滤对象属性、合并对象以及支持对象转换等操作。
总结
ES9 中新增的函数参数和对象扩展运算符 rest 可以大大简化代码,并使其更有效。通过使用 rest 参数,在函数内部处理不定数量的参数可以变得更简单和可读性更强。在对象扩展运算符中使用 rest 语法,可以使代码更灵活和可重用。这些新特性使您能够快速合并和嵌套对象,将多个不同的对象合并到一个集合中或返回一个新的没有指定属性的对象。
如果你还没有开始使用 ES9 中的这些新特性,那么现在是时候了!在你的下一个项目中试试这些新功能,相信你会发现代码变得更加高效,同时也能提高开发效率。
希望这篇文章对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/651ae23695b1f8cacd2ad2ef