前端题目总结（更新中）

（无答案）

选择题

1.关于Webpack中热更新的方法特性，以下说法不正确的是？
A、Webpack热更新使用的是WebSocket全双工连接
B、SSE的简单模型是：一个客户端去从服务器端订阅一条“流”，之后服务端可以发送消息给客户端直到服务端或者客户端关闭该“流”
C、SSE数据帧的格式需要4个规范定义好的字段(Event，Data，ID，Retry)
D、在浏览器中使用EventSource构造方法构建SSE通讯对象

2、在express中，用哪个方法对客户端做出响应
A、write
B、setHeader
C、end
D、render

3、无论是应用层加载的中间件还是框架自带中间件，都支持几个通用的配置项,以下不正确的是哪个？
A、enable
B、match
C、ignore
D、enter

4、sessionStorage 和 localStorage 的主要区别,选出错误的描述?
A、sessionStorage 和 localStorage 的操作代码完全相同,它们的区别仅在于数据的寿命
B、sessionStorage 用于保存那些需要从一个页面传递给下一个页面的数据
C、localStorage 主要用来保存访客将来还能看到的数据
D、以上说法都不正确

5、以下关于font标记符的说法中,错误的是()
A、可以使用color属性指定文字颜色
B、可以使用size属性指定文字大小(也就是字号)
C、指定字号时可以使用1~7的数字
D、语句<font size="+2">这里是2号字 将使文字以2号字显示

问答题

1、阐述Object.assign的用法，深拷贝与浅拷贝的区别？
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
浅拷贝：是指向被复制的内存地址，如果原地址发生改变，那么浅拷贝出来的对象也会相应的改变。深拷贝：在计算机中开辟一块新的内存地址用于存放复制的对象。

2、小程序的双向绑定和vue哪里不一样
在vue中，只需要再表单元素上加上v-model,然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变。小程序中,data数据修改是不会直接同步，必须调用this.setData()方法。

3、vue中什么是递归组件？举个例子说明下？
vue中递归组件要加上 name 属性；在循环中，调用自身。

4、小程序页面间有哪些传递数据的方法
可使用全局变量实现数据传递；使用url带参数传递数据；使用数据库传递数据；使用缓存传递参数。

5、es6中拼接字符串有几种写法？
传统字符串拼接，模板字符串拼接.

6、微信小程序中rpx与px的比例是多少？em与rem分别代表什么意思？
1rpx=0.5px；: 1em=16px

HTML/CSS

1、什么是盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）。这4个部分占用的空间中，有的部分可显示相应内容，有的部分只有来分隔相邻的区域，4个部分一起构成css中元素的盒子模型。

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

3、CSS实现垂直水平居中，HTML结构如下：

<div class='wrapper'>
		<div class='content'></div>
</div>
//CSS是实现:
<style>
	.wrapper{position:relative}
		.content{
			background-color:#6699FF;
			width:200px;
			height:200px;
			position:absolute;
			top:50%;
			left:50%;
			margin-top:-100px;
			margin-left:-100px;
		}
</style>

4、简述一下src与href的区别

href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么js脚本放在底部而不是头部。

5、什么是CSS Hack？

一般来说针对不同浏览器不同CSS，就是CSS Hack。
IE浏览器Hack一般又分为三种：条件Hack、属性级Hack、选择符Hack（详细参考CSS文档）。

6、简述同步和异步的区别

同步是阻塞模式，异步是排阻塞模式。
同步是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程无需一直等下去，而是继续下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程处理，这样提高执行效率。

7、px和em的区别

px和em都是长度单位，区别在于，px值是固定的，指定多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。
浏览器默认字体高是16px。所以未经调整的浏览器都符合1em=16px。

8、什么较优雅降级和渐进增强

渐进增强（progressive enhancement）:针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）：一开始就构建完整功能，然后再针对低版本浏览器进行兼容。

9、浏览器的内核分别是什么？

1.Trident内核：IE
2.Gecko内核：火狐
3.Webkit内核：Safari
4.Presto内核：Opera
5.Blink内核：基于Webkit，Google、Opera、Software共同开发，目前Chrome、Opera的内核

JavaScript部分

1、怎样添加、移除、移动、复制、创建和查找结点？

//创建新节点：
createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体元素
createTextNode()//创建一个文本节点
//添加、移除、替换、插入
appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//插入
//查找
getElementByTagName()//通过标签名称
getELementByName()//通过元素Name属性值
getElementByID()//通过元素ID

2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（Number、String、Object、Array、Boolean）进行值复制。

  /**
   *
   * 对象克隆
   * 支持基本数据类型及对象
   * 递归方法
   */
  function clone(obj) {
      var o;
      switch (typeof obj){
          case "undfined":
              break;
          case "string":
              o = obj + "";
              break;
          case "number":
              o = obj - 0;
              break;
          case "boolean":
              o = obj;
              break;
          case "object":
              if (obj == null) {
                  o = null;
              }else {
                  if (Object.prototype.toString.call(obj).slice(8,-1) === "Array"){
                      o = [];
                      for (var i=0;i<obj.length;i++){
                          o.push(clone(obj[i]));
                      }
                  }else {
                      o = {};
                      for (var k in obj){
                          o[k] = clone(obj[k]);
                      }
                  }
              }
              break;
          default:
              o = obj;
              break;
      }
      return o;
  }

3.如何消除一个数组里里面重复的元素？

  var arr1 = [1,2,2,2,3,3,4,5,6];
  var arr2 = [];
  for(var i=0, len=arr1.length;i<len;i++){
      if(arr2.indexOf(arr[i]) < 0){
          arr2.push(arr1[i]);
      }
  }
  console.log(arr2)//1,2,3,4,5,6

4、实现一个对页面某个节点的拖曳？如何做（原生JS）

5、Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可对真正数组遍历方法来遍历。典型的是函数的argument参数、还包括调用getElementByTagName,document.childNodes之类，返回的NodeList对象属于伪数组，可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

6、Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

7、描述一下cookies、sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage 和 cookies的区别：二者概念相似，区别在于是Web Storage是为了更大容量存储设计的。cookies大小是受限的，并且你每请求一个新的页面时cookies都会被发送过去，这样无形中浪费了宽带，另外cookie还需指定作用域，不可以跨域调用。
此外，Web Storage拥有setItem，getItem，removeItem,clear等方法，而cookie需要前端开发者自己封装setCookie,getCookie。Cookie不可或缺的作用在于：它是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了本地“存储”数据而生。