总结JS知识点

事件委托:

给父元素绑定事件监听,子元素通过事件冒泡触发事件    好处:1.内存占用减少 2.删除子元素时不需要解绑事件

===========================

this对象:基于执行环境绑定

匿名函数执行环境具有全局性,所以this指向window

===========================

闭包:在一个函数内部定义的函数会将包含函数的活动对象添加到它的作用域链中

为什么使用

1.利用闭包实现数据私有化或模拟私有方法

2.柯里化

===========================

原型继承:

===========================

(function foo(){ })()(function foo(){ }())。以上函数不会暴露到全局作用域

===========================

nullundefined和未声明变量之间有什么区别:

1.没有提前使用varletconst声明变量,就为一个变量赋值时,该变量是未声明变量,未声明变量会脱离当前作用域,成为全局作用域下定义的变量。

2.当一个变量已经声明,但没有赋值时,该变量的值是undefined。如果一个函数的执行结果被赋值给一个变量,但是这个函数却没有返回任何值,那么该变量的值是undefined

3.null只能被显式赋值给变量。它表示空值

===========================

.forEach.map()的主要区别在于.map()返回一个新的数组。如果你想得到一个结果,但不想改变原始数组,用.map()。如果你只需要在数组上做迭代修改,用forEach

===========================

匿名函数可以在 IIFE 中使用,来封装局部作用域内的代码,以便其声明的变量不会暴露到全局作用域。

匿名函数可以作为只用一次,不需要在其他地方使用的回调函数。当处理函数在调用它们的程序内部被定义时,代码具有更好地自闭性和可读性

匿名函数可以用于函数式编程或 Lodash(类似于回调函数)

===========================

Object.creat()与new

===========================

Ajax(asynchronous JavaScript and XML)是使用客户端上的许多 Web 技术,创建异步 Web 应用的一种 Web 开发技术。借助 Ajax,Web 应用可以异步(在后台)向服务器发送数据和从服务器检索数据,而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离,Ajax 允许网页和扩展 Web 应用程序动态更改内容,而无需重新加载整个页面。实际上,现在通常将 XML 替换为 JSON,因为 JavaScript 对 JSON 有原生支持优势。

优点

  • 交互性更好。来自服务器的新内容可以动态更改,无需重新加载整个页面。
  • 减少与服务器的连接,因为脚本和样式只需要被请求一次。
  • 状态可以维护在一个页面上。JavaScript 变量和 DOM 状态将得到保持,因为主容器页面未被重新加载。
  • 基本上包括大部分 SPA 的优点。

缺点

  • 动态网页很难收藏。
  • 如果 JavaScript 已在浏览器中被禁用,则不起作用。
  • 有些网络爬虫不执行 JavaScript,也不会看到 JavaScript 加载的内容。
  • 基本上包括大部分 SPA 的缺点

===========================

JS模板:Handlebars、Underscore、Lodash、AngularJS 和 JSX

===========================

“Attribute” 是在 HTML 中定义的,而 “property” 是在 DOM 上定义的。

===========================

'use strict' 是用于对整个脚本或单个函数启用严格模式的语句。严格模式是可选择的一个限制 JavaScript 的变体一种方式 。

优点:

  • 无法再意外创建全局变量。
  • 会使引起静默失败(silently fail,即:不报错也没有任何效果)的赋值操抛出异常。
  • 试图删除不可删除的属性时会抛出异常(之前这种操作不会产生任何效果)。
  • 要求函数的参数名唯一。
  • 全局作用域下,this的值为undefined
  • 捕获了一些常见的编码错误,并抛出异常。
  • 禁用令人困惑或欠佳的功能。

缺点:

  • 缺失许多开发人员已经习惯的功能。
  • 无法访问function.callerfunction.arguments
  • 以不同严格模式编写的脚本合并后可能导致问题。

===========================

在现代的 SPA 中,客户端渲染取而代之。浏览器从服务器加载初始页面、整个应用程序所需的脚本(框架、库、应用代码)和样式表。当用户导航到其他页面时,不会触发页面刷新。该页面的 URL 通过 HTML5 History API 进行更新。浏览器通过 AJAX 请求向服务器检索新页面所需的数据(通常采用 JSON 格式)。然后,SPA 通过 JavaScript 来动态更新页面,这些 JavaScript 在初始页面加载时已经下载。这种模式类似于原生移动应用的工作方式。

好处:

  • 用户感知响应更快,用户切换页面时,不再看到因页面刷新而导致的白屏。
  • 对服务器进行的 HTTP 请求减少,因为对于每个页面加载,不必再次下载相同的资源。
  • 客户端和服务器之间的关注点分离。可以为不同平台(例如手机、聊天机器人、智能手表)建立新的客户端,而无需修改服务器代码。只要 API 没有修改,可以单独修改客户端和服务器上的代码。

坏处:

  • 由于加载了多个页面所需的框架、应用代码和资源,导致初始页面加载时间较长。
  • 服务器还需要进行额外的工作,需要将所有请求路由配置到单个入口点,然后由客户端接管路由。
  • SPA 依赖于 JavaScript 来呈现内容,但并非所有搜索引擎都在抓取过程中执行 JavaScript,他们可能会在你的页面上看到空的内容。这无意中损害了应用的搜索引擎优化(SEO)。然而,当你构建应用时,大多数情况下,搜索引擎优化并不是最重要的因素,因为并非所有内容都需要通过搜索引擎进行索引。为了解决这个问题,可以在服务器端渲染你的应用,或者使用诸如 Prerender 的服务来“在浏览器中呈现你的 javascript,保存静态 HTML,并将其返回给爬虫”。

===========================

Promise代替回调函数有什么优缺点?

优点:

  • 避免可读性极差的回调地狱。
  • 使用.then()编写的顺序异步代码,既简单又易读。
  • 使用Promise.all()编写并行异步代码变得很容易。

缺点:

  • 轻微地增加了代码的复杂度(这点存在争议)。
  • 在不支持 ES2015 的旧版浏览器中,需要引入 polyfill 才能使用。

===========================、

你使用什么语句遍历对象的属性和数组的元素?

对象:

  • for循环:for (var property in obj) { console.log(property); }。但是,这还会遍历到它的继承属性,在使用之前,你需要加入obj.hasOwnProperty(property)检查。
  • Object.keys()Object.keys(obj).forEach(function (property) { ... })Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
  • Object.getOwnPropertyNames()Object.getOwnPropertyNames(obj).forEach(function (property) { ... })Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。

数组:

  • for loops:for (var i = 0; i < arr.length; i++)。这里的常见错误是var是函数作用域而不是块级作用域,大多数时候你想要迭代变量在块级作用域中。ES2015 引入了具有块级作用域的let,建议使用它。所以就变成了:for (let i = 0; i < arr.length; i++)
  • forEacharr.forEach(function (el, index) { ... })。这个语句结构有时会更精简,因为如果你所需要的只是数组元素,你不必使用index。还有everysome方法可以让你提前终止遍历。

大多数情况下,我更喜欢.forEach方法,但这取决于你想要做什么。for循环有更强的灵活性,比如使用break提前终止循环,或者递增步数大于一。

===========================

柯里化(currying)是一种模式,其中具有多个参数的函数被分解为多个函数,当被串联调用时,将一次一个地累积所有需要的参数。这种技术帮助编写函数式风格的代码,使代码更易读、紧凑。值得注意的是,对于需要被 curry 的函数,它需要从一个函数开始,然后分解成一系列函数,每个函数都需要一个参数。

===========================

===========================

===========================

猜你喜欢

转载自www.cnblogs.com/lemonib/p/10059831.html