[原创] 码路工人

大家好,这里是码路工人有力量,我是码路工人,你们是力量。


今天总结一下 ES6 中跟参数相关的内容。

欢迎补充斧正、留言交流。

让我们互相学习一起进步。

  • 1. ES6 参数默认值(非必需参数/可选参数)

    在 ES6 之前,函数的参数是无法设默认值的,聪明的人们当然有变通的方式,通过判断来参在函数刚开始给它赋上预想的初始值。具体在这篇里有介绍。

    扩展阅读: [ES5 中参数默认值的手动实现][ES5Parameter]

    到了 ES6,就可以愉快地设定参数默认值了。在下面的defaultParamInEnd函数中,用age = 18来设了默认值。

    /* eg.0
    * set default value for parameters
    */
    //------------------------------------------------- const defaultParamInEnd = function(name, age = 18) {
    console.log(`name: ${name} -- age: ${age}`)
    } defaultParamInEnd("Coder Power")
    // name: Coder Power -- age: 18 defaultParamInEnd("Coder Power", 32)
    // name: Coder Power -- age: 32 //-------------------------------------------------

    上面的例子中,设默认值放在了末尾,也是我们 CSharper 惯用的方式,当多个参数有默认值时也是连续地放在尾部。

    C# 中不允许设默认值的参数出现在中间或者不连续,所有可选参数必须放在必需参数的后面。

    js 中可不可以,带默认值的参数(也就是非必须参数),不在最后的位置呢?下面例子中我们来试一下。

```javascript
/* eg.1
* default value of parameters
*/
//------------------------------------------------- const defaultParamInCenter = function(name, age = 18, gender) {
console.log(` name: ${name} -- age: ${age} -- gender: ${gender}`)
} defaultParamInCenter("Coder Power", undefined, "male")
// name: Coder Power -- age: 18 -- gender: male defaultParamInCenter("Coder Power", null, "male")
// name: Coder Power -- age: null -- gender: male //-------------------------------------------------
``` 结果显示,非必需参数可以出现在中间位置(后面再跟有必需参数)。 注意在传值上还有以下区别: - 当我们给带默认值的形参`age`传一个`undefined`的时候,函数里得到了默认值`18`; - 而当我们传`null`的时候,函数里就没有得到默认值,而是`null`了。 建议在定义函数时还是将非必需参数写在最后,设默认值本身就是为了调用时方便,这样就不必为了凑数去传一个`undefined`,直接不传才是非必须参数设计的初衷。
  • 2. 剩余操作符语法获取剩余参数(Rest operator syntax)...

    (...既是剩余操作符语法 又是展开操作符语法 Spread operator syntax,这个另做介绍)

    /* eg.2
    * rest parameters
    */
    //------------------------------------------------- function restParams(name, ...other) {
    console.log(`name: ${name}`)
    console.log(`other: ${other}`)
    } restParams("Coder Power", 18, "male")
    // name: Coder Power
    // other: 18,male //-------------------------------------------------

    从上面的打印信息中other: 18,male 能够看出,other 里放了两个值,也就是剩下的两个参数的值都被它自己接收了。

    而如果没有剩余参数操作符语法,它肯定还是只能接收一个值(也就是第二个参数的值)。这里码路工人认为可以这么理解:

    ... 首先会把它后面传来的参数收集起来,相当于放进[ ]数组,再充当展开操作符语法,相当于做了个拷贝塞到形参other 里。

    或者直接理解为把传过来的剩余参数用展开操作符语法塞到形参other 里。

    • 脑洞一下:展开操作符语法可以不用在参数末尾吗?
      /* eg.3
      * rest parameter operator not in end
      */
      //------------------------------------------------- function restParamsNotInEnd(...someParams, gender) {
      console.log(`other: ${other}`)
      console.log(`someParams: ${someParams}`)
      } restParamsNotInEnd("Coder Power", 18, "male")
      // SyntaxError: Rest parameter must be last formal parameter //-------------------------------------------------

      结果报错了,异常信息显示剩余参数必须置于最后位置

  • 3. 参数的解构赋值(Destructuring Assignment)

    如果一个方法处理内容简单仅仅用到了一个对象的个别属性,而接收的参数是一个完整的对象时,可以只解构获取想要的内容(也可以是全部属性)。

    /* eg.4
    * Destructuring Assignment of parameters
    */
    //------------------------------------------------- const person = {
    name: "Coder Power",
    age: 18,
    gender: "male",
    mail: "test@abc.com",
    sister: [
    {
    name: 'Emily',
    age: 22,
    gender: "female"
    },
    {
    name: 'Lucy',
    age: 15,
    gender: "female"
    }
    ],
    address: "avenue city province country"
    } function sayHello ({ name, age, birthday = 20101219 }) {
    console.log(`Hello! I'am ${ name }, ${ age } years old.`)
    } sayHello(person)
    // Hello! I'am Coder Power, 18 years old. //-------------------------------------------------

    实际上{ }解构不仅仅可以用在参数上,写在函数内也是一样的效果。

    这同样还体现在后面要讲到的模块化导入 import的使用上。

    注意:

    • 参数里的解构赋值不支持取别名,其它解构支持别名

    • 但是可以赋默认值

      /* eg.4
      * default value for Destructuring Assignment of parameters
      */
      //------------------------------------------------- function sayHelloAgain ({ name, age, birthday = 19860101 }) {
      console.log(`Hello! I'am ${ name }, ${ age } years old.`)
      console.log(`Birthday: ${ birthday}`)
      } sayHelloAgain(person)
      // Hello! I'am Coder Power, 18 years old.
      // Birthday: 19860101 //-------------------------------------------------

      上面的示例中打印出了birthday的默认值。




关于 ES6 中参数相关的内容就介绍到这里,其中用到的还没有讲到的特性,会在后续的文章中一一介绍。

欢迎谬误斧正和转发分享。还可以评论区留个言再走啊~

希望对你能有帮助,下篇再见。


[ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)的更多相关文章

  1. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  2. LINQ系列:C#中与LINQ相关特性

    1. 匿名类型 通过关键字var定义匿名类型,编译器将根据运算符右侧表达式的值来发出一个强类型. 使用匿名类型时要遵守的一些基本规则: ◊ 匿名类型必须有一个初始化值,而且这个值不能是空值(null) ...

  3. 单元测试系列之十一:Jmockit之mock特性详解

    本文是Jmockit学习过程中,根据官网所列的工具特性进行解读. 1.调用次数约束(Invocation count constraints) 可以通过调用计数约束来指定预期和/或允许匹配给定期望的调 ...

  4. 研究下JavaScript中的Rest參数和參数默认值

    研究下JavaScript中的Rest參数和參数默认值 本文将讨论使 JavaScript 函数更有表现力的两个特性:Rest 參数和參数默认值. Rest 參数 通常,我们须要创建一个可变參数的函数 ...

  5. PHP 判断是表单否有这个参数,如果没有则设置默认值

    <?php @$name = $_GET["name"]; if(isset($name)) { echo "name = " .$name; } els ...

  6. 获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

    获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

  7. PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  8. Flink-1.10中的StreamingFileSink相关特性

    一切新知识的学习,都离不开官网得相关阅读,那么StreamingFileSink的官网介绍呢? https://ci.apache.org/projects/flink/flink-docs-rele ...

  9. flutter系列之:flutter中常用的GridView layout详解

    目录 简介 GridView详解 GridView的构造函数 GridView的使用 总结 简介 GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridVie ...

随机推荐

  1. 51NOD 2072 装箱问题 背包问题 01 背包 DP 动态规划

    有一个箱子容量为 V(正整数,0<=V<=20000),同时有 n 个物品(0<n<=30),每个物品有一个体积(正整数). 现在在 n 个物品中,任取若干个装入箱内,使得箱子 ...

  2. docker 安装centos7并SSH远程连接

    1.安装centos7 镜像 1.搜索并拉取centos镜像(默认最新镜像) docker search centos docker pull centos 2.建立本机对应docker-centos ...

  3. Java——Java连接Jira,创建、修改、删除工单信息

    还不了解Jira是什么的同学可以看一下这篇文章:https://www.cnblogs.com/wgblog-code/p/11750767.html 本篇文章主要介绍如何使用Java操作Jira,包 ...

  4. 组队训练 K K - The Stream of Corning 2

    K - The Stream of Corning 2 这个题目不是很难,因为给你的这个S是单调递增的,所以就用优先队列+权值线段树就可以很快的解决了. 这个+读入挂可以优化,不过不用也没关系. #i ...

  5. G. Yash And Trees 线段树 + dfs序 + bitset

    这个是要用bitset 一个大整数的二进制 学习推荐博客 这个题目大意就是:给你n,m 还有一个序列,还有一个一棵树,有一种操作一种询问 操作是给你一个节点 把这个节点及其子节点都加上x 询问是 给你 ...

  6. 【漫画】JAVA并发编程之并发模拟工具

    原创声明:本文来源于公众号[胖滚猪学编程],转载请注明出处. 上一节[漫画]JAVA并发编程三大Bug源头(可见性.原子性.有序性)我们聊了聊并发编程的三个bug源头,这还没开始进入并发世界,胖滚猪就 ...

  7. [csu/coj 1619] 递归

    题意:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1619 思路:由于式子具有递归的性质,考虑递归解,中间结果会超64位int,需用大数.另外自己 ...

  8. 在ef core中使用postgres数据库的全文检索功能实战之中文支持

    前言 有关通用的postgres数据库全文检索在ef core中的使用方法,参见我的上一篇文章. 本文实践了zhparser中文插件进行全文检索. 准备工作 安装插件,最方便的方法是直接使用安装好插件 ...

  9. neo4j企业版集群搭建

    一.HA高可用集群搭建 版本采用的是neo4j-enterprise-3.5.3-unix.tar.gz 1.1.集群ip规划 192.168.56.10 neo4j-node1 192.168.56 ...

  10. 去除 HTML 和 PHP 标记

    strip_tags()函数,从字符串中去除html和php标记,随笔记一下,如果看过就过去,下次再找可能又会费点事,记下来下次好找