JavaScript:默认参数、扩展运算符、剩余参数和解构!

javascript:默认参数、扩展运算符、剩余参数和解构!

默认参数

我们可以直接在参数列表中添加默认值

function rolldie(numsides = 6) {  return math.floor(math.random() * numsides) + 1;}

这里,需要注意秩序。默认参数只能出现在任何没有默认值的参数之后:

function greet(person, msg = 'hey there', punc = '!') {  return `${msgs}, ${person}${punc}`;}

传播

spread 语法允许在需要零个或多个参数(对于函数调用)或元素(对于数组文字)的地方扩展可迭代对象,例如数组,或者在需要零个或多个键的地方扩展对象表达式需要 – 值对(对于对象文字)。 -mdn

我们可以在数组上使用展开运算符:

console.log(math.max(1, 2, 3, 4, 5, 2)); // 5const nums = [4, 3, 53, 3, 5, 2, 4, 920, 3, 5, 2];console.log(math.max(...nums)); // 920

我们可以使用展开运算符来连接数组:

const cats = ['fluffy', 'zane', 'jim'];const dogs = ['doggo', 'sir barks a lot'];const allpets = [...cats, ...dogs, 'goldy'];console.log(allpets); //['fluffy', 'zane', 'jim', 'doggo', 'sir barks a lot', 'goldy']

我们可以使用 spread 将属性从一个对象复制到另一个对象:

const feline = {  legs: 4,  family: 'felidae',};const canine = {  family: 'canine',  furry: true,};const dog = { ...canine, ispet: true };console.log(dog); // {family: 'canine', furry: true, ispet: true}// note, order matters - the last property takes precidence:const catdog = { ...feline, ...canine };console.log(catdog); // {legs: 4, family: 'canine', furry: true}

在数组和字符串上传播使用索引作为键值:

let newobj = { ...[2, 4, 6, 8] };console.log(newobj); // {0: 2, 1: 4, 2: 6, 3: 8}let anotherobj = { ...'hello' };console.log(anotherobj); //{0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o'}

使用传播的一个更现实的例子是,如果我们想将数据添加到表单中:

const datafromform = {  email: 'jim@jimelm.com',  password: '1234',  username: 'jimelm',};const person = { ...datafromform, id: 2134, isadmin: false };console.log(person); // {email: 'jim@jimelm.com', password: '1234', username: 'jimelm', id: 2134, isadmin: false}

其余参数

休息与传播相反。它将一堆参数传递给函数并将它们组合成一个数组。一些例子包括:

function sum(...nums) {  return nums.reduce((total, el) => total + el);}function raceresults(gold, silver, ...everyoneelse) {  console.log(`gold metal goes to ${gold}`);  console.log(`silver metal goes to ${silver}`);  console.log(`and thanks to: ${everyoneelse}`);}

解构

解构数组

这是解构数组的示例:

const scores = [999, 888, 777, 666, 555, 444];const [gold, silver, bronze, ...otherscores] = scores;console.log(gold); // 999console.log(silver); // 888console.log(bronze); // 777console.log(otherscores); // [666, 555, 444]

解构对象

这里我们将解构一个对象:

const user = {  email: 'marryelm@what.com',  password: '134jsdf',  firstname: 'marry',  lastname: 'elm',  born: 1927,  died: 2091,  city: 'hayward',  state: 'ca',};const { email, state, city } = user;console.log(email); // marryelm@what.comconsole.log(state); // caconsole.log(city); // haywardconst { born: birthyear } = user;console.log(birthyear); // 1927

我们可以为变量指定默认值,如下所示:

const user2 = {  email: 'stacy@what.com',  firstname: 'stacy',  lastname: 'kent',  born: 1984,  city: 'boise',  state: 'id',};const { city, state, died } = user2;console.log(died); // undefinedconst { city, state, died = 'n/a' } = user2;console.log(died); // n/a

解构参数

我们还可以在函数参数内进行解构:

const user2 = {  email: 'stacy@what.com',  firstname: 'stacy',  lastname: 'kent',  born: 1984,  city: 'boise',  state: 'id',};function fullname({ firstname, lastname = '???' }) {  return `${firstname} ${lastname}`;}

我们还可以在回调函数中进行解构:

const movies = [  {    title: 'Indiana Jones',    score: 77,    year: 1994,  },  {    title: 'Star Trek',    score: 94,    year: 1983,  },  {    title: 'Deadpool',    score: 79,    year: 2001,  },];let ratings = movies.map(({ title, score }) => {  return `${title} is rated ${score}`;});console.log(ratings); // ['Indiana Jones is rated 77', 'Star Trek is rated 94', 'Deadpool is rated 79']

以上就是JavaScript:默认参数、扩展运算符、剩余参数和解构!的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1490139.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Let、Const 和 Var 概述:主要差异解释
上一篇 2025年12月19日 12:58:16
开始使用 Vercel
下一篇 2025年12月19日 12:58:40

相关推荐

  • python中zip函数详解 python多序列压缩zip函数应用场景

    zip函数的应用场景包括:1) 同时遍历多个序列,2) 合并多个列表的数据,3) 数据分析和科学计算中的元素运算,4) 处理csv文件,5) 性能优化。zip函数是一个强大的工具,能够简化代码并提高处理多个序列时的效率。 在Python中,zip函数是一个非常有用的工具,它能够将多个可迭代对象打包成…

    2026年5月10日
    000
  • JS如何实现迭代器?迭代器协议

    JavaScript中实现迭代器需遵循可迭代协议和迭代器协议,通过定义[Symbol.iterator]方法返回具备next()方法的迭代器对象,从而支持for…of和展开运算符;该机制统一了数据结构的遍历接口,实现惰性求值,适用于自定义对象、树、图及无限序列等复杂场景,提升代码通用性与…

    2026年5月10日
    100
  • 解决PHP foreach循环中变量“继承”问题:理解与避免意外数据泄露

    本文探讨PHP foreach循环中一个常见的陷阱:当循环内部的数组或变量未被显式初始化时,其值可能会“继承”自上一次循环迭代,导致意外的数据泄露和逻辑错误。文章将深入分析这一现象的根源,并通过示例代码展示如何通过在每次迭代开始时正确初始化变量来解决此问题,确保代码行为的预期一致性。 引言:fore…

    2026年5月10日
    100
  • python如何将列表转换为字符串_python列表与字符串相互转换技巧

    将列表转换为字符串需用join()方法,确保元素均为字符串类型;含非字符串元素时应先用列表推导式结合str()转换。 在Python中,将列表转换为字符串最常见且高效的方式是使用字符串的 join() 方法;而将字符串转换为列表,则主要依赖于字符串的 split() 方法,或者针对特定需求使用 li…

    2026年5月10日
    200
  • php聚合式迭代器是什么

    聚合式迭代器通过组合多个迭代器实现统一遍历,PHP中常用AppendIterator(顺序聚合)和MultipleIterator(并行聚合)实现;适用于合并数据集、构建复合输出等场景。 PHP中的聚合式迭代器(Aggregate Iterator)并不是一个官方定义的独立类或接口,而是指通过组合多…

    2026年5月10日
    000
  • 使用 Pandas 的 isin 方法进行日期匹配时出现问题的解决方案

    本文旨在解决在使用 Pandas 的 `isin` 方法,结合 `datetime` 对象进行数据筛选时,可能遇到的 `TypeError` 和 `AttributeError` 问题。通过分析问题代码,我们将提供清晰的解决方案,并解释其背后的原因,帮助读者避免类似错误,高效地进行数据处理。 在使用…

    2026年5月10日
    000
  • javascript怎么生成二维数组

    javascript怎么生成二维数组javascript怎么生成二维数组javascript怎么生成二维数组javascript怎么生成二维数组

    javascript中生成二维数组的常用方法有:1. 嵌套循环,通过双重for循环逐行构建,逻辑清晰且避免引用陷阱;2. 使用array.from结合map,以函数式编程风格简洁地创建新数组实例,每行独立;3. 使用array().fill().map(),利用map回调确保每次生成新数组,避免共享…

    2026年5月10日 用户投稿
    000
  • python collections.Counter的计数

    Counter是Python中用于统计元素频次的高效工具,支持列表、字符串等可迭代对象;其以字典形式返回结果,键为元素,值为出现次数;可进行访问计数、获取最常见元素、更新或减去数据及数学运算;适用于词频统计、判断异位词和算法题等场景。 Python 的 collections.Counter 是一个…

    2026年5月10日
    000
  • JavaScript中的迭代器与生成器详解_js ES6+

    迭代器是遵循迭代器协议的对象,提供next()方法返回{value, done};2. 生成器函数用function*定义,通过yield暂停并返回值,自动实现迭代器接口。 在JavaScript ES6+中,迭代器(Iterator)和生成器(Generator)是处理数据序列的重要机制。它们让开…

    2026年5月10日
    100
  • 使用 Python 格式化输出列表和嵌套列表数据,使其以表格形式呈现

    本文介绍了如何使用 Python 格式化输出列表和嵌套列表数据,使其以清晰美观的表格形式呈现。我们将利用 zip() 函数将国家名称和奖牌计数对应起来,并结合字符串格式化方法,实现无需导入额外模块即可生成表格的功能。文章提供了详细的代码示例和解释,帮助读者理解和掌握表格输出的核心技巧。 在数据处理和…

    2026年5月10日
    000
  • Python 数组旋转 90 度:非对称维度情况

    本文旨在解决 Python 中非对称维度数组(如 2×3)旋转 90 度的问题。通过 zip 函数和列表推导式,可以实现数组的顺时针旋转,即使数组的行数和列数不相等。本文将详细介绍实现方法,并提供示例代码,帮助读者理解和应用。 实现原理 核心思路是利用 zip(*iterable) 函数将…

    2026年5月10日
    000
  • 什么是JavaScript的展开运算符_它如何简化数组和对象的操作呢

    JavaScript展开运算符(…)用于将可迭代对象或类数组对象“打散”为独立元素,或提取对象属性,生成新结构而不修改原数据;支持数组合并、浅拷贝、添加元素、函数传参,以及对象合并、副本修改、剩余属性提取等,但仅浅拷贝、不可展开null/undefined、同名属性后覆盖。 JavaSc…

    2026年5月10日
    000
  • JavaScript多维数组操作:构建任务列表的两种高效方法

    本教程详细介绍了如何在JavaScript中创建和操作多维数组,以构建一个包含多个任务的待办事项列表。我们将探讨两种主要方法:利用展开运算符(Spread Syntax)与push()方法,以及使用forEach()循环,来高效且正确地将嵌套数组元素添加到主数组中,确保数据结构符合预期。 理解多维数…

    2026年5月10日
    000
  • Python教程:从字符串中高效提取数值列表的最大值与最小值

    本教程将指导您如何在python中处理一个包含空格分隔数字的字符串,并从中高效地找出最大值和最小值。我们将探讨字符串拆分、类型转换、以及使用排序或内置函数来定位极端值的方法,最终将结果格式化为指定字符串输出。文章将提供详细的代码示例和注意事项,帮助您构建健壮的解决方案。 在日常编程中,我们经常会遇到…

    2026年5月10日
    300
  • Python map()函数中第一个参数为None时会发生什么?

    Python map() 函数详解:None 参数的陷阱 Python 的 map() 函数通常用于将函数应用于可迭代对象的每个元素。然而,当 map() 函数的第一个参数是 None 时,其行为与预期大相径庭,容易造成混淆。 让我们来看一个例子: list1 = [1, 2, 3]list2 = …

    2026年5月10日
    000
  • Python3循环语句怎么用_Python3for和while循环使用技巧分享

    答案:Python中for循环用于遍历序列或固定次数执行,支持range()、enumerate()等操作;while循环基于条件持续运行,适用于未知次数的场景。 如果您在编写Python程序时需要重复执行某段代码,可以根据条件或序列来控制循环的执行。以下是关于Python3中for和while循环…

    2026年5月10日
    000
  • js如何创建迭代对象

    可以使用数组、Set、Map、字符串和 ES6 生成器函数在 JavaScript 中创建迭代对象,以便按顺序遍历其元素。 如何使用 JavaScript 创建迭代对象 在 JavaScript 中,迭代对象是指能够按顺序遍历其元素的对象。创建迭代对象的方法有几种: 1. 使用数组 数组是 Java…

    2026年5月10日
    000
  • Promise的静态方法全面解析

    Promise的静态方法全面解析Promise的静态方法全面解析Promise的静态方法全面解析Promise的静态方法全面解析

    promise的静态方法包括all、race、allsettled、any、resolve和reject,它们用于处理多个promise的并发、竞争、状态聚合等场景。promise.all()适用于所有任务必须成功完成的情况,任一失败则整体失败;promise.race()返回第一个完成(无论成功或…

    2026年5月10日 用户投稿
    000
  • C++ 如何使用 for-each 循环 (基于范围的 for 循环)_C++ 范围 for 循环遍历容器方法

    C++11引入的基于范围的for循环使遍历更简洁,语法为for (declaration : range),可直接遍历数组或容器,如int arr[] = {1,2,3,4,5}; for (int x : arr)输出各元素。 C++11 引入了基于范围的 for 循环(range-based f…

    2026年5月10日
    000
  • JavaScript 的 for…of 循环与 for…in 循环有何本质区别?

    for…in遍历对象的键,包括继承的可枚举属性;for…of遍历可迭代对象的值,如数组、字符串等,依赖Symbol.iterator。 for…of 和 for…in 虽然都是 JavaScript 中用于遍历的循环语句,但它们的用途和行为有本质区别。…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信