今日头条实习面试总结

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<Ary.length;i++){
if((Ary[i]) instanceof Array){
 result=result.concat( flatten1(Ary[i]));
}else{
result.push(Ary[i])
}
}
return result;
}

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

<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对象所在的域,如果不想限定域,可以使用通配符 *  。

                                                                                                                                                     

展开阅读全文

没有更多推荐了,返回首页