虾厂、宇宙厂、开水团、体面厂等前端笔试题总结

前段时间抽时间考了几场暑期实习的笔试(今年and去年的题目)，下面总结以下考到的相关知识点。

1、HTML相关

HTML文本标签与HTML自闭和标签

4种HTML文本标签：

em: 告诉浏览器把其中的文本表示为强调的内容
i: 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本
del: 定义文档中已删除的文本
b: 定义粗体的文本

HTML自闭和标签，又称HTML单标签，HTML标签大多数是双标签，就是由一个开始标签和结束标签组成，常用的HTML双标签如下：

  <div></div>
  <p></p>
  <h2></h2>
  、、、

HTML双标签有很多，但是HTML自闭和标签(单标签)只有以下几种：

br、hr、area、base、img、input、link
meta、keygen、source、basefont、param、col、frame、embed 关于各个标签的具体内容自行了解

HTML编码

如果HTML内包含阿拉伯文，则要用UTF-8编码

UTF-8编码：UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8使用1~4字节为每个字符编码。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。

HTML表单的content-type

表单提交数据(post)，content-type的类型有下面几种(前面3种用的比较多)：

json数据：application/json
上传文件: multipart/form-data
原生表单提交数据：application/x-www-form-urlencoded
JPEG图片标记：image/jpeg
GIF图片标记：image/gif
js文档标记：application/javascript
xml文件标记：application/xml
文档标记: text/XXX（XXX有plain/xml/html等）

input标签的type属性有哪些值

button: 定义可点击按钮
checkbox: 定义复选框。
file: 定义输入字段和 "浏览"按钮，供文件上传。
hidden: 定义隐藏的输入字段。
image: 定义图像形式的提交按钮。
password: 定义密码字段。该字段中的字符被掩码。
radio: 定义单选按钮。
reset: 定义重置按钮。重置按钮会清除表单中的所有数据。
submit: 定义提交按钮。提交按钮会把表单数据发送到服务器。
text: 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

HTML5音频标签

audio标签为音频标签，其属性如下：

autoplay="autoplay" 打开页面后，音频会自动播放
controls="controls" 在页面显示控件，比如播放按钮
loop="loop" 循环播放当前音频
src="url" 导入音频文件地址(url是文件地址的统称举例)

注意：

谷歌浏览器把autoplay(自动播放)属性给禁用了，所以在谷歌浏览器中没法实现音频自动播放。
因为不同浏览器的支持格式不同，我们采取的解决方案是为一个音频准备多个如格式的文件，举例如下：

  <audio controls="controls">
    <source src="xxx.mp3" type="audio/mpeg">
    <source src="xxx.ogg" type="audio/ogg">
    您的浏览器需要升级，目前不支持audio播放
  </audio>

HTML5语义化标签有哪些？

header、nav、footer、hgroup、section、article、aside
figure、time、address

关于各个标签的具体内容自行了解

注意在IE9中，需要把这些元素转换成块级元素！

2、CSS相关

visibility与display实现隐藏

visibility: hidden与display: none实现的隐藏有什么区别？

display:none将元素从页面隐藏，页面空间不存在
visibility:hidden将元素从页面隐藏，页面空间存在

另外补充两种隐藏的方法：

opacity: 0; 透明度设为0，元素看不见，占位；
width: 0; 宽度设为0，元素看不见，不占位。

哪些属性可以使div脱离文档流？

浮动（float）、固定定位（fixed）和绝对定位（absolute）都会使元素脱离文档流，绝对定位相对于最近的开启了定位（即position不为static）的父元素进行定位；而相对定位（relative），相对于自身初始位置进行定位，不脱离文档流

行内元素与块级元素

块级元素：

块级元素可以独占一行。
块级元素的默认宽度为100%，默认高度由子元素或者内容决定。
块级元素的可以设置宽高，内外边距。
块级元素可以嵌套块级元素或者行内元素。

行内元素：

行内元素不能独占一行，多个行内元素共享一行。
行内元素的宽高由内容决定。
行内元素不能为其设置宽高，垂直方向的内外边距。（设置了浮动的行内元素可以设置宽高和水平方向上的内外边距）
行内元素不能嵌套块级元素。

还有一些比较特别的元素叫行内块元素，兼具行内元素和块级元素的特点，可以设置宽高，在一行内显示，没有默认宽度如img、input、select、textarea、button等。

margin、padding的顺序

当margin、padding后面跟四个值时：四个值分别是上右下左(也就是顶部、右边、底部、左边)
当margin、padding后面跟两个值时：第一个值是顶部和底部，第二个值是左边和右边

CSS样式的优先级

内联样式，如 style=""，权值为 1,0,0,0；
ID选择器，如 #id="", 权值为 0,1,0,0；
calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

即通俗的可以理解为内联 > ID > class > 标签，此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

3、js基础

js基本数据类型

基本类型分为以下六种：

string（字符串）
boolean（布尔值）
number（数字）
symbol（符号）
null（空值）
undefined（未定义）

具体使用方法不在此详述

其中，string 、number 、boolean 和 null undefined 这五种类型统称为原始类型；symbol是ES6中新增的数据类型，symbol 表示独一无二的值；null 和 undefined 通常被认为是特殊值，这两种类型的值唯一，就是其本身。

js变量的声明方式有哪些？

随着js的发展，目前共6种声明变量的方式，分别为var，let，const，function，class，import

具体使用方法不在此详述

js数组的方法哪些会改变自身数组？

push：向数组的末尾添加一个或多个元素，并返回新的长度
pop：用于删除数组的最后一个元素并返回删除的元素
shift：用于把数组的第一个元素从其中删除，并返回第一个元素的值
unshift：向数组的开头添加一个或更多元素，并返回新的长度
reverse：用于颠倒数组中元素的顺序
sort：用于对数组的元素进行排序
splice：用于添加或删除数组中的元素

具体使用方法不在此详述

js数组的join和concat的区别

join：将数组中的所有的元素放入到一个字符串内，并以指定的字符进行分割(默认以,分割)，并返回连接好的字符串
concat：用于连接两个或多个数组，返回新数组

js的call方法、apply方法和bind方法

首先，call apply bind三个方法都可以用来改变函数的this指向，具体区别如下：

fn.call(newThis, params): call函数的第一个参数是this的新指向，后面依次传入函数fn要用到的参数。会立即执行fn函数。
fn.apply(newThis, paramsArr): apply函数的第一个参数是this的新指向,第二个参数是fn要用到的参数数组，会立即执行fn函数。
fn.bind(newThis, params): bind函数的第一个参数是this的新指向，后面依次传入函数fn要用到的参数。不会立即执行fn函数，且只能改变一次fn函数的指向，后续再用bind更改无效。

另外bind在改变this指向的时候，返回一个改变执行上下文的函数，不会立即执行函数，而是需要调用该函数的时候再调用即可，但是call和apply在改变this指向的同时执行了该函数

// call的应用场景1：对象的继承，在子构造函数这种调用父构造函数，但是改变this指向，就可以继承父的属性 
function superClass () { 
  this.a = 1; 
  this.print = function () { 
    console.log(this.a); 
  } 
} 

function subClass () { 
  superClass.call(this); // 执行superClass，并将superClass方法中的this指向subClass this.print(); 
} 
subClass(); 

// call的应用场景2：借用Array原型链上的slice方法，把伪数组转换成真数组 
let domNodes = Array.prototype.slice.call(document.getElementsByTagName("div"));  

// apply的应用场景1：Math.max，获取数组中最大、最小的一项 
let max = Math.max.apply(null, array); 
let min = Math.min.apply(null, array); 
// apply的应用场景2：实现两个数组合并 
let arr1 = [1, 2, 3]; 
let arr2 = [4, 5, 6]; 
Array.prototype.push.apply(arr1, arr2); 
console.log(arr1); // [1, 2, 3, 4, 5, 6] 

// bind的应用场景 在vue或者react框架中，使用bind将定义的方法中的this指向当前类

Math.round()

round方法是将给定数字的值四舍五入到最接近的整数，在js中的Math.round()不同于其他语言的round()函数，其并不总是舍入到远离0的方向尤其是在负数的小数部分恰好等于0.5的情况下，代码如下

  console.log(Math.round(-4.5));  // -4
  console.log(Math.round(-9.1));  // -9
  console.log(Math.round(-10.6)); // -11
  console.log(Math.round(0.4));   // 0
  console.log(Math.round(0.5));   // 1
  console.log(Math.round(-0.5));  // 0

总结一下就是js的Math.round()是这样的：

正数：四舍五入
负数：五舍六入

js判断的输出结果

"" == 0 => true
"" === 0 => false
"true" == function a(){new String("true")} => false
[] == 0 => true
[] === 0 => false
"true" == function b(){new String("false")} => false

上述js判断背后的原理：

==是判断值相等, ===不仅判断值相等，而且判断类型相等
function的值是undefined, 不信可以在浏览器的控制台上console.log一下

typeof

typeof用来判断js变量的类型，其输出值有以下几种：

undefined：未定义的变量或值
boolean：布尔类型的变量或值
string: 字符串类型的变量或值
number: 数字类型的变量或值
object: 对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
function: 函数类型的变量或值
symbol: Symbol (ECMAScript 2015 新增)

String与""的区别

最主要的区别是存储位置不同和创建位置不同！

""创建的字符串是值类型的变量, 而String只是一个创建字符串的构造函数
""创建的字符串存储在方法区的常量池中，而new String()是在堆中创建一个对象并把这个对象的句柄返回给引用！
""是在编译时创建，new String()是在运行时创建！如果两者进行“==”比较，都相等；但如果是通过“===”比较，则new String()的结果不相等，会重新开辟空间存储对象。

typeof String     // "function"
typeof string     // "undefined" 
typeof "string"   // "string"

String()与 .toString()的区别

两者都可以将数据转换成字符串，但是具体上有如下差别:

.toString()可以将所有的的数据都转换为字符串，但是要排除null 和 undefined
String()可以将null和undefined转换为字符串，但是没法转进制字符串

NaN

JavaScript中，NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。

// NaN是唯一和自身不相等的变量
NaN === NaN  // false  

// 辨别NaN的方法： isNaN方法
isNaN(NaN)  // true
isNaN(10)  // false
// 但是其无法判断非数字类型
isNaN('abc')  // true

// 想确定这个一个值是为NaN，可以使用以下两种方法：
// 方法一：将isNaN()和typeof结合来判断
function isValueNaN(value) {
  return typeof value === 'number' && isNaN(value)
}

// 方法二：值是否与本身不相等（NaN是唯一有这样特征的值）
function isValueNaN(value) {
  return value !== value
}

注意：NaN和任何数据都不相等，包括NaN本身，其他数据类型和NaN运算的结果都是NaN

null、undefined、NaN的区别

null：null是Javascript的关键词，是一种特殊的值，表示“无值”。null常常被看作对象类型的一个特殊值，即代表“无对象”的值。如果一个变量的值为null，那么你就会知道它的值不是有效的对象、数组、数字、字符串和布尔值。对应类型object，布尔值false，数字0，字符串“null”

undefined：当使用了一个并未声明的变量时，或者使用了已经声明但还没有赋值的变量时，又或者使用了一个并不存在的对象属性或者对象方法时，返回的就是这个值。对应类型undefined，布尔型false，字符串undefined，数字计算结果一定是NaN

NaN：NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。

4、js事件、DOM操作与浏览器

键盘事件

keydown：按下键盘键
keypress：紧接着keydown事件触发（只有按下字符键时触发）
keyup：释放键盘键

具体使用方法不在此详述

鼠标事件

click: 在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考虑，让键盘和鼠标都可以触发 onclick 事件处理程序
dbclick: 在用户双击鼠标主键（通常是左键）时触发。这个事件不是在 DOM2 Events 中定义的，但得到了很好的支持，DOM3 Events 将其进行了标准化
mousedown: 在用户按下任意鼠标键时触发。这个事件不能通过键盘触发
mouseenter: 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseenter 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events 中新增的事件
mouseleave: 在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseleave 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events 中新增的事件
mousemove: 在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发
mouseout: 在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发
mouseover: 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发
mouseup: 在用户释放鼠标键时触发。这个事件不能通过键盘触发其中，为了实现鼠标移动到页面某一区域页面发生颜色变化的效果涉及的两个鼠标事件是：mouseenter和mouseleave

具体使用方法不在此详述

event中的stopPropagation和preventDefault

stopPropagation：取消冒泡，用于在执行完当前元素的事件处理函数后，阻止冒泡向上执行
preventDefault：取消默认行为，用于阻止后续默认行为，在函数内放前放后，对当前函数无影响

理解以上两个概念，首先要理解DOM事件模型的3个阶段：

捕获：从window开始，由外向内，依次记录各级元素绑定的事件处理函数。=> 强调：捕获阶段只到目标元素截止
目标触发：默认实际触发事件的元素上的处理函数先执行。=> 目标元素：实际触发事件的元素
冒泡：按照捕获阶段反向的顺序，从目标元素的上一级开始，依次执行各级父元素上的事件处理函数

总结一下就是：stopPropagation可以阻止子元素的事件触发父元素的事件，而preventDefault可以阻止组件的默认行为(比如跳转)

浏览器的内核与前缀

-moz代表firefox浏览器私有属性，Firefox 使用的是Gecko内核
-ms代表IE浏览器私有属性，IE使用的是Trident内核(目前使用IE内核的浏览器还有搜狗，遨游，360等等)
-webkit代表chrome、safari浏览器私有属性，chrome和safari使用的是WebKit内核
-o代表Opera浏览器私有属性，Opera使用的是Presto内核

5、Vue

v-model中的修饰符及使用

v-model中的修饰符有三个：

lazy：lazy修饰符在input框失去焦点时进行数据同步。v-model是在input事件下对输入框的值与数据进行同步，即只要输入框中输入的值发生变化就同步数据，但如果加上lazy修饰符后（v-model.lazy）就会变成在每次输入框失去焦点后再同步数据。
number：number修饰符自动将用户输入的值转为数值类型。由于凡是从input输入的值均为字符串类型，但实际应用场景中需要向服务器提交的数据类型为number数值类型，这时就要对input中输入的值进行转换，而v-model.number可以将input输入的值转成number类型。
trim：trim修饰符可以自动过滤用户输入的首尾空白字符。

具体使用方法不在此详述

6、前端工程化及性能优化

js打包构建工具有哪些？

grunt
gulp
webpack
rollup

具体内容不详述，自行了解

如何对网站的文件和资源进行优化？

文件合并（目的是减少http请求）：Web性能优化最佳实践中最重要的一条是减少HTTP 请求，减少HTTP请求的方案主要有合并JS和CSS文件、CSS Sprites（雪碧图）、图像映射（Image Map）和使用Data URI来编码图片。
文件压缩：目的是直接减少文件体积，减少文件加载时间
使用 CDN （内容分发网络）来托管资源。
缓存的使用（并且多个域名来提供缓存），可以减少向服务器请求的次数，加快加载速度。
服务端开启GZIP ，对用户请求的页面进行压缩处理，以达到节省网络带宽，提高浏览网站速度的作用