Blogger Information
Blog 33
fans 0
comment 0
visits 18746
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
函数基础知识
李玉峰
Original
730 people have browsed it

1. 函数参数与返回值

1.1 实参和形参数量相等不足(默认参数)、相等(一一对应)、过多(…rest归并)

1.2 多值返回:用数组、对象返回复合值

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>函数参数与返回值</title>
  8. </head>
  9. <body>
  10. <script>
  11. let f = (a, b = 10) => a + b;
  12. // 1.有实参,计算传入的实参
  13. console.log(f(20, 30));
  14. // 2.实参不足,默认值解决计算
  15. f = (a, b = 10) => a + b;
  16. console.log(f(20));
  17. // 3.参数过多,...剩余参数
  18. f = (a, b = 10) => a + b;
  19. console.log(f(20, 30, 50, 60, 70));
  20. console.log("-------------");
  21. // 接收全部参数
  22. f = (a, b, ...c) => console.log(a, b, c);
  23. //20 30 (3) [50, 60, 70]
  24. // ...rest:用在函数的形参中,归并
  25. console.log(f(20, 30, 50, 60, 70));
  26. console.log("---------------");
  27. let arr = [1, 3, 5, 7, 9];
  28. // 将一个数组打散,变成一个一个离散的值
  29. console.log(...arr);
  30. console.log("---------------");
  31. // 以下两句语句功能一样
  32. console.log(f(...arr));
  33. console.log(f(20, 30, 50, 60, 70));
  34. // 参数过多时计算
  35. f = (...arr) => arr.reduce((a, c) => a + c);
  36. console.log(f(20, 30, 50, 60, 70));
  37. // 返回值:函数只能有一个返回值,默认单值返回
  38. // 多值返回:用数组、对象返回复合值
  39. // function fn() {
  40. // return [1, 2, 3];
  41. // }
  42. // 简化以上函数
  43. let fn = () => [1, 2, 3];
  44. let res = fn();
  45. console.log(res);
  46. // 对象
  47. function fnn() {
  48. return {
  49. id: 1,
  50. name: "admin",
  51. };
  52. }
  53. res = fnn();
  54. console.log(res);
  55. console.log("-------------");
  56. // 对象:这里简化的对象和函数一样,对象必须要用括号括起来
  57. fnn = () => ({
  58. id: 1,
  59. name: "admin",
  60. });
  61. res = fnn();
  62. console.log(res);
  63. </script>
  64. </body>
  65. </html>

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

2.1 模板字面量:可以使用插值表达式的字符串,也叫模板字符串

2.2 模板函数:可以使用’模板字面量’为参数的函数,也叫标签函数

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>模板字面量与模板函数</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 1.模板字面量:可以使用插值表达式的字符串,也叫模板字符串
  12. console.log("hell world");
  13. // 反引号:支持在字符串中插入变量/表达式:插值
  14. console.log(`hell world`);
  15. let name = "李老师";
  16. console.log("hell " + name);
  17. // 以下和以上相同,在模板字面量中,使用${变量名}来引用
  18. console.log(`hell ${name}`);
  19. let gender = 1;
  20. console.log(`${gender ? `男教师:${name}` : `女`}`);
  21. // 2.模板函数:可以使用'模板字面量'为参数的函数,也叫标签函数
  22. // alert("hello php.cn");
  23. // alert`hello php.cn`;
  24. // 模板函数,就是在模板字面量之前加一个标签/标识符,而这个标签,就是一个函数名,例如下面的"calc"
  25. calc`数量:${10},单价:${500}`;
  26. // 模板函数的参数有约定,第一个时字面量数组,从第二个起才是内部的占位符参数
  27. function calc(strings, ...args) {
  28. console.log(strings);
  29. console.log(args);
  30. console.log(args[0] * args[1]);
  31. }
  32. </script>
  33. </body>
  34. </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