PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JS中你该知道的变量|常量|函数|匿名函数| 箭头函数| 闭包| 高阶函数|回调|纯函数

JS中你该知道的变量|常量|函数|匿名函数| 箭头函数| 闭包| 高阶函数|回调|纯函数

幸福敲门的博客
幸福敲门的博客 原创
2021年01月05日 17:23:26 609浏览

实例演示变量与常量的区别;
函数与匿名函数的区别
箭头函数的参数特征
闭包原理与实现并演示它
四种高阶函数,全部实例演示,并理解回调和纯函数是什么,写出你的答案

一、变量与常量的区别

常量与变量的区别:
1.常量与变量的存储方式是一样的,只不过常量必须要有初始值,而且值不允许被修改,而变量可以无初始值,且可以多次赋值。

  1. <script>
  2. // 1. 变量
  3. // 声明
  4. let userName;
  5. console.log(userName);
  6. // 未初始化变量,输出 undefined
  7. // 声明时并初始化(第一次赋值)
  8. let itemName = "送你一朵小红花";
  9. console.log(itemName);
  10. // 更新
  11. userName = "拆弹专家2";
  12. console.log(userName);
  13. // 2. 常量
  14. // 声明时必须初始化
  15. //未初始化常量,输出 undefined
  16. //const unitPrice = 666;
  17. //unitPrice = 883;
  18. const APP_NAME = "阿里爸爸";
  19. console.log(APP_NAME);
  20. </script>

图示:
变量常量区别

二、函数与匿名函数的区别

函数有函数名,匿名函数没有,需要赋值给一个变量调用
匿名函数可以简化为箭头函数,而普通函数不行

  1. <script>
  2. // 函数
  3. function getName(name) {
  4. return "三国演义的作者是:" + name;
  5. }
  6. // 输出函数
  7. console.log(getName("罗贯中"));
  8. </script>

图示:
函数

  1. <script>
  2. const sum = function(a, b) {
  3. return a + b;
  4. }
  5. // 匿名函数 9 + 6 输出 15
  6. console.log(sum(9, 6));
  7. </script>

图示:
匿名函数

三、箭头函数的参数特征

箭头函数是用来简化匿名函数的语法糖
=> 胖箭头
-> 小箭头
没有参数,小括号必须要有
如果函数体只有一条语句,可以不写return和”{}”
let model = ‘MacBook Pro’;
如果函数体只有一条语句,可以不写return和”{}
let demo7 = (id, name, model) => [id, name, model];
只有一个参数, 参数的小圆括号也可以不写
当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
当有多个参数时, 圆括号必须要写
当有多条语句时,函数体的大括号不能省
如果函数体只有一条语句时,可以省略大括号

  1. <script>
  2. //多参数,多条语句,() 不能省,{} 不能省
  3. let id = '589';
  4. let name ='黄蓉';
  5. let age = 15;
  6. let mail='hr@cnsina.gov.cn'
  7. let demo7 = (id, name, age,mail) =>{(id, name, age,mail)};
  8. console.log(id, name, age,mail);
  9. </script>

图示:
箭头函数

四、闭包原理与实现

闭包:能访问自由变量的函数
自由变量:存在函数调用的上下文中,不是函数自身的参数变量,也不是函数内部的私有变量

  1. <script>
  2. function a() {
  3. let n = 100;
  4. // 这个返回的子函数就是闭包
  5. return function () {
  6. return n;
  7. };
  8. }
  9. console.log(a()());
  10. </script>

图示:
闭包

五、四种高阶函数:回调函数|偏函数|柯里化|纯函数
回调函数:使用函数作为参数传递

  1. // 回调函数
  2. let name = e => e();
  3. let age = () => 'age';
  4. // 把函数age作为参数传递给name,age是回调函数
  5. console.log(name(age));
  6. </script>

图示:
回调函数

偏函数:简化声明

  1. 偏函数: 简化了声明时的参数声明
  2. let sum = function (a, b) {
  3. return function (c, d) {
  4. return a + b + c + d;
  5. };
  6. };
  7. let f1 = sum(1, 2);
  8. console.log(f1(3, 4));

图示:
偏函数

柯里化:简化调用参数

  1. <script>
  2. let sum = function (a) {
  3. return function (b) {
  4. return function (c) {
  5. return function (d) {
  6. return a + b + c + d;
  7. };
  8. };
  9. };
  10. };
  11. let sum1 = sum(1)(2)(3)(4);
  12. console.log(sum1)
  13. </script>

图示:
柯里化

纯函数:纯函数独立于上下文,返回值只能接受传入的参数影响

  1. <script>
  2. function add(c, d) {
  3. console.log(c + d);
  4. }
  5. add(122, 252)
  6. </script>

图示:
纯函数

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议