以下十道题是我初学前端过程中进行自我检测的题目，其中答案均是我自己写的不能保证完全正确，仅供各位查看。如果有发现错误请指出。
第一题
- 请写出一个符合 W3C 规范的 HTML 文件，要求：
（1）页面标题为「我的页面」
（2）页面中引入了一个外部 CSS 文件，文件路径为 /style.css
（3）页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
（4）页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
（5）页面中引入了一个外部 JS 文件，路径为 /main.js
（6）页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
（7）页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
答案
<!DOCTYPE html>
<html>
<head lang="zh-Hans">
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./print.css" media="print">
<link rel="stylesheet" href="./mobile.css" media="(max-width: 500px)">
<title>我的页面</title>
</head>
<body>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
<script type="text/javascript" src="./gbk.js" charset="gb2312"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
第二题
- 移动端是怎么做适配的？
答案
1.可以在<head>标签中加入<meta name="viewport" content="width=device-width, initial-scale=1">
2.媒体查询方式：
1）在<head>标签中加下面这段代码，可以判断如果屏幕宽度小于500像素，就加载style.css文件。以此来适配移动端。
<link rel="stylesheet" href="./style.css" media="screen and (max-device-width: 500px)">
2）如果想要在同一个CSS文件中进行移动端的适配，可以选择以下代码。它写在一个CSS文件中，根据不同的屏幕宽度选择不同的CSS样式。这段代码表示如果屏幕宽度在400像素和600像素之间，就执行花括号内的CSS代码。
@media (min-width: 400px) and (max-device-width: 600px){}
3.动态 rem 方案：
首先在<head>标签中加入<meta name="viewport" content="width=device-width, initial-scale=1">，然后使用JS让html的font-size与页面宽度相等,最后在CSS中写样式时所有单位均用rem（像设置宽时选用width: 1rem;），使得页面在布局上确定比例。
（注意：字体的font-size一般设置为16px，不要用rem。还有就是当东西特别小时（边框1px），可以rem、px、em混用）
第三题
- 实现圆角矩形和阴影怎么做?
答案
.rect{
border: 1px solid red;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 4px 4px 5px rgba(0,0,0,0.5)
}
第四题
- 什么是闭包，闭包的用途是什么？
答案
在函数内部调用函数外部的变量，那这个变量与这个函数称为闭包。
function f1(){
var a = 1
function f2(){
console.log(a)
}
return f2
}
var result = f1()
result() // 1
上面的代码中函数f2内部调用了函数外部的变量a，故函数f2与变量a形成了闭包。最后将f2与变量a封装成函数f1，便可以在外部读取到函数f1内声明的变量，避免了污染全局变量。
闭包的作用：1)可以读取函数内部声明的变量，避免污染全局变量；2）让函数内声明变量的值一直保存在内存之中。
第五题
- call、apply、bind 的用法分别是什么？
答案
1.call: fun.call(this, argument1,argument2...)
运行函数fun可用fun.call(null, arg1)来代替fun(arg1)，call的第一个参数为函数运行时指定的this值，剩下的第二个、第三个等等为可传入函数的参数。
2.apply:fun.apply(this, [arg1, arg2...])
用法与call用法大致相同，不同点在于apply不像call那样能传入若干参数，它只能接受一个包含多个参数的数组（或类数组对象）。
3.bind: fun.bind(thisArg)
bind可以创建一个新的函数（绑定函数），新的函数与被绑定函数（原函数）具有相同的函数体，当新函数被调用的时候（即fun.bind(thisArg)()），thisArg参数会作为原函数运行时this的指向。
注意：call、apply为立即调用函数而bind是返回函数。
第六题
- 请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
例如：状态码 200 表示响应成功。
答案
1.状态码201表示创建成功
2.状态码300表示多种选择
3.状态码301表示永久移动
4.状态码302表示临时移动
5.状态码400表示用户请求语法错误
6.状态码404表示服务器找不到用户请求的网页
7.状态码500表示服务器内部错误，无法完成请求
8.状态码502表示服务器未打开
第七题
- 请写出一个 HTTP post 请求的内容，包括四部分。
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
答案
POST /path HTTP/1.1
Hostname: baidu.com
Content-Type: application/x-www-form-urlencoded
username=ff&password=123
第八题
- 请说出至少三种排序的思路，这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)
答案
- O(n*n)：冒泡排序，（1）从初始第一个数开始比较第一个数与第二个数大小，如果第一个数大则将第一个数与第二个数位置对换，接着对换后第二位置的数与第三个数进行比较，如果第三个数大则第三个数不动，接着比较第三个位置得数与第四个数的大小，以此类推将最大的数放在最后的位置上；（2）接着进行第二次从头开始比较大小，方法同上，得出第二大的数放在倒数第二位置，以此类推便可将一组数从小到大排好。
- O(n log2 n)：快速排序，（1）将第一位数设为中间数1，它与其后的每一位数进行比较，比中间数小1的放中间数1的左边，比中间数1大的放中间数1右边。（2）先从中间数1左边开始，将左边第一位数设为中间数2，它与其后每一位数进行比较（只比较中间数1左边的数），比中间数小2的放中间数2的左边，比中间数2大的放中间数2右边。（3）一直以上面方法执行至最小中间数左边的顺序排好后再依次进行右边的顺序，方法同上，直至最终排完全部顺序。
- O(n + max)：基数排序，（1）先设定有0~9十个桶。（2）先从个位开始将所有数遍历一遍，按个位的值为多少放入对应的桶中（如数
123的个位为3，便放入3的桶），全部放入后再按桶的顺序逐个取出（按先进先出来取出数）（3）接着按十位的值为多少放入对应的桶中（如果没有十位，如数5，就将其放入0的桶），全部放入后再取出。（4）以此类推，依次从个位、十位、百位、千位等进行进桶出桶操作，直到数组里最大位数的进行完进桶与出桶的操作后便排序完成。
第九题
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
答案
简单说一下就是一下5个过程：
1.DNS解析
2.TCP三次握手
3.浏览器请求及服务器接受请求并返回内容
4.浏览器根据返回的html/css/js渲染网页内容
5.浏览器与服务器断开连接
- 注：
DN指域名，例如www.jianshu.com就是简书的域名；
URL统一资源标识符，例如https://www.jianshu.com/u/740765d45aca就是URL，指向我的简书主页
IP地址：每一个域名对应着一个或者多个IP地址，每个IP地址对应的一个服务器，要访问一个服务器就要提供对应的IP地址。通俗一点讲IP地址就像是门牌号一样。
四次挥手：（1）浏览器：我这边没事了，要断开连接咯。（2）服务器：好的，知道了。（3）服务器：我这边也准备好断开连接了。（4）浏览器：好的。
1.DNS解析：我们一般在浏览器输入URL：https://www.jianshu.com/u/740765d45aca并回车后，浏览器会去操作系统里找一下之前有没有缓存www.jianshu.com这个域名的IP地址，如果没有就去本地域名服务器中查找这个域名的IP地址，如果还是找不到就再往上去根域名服务器中查找，根域名会返回一个顶级域名(com)让我们去顶级域名服务器里查找，到了顶级（com）域名服务器它会返回jianshu.com域名服务器的地址，最后我们便去jianshu.com域名服务器中查找，jianshu.com域名服务器找到了并返回给我们www.jianshu.com这个域名对应的IP地址供浏览器访问。
2.TCP三次握手：浏览器得到IP地址以后便要与服务器建立连接，建立连接之前要进行TCP三次握手，所谓TCP三次握手就像如下对话。（1）浏览器：你好，我要连接你了，可以吗？（2）服务器：好的，我已经准备好了，你来吧。（3）浏览器：好的，那我开始连接了。
3.浏览器与服务器建立连接以后，浏览器就对服务器发起请求，要求服务器返回相应的HTML文件；服务器接收到请求后便根据浏览器的请求返回相应的文件。
4.浏览器接收到服务器响应的html文件后开始渲染网页内容。
5.网页渲染完成后浏览器就与服务器断开连接，即四次挥手。
第十题
- 如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
答案
ES5:
function unique(x){
var newArray = []
x.forEach((i)=>{
if(newArray.indexOf(i) === -1){
newArray.push(i)
}
})
return newArray
}
ES6:
function unique(x){
return Array.from(new Set(x))
}
网友评论