今日头条实习面试总结

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;
    }

修改 ：这里result结果为["1","2","3","4","5"],还要将字符串转化为数字

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

（2）递归

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

function flatten1(Ary){
var result=[];
for (var i=0;i

使用map写法更简洁

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

（3）ES6新特性，扩展运算符

function flatten2(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

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代码段

    
left 
    
main 
    
 right

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代码

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）响应式布局的步骤实现

须加一句头部代码

通过媒体查询来设置样式，媒体查询@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脚本

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

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

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

   这里动态的添加了一个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对象所在的域，如果不想限定域，可以使用通配符 *  。