博客列表 >1. 变量,常量的区别; 2. 函数的种类与参数类型; 3. 作用域与闭包的关系与实现; 4. 模板字符串与标签函数的使用方式;

1. 变量,常量的区别; 2. 函数的种类与参数类型; 3. 作用域与闭包的关系与实现; 4. 模板字符串与标签函数的使用方式;

⁶
原创
2021年10月02日 09:38:34834浏览

1变量,常量的区别;

常量与变量的区别
常量与变量的存储方式是一样的,只不过常量必须要有初始值,而且值不允许被修改,而变量可以无初始值,且可以多次赋值。
常量与字面量的区别
常量与字面量均不会被改变,常量为存储数据的容器,而字面量为等号右侧的值,字面量是由字符串,数字等构成的字符串或数值。

2. 函数的种类与参数类型

函数一共有7种,分别是正比例函数、反比例函数、一次函数、二次函数、三角函数、三角函数、对数函数。

必须参数,默认参数,可变参数(不定长参数),关键字参数,组合参数

3. 作用域与闭包的关系与实现

  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. // 函数外面: 全局作用域
  13. let username = "猪老师";
  14. function demo1() {
  15. // 函数作用域
  16. // console.log(username);
  17. let username = "欧阳老师";
  18. console.log(username);
  19. // username,先在函数内部查询,如果有就直接访问
  20. // 如果没有, 就向上一个作用域查询,一级一级向上,直到全局
  21. // 全局有username,查询成功,返回 undefiend
  22. // 作用域链, 查询变量用的
  23. let email = "a@php.cn";
  24. }
  25. demo1();
  26. // console.log(email);
  27. // 作用域是单向的
  28. // 由外向内传递可以, 但是由内向外禁止
  29. // 闭包
  30. // 二个条件
  31. // 1. 父子函数
  32. // 2. 自由变量
  33. // 父函数
  34. function parent(a) {
  35. // 子函数
  36. function f(b) {
  37. // b 外部参数
  38. // c 是私有变量
  39. // b,c 都是当前子函数 f 自有变量
  40. let c = 6;
  41. // a = 5;
  42. // b = 8;
  43. // c = 6;
  44. // a : 是子函数 f 的自由变量
  45. return a + b + c;
  46. }
  47. // 返回
  48. return f;
  49. }
  50. // 这个时候,在外部调用parent()会返回 一个函数,此时闭包就产生了
  51. // console.log(parent(5));
  52. // parent()调用结束,应该将空间和参数全部释放
  53. // 但是父函数parent中的一个变量a,被 它的一个子函数正在引用着,所以不能销毁
  54. // const f1 = parent(5);
  55. // console.log(f1);
  56. // console.log(f1(8));
  57. // 经典应用, 通常与IIFE立即执行函数配合
  58. let counter = (function (n) {
  59. // 子函数
  60. // n: 自由变量, 它不属于子函数
  61. return function () {
  62. // 子函数自有变量只能有二种
  63. // 1. 外部参数, 2. 自己声明的变量
  64. return n++;
  65. };
  66. })(5899);
  67. console.log(counter());
  68. console.log(counter());
  69. console.log(counter());
  70. console.log(counter());
  71. console.log(counter());
  72. console.log(counter());
  73. console.log(counter());
  74. </script>
  75. </body>
  76. </html>

4. [可选]模板字符串与标签函数的使用方式

  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. console.log("hello");
  12. let lang = "html\n" + "css\n" + "js";
  13. console.log(lang);
  14. let a = 10,
  15. b = 20;
  16. let res = a + " + " + b + " = " + (a + b);
  17. console.log(res);
  18. // 传统字符串, 多行和表达式变量的混写非常的麻烦
  19. // es6使用模板字符串, 可以解决
  20. // 使用反引来来声明, 不用引用
  21. // 反引号 ` , 在 esc 键下面
  22. lang = `hello`;
  23. console.log(lang);
  24. lang = `html
  25. css
  26. js`;
  27. console.log(lang);
  28. // 使用 ${...} 插值占位符,可以将变量或表达式嵌入到字符串
  29. res = `${a} + ${b} = ${a + b}`;
  30. console.log(res);
  31. // 标签函数, 使用模板字符串为参数的函数
  32. // alert`hello ${10} ${20} ${30} world`;
  33. // console.log`hello ${10} ${20} ${30} world`;
  34. // 标签函数(第一个参数是字符串字面量组成的数组,从第二个参数起, 是插值表达式)
  35. // num: 数量
  36. // pricce: 单价
  37. function total(num, price) {
  38. console.log(num * price);
  39. }
  40. // total(10, 90);
  41. // 这样的调用是不是很"萌"
  42. total`数量: ${10} 单价: ${90}`;
  43. function total(strings, num, price) {
  44. console.log(strings);
  45. console.log(num, price);
  46. // console.log(num * price);
  47. let res = `${strings[0]}${10}${strings[1]}${90}, 总金额: ${num * price} 元`;
  48. console.log(res);
  49. }
  50. // 模板字符串参数中的占位符比较多,可以用rest进行归并
  51. sum`计算多个数之和: ${5}${6}${7}${8}${9}`;
  52. function sum(strings, ...args) {
  53. console.log(`${args.join()}之和是 ${args.reduce((p, c) => p + c)}`);
  54. }
  55. // 模板字符串: 可以使用插值表达式的字符串
  56. // 标签函数: 可以使用"模板字符串"为参数的函数
  57. // 标签函数,就是在"模板字符串"之前加一个标签/标识符,而这个标签,就是一个函数名
  58. // 标签函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数
  59. </script>
  60. </body>
  61. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议