简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 函数参数类型与返回值方法 2. 实例演示模板字面量与模板函数的声明,参数特点 3. 实例演示闭包的形成条件与访问方法,并明白纯函数的特点
Blogger Information
Blog 46
fans 2
comment 0
visits 19134
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 函数参数类型与返回值方法 2. 实例演示模板字面量与模板函数的声明,参数特点 3. 实例演示闭包的形成条件与访问方法,并明白纯函数的特点
P粉314265155
Original
306 people have browsed it

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

  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>

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！