发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

JavaScript进阶

子鲁剑

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。
  1. <body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>
复制代码
总结：
1.怎么理解闭包？

  • 闭包 = 内层函数 + 外层函数的变量
2.闭包的作用？

  • 封闭数据，实现数据私有，外部也可以访问函数内部的变量
  • 闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来
3.闭包可能引起的问题？

  • 内存泄漏
函数

构造函数

构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。
注意事项：

  • 使用 new 关键字调用函数的行为被称为实例化
  • 实例化构造函数时没有参数时可以省略 ()
  • 构造函数的返回值即为新创建的对象
  • 构造函数内部的 return 返回的值无效！
  • 构造函数的函数名一般是首字母大写（约定）
  1. <body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>
复制代码
函数参数

动态参数

arguments是一个伪数组，可以获取传递的实参。
  1. [/code][size=3]剩余参数[/size]
  3. [b]剩余参数[/b]语法允许我们将一个不定数量的参数表示为一个数组。theArgs是一个真数组。
  4. [code]function(a, b, ...theArgs) {<body>
  5. <body>
  6. <body>
  7. <body>
  8. <body>
  9.   
  10. </body>
  11. </body>
  12. </body>
  13. </body>
  14. </body>// ...}
复制代码
说明：

  • a 和 b 分别接收第一个参数和第二个参数
  • 第三个参数以及后面的参数都由 theArgs 接收
  • 如果只有一个参数且为剩余参数，那么所有参数都由它进行接收
  1. function sum(...theArgs) {<body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>let total = 0;<body>
  12. <body>
  13. <body>
  14. <body>
  15. <body>
  16.   
  17. </body>
  18. </body>
  19. </body>
  20. </body>
  21. </body>for (const arg of theArgs) {<body>
  22. <body>
  23. <body>
  24. <body>
  25. <body>
  26.   
  27. </body>
  28. </body>
  29. </body>
  30. </body>
  31. </body><body>
  32. <body>
  33. <body>
  34. <body>
  35. <body>
  36.   
  37. </body>
  38. </body>
  39. </body>
  40. </body>
  41. </body>total += arg;<body>
  42. <body>
  43. <body>
  44. <body>
  45. <body>
  46.   
  47. </body>
  48. </body>
  49. </body>
  50. </body>
  51. </body>}<body>
  52. <body>
  53. <body>
  54. <body>
  55. <body>
  56.   
  57. </body>
  58. </body>
  59. </body>
  60. </body>
  61. </body>return total;}console.log(sum(1, 2, 3));// Expected output: 6console.log(sum(1, 2, 3, 4));// Expected output: 10
复制代码
展开运算符

...是展开运算符，可以展开数组。
  1. <body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>
复制代码
箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
基础语法：
  1. (param1, param2, …, paramN) => { statements }
  2. (param1, param2, …, paramN) => expression
  3. //相当于：(param1, param2, …, paramN) =>{ return expression; }
  5. // 当只有一个参数时，圆括号是可选的：
  6. (singleParam) => { statements }
  7. singleParam => { statements }
  9. // 没有参数的函数应该写成一对圆括号。
  10. () => { statements }
复制代码
高级语法：
  1. //加括号的函数体返回对象字面量表达式：params => ({foo: bar})//支持剩余参数和默认参数(param1, param2, ...rest) => { statements }(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {statements }//同样支持参数列表解构let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;f();<body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>// 6
复制代码
箭头函数中的 this

箭头函数中的 this 是从自己的作用域链的上一层继承的 this
  1. <body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>
复制代码
解构赋值

解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。
默认值

每个解构属性都可以有一个默认值。当属性不存在或值为 undefined 时，将使用默认值。如果属性的值为 null，则不使用它。
  1. const [a = 1] = []; // a is 1
  2. const { b = 2 } = { b: undefined }; // b is 2
  3. const { c = 2 } = { c: null }; // c is null
复制代码
数组解构

基本变量赋值
  1. const foo = ["one", "two", "three"];
  3. const [red, yellow, green] = foo;
  4. console.log(red); // "one"
  5. console.log(yellow); // "two"
  6. console.log(green); // "three"
复制代码
解构比源更多的元素

在从赋值语句右侧指定的长度为 N 的数组解构的数组中，如果赋值语句左侧指定的变量数量大于 N，则只有前 N 个变量被赋值。其余变量的值将是未定义。
  1. const foo = ["one", "two"];
  3. const [red, yellow, green, blue] = foo;
  4. console.log(red); // "one"
  5. console.log(yellow); // "two"
  6. console.log(green); // undefined
  7. console.log(blue); //undefined
复制代码
交换变量

可以在一个解构表达式中交换两个变量的值。
  1. let a = 1;
  2. let b = 3;
  4. [a, b] = [b, a];
  5. console.log(a); // 3
  6. console.log(b); // 1
  8. const arr = [1, 2, 3];
  9. [arr[2], arr[1]] = [arr[1], arr[2]];
  10. console.log(arr); // [1, 3, 2]
复制代码
忽略某些返回值
  1. function f() {<body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>return [1, 2, 3];}const [a, , b] = f();console.log(a); // 1console.log(b); // 3const [c] = f();console.log(c); // 1
复制代码
对象解构

基本赋值
  1. const user = {<body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>id: 42,<body>
  12. <body>
  13. <body>
  14. <body>
  15. <body>
  16.   
  17. </body>
  18. </body>
  19. </body>
  20. </body>
  21. </body>isVerified: true,};// 变量名需要一致const { id, isVerified } = user;console.log(id); // 42console.log(isVerified); // true
复制代码
赋值给新的变量名

可以从对象中提取属性，并将其赋值给名称与对象属性不同的变量。
  1. const o = { p: 42, q: true };
  2. const { p: foo, q: bar } = o;
  4. console.log(foo); // 42
  5. console.log(bar); // true
复制代码
举个例子，const { p: foo } = o 从对象 o 中获取名为 p 的属性，并将其赋值给名为 foo 的局部变量。
赋值到新的变量名并提供默认值

一个属性可以同时是两者：

  • 从对象提取并分配给具有不同名称的变量。
  • 指定一个默认值，以防获取的值为 undefined。
  1. const { a: aa = 10, b: bb = 5 } = { a: 3 };
  3. console.log(aa); // 3
  4. console.log(bb); // 5
复制代码
从作为函数参数传递的对象中提取属性

传递给函数参数的对象也可以提取到变量中，然后可以在函数体内访问这些变量。至于对象赋值，解构语法允许新变量具有与原始属性相同或不同的名称，并为原始对象未定义属性的情况分配默认值。
  1. const user = {<body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>id: 42,<body>
  12. <body>
  13. <body>
  14. <body>
  15. <body>
  16.   
  17. </body>
  18. </body>
  19. </body>
  20. </body>
  21. </body>displayName: "jdoe",<body>
  22. <body>
  23. <body>
  24. <body>
  25. <body>
  26.   
  27. </body>
  28. </body>
  29. </body>
  30. </body>
  31. </body>fullName: {<body>
  32. <body>
  33. <body>
  34. <body>
  35. <body>
  36.   
  37. </body>
  38. </body>
  39. </body>
  40. </body>
  41. </body><body>
  42. <body>
  43. <body>
  44. <body>
  45. <body>
  46.   
  47. </body>
  48. </body>
  49. </body>
  50. </body>
  51. </body>firstName: "Jane",<body>
  52. <body>
  53. <body>
  54. <body>
  55. <body>
  56.   
  57. </body>
  58. </body>
  59. </body>
  60. </body>
  61. </body><body>
  62. <body>
  63. <body>
  64. <body>
  65. <body>
  66.   
  67. </body>
  68. </body>
  69. </body>
  70. </body>
  71. </body>lastName: "Doe",<body>
  72. <body>
  73. <body>
  74. <body>
  75. <body>
  76.   
  77. </body>
  78. </body>
  79. </body>
  80. </body>
  81. </body>},};// 解构function userId({ id }) {<body>
  82. <body>
  83. <body>
  84. <body>
  85. <body>
  86.   
  87. </body>
  88. </body>
  89. </body>
  90. </body>
  91. </body>return id;}console.log(userId(user)); // 42// 解构并重命名function userDisplayName({ displayName: dname }) {<body>
  92. <body>
  93. <body>
  94. <body>
  95. <body>
  96.   
  97. </body>
  98. </body>
  99. </body>
  100. </body>
  101. </body>return dname;}console.log(userDisplayName(user)); // `jdoe`// 解构嵌套对象function whois({ displayName, fullName: { firstName: name } }) {<body>
  102. <body>
  103. <body>
  104. <body>
  105. <body>
  106.   
  107. </body>
  108. </body>
  109. </body>
  110. </body>
  111. </body>return `${displayName} is ${name}`;}console.log(whois(user)); // "jdoe is Jane"
复制代码
数组

forEach 遍历数组
  1. <body>
  2. <body>
  3. <body>
  4. <body>
  5. <body>
  6.   
  7. </body>
  8. </body>
  9. </body>
  10. </body>
  11. </body>
复制代码
filter 过滤元素
  1. const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
  3. const result = words.filter((word) => word.length > 6);
  5. console.log(result);
  6. // Expected output: Array ["exuberant", "destruction", "present"]
复制代码
来源:https://www.cnblogs.com/fallingintodreams/p/17822407.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: WebStorm激活码,WebStorm稳定专属激活码(持续更新）

下一篇: 原型污染

发表于 2023-11-10 00:11:22

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4