前端面试题

 

1 递归 是什么?   递归确定只是函数自调用吗?  如果非得要用递归渲染一个菜单, 你要怎么做. 说具体的步骤.  说核心.

//第n项的和 sum(n) = sum(n-1)+n 终止条件n=1
function sum(n){
    if(n==1) return 1
    return sum(n-1) + n
}
let amount = sum(100)
console.log(amount) // 5050

自己调用自己的算法称为递归算法，这就好比套娃，大的套娃里面还有一个与它相似的套娃，如此反复直到套娃大小达到足够小。
和套娃类似的递归算法，有两个基本条件:
1.结束条件(套娃达到足够小后就没有在下一个套娃了)
2.状态转换方程:调用本身(除最小套娃外，每个套娃下都有比他小一级的套娃)

 

 2 HTTP状态码有哪些?     再说具体一点   306 是什么? 401是什么?

1XX 信息提示 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误
306状态码:表示已经被废弃的HTTP状态码。
401状态码: 请求要求身份验证。
301是HTTP状态码之一，用于表示被请求的资源已永久移动到新的URL地址。

 

3  H5的有什么可以跨域? 你确认是JSONP? JSONP是H5有的吗? 如果是我说H5没有JSONP呢 ? 不是它呢? Access-Control-Allow-Origin ==true 也不对, 这个还是配置项中后台处理同源策略的, 我要说的跨域? 不要听这个, 那你手写一个JSONP吧 说第一步第二步. 说核心步骤. 

postMessage 

这是一个 h5 中新增的一个 api。通过它我们可以实现多窗口间的信息传递，通过获取到指定窗口的引用，然后调用 postMessage 来发送信息，在窗口中我们通过对 message 信息的监听来接收信息，以此来实现不同源间的信息交换。如果是像解决 ajax 无法提交跨域请求的问题，我们可以使用 jsonp、cors、websocket 协议、服务器代理来解决问题。

<script>
    function JSONP({
        url,
        params = {},
        callbackKey = 'cb',
        callback
    }) {
        // 定义本地的唯一callbackId，若是没有的话则初始化为1
        JSONP.callbackId = JSONP.callbackId || 1;
        let callbackId = JSONP.callbackId;
        // 把要执行的回调加入到JSON对象中，避免污染window
        JSONP.callbacks = JSONP.callbacks || [];
        JSONP.callbacks[callbackId] = callback;
        // 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
        params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
        // 得到'id=1&cb=JSONP.callbacks[1]'
        const paramString = Object.keys(params).map(key => {
            return `${key}=${encodeURIComponent(params[key])}`
        }).join('&')
        // 创建 script 标签
        const script = document.createElement('script');
        script.setAttribute('src', `${url}?${paramString}`);
        document.body.appendChild(script);
        // id自增，保证唯一
        JSONP.callbackId++;

    }
    JSONP({
        url: 'http://localhost:8080/api/jsonps',
        params: {
            a: '2&b=3',
            b: '4'
        },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
    JSONP({
        url: 'http://localhost:8080/api/jsonp',
        params: {
            id: 1
        },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
</script>

 

 

4 浏览器输入URL后干了什么？ 好好的讲一下

1 URL格式的解析.
2 浏览器将域名解析为ip地址
3 浏览器主机根据ip地址与服务器建立TCP连接。
4 浏览器向WEB服务器发送一个http请求报文，通过TCP协议发送给服务器.
5 服务器收到请求并响应，生成一个HTTP响应报文，通过TCP协议发送给浏览器主机
6 浏览器跟踪重定向地址
7 服务器处理请求
8 浏览器的到响应报文之后，对响应报文进行HTML解析
9 TCP连接断开

 

5  如果手写一个上传下载, 说一下上传一个文件, 前端写js代码, 说一下上传文件的逻辑. 第一步第二步怎么写. 

function uploadPic() {
  var form = document.getElementById('upload'),
    formData = new FormData(form);
  $.ajax({
   url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",
   type:"post",
   data:formData,
   processData:false,
   contentType:false,
   success:function(res){
    if(res){
     alert("上传成功！");
    }
    console.log(res);
    $("#pic").val("");
    $(".showUrl").html(res);
    $(".showPic").attr("src",res);
   },
   error:function(err){
    alert("网络连接失败,稍后重试",err);
   }

  })

 } 

 

6  闭包是啥? 哪些地方使用? 

一个作用域可以访问另外一个函数内部的局部变量。

function outerFunction() {
  var outerVariable = "I am outside!";
  function innerFunction() {
    var innerVariable = "Hello, world!";
    console.log(outerVariable + " " + innerVariable);
  }
  return innerFunction;
}

var myClosure = outerFunction(); // myClosure 现在是一个闭包
myClosure(); // 输出 "I am outside! Hello, world!"

在这个例子中，innerFunction 是一个嵌套在 outerFunction 内部定义的函数。由于 JavaScript 的特性，innerFunction 仍然可以访问 outerFunction 中的变量 outerVariable，即使 outerFunction 已经返回并被销毁了。这样的函数称为闭包（closure）。

最后将 innerFunction 赋值给变量 myClosure，就可以得到一个能够访问 outerVariable 的闭包函数。调用 myClosure() 就可以运行 innerFunction 并输出字符串 "I am outside! Hello, world!"。

需要注意的是，当外层函数 outerFunction 返回内部函数 innerFunction 后，在全局作用域中无法直接访问 outerVariable 变量，因为它是私有的。只能通过调用 innerFunction 的方式来访问 outerVariable。这也是闭包一般用于信息隐藏和限制变量作用域的原因之一。

作用：延伸变量的作用范围。
变量不会销毁（核心作用）
变量什么时候不会销毁：变量被引用并且有内存
闭包的缺点：内存泄漏（栈溢出）

闭包形成条件
1.函数嵌套
2.将内部函数作为返回值返回
3.内部函数必须使用到外部的变量

 

7 H5的新特性?

1.拖拽释放：即抓取一个元素以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都可以拖放。
2.自定义属性 data-id
3.语义化标签（header ，nav，footer，aside，article）
4.新增音频（radio），视频（video）标签
5.画布canvas
6.Geolocation：获取当前设备的经纬度
7.本地存储localstorage和sessionstorage
8.新增表单控件 calendar data email time url search file number
9.新的技术 webworker websocket Geolocation

 

8 CSS3 新特性

1 选择器
2 盒模型
3 背景和边框
4 文字特效
5 2D/3D转换
6 动画
7 多列布局
8 用户界面 border-radius:25px //边框圆角 border-shadow: 10px 10px 5px #888888;//阴影 background-image: linear-gradient(#ccc, #999);//渐变

 

 

10 ES6的新特性

1.新增了块级作用域（let，const）
2.提供了定义类的语法糖（class）
3.新增了一种基本数据类型（Symbol）
4.新增了变量的解构赋值
5.函数参数允许设置默认值，引入了rest参数，新增了箭头函数。
6.数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。
7.对象和数组新增了扩展运算符
8.ES6新增了模块化（import / export）
9.ES6新增了Set和Map数据结构。
10.ES6原生提供Proxy构造函数，用来生成Proxy实例
11.ES6新增了生成器（Generator）和遍历器（Iterator）