JS进阶——动态参数、剩余参数和展开运算符

这篇具有很好参考价值的文章主要介绍了JS进阶——动态参数、剩余参数和展开运算符。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 JavaScript 中,剩余参数(Rest Parameters)和展开运算符(Spread Operator)是两种非常有用的语法特性,它们分别用于处理函数参数和数组/对象的操作。

剩余参数(Rest Parameters)

剩余参数语法允许你将一个不定数量的参数表示为一个数组。这在你不确定会有多少参数传入函数,或者你想要收集所有剩余参数到一个数组时非常有用。

剩余参数语法使用 ... 符号来表示。

function sum(...args) {  
  return args.reduce((a, b) => a + b, 0);  
}  
  
console.log(sum(1, 2, 3, 4)); // 输出 10  
console.log(sum(5, 6)); // 输出 11

function config(baseURL,...other) {
    console.log(baseURL) // 得到 'http://baidu.com'
    console.log(other) // other 得到 ['get', 'json']
//调用函数
config('http://baidu.com','get','json')

展开运算符(Spread Operator)

展开运算符允许你将一个数组(或对象)的元素展开到另一个数组(或对象)中,或者用于函数调用时传递数组元素作为单独的参数。

展开运算符同样使用 ... 符号。

数组中的展开运算符
const arr1 = [1, 2, 3];  
console.log(Math.max(...arr1))//3
console.log(Math.min(...arr1))//1

const arr2 = [...arr1, 4, 5];  
console.log(arr2); // 输出 [1, 2, 3, 4, 5]  
  
const arr3 = [0, ...arr1, 6];  
console.log(arr3); // 输出 [0, 1, 2, 3, 6]
函数调用中的展开运算符
function greet(a, b, c) {  
  console.log(`Hello, ${a}, ${b}, and ${c}!`);  
}  
  
const names = ['Alice', 'Bob', 'Charlie'];  
greet(...names); // 输出 "Hello, Alice, Bob, and Charlie!"
对象中的展开运算符
const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1, c: 3 };  
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }

这两个特性在处理数组和函数参数时非常有用,并且可以使代码更加简洁和灵活。剩余参数特别适用于那些需要接受可变数量参数的函数,而展开运算符则适用于需要将数组或对象元素展开到另一个数组或对象中的场景。

剩余参数:函数参数使用,得到真数组

展开运算符:数组中使用,数组展开

动态参数

在JavaScript中,有时你需要编写可以接收任意数量参数的函数,这就是动态参数的概念。这通常通过两种方式来实现:使用剩余参数(Rest Parameters)来收集多余的参数到一个数组中,或者使用函数内部的arguments对象(尽管arguments对象的使用在现代JavaScript开发中逐渐被剩余参数所取代)。

使用剩余参数(Rest Parameters)

剩余参数语法允许你将一个不定数量的参数表示为一个数组。这些参数在函数内部可以像普通数组一样使用。

function myFunction(...args) {  
  for (let arg of args) {  
    console.log(arg);  
  }  
}  
  
myFunction(1, 2, 3); // 输出 1 2 3  
myFunction('a', 'b', 'c'); // 输出 a b c

在这个例子中,...args 是一个剩余参数,它收集所有传递给 myFunction 的参数到一个名为 args 的数组中。

使用arguments对象

arguments对象是一个类数组对象,它包含了传递给函数的参数。虽然在现代JavaScript代码中更推荐使用剩余参数,但了解arguments对象仍然是有用的,因为它在旧版本的JavaScript中广泛使用。

function myOldFunction() {  
  for (let i = 0; i < arguments.length; i++) {  
    console.log(arguments[i]);  
  }  
}  
  
myOldFunction(1, 2, 3); // 输出 1 2 3  
myOldFunction('a', 'b', 'c'); // 输出 a b c

然而,需要注意的是arguments对象并不是一个真正的数组,它是一个具有length属性和按索引访问元素能力的对象。因此,它没有数组的内置方法(如pushpopforEach),除非你显式地将它转换为数组。

总结:

1.arguments是一个伪数组,只存在于函数中

2.arguments的作用是动态获取函数的实参

3.可以通过for循环依次得到传递过来的实参

要将arguments对象转换为数组,你可以使用扩展运算符(Spread Operator):

function myOldFunction() {  
  const args = [...arguments]; // 将arguments对象转换为数组  
  args.forEach(arg => console.log(arg)); // 使用数组的forEach方法  
}  
  
myOldFunction(1, 2, 3); // 输出 1 2 3

但是,在ES6及更高版本的JavaScript中,通常建议直接使用剩余参数而不是arguments对象。文章来源地址https://www.toymoban.com/news/detail-834553.html

到了这里,关于JS进阶——动态参数、剩余参数和展开运算符的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js常用运算符和表达式

    JavaScript常用的运算符和表达式有: 用于执行基本的数学运算,包括加法(+)、减法(-)、乘法(*)、除法(/)、取余(%)等。 用于将值赋给变量,包括等号(=)、加等于(+=)、减等于(-=)、乘等于(*=)、除等于(/=)等。 用于比较两个值的大小或是否相等,包括等

    2024年02月09日
    浏览(44)
  • JS基础-表达式和运算符

    表达式 :是由操作数和运算符(可选)构成的并产生运算结果的语法结构。例如:3+5 运算符 :进行计算或者逻辑运算的符号,比如表达式中的 + 号 表达式分类:算术、关系、逻辑、赋值、组合 以下符号都是算数运算符,运算符的就是运算 意义 运算符 加 + 减 - 乘

    2024年02月09日
    浏览(49)
  • 【前端JS交互基础】运算符、流程语句

    算术运算符用来执行数学运算。 JavaScript 基础到高级 Canvas游戏开发 原生JavaScipt案例合集 JavaScript +DOM基础 生活中常见的算术运算符有: + - * / %(取模,取余数) “+” 运算可以作为:加法运算、正号、字符串参与的运算作为字符串拼接 上面这些运算符同样适用于程序执行数学

    2024年02月11日
    浏览(42)
  • js多目运算符的判断写法

    1、两目运算 2、三目运算

    2024年02月08日
    浏览(44)
  • js 扩展运算符(spread)是三个点(...)

    三个点的作用:将一个数组转为用逗号分隔的参数序列。

    2024年02月12日
    浏览(30)
  • C语言——三目运算符的进阶用法,比较三个或者四个数的大小

    1、三目运算符也叫条件运算符,结合方向是从右至左。 2、三目运算符仅此一个。 3、基本形式:      表达式1 ? 表达式2 :  表达式3 4、比较原理:表达式1是否为真,如果为真,执行表达式2,否则执行表达式3. 例:a = 4 3 ? 1 : 0 ;   a的值为1. 5、如果在表达式中含有其他运算符

    2024年02月08日
    浏览(37)
  • 【数学】【记忆化搜索 】【动态规划】964. 表示数字的最少运算符

    【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 动态规划汇总 数学 记忆化搜索 给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x … 的表达式,其中每个运算符 op1,op2,… 可以是加、减、乘、除(+,-,*,或是 /)之一。例如,对于 x = 3,

    2024年02月22日
    浏览(48)
  • 7.JS里表达式,if条件判断,三元运算符,switch语句,断点调试

    表达式就是可以被求值的代码比如什么a = 1 语句就是一段可以执行的代码比如什么if else 直接给B站的黑马程序员的老师引流一波总结的真好 就是基本上所有的语言都会有的if else 语句就是满足不同的条件执行不同的代码,让计算机有条件判断的能力。 注意在if的括号里面除了

    2024年02月20日
    浏览(52)
  • 运算符之算术运算符、关系运算符、逻辑运算符、复合赋值运算符、其他运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C# 有丰富的内置运算符,分类如下: 算术运算符 关系运算符 逻辑运算符 复合赋值运算符 位运算符 其他运算符 运算符优先级(由高到低) 类别 运算符 结合性 后缀 ()[]-.++-- 从左到右 一元 =-!~ ++ -- (type)* sizeof 从

    2024年02月09日
    浏览(57)
  • Python 运算符 算数运算符 关系运算符 赋值运算符 逻辑运算 (逻辑运算符的优先级) 位运算 成员运算符 身份运算符 运算符的优先级

    四则运算+ - * / 取模运算 % 之所以出现1 与 2 的不同 是因为python取模计算规则为 r = p-q*floor(p/q) floor表示向下取余 **幂 **** 取整除 向下取整 ‘//’ 等于关系 == 大于 大于等于(大于||等于) 小于 小于等于(小于||等于) != 不等于 不同数据类型之间的比较,若是不同的数据类型进行比

    2024年02月04日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包