search

博客列表 >1. 函数参数类型与返回值方法 2. 实例演示模板字面量与模板函数的声明,参数特点 3. 实例演示闭包的形成条件与访问方法,并明白纯函数的特点

1. 函数参数类型与返回值方法 2. 实例演示模板字面量与模板函数的声明,参数特点 3. 实例演示闭包的形成条件与访问方法,并明白纯函数的特点

P粉314265155
P粉314265155原创
2022年07月22日 19:39:04311浏览

函数参数类型与返回值方法

  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>js函数参数与返回值</title>
  8. </head>
  9. <body>
  10.     <script>
  11.     // function (参数){
  12.         // return   返回值
  13.     // }
  15.     function hello1(username1 = '默认值') {
  16.         return username1;
  17.     }
  18.     // 我是函数
  19.     console.log(hello1);
  20.     // 我是默认值
  21.     console.log(hello1());
  22.     // 我是赋值
  23.     console.log(hello1('朱'));
  24. // 我是多个参数 只展示第一个
  25. console.log(hello1('码','朱','购','来'));
  26. console.log(hello1('================'));
  27. // 我是多个参数 全部展示,压缩  。。。变为数组展示
  28. function hello(...user) {
  29.         return user;
  30.     }
  31.     console.log(hello('购','来'));
  32.     console.log(hello('================'));
  33. console.log('----------------------------');
  34. // 数组 在函数调用时。。。展开  。用在函数参数中是压入
  36. const arr =['朱','购','来'];
  37. console.log(...arr);
  38. console.log(...['朱','购','来']);
  39. console.log('----------------------------');
  40. let sum = function (a,b) {
  41.     return a+ b;
  42. }
  43. console.log(sum(1,2));
  44. // 箭头函数简写  上面的匿名函数
  45. let sum1 = (a,b)  => a + b ;
  46. console.log(sum1(1,2));
  47. // 参数压缩 ，数组  求和
  49. let sum2 = (...arr)  => arr.reduce((a,c) => a+c) ;
  50. console.log(sum2(1,2,3,5));
  51. console.log('----------------------------');
  52. const  list = ['电脑','手机','鼠标']
  53. console.log(list);
  54. // 从服务器API接口获取到了个商品列表: JSON数组
  55.       //   const list = ['笔记本电脑', '小米12手机', '佳能 EOS-R相机'];
  56.       //   console.log(list);
  57.       // 将每个商品,套上html标签,最终渲染到html页面中
  58.       //   f = (...items) => items.map(item => `<li>${item}</li>`).join('');
  59.       //   console.log(f(...list));
  60.       //   document.body.innerHTML = '<ul>' + f(...list) + '</ul>';
  61. f =(...list) => list.map(item => '<li>${item}</li>').join('');
  62. console.log(...list);
  63. document.body.innerHTML = '<ul>'+ f(...list) +' </ul> ';
  64. console.log('******************-');
  65. // 数组
  66. const g = () => [1,2];
  67. console.log(g());
  68. // 对象
  69. // 无法获取
  70. // h = ( )  =>{
  71. //     a:1 ;
  72. //     b:2;
  73. //     get: function{
  74. //         return 'ok';
  75. //     }
  76. // }
  77. // console.log(h());
  78. // 可以获取
  79. h = ( )  => ( {
  80.     a:1 ,
  81.     b:2 ,
  82.     get: function(){
  83.         return 'ok';
  84.     },
  85. });
  86. console.log(h());
  87.     </script>
  88. </body>
  89. </html>

对象字面量函数简化

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>对象字面量简化</title>
  9. </head>
  10. <body>
  11.     <script>
  13.         let name = '朱老师';
  14.         let email = '123@qq.com';
  15.         // console.log(name);
  16.         // let user = {
  17.         //     name : '朱',
  18.         // }
  19.         // console.log(user.name);
  20. // 简写
  21. // let user =  {
  22. //     name,
  23. //     email,
  24. // }
  25. // console.log(user.name);
  26. // console.log(user.email);
  28. // 方法简化、
  29. let user = {
  30. name,email,
  31. // getUserInfo : function (){
  32. //     return this.name + ':' + this.email;
  33. // },
  34. // getUserInfo() {
  35. //     return this.name + ':' + this.email;
  36. // },
  38. getUserInfo() {
  39.     return user.name + ':' + user.email;
  40. },
  43. };
  44. console.log('11111111111');
  45. console.log(user.name);
  46. console.log(user.email);
  47. console.log(user.getUserInfo());
  52.     </script>
  53. </body>
  54. </html>

模板字面量和 模板函数

  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.         //   你是谁，是字符串
  12.   console.log('你是谁');
  13.  //  hello uername' 是模板字符串
  14. //   console.log('hello username');
  15. //   占位符 :表达式、插值/变量
  17. let username = 'gun';
  18. // console.log( 'hello' + username);
  19. // 反引号  在esc下面
  20. console.log( `hello ${username}`);
  21. console.log('....................');
  23. console.log(`hello ${username}`);
  24. console.log('....................');
  25. console.log(`10 + 40  = ${10 + 40 }`);
  26. let age = 30 ;
  27. // 三元运算
  28. console.log(`${ age >=18 ?  ` 成年 `:  `未成年`}`);
  29. console.log('=============');
  31. // 注意反引号、 函数调用   函数参数 不需要括弧  模板函数使用模板真面量为参数的函数
  32. alert `你好` ;
  33. console.log('=============');
  34. function tatal (strings,...args){
  35. console.log(tatal);
  36. console.log('=============');
  37. console.log(strings);
  38. console.log('****************');
  39. // console.log(num,price);
  40. console.log('-111111111111--');
  41.  console.log(...args);
  42.  console.log('-111111111111--');
  43. console.log(args);
  45. }
  47. let name = '手表';
  48. let num= 2;
  49. let price =10;
  50. tatal `名称：${name},数量：${num} , 单价 :${price}`;
  54.     </script>
  57. </body>
  58. </html>

闭包

  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.          //闭包
  12.         //  let fn = (a,b) => a +b ;
  13.         //  console.log(fn(1,2));
  15. let h=10;
  16. let fn1 = function (c,d)  {
  17.     let e = 5;
  18. console.log('==========');
  19. // e是内部变量   h是外部变量
  20.     return c +d + e+h;
  22. };
  23. console.log(fn1(3,4));
  24. console.log('==========');
  25. // 闭包形成的条件  1、父子函数
  26. // 2、子函数调用父函数的变量
  27. let fn2 =function (j){
  28.     let u =function(o){
  29.         // j是父函数变量  o是子函数变量
  30. return j+o;
  31.     };
  32.     return  u;
  33. };
  35. console.log(fn2(1));
  36. console.log('==========');
  37. let f7 = fn2(10);
  38. console.log('-------------');
  39. console.log(f7);
  40. console.log('-------------');
  41. console.log(typeof f7);
  42. // 父函数作用域不消失
  43. console.log(f7(3));
  44. console.log('--+++++++--');
  47. function i (){
  48.     let b =1;
  49.     console.log(b);
  50.     console.log('--&&&&&&&&---');
  51. };
  52. console.log('--*****-+++++---');
  53. console.log(i);
  54. console.log('----999999-----');
  55. console.log(i());
  56. // console.log(i(b));
  57. // console.log(b);
  58.     </script>
  60. </body>
  61. </html>
  62. `

闭包应用，偏函数

  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>
  12. fn = function (a,b,c) {
  13.   return a + b + c ;
  15. };
  16. console.log(fn(1,2,3));
  17. console.log('---------');
  18. // 闭包应用:偏函数
  20. fn =function (a) {
  22.  return function (b) {
  23.     return function (c) {
  24.         return a + b +c;
  25.     };
  26.  };
  27. };
  28. // 分多次传入
  29. console.log(fn(10));
  30. console.log('---------');
  31. console.log(fn(10)(20));
  32. console.log('---------');
  33. console.log(fn(10)(20)(30));
  34. console.log('---------');
  37. // 可以，柯里化
  38. fn1 =function (d) {
  40. return function (f,g) {
  42.        return d + f +g;
  43.    };
  44. };
  45. console.log(fn1(20)(30,50));
  46. console.log('---------');
  48. // 简化
  49. let au =0;
  50. let bu = 0;
  51. let cu = 0;
  52. fn5 = au  =>  bu  => cu => au + bu +cu;
  54. fn = a => b => c => a + b + c;
  55.       console.log(fn(6)(7)(8));
  56.       console.log('---------');
  57. console.log(fn5(6)(7)(8));
  59. console.log('---------');
  61. // 闭包 有个前提条件，函数使用外部变量/自由变量
  62. // 如果有一个函数，全部自己自足，不会用到自由变量
  63. // 这函数是一个清流,   纯函数，特点不受外部干扰
  67. // 隐士闭包  所以不是纯函数
  68. let dis = 0.5 ;
  69. function getPrice(price) {
  70.     return price  * dis ;
  71. }
  72. console.log('---------');
  73. // 如何改为纯函数？将 外部自由变量，通过参数传入函数。而不是直接调用
  74. // 纯函数
  75. let dis1 = 0.5 ;
  76. function getPrice(price1,dis1) {
  77.     return price1  * dis1 ;
  78. }
  79. // 可以放到代码任何地方。和上下文无关，不涉及到线程切换。不涉及外部变量到不涉及到引用 ，灵活的住键，。调用时通过统一入口调用
  80. console.log(getPrice(100,dis1));
  81.     </script>
  82. </body>
  83. </html>

上一条：JS函数总结下一条：微信小程序动态修改wxss动态传值给wxss文件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多