博客列表 >变量常量区别、函数与匿名函数区别、箭头函数、闭包原理、高阶函数、回调和纯函数

变量常量区别、函数与匿名函数区别、箭头函数、闭包原理、高阶函数、回调和纯函数

吳
原创
2021年01月05日 03:20:251030浏览

1. 变量与常量的区别

  • 1-1.let变量

let变量禁止重复声明,可更新。

  1. <script>
  2. // 声明
  3. let userName;
  4. console.log(userName);
  5. // 声明时并初始化(叫第一次赋值)
  6. let itemUser = "张三";
  7. console.log(itemUser);
  8. // 更新userName变量
  9. userName = "李四";
  10. console.log(userName);
  11. </script>
  • 1-2.const常量

常量是只读变量,常量声明后不能删除也不能更新,常量的声明与初始化必须同步完成,实际工作中尽可能的首选const常量,其次才考虑let!

  1. <script>
  2. // 声明时必须初始化: 不可更新
  3. const unitPrice = 8888;
  4. console.log(unitPrice);
  5. const APP_NAME = "商城";
  6. console.log(APP_NAME);
  7. </script>

2. 函数与匿名函数区别

函数:有函数名、函数可以重写

  • 2-1 函数

  1. <script>
  2. // 函数
  3. function getName(name) {
  4. return "欢迎你来到: " + name;
  5. }
  6. // 输出函数
  7. console.log(getName("php中文网"));
  8. </script>
  • 2-2 匿名函数

匿名函数:没有函数名的函数、可以赋值给一个常量、防止重写更新

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

3. 箭头函数的参数特征

箭头函数的参数特征:
没有参数时,参数()不能省略
只有一个参数时,参数()可以省略
两个或多个参数,参数()不能省略
多条语句时,函数体{}不能省

  1. <script>
  2. // 没有参数时,()不能省
  3. let sum = () => true;
  4. console.log(sum());
  5. // 只有一个参数时,()可以省略
  6. let tips = str => console.log(str);
  7. tips("欢迎你!");
  8. // 两个或多个参数,()不能省
  9. tips = (a, b) => a + b;
  10. console.log(tips(3, 3));
  11. // 多条语句时,函数体{}不能省
  12. tips = (a, b) => {
  13. let c = a + b;
  14. return c;
  15. }
  16. console.log(tips(6, 6));
  17. </script>

4. 闭包原理

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

  1. <script>
  2. let num = 1;
  3. function add(a, b) {
  4. // a,b: 参数变量
  5. // t: 私有变量
  6. let t = 0;
  7. // num: 自由变量
  8. return t + a + b + num;
  9. }
  10. console.log(add(2, 2));
  11. </script>

5. 四种高阶函数

高阶函数:使用函数为参数或者将函数做为返回值的函数;

  • 回调函数
  1. <script>
  2. // 回调函数
  3. let user = a => a();
  4. let name = () => 'name';
  5. // 把函数name作为参数传递给user,name是回调函数
  6. console.log(user(name));
  7. </script>
  • 偏函数
  1. <script>
  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));
  9. </script>
  • 柯里化
  1. <script>
  2. 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 res = sum(10)(2)(5)(6);
  12. console.log(res);
  13. </script>
  • 纯函数
  1. <script>
  2. function add(a, b) {
  3. console.log(a + b);
  4. }
  5. add(3, 3);
  6. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议