力扣 30 天 JavaScript 挑战 第37天 第九题笔记 知识点: 剩余参数,拓展运算符

开始答题

版本一

js 复制代码
/**
 * @param {...(null|boolean|number|string|Array|Object)} args
 * @return {number}
 */
var argumentsLength = function(...args) {
    return args.length
};

/**
 * argumentsLength(1, 2, 3); // 3
 */

提交通过了 ,我最开始遇到这道题的时候,还想在函数里面如何拿到传递的多个参数,想一想只能是args了,试了一下,成功了。

问了ai为什么会成功,...args是es6写法,通过这个写法将传递的多个参数组合成了一个数组arg。

如果不用这个写法,还可以使用还传统写法:使用内置的 arguments 对象(不是数组,而是一个类数组对象)。如下代码

js 复制代码
function argumentsLength() {
 return arguments.length;
}
argumentsLength(1,2,3)

拓展了类数组,剩余参数(...args)知识点。

最开始看到这个函数的时候,我还有疑问,也没有声明arguments,咋可以使用arguments.length呢。继续问ai。

ai回答:在非箭头函数中,js引擎会在函数执行时,自动注入一个类数组arguments但是arguments不是全局变量,也不是我们声明的。可以理解为

js 复制代码
 function argumentsLength() {
  // 引擎偷偷帮你加上:
  // var arguments = {0: 1, 1: 2, 2: 3, length: 3}
}

这里你可能有些好奇。这里需要注意的一点是arguments虽然说是类数组,但本质上是一个对象。所以不能使用map方法。但可以使用length方法,因为js引擎为我们自动注入arguments的时候给他加了length属性。

开始学习官方题解

剩余参数

  1. 定义:剩余参数(...args)是一种允许函数接受不定数量参数的功能。
  2. 注意点:剩余参数仅收集传递给函数的附加参数,不包括通过命名参数或默认参数值传递的参数。如果没有传递额外参数,剩余参数也将是一个空数组。
js 复制代码
function demo(x, y = 100, ...args) {
  console.log("x:", x);
  console.log("y:", y);
  console.log("args:", args);
}

demo(1, 2, 3, 4, 5);
//输出为
//x: 1
//y: 2
//args: [3, 4, 5]
//这里的命名参数x,y没有通过剩余参数传递。
demo(1);
//输出为
//x: 1
//y: 100
//args: []
//这里的命名参数x,默认参数y没有通过剩余参数传递。并且没有传递额外参数,剩余参数是一个空数组。
  1. 剩余参数于拓展运算符的区别
    剩余参数是打包,拓展运算符是拆开。
特性 剩余参数 ...args 展开运算符 ...arr
出现位置 函数定义的形参 函数调用、数组字面量、对象字面量中
作用方向 收集 → 把多个值打包成数组 展开 → 把数组/可迭代对象拆开成独立元素
返回结果 总是一个数组 展开成一个个元素(不是数组)
例子 function f(...args) {} f(...[1,2,3])

举个例子

js 复制代码
// 剩余参数:收集
function demo(a, b, ...rest) {
  console.log(a);    // 1
  console.log(b);    // 2
  console.log(rest); // [3, 4, 5]
}
demo(1, 2, 3, 4, 5);

// 展开运算符:展开
const nums = [3, 4, 5];
demo(1, 2, ...nums);
// 相当于 demo(1, 2, 3, 4, 5)

官方解法

多了一个通过使用剩余参数

js 复制代码
var argumentsLength = function(...args) {
    return args.length
};
相关推荐
再睡一夏就好33 分钟前
【C++闯关笔记】详解多态
c语言·c++·笔记·学习·语法·1024程序员节
断剑zou天涯2 小时前
【算法笔记】暴力递归尝试
java·笔记·算法
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
摇滚侠4 小时前
全面掌握PostgreSQL关系型数据库,备份和恢复,笔记46和笔记47
java·数据库·笔记·postgresql·1024程序员节
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
Dream it possible!5 小时前
LeetCode 面试经典 150_链表_合并两个有序链表(58_21_C++_简单)
leetcode·链表·面试·1024程序员节
维他命Coco5 小时前
js常见开发学习
javascript
kkkkk0211066 小时前
黑马微服务保险(一)
笔记·微服务·架构
hour_go6 小时前
【知识图谱】图神经网络(GNN)核心概念详解:从消息传递到实战应用
笔记·深度学习·神经网络·1024程序员节
!win !6 小时前
分享二个实用正则
javascript·正则表达式