博主信息
博文 43
粉丝 4
评论 0
访问量 28833
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
函数参数类型返回值/模板字面量模板函数/闭包函数实例演示
汇享科技
原创
540人浏览过

1.函数参数类型和返回值

函数参数类型

函数语法function fun(形参){} 调用时fun(实参)默认情况下形参和实参需要对应起来 写几个形参就要写几个实参一一对应
但是当我们不知道实参有多少的时候呢? 咱们可以用…将所有传来的实参进行压缩
声明一个函数 可以使用…接收函数调用时传的实参

那么返回的arr数据如下:
l5vrvetv.png
想展开查看传入的实参也是使用…进行展开 用在返回值或者调用时是将一个数组进行展开传入效果如下:
l5vrz00u.png

  1. //注意默认情况如果参数不足需要给形参一个默认值~
  2. function f(...arr) {
  3. return arr;
  4. }
  5. console.log(f(1, 2, 3, 4, 5, 6));

返回值

一个函数中通过return返回的数据叫做返回值,默认情况下返回值都是单值,那么怎么才能通过数组或者对象的方式来把多个返回值封装并返回呢?实例如下:

  1. 数组返回

l5vsf2kj.png

  1. //将返回值通过数组返回完整写法
  2. let f1 = function () {
  3. return [1, 2, 3];
  4. };
  5. console.log(f1());
  6. // 简写用箭头函数
  7. f1 = () => [1, 2, 3];
  8. console.log(f1());
  1. 对象返回
    l5vt6daq.png
    1. //将返回值通过对象返回
    2. //完整写法
    3. let f2 = function () {
    4. return {
    5. a: 1,
    6. b: 2,
    7. fun: function () {
    8. return this.a + this.b;
    9. },
    10. };
    11. };
    12. console.log(f2());
    13. // 简写
    14. f2 = () => ({
    15. a: 1,
    16. b: 2,
    17. fun: () => {
    18. return this.a + this.b;
    19. },
    20. });
    21. console.log(f2());

    2.模板字面量/模板函数

    模板字面量

    模板字面量:也就是说一个字符串中存在“占位符”那么这个字符串就可以叫做“模板字面量”
    占位符也叫插值也可以叫做表达式也可以是变量 模板字面量用反引号声明 反引号在esc下面 实例演示:

    l5vtrh3f.png
    1. //模板字面量
    2. let username = "小王";
    3. console.log(`我是${username}`);
    4. //支持表达式
    5. console.log(`a + b =${5 + 6}`);
    6. //支持三元运算符
    7. let age = 18;
    8. console.log(`${age >= 18 ? "我成年了" : "未成年"}`);

    模板函数

    模板函数:使用模板字面量作为参数的函数就是模板函数 模板函数两个参数:参数1:必须是当前模板字面量中的字面量组成的数组 参数2:必须是必须是模板字面量中的插值组成的插值列表实例演示:
    l5vu60ld.png
    1. //模板字面量
    2. let username = "小王";
    3. console.log(`我是${username}`);
    4. //支持表达式
    5. console.log(`a + b =${5 + 6}`);
    6. //支持三元运算符
    7. let age = 18;
    8. console.log(`${age >= 18 ? "我成年了" : "未成年"}`);
    9. console.log("--------------------------");
    10. //模板函数
    11. function sum(zml, ...cz) {
    12. console.log(zml);
    13. console.log(cz);
    14. }
    15. let a = "zimianliang";
    16. let b = "字面量";
    17. sum`这是字面量:${a},这也是字面量:${b}`;

    3.闭包函数/纯函数

    闭包函数

    闭包函数:需要满足两个条件 条件1:需要有父子函数 条件2:子函数需要用到父函数的参数 闭包函数有自己的作用域 函数默认调用完成作用域会立马失效 而闭包函数中子元素如果调用到父元素的参数 那么父元素被调用的时候创建出来的作用域不会立马消失 直到子函数使用完父函数内的参数即可 实例演示:
    l5vv508l.png
  1. //创建一个闭包 已经满足两个条件所以这个是一个闭包函数
  2. function f(a) {
  3. let f1 = function (b) {
  4. let f2 = function (c) {
  5. return a + b + c;
  6. };
  7. return f2;
  8. };
  9. return f1;
  10. }
  11. console.log(f(1)(2)(3));
  12. //简化
  13. f = (a) => (b) => (c) => a + b + c;
  14. console.log(f(1)(2)(3));

纯函数

纯函数:函数内部不使用任何自由变量 可以将自由变量在调用时当参数传入 实例演示:
l5vvijvg.png

  1. let dis = 0.5;
  2. //纯函数
  3. let fun = function (a, b) {
  4. return a * b;
  5. };
  6. console.log(fun(10, dis));
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学