面试复习题 13道

2019-01-14 本文已影响0人本来无一物_f1f2

1. 请写出一个符合 W3C 规范的 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>「我的页面」</title>
    <link rel="stylesheet" rel="text/css" href="./style.css">
    <link rel="stylesheet" href="./mobile.css" media="screen and (max-width:500px;)">
    <link rel="stylesheet" href="./print.css" media="print">
    <script src="./main.js"></script>
    <script src="./gbk.js" charset="GBK"></script>
</head>
<body>
    <svg width："200" height:"200" xmlns="http://www.w3.org/2000/svg" version="1.1" >
        <circle cx="100" cy="100" r="50"  fill="red" />
    </svg> 
        
    
</body>
</html>

2. 移动端是怎么做适配的？

设置理想可视化窗口
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
媒体查询
如果设备满足媒体查询条件就生效
link中css媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" >
样式表中的css媒体查询

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

动态rem方案
使用js动态调整rem

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
</script>

用scss转化语法

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

3. 用过CSS3吗? 实现圆角矩形和阴影怎么做?

通过·border-radius·属性制作，例：
border-radius:6px
border-radius有四个属性

border-top-left-radius
border-top-right-radius
border-botton-righ-radius
border-botton-left-radius

通过border-shadow设置，例：
box-shadow: inset 2px 2px 2px 1px red;
会生成一个在边框内，水平、竖直偏移量均为 2px，模糊半径为 2px，同时阴影会扩大 1px 的红色阴影。

4.什么是闭包，闭包的用途是什么？

闭包

var a=1

function f4(){
    console.log(a)//2}

如果一个函数使用了他范围外的变量，那么（这个函数+这个变量）就叫做闭包,
闭包的用途

模仿块级作用域
存储变量
封装私有变量

5. call、apply、bind 的用法分别是什么？

function x(a,b){
    console.log(a+b)
    console.log(this.a + this.b)
}
var obj = {a:1,b:2}
x.call(obj,3,4) // 7 3
x.apply(obj,[3,4])  // 7 3
var foo = x.bind(obj,3,4)
foo()   // 7 3

call()、apply()、bind()都可以通过传入第一个参数改变this对象的指向。 call()的arguments传入具体参数，apply()的arguments传入包裹着参数的数组,bind()的arguments传入具体参数。 call()、apply()是立即调用，bind()的返回值是传给一个变量，可以稍后调用。

6.常见的HTTP状态码

200 OK
请求正常处理完毕
204 No Content
请求成功处理，没有实体的主体返回
206 Partial Content
GET范围请求已成功处理
301 Moved Permanently
永久重定向，资源已永久分配新URI
302 Found
临时重定向，资源已临时分配新URI
303 See Other
临时重定向，期望使用GET定向获取
304 Not Modified
未修改
307 Temporary Redirect
临时重定向，POST不会变成GET
400 Bad Request
请求报文语法错误或参数错误
401 Unauthorized
未授权
403 Forbidden
禁止访问
404 未发现指定网址
无法找到请求资源（服务器无理由拒绝）
500 Internal Server Error
服务器发生错误
503 Service Unavailable
服务器超负载或停机维护

7.请写出一个 HTTP post 请求的内容，包括四部分。

其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

POST /path HTTP/1.1
Host: localhost:8081
User-Agent: curl/7.54.0
Accept: */*
no1harm: xxx
Content-Length: 10
Content-Type: application/x-www-form-urlencoded

username=ff&password=123

8.请说出至少三种排序的思路，这三种排序的时间复杂度分别为

O(n*n)

O(n log2 n)

O(n + max)

冒泡排序
比较相邻的数字第一个比第二个大就交换位置，对每队相邻的数组重复此操作，从第一队到最后一队，这一步让会让最后一个数字变成最大的，重复此操作，直到没有任何数字可以进行对比
快速排序
以一个元素为基准，大的放右边，小的放左边，然后左右重复此操作，直到只有一个数字为止
基数排序
将所有待比较的数值统一为同样数位长度，数位较短的数前面补零。然后，从最低位开始，依次进行一次排序。这样从最低位排序一直到最高位排序完成以后，数列就变成一个有序数列。

9.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

客户端进行DNS解析，把域名转换为IP
进行TCP连接（三次握手）客户端我要连接你了，你准备好了吗？服务端：我准备好了，你可以连接了。客户端：那我开始连接你了
浏览器通过TCP协议对指定端口发起请求报文，请求报文包括请求方法、请求路径、HTTP协议、请求报头等。
服务端接受请求报文，开始分析处理，查询服务器内是否存在路径和文件，返回响应报文；如果不存在此路径，返回响应报文，状态码404等消息；如果有，则发送响应报文，包括HTTP协议、状态码200、响应报头、响应内容等；
浏览器接收内容，并把它渲染到页面上，页面加载完成

10.著名面试题：如何实现数组去重？

假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行
ES5

var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
    var n=[]
    for(vari= ;i<array.lenght;i++){
    if(n.indexOf(arry[i]) == -1){
    n.push(array[i])
}}return n;
}
unique(array)

ES6

var array = [1,5,2,3,4,2,3,1,3,4]

function unique(array){
     return [...new Set(array)];
}
console.log(unique(array))
//一遍
var array = [1,5,2,3,4,2,3,1,3,4]

function unique(array){
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })return res
}
console.log(array)

11.请问JSONP为什么不支持POST请求

因为JSONP是通过动态创建script实现的
动态创建script只能用GET请求，没办法用POST请求

12. JS和JSON又什么区别

这是两门语言

13.请手写一个AJAX

myButton.addEventListener('click', (e)=>{
    let request = new XMLHttpRequest()
    request.open('GET','/xxx')//配置request
    request.send()
    request.onreadystatechange = ()=>{
        if(request.readyState === 4){
            if(request.status >= 200 && request.status<300){
                let string = request.responseText
                let object = window.JSON.parse(string)
            }
        }
    }
})