前端基础资料整理

时间：2022-12-18 07:33:03

1，闭包是如何形成的？优缺点？引起内存泄漏的原因？

形成原理：
嵌套函数被返回，被外部的变量引用，或者作为外部对象的属性时，形
成闭包。 形成闭包之后，原本应该已经被垃圾回收的变量，都能继续使用。
优缺点：
1.保护函数内的变量安全,加强了封装性
2.在内存中维持一个变量(用的太多就变成了缺点，占内存)
原因：
1.在闭包的作用域链中引用了html元素未释放内存
2.出现了循环引用

2.html页面是如何呈现?JavaScript 回流（reflow）与重绘（repaint）（学渣的我，回流我就蒙了，不记得这专业名称）

如何呈现：
1,HTML文档加载后生成DOM树（包括display：none;元素）；
2,在DOM树的基础上配合css样式结构体生成render树（不包含display:none;、head节点，包含visibility:hidden;节点），即页面中的占位确定了,最后绘制页面（也叫渲染），不会改变页面布局的一些属性：color、背景色等。

重绘（repaint）:
更新页面元素的属性引起的，如颜色、透明度等不会改变页面布局而需要重新渲染的。
回流（reflow）
render树中部分或全部元素的尺寸、布局、隐藏等(内容、结构、位置)改变引起的。每个页面至少有一次回流（即初始构建页面时），成本较高。

3.JavaScript-数据类型和变量?var let const三者的区别？

数据类型：
Number,字符串,布尔值,null,undefined,Symbol。数组,对象（这俩不知道算不算）
区别：
1、var
var定义全局变量和局部变量，也可以省略var，而且在非严格模式下不会报错，但是实际上在严格模式下，两者的使用有没有区别，可能很多人不清楚。例如循环，跳出循环依旧会有效，不报错。
2、let
let拥有块级作用域,一个{}就是一个作用域，也就是let声明块级变量，即局部变量；
let在其作用域下面不存在变量提升；
let在其作用域中不能被重复声明(函数作用域和块级作用域)。
3、const
const用来声明常量，一旦声明，其值就不可以更改，而且必须初始化。如果你非得修改变量的值，js不会报错，只是默默表示失败(不起作用)。

4,JavaScript之面向对象的属性和特性?
对象的本质：
无序属性的集合，其属性可以包含基本值、对象或者函数。即对象是一组没有特定顺序的值，对象的每个属性或方法都有一个名字，而这个名字都映射到一个值。故对象的本质是一个散列表：其中是一组名值对，值可以是数据或函数。
对象包含：数据属性和访问器属性，他们的区别如下：
数据属性：一般用于存储数据数值，访问器属性不包含数据值；
访问器属性：多用于get/set操作，访问器属性不能直接定义，必须使用Object.defineProperty()来定义，且该属性具有set和ger特性。console对象的时候可看。

5, 前端框架Vue、angular、React的优点和缺点?（这个我百度的，自己没怎么回答）

Vue.js的特性如下：
1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化

优点：

  1. 简单：官方文档很清晰，比 Angular 简单易学。
  2. 快速：异步批处理方式更新 DOM。
  3. 组合：用解耦的、可复用的组件组合你的应用程序。
  4. 紧凑：~18kb min+gzip，且无依赖。
  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
    缺点：
  7. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
  8. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

angular：
1良好的应用程序结构 2.双向数据绑定 3.指令 4.HTML模板 5.可嵌入、注入和测试
优点： 
1.模板功能强大丰富，自带了极其丰富的angular指令。
2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3.自定义指令，自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

  1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
  2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
  3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

React特性如下：　
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。

优点：

  1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
  2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
  3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
  4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
  5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
  6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
    缺点：
  7. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

6,对比一下jquery和vuejs

jquery：对HTML的操作。绑定事件。请求数据。更多是以事件为入口去处理HTML。操作细腻。不过维护起来累
vuejs：逻辑简单，代码量少，组件化。根据页面的功能定义，构造出属于它的数据。需要事件触发，再编写起方法。方法是基本是数据的处理。

7，JavaScript对数组的操作有哪些？

  1. 数组建立（new）
  2. 数组元素的访问（循环）
  3. 数组的元素添加(push末尾，unshift开头)
  4. 数组元素的删除（pop最后，shift开头，splice(startIndex , deletSize)指定位置）
  5. 数组元素拷贝和复制（slice(start,end)返回一个新数组，其中以start开始，end结束且不包括end;
  6. concat(element1[element2[]]…);将多个数组重新连成一个新的数组），
  7. 数组元素顺序（sort();数组排序。
  8. reverse()；数组反转。）
  9. 数组转化为字符串（oin(seperater)）

8，数组排序的方法？

冒泡排序，js 利用sort进行排序，快速排序，希尔排序，插入排序。这个自己去理解，我写一个简单的。

 
 
 
1 
objArr.sort(function(a,b){return a>b?1:-1});//从小到大排序
2 
objArr.sort(function(a,b){return a<b?1:-1});//从大到小排序
 
 

9，JavaScript的作用域和作用域链？

作用域
全局作用域（Global Scope）
在代码中任何地方都能访问到的对象拥有全局作用域，
1>最外层函数和在最外层函数外面定义的变量拥有全局作用域
2>所有末定义直接赋值的变量自动声明为拥有全局作用域
3>所有window对象的属性拥有全局作用域
局部作用域
与全局作用于相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部

作用域链：
在函数执行过程中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。

10，双向绑定的实现原理？

简单来说，就是监听dom事件，例如change,或者键盘回车，获取改变后的值，赋值给指定的职位，整个都是在函数中完成。

有的框架，基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。

11，CSS选择器（最少五个），权重计算？

  1. id选择器（#id）
  2. 类选择器（.className）
  3. 元素选择器(E)
  4. 群组选择器（selector1,selector2,...,selectorN）
  5. 通用兄弟选择器（Ｅ ? Ｆ）
  6. 相邻兄弟元素选择器(E + F)
  7. 子元素选择器(E>F)
  8. 后代选择器（Ｅ Ｆ）
  9. 通配符选择器（＊）
  10. 伪类选择器
  11. 伪元素选择器
  12. 属性选择器

权重计算

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

!important 可以提升权重

标签：

相关文章