Blogger Information
Blog 17
fans 0
comment 0
visits 8214
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
函数的参数和返回值问题以及模板字面量和模板函数
想做一个躺平的程序员
Original
368 people have browsed it

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

  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>

直接上图片


Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post