博主信息
博文 17
粉丝 0
评论 0
访问量 12501
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
函数的参数和返回值问题以及模板字面量和模板函数
想做一个躺平的程序员
原创
551人浏览过

函数参数和返回值知识演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>我们来看函数的参数</title>
  7. </head>
  8. <body>
  9. <script>
  10. // 函数的参数有二种情况
  11. // <!-- 第一种 参数不足 -->
  12. let f=(a,b)=>{
  13. console.log(a+b); //打印a+b的总和
  14. }
  15. f(1,2); //正常传参数
  16. //如果我们只传入一个参数时,有什么情况呢?
  17. f(1);
  18. //NaN: not a number 非法数字
  19. // 为了区分第一种情况和第二种情况,我们添加一条分割线
  20. console.log("-------------------------------------------------------");
  21. // 第二种 参数过多 既参数剩余
  22. f=(a,b)=>{
  23. console.log(a+b);
  24. }
  25. f(1,2); //正常传参数
  26. //当我们传入多个参数时,会发生什么呢?
  27. f=(a,b)=>{
  28. console.log(a+b);
  29. }
  30. f(5,4,3,2,1);//传入多个参数 ,我们去看看打印效果
  31. //我们来处理这种情况
  32. // 通过下面的函数,我们可以看到,
  33. // 多了个...arr, 就是用来处理剩余函数的
  34. // ...arr将剩余的函数,装入到一个数组中
  35. f=(a,b,...arr)=>{
  36. console.log(a,b,arr);
  37. }
  38. f(1,2,3,4,5);
  39. //再次分区情况,写个分隔线
  40. console.log("---------------------------------------------------------------");
  41. //我们再来看看解构剩余函数,既将剩余函数打散
  42. f=(...[a,b,c,d])=>{
  43. console.log(a); //看看a的值
  44. console.log(b);//看看b的值
  45. console.log(c); //看看c的值
  46. console.log(d); //看看d的值
  47. }
  48. f(5,4,3,2);
  49. //对应函数返回值 我们可以用数组, 对象
  50. let id=1;
  51. let name="王五";
  52. // 返回值我们先用对象来作为返回值
  53. f=(a,b)=>{
  54. return {
  55. id:1,
  56. name
  57. }
  58. }
  59. //打印下,看看信息
  60. console.log(f(1,2));
  61. console.log("------------------------");
  62. //我们再看数组来作为返回值
  63. f=(a,b)=>{
  64. return [
  65. id,
  66. name
  67. ]
  68. }
  69. console.log(f(1,2));
  70. </script>
  71. </body>
  72. </html>

按照习惯直接上图片



模板字面量和模板函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>模板字面量和模板函数</title>
  7. </head>
  8. <body>
  9. <script>
  10. //我们先看模板字面量
  11. //模板字面量:用一对``反引号标识
  12. let name=`李四`;
  13. console.log(name);//打印信息,就不看了,自己脑补
  14. //在模板字面量中,我们可以使用${xxx},插入变量或表达式
  15. // ${xx}:就是一个占位符
  16. let user=`"我的名字叫:"${name}`;
  17. console.log(user);
  18. //模板字面量支持自动换行
  19. let stirng=`123
  20. 456
  21. 789`;
  22. console.log(stirng); //自己脑补
  23. //我们再来看模板函数
  24. // 在模板函数中插入变量或表达式
  25. // alert(`${name}`);
  26. //
  27. let email="123123@qq.com";
  28. //模板函数的第一个参数是 模板字面量中的模板字符串数组
  29. //模板函数的第二个参数是 模板字面量的变量或表达式
  30. //对于模板字符串数组,我们可以用数组下标来查找对应的字符串
  31. //对于模板字面量的变量或表达式,我们可以用数组下标来查找对应的字符串
  32. function arr(strings,...args){
  33. console.log(strings);
  34. console.log("--------------");
  35. console.log(...args);
  36. }
  37. //我们来使用模板函数调用下函数
  38. arr`我的名字${name},邮箱${email}`;
  39. </script>
  40. </body>
  41. </html>

直接上图片


批改老师: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+教程免费学