今日头条实习面试总结

1、实现数组扁平化

数组扁平化是指将一个多维数组变为一维数组

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

（1）toString & split或者jion & split

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

   function flatten(Ary){
        var midAry=Ary.toString();
        // var midAry=Ary.join(",");
        var result=midAry.split(",");
        return result;
    }

（2）递归

递归的遍历每一项，若为数组则继续遍历，否则concat

2、实现三栏布局，中间自适应，左右两边固定

自己的实现：

 .container{
        position:relative;
        width:100%;
        }
        .left{
        width:100px;
        background:red;
        float:left;
        }
        .main{
         width:100%;
         padding:0 100px;
         background:green;
        }
        .right{
         width:100px;
         background:red;
        position:absolute;
        right:0;
        top:0;
        }

html代码段

<div class="container">
    <div class="left">left </div>
    <div class="main">main </div>
    <div class="right"> right</div>
</div>

3、说一说var 、let、const 的区别

声明变量的三种方式	概念区别	重复声明	作用域问题	变量提升问题
var	var 声明全局变量	用于声明变量，重复声明同一变量后面的覆盖前面的。	可以在作用域外使用	var 申明的变量作用域会提升
let	let：声明块级变量，即局部变量。	用于声明变量，let在相同的作用域下面不能申明相同的变量	声明的地方形成作用域，作用域外无法访问	let 申明的变量作用域不会提升
const	const：用于声明常量，也具有块级作用域，也可声明块级	用于声明常量，const申明的变量初始化后不能被修改	cosnt只能作用于当前作用域	const申明的作用域不会被提升

4、css实现圆，梯形

圆：

 #circle{
        width:100px;
        height:100px;
        border-radius:50px;
        background:#ccc;
        }

椭圆：border-radius可以单独指定水平和垂直半径，只要用一个(/)分隔这两个值就行。还一个特性是，它可以接受长度值，还可以接受百分比，两种特性结合，就可以自适应了。

.ellipse{
width: 200px;
height: 100px;
background-color: red;
border-radius:50%;
}

梯形：

 .tx1{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
   border-color:   transparent  blue  blue transparent;
    }
     .tx2{
    width:100px;
    height:100px;
    background:#ccc;
    float:left;

    }
     .tx3{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
border-color: transparent transparent blue blue;
    }

html代码

<div class="tx1"></div>
<div class="tx2"></div>
<div class="tx3"></div>

5、清除子元素的内容，还要清除其事件，一般用什么

如果仅仅删除父元素下面的子元素，使用removeChild。但是可能为子元素绑定了事件，所以不能只删除元素，而让绑定的时间继续占用内存

btn1.onclick = function(){}
btn1.onclick =null;

这样就是在解除事件绑定。

如果是用addEventListener给元素绑定的事件，那么可以用removeEventListener来解除事件绑定。

6、一般怎么实现响应式布局

(1)先介绍几种其他布局的概念

静态布局：设计固定样式，如果要适配移动端，则单独再设计一套样式

弹性布局：css3引入的一种布局方式（用来替代之前的float浮动布局）

flex-flow: 应用到需要布局的元素的父元素上，先指定元素为flex布局，display:flex;

fllex-flow是 flex-direction和 flex-wrap的简写形式

flex-direction

定义了弹性项目在弹性容器中的放置方向，（默认行内方向、从左到右）

row初始值，还有row-reverse || column || column-reverse

flex-wrap

指定项目是否在必要的时候换行，默认不换行

arap初始值，还有 wrap || wrap-reverse

.top ul{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}

自适应布局：分别为不同的屏幕分辨率定义布局

流式布局：对页面元素的宽度进行适配调整

响应式布局：运用各种样式技巧，实现随着屏幕的变化以及PC端移动端的变化，页面布局做出相应调整。

（2）响应式布局的步骤实现

须加一句头部代码

<meta name="viewport" content="width=device-width",initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

通过媒体查询来设置样式，媒体查询@media不仅可以设置字体，也可以对图片进行设置。

@media screen and ( min-width:750px){}

宽度不用固定值，用百分比。

浮动布局使用flex;

图片处理：height：auto；为了保证图片的原始宽高比例，以至于图片不失真。

.m-home img{
max-width:100%;
height:auto;
}

7、说一下jsonp的原理，你遇到过跨域嘛，如何解决，除了jsonp还有其他什么方法。（1）jsonp的原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。（2）jsonp的具体实现

比如访问不同源的域www.practice-zhao.com

直接添加script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本

<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>

这里调用了跨域的remote.js脚本，remote.js代码如下：

jsonhandle({
    "age" : 15,
    "name": "John",
})

动态的添加了一个script标签，src指向跨域的一个脚本，并且将js函数名作为callback参数传入

<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>

这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入

JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。

jQuery提供了方便使用JSONP的方式

$(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //请求php的参数名
            jsonpCallback: "jsonhandle",//要执行的回调函数
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });

只要设置dataType为jsonp即可。

总结：JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
　　JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。

（3）跨域的其他解决办法

CORS 前后端协作设置请求头，Access-Control-Allow-Origin等头部信息

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

接收2个参数

调用postMessage方法的window对象是指要接收消息的那一个window对象，

该方法的第一个参数message为要发送的消息，类型只能为字符串；

第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

今日头条实习面试总结

猜你喜欢