Skip to content

您能提供一个柯里化函数的例子,以及为什么这个语法会有优势?

柯里化是一种模式,即一个有多个参数的函数被分解成多个函数,当被串联调用时,将一次积累所有需要的参数。 这种技术有助于使以函数式风格的代码更容易阅读和组合。 值得注意的是,要使一个函数被柯里化,它需要从一个函数开始,然后分解成一连串的函数,每个函数接受一个参数。

js
function curry(fn) {
  if (fn.length === 0) {
    return fn;
  }

  function _curried(depth, args) {
    return function (newArgument) {
      if (depth - 1 === 0) {
        return fn(...args, newArgument);
      }
      return _curried(depth - 1, [...args, newArgument]);
    };
  }

  return _curried(fn.length, []);
}

function add(a, b) {
  return a + b;
}

var curriedAdd = curry(add);
var addFive = curriedAdd(5);

var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]

描述事件冒泡过程

事件冒泡是 DOM(文档对象模型)中的一种传播机制,其中事件,如点击或键盘事件,首先在启动事件的目标元素上触发,然后向上(冒泡)通过 DOM 树传播到文档的根部。

冒泡阶段

在冒泡阶段期间,事件从目标元素开始,并通过其在 DOM 层次结构中的祖先向上冒泡。这意味着附加到目标元素及其祖先的事件处理程序都有可能接收并响应事件。

以下是使用现代 ES6 语法演示事件冒泡的示例:

js
// HTML:
// <div id="parent">
//   <button id="child">点击我!</button>
// </div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", () => {
  console.log("单击了父元素");
});

child.addEventListener("click", () => {
  console.log("单击了子元素");
});

当单击 "点击我!" 按钮时,由于事件冒泡,子元素和父元素的事件处理程序都将被触发。

阻止传播

在冒泡阶段,可以使用 stopPropagation() 方法停止事件传播。如果事件处理程序调用 stopPropagation(),它将阻止事件继续向上冒泡到 DOM 树,确保只有位于层次结构中的元素的处理程序被执行。

事件委托

事件冒泡是一种称为 "事件委托" 的技术的基础,其中将单个事件处理程序附加到多个元素的共同祖先,并使用事件委托有效地处理这些元素的事件。当您有大量类似元素,例如项目列表时,希望避免为每个项目附加单独的事件处理程序时,这种方法特别有用。

参考资料

JavaScript 面试知识点总结

1. 介绍 js 的基本数据类型。

2. JavaScript 有几种类型的值?你能画一下他们的内存图吗?

3. 什么是堆?什么是栈?它们之间有什么区别和联系?

4. 内部属性 [[Class]] 是什么?

5. 介绍 js 有哪些内置对象?

6. undefined 与 undeclared 的区别?

7. null 和 undefined 的区别?

8. 如何获取安全的 undefined 值?

9. 说几条写 JavaScript 的基本规范? 常项目开发中,我们遵守一些这样的基本规范,比如说:

10. JavaScript 原型,原型链? 有什么特点?

11. js 获取原型的方法?

12. 在 js 中不同进制数字的表示方式

13. js 中整数的安全范围是多少?

14. typeof NaN 的结果是什么?

15. isNaN 和 Number.isNaN 函数的区别?

16. Array 构造函数只有一个参数值时的表现?

17. 其他值到字符串的转换规则?

18. 其他值到数字值的转换规则?

19. 其他值到布尔类型的值的转换规则?

20. {} 和 [] 的 valueOf 和 toString 的结果是什么?

21. 什么是假值对象?

22. ~ 操作符的作用?

23. 解析字符串中的数字和将字符串强制类型转换为数字的返回结果都是数字,它们之间的区别是什么?

24. + 操作符什么时候用于字符串的拼接?

25. 什么情况下会发生布尔值的隐式强制类型转换?

26. || 和 && 操作符的返回值?

28. == 操作符的强制类型转换规则?

29. 如何将字符串转化为数字,例如 '12.3b'?

30. 如何将浮点数点左边的数每三位添加一个逗号,如 12000000.11 转化为 2,000,000.11』?

31. 常用正则表达式

32. 生成随机数的各种方法?

33. 如何实现数组的随机排序?

34. javascript 创建对象的几种方式?

35. JavaScript 继承的几种实现方式?

36. 寄生式组合继承的实现?

37. Javascript 的作用域链?

38. 谈谈 This 对象的理解。

39. eval 是做什么的?

40. 什么是 DOM 和 BOM?

41. 写一个通用的事件侦听器函数。

42. 事件是什么?IE 与火狐的事件机制有什么区别? 如何阻止冒泡?

43. 三种事件模型是什么?

44. 事件委托是什么?

45. ["1", "2", "3"].map(parseInt) 答案是多少?

46. 什么是闭包,为什么要用它?

47. javascript 代码中的 "use strict"; 是什么意思 ? 使用它区别是什么?

48. 如何判断一个对象是否属于某个类?

49. instanceof 的作用?

50. new 操作符具体干了什么呢?如何实现?

51. Javascript 中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

52. 对于 JSON 的了解?

53. [].forEach.call($$(""),function(a){a.style.outline="1px solid +(~~(Math.random()(1<<24))).toString(16)}) 能解释一下这段代码的意思吗?

54. js 延迟加载的方式有哪些?

55. Ajax 是什么? 如何创建一个 Ajax?

56. 谈一谈浏览器的缓存机制?

57. Ajax 解决浏览器缓存问题?

58. 同步和异步的区别?

59. 什么是浏览器的同源政策?

60. 如何解决跨域问题?

63. 模块化开发怎么做?

64. js 的几种模块规范?

65. AMD 和 CMD 规范的区别?

66. ES6 模块与 CommonJS 模块、AMD、CMD 的差异。

67. requireJS 的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存

68. JS 模块加载器的轮子怎么造,也就是如何实现一个模块加载器?

69. ECMAScript6 怎么写 class,为什么会出现 class 这种东西?

70. documen.write 和 innerHTML 的区别?

71. DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

72. innerHTML 与 outerHTML 的区别?

73. .call() 和 .apply() 的区别?

74. JavaScript 类数组对象的定义?

75. 数组和对象有哪些原生方法,列举一下?

76. 数组的 fill 方法?

77. [,,,] 的长度?

78. JavaScript 中的作用域与变量声明提升?

79. 如何编写高性能的 Javascript ?

80. 简单介绍一下 V8 引擎的垃圾回收机制

81. 哪些操作会造成内存泄漏?

82. 需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响 给出你的技术实现方案?

83. 如何判断当前脚本运行在浏览器还是 node 环境中?(阿里)

84. 把 script 标签放在页面的最底部的 body 封闭之前和封闭之后有什么区别?浏览器何解析它们?

85. 移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?

86. 什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?

87. 如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程 mocha, sinon, jasmin, qUnit..?

88. 检测浏览器版本版本有哪些方式?

89. 什么是 Polyfill ?

90. 使用 JS 实现获取文件扩展名?

91. 介绍一下 js 的节流与防抖?

92. Object.is() 与原来的比较操作符 “===”、“==” 的区别?

93. escape,encodeURI,encodeURIComponent 有什么区别?

94. Unicode 和 UTF-8 之间的关系?

95. js 的事件循环是什么?

96. js 中的深浅拷贝实现?

97. 手写 call、apply 及 bind 函数

98. 函数柯里化的实现

99. 为什么 0.1 + 0.2 != 0.3?如何解决这个问题?

100. 原码、反码和补码的介绍

101. toPrecision 和 toFixed 和 Math.round 的区别?

102. 什么是 XSS 攻击?如何防范 XSS 攻击?

103. 什么是 CSP?

104. 什么是 CSRF 攻击?如何防范 CSRF 攻击?

106. 什么是点击劫持?如何防范点击劫持?

107. SQL 注入攻击?

108. 什么是 MVVM?比之 MVC 有什么区别?什么又是 MVP ?

109. vue 双向数据绑定原理?

110. Object.defineProperty 介绍?

111. 使用 Object.defineProperty() 来进行数据劫持有什么缺点?

112. 什么是 Virtual DOM?为什么 Virtual DOM 比原生 DOM 快?

113. 如何比较两个 DOM 树的差异?

114. 什么是 requestAnimationFrame ?

115. 谈谈你对 webpack 的看法

116. offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的?

117. 谈一谈你理解的函数式编程?

118. 异步编程的实现方式?

119. Js 动画与 CSS 动画区别及相应实现

120. get 请求传参长度的误区

121. URL 和 URI 的区别?

122. get 和 post 请求在缓存方面的区别

123. 图片的懒加载和预加载

124. mouseover 和 mouseenter 的区别?

125. js 拖拽功能的实现

126. 为什么使用 setTimeout 实现 setInterval?怎么模拟?

127. let 和 const 的注意点?

128. 什么是 rest 参数?

129. 什么是尾调用,使用尾调用有什么好处?

130. Symbol 类型的注意点?

131. Set 和 WeakSet 结构?

132. Map 和 WeakMap 结构?

133. 什么是 Proxy ?

134. Reflect 对象创建目的?

135. require 模块引入的查找方式?

136. 什么是 Promise 对象,什么是 Promises/A+ 规范?

137. 手写一个 Promise

138. 如何检测浏览器所支持的最小字体大小?

139. 怎么做 JS 代码 Error 统计?

140. 单例模式模式是什么?

141. 策略模式是什么?

142. 代理模式是什么?

143. 中介者模式是什么?

144. 适配器模式是什么?

145. 观察者模式和发布订阅模式有什么不同?

146. Vue 的生命周期是什么?

147. Vue 的各个生命阶段是什么?

148. Vue 组件间的参数传递方式?

149. computed 和 watch 的差异?

150. vue-router 中的导航钩子函数

151. $route 和 $router 的区别?

152. vue 常用的修饰符?

153. vue 中 key 值的作用?

154. computed 和 watch 区别?

155. keep-alive 组件有什么作用?

156. vue 中 mixin 和 mixins 区别?

157. 开发中常用的几种 Content-Type ?

158. 如何封装一个 javascript 的类型判断函数?

159. 如何判断一个对象是否为空对象?

160. 使用闭包实现每隔一秒打印 1,2,3,4

161. 手写一个 jsonp

162. 手写一个观察者模式?

163. EventEmitter 实现

164. 一道常被人轻视的前端 JS 面试题

165. 如何确定页面的可用性时间,什么是 Performance API?

166. js 中的命名规则

167. js 语句末尾分号是否可以省略?

168. Object.assign()

169. Math.ceil 和 Math.floor

170. js for 循环注意点

171. 一个列表,假设有 100000 个数据,这个该怎么办?

172. js 中倒计时的纠偏实现?

173. 进程间通信的方式?

Released under the MIT License.