天天看點
傳回

今日頭條實習面試總結今日頭條實習面試總結

轉至：https://blog.csdn.net/runner_123/article/details/82864164

原

今日頭條實習面試總結

2018年10月21日 14:19:39 runner_123 閱讀數：96

1、實作數組扁平化

數組扁平化是指将一個多元數組變為一維數組

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

（1）toString & split或者jion & split

調用數組的toString方法，将數組變為字元串然後再用split分割還原為數組

     
  1.  function flatten(Ary){       
    2.       
  2.  var midAry=Ary.toString();       
    3.       
  3.  // var midAry=Ary.join(",");       
    4.       
  4.  var result=midAry.split(          ",");       
    5.       
  5.  return result;       
    6.       
  6.  }       
    7.

（2）遞歸

遞歸的周遊每一項，若為數組則繼續周遊，否則concat

2、實作三欄布局，中間自适應，左右兩邊固定

自己的實作：

     
  1.  .container{       
    2.       
  2.  position:relative;       
    3.       
  3.  width:          ;       
    4.       
  4.  }       
    5.       
  5.  .left{       
    6.       
  6.  width:          ;       
    7.       
  7.  background:red;       
    8.       
  8.  float:left;       
    9.       
  9.  }       
    10.       
  10.  .main{       
    11.       
  11.  width:          ;       
    12.       
  12.  padding:          ;       
    13.       
  13.  background:green;       
    14.       
  14.  }       
    15.       
  15.  .right{       
    16.       
  16.  width:          ;       
    17.       
  17.  background:red;       
    18.       
  18.  position:absolute;       
    19.       
  19.  right:          ;       
    20.       
  20.  top:          ;       
    21.       
  21.  }       
    22.

html代碼段

     
  1.  <div class="container">       
    2.       
  2.  <div class="left">left           </div>       
    3.       
  3.  <div class="main">main           </div>       
    4.       
  4.  <div class="right"> right          </div>       
    5.       
  5.  </div>       
    6.

3、說一說var 、let、const 的差別

聲明變量的三種方式 概念差別 重複聲明 作用域問題 變量提升問題
var var 聲明全局變量 用于聲明變量，重複聲明同一變量後面的覆寫前面的。 可以在作用域外使用 var 申明的變量作用域會提升
let let：聲明塊級變量，即局部變量。  用于聲明變量，let在相同的作用域下面不能申明相同的變量 聲明的地方形成作用域，作用域外無法通路 let 申明的變量作用域不會提升
const const：用于聲明常量，也具有塊級作用域 ，也可聲明塊級 用于聲明常量，const申明的變量初始化後不能被修改 cosnt隻能作用于目前作用域 const申明的作用域不會被提升

4、css實作圓，梯形

圓：

     
  1.  #circle{       
    2.       
  2.  width:          ;       
    3.       
  3.  height:          ;       
    4.       
  4.  border-radius:          ;       
    5.       
  5.  background:          ;       
    6.       
  6.  }       
    7.

橢圓：border-radius可以單獨指定水準和垂直半徑，隻要用一個(/)分隔這兩個值就行。還一個特性是，它可以接受長度值，還可以接受百分比，兩種特性結合，就可以自适應了。

     
  1.  .ellipse{       
    2.       
  2.  width:           ;       
    3.       
  3.  height:           ;       
    4.       
  4.  background-color: red;       
    5.       
  5.  border-radius:          ;       
    6.       
  6.  }       
    7.

梯形：

     
  1.  .tx1{       
    2.       
  2.  float:left;       
    3.       
  3.  width:          ;       
    4.       
  4.  height:          ;       
    5.       
  5.  border-width:           ;       
    6.       
  6.  border-style: solid;       
    7.       
  7.  border-color:   transparent  blue  blue transparent;       
    8.       
  8.  }       
    9.       
  9.  .tx2{       
    10.       
  10.  width:          ;       
    11.       
  11.  height:          ;       
    12.       
  12.  background:          ;       
    13.       
  13.  float:left;       
    14.           
  14.  }       
    15.       
  15.  .tx3{       
    16.       
  16.  float:left;       
    17.       
  17.  width:          ;       
    18.       
  18.  height:          ;       
    19.       
  19.  border-width:           ;       
    20.       
  20.  border-style: solid;       
    21.       
  21.  border-color: transparent transparent blue blue;       
    22.       
  22.  }       
    23.

  html代碼

     
  1.  <div class="tx1">          </div>       
    2.       
  2.  <div class="tx2">          </div>       
    3.       
  3.  <div class="tx3">          </div>       
    4.

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 定義了彈性項目在彈性容器中的放置方向，（預設行内方向、從左到右） 
<p>row初始值，還有row-reverse || column || column-reverse</p>
		</td>
	</tr><tr><td>flex-wrap</td>
		<td style="width:592px;">
		<p>指定項目是否在必要的時候換行，預設不換行</p>

		<p>arap初始值，還有 &nbsp; &nbsp;wrap || wrap-reverse</p>
		</td>
	</tr></tbody></table></div><pre class="has" name="code" onclick="hljs.copyCode(event)"><code class="hljs language-javascript"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">.top ul{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-attr">display</span>:flex;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">flex-direction: row;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">flex-wrap:nowrap;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button" data-title="複制"></div></pre>

自适應布局：分别為不同的螢幕分辨率定義布局

流式布局：對頁面元素的寬度進行适配調整

響應式布局：運用各種樣式技巧，實作随着螢幕的變化以及PC端移動端的變化，頁面布局做出相應調整。

（2）響應式布局的步驟實作

須加一句頭部代碼

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

通過媒體查詢來設定樣式，媒體查詢@media不僅可以設定字型，也可以對圖檔進行設定。

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

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

浮動布局使用flex;

圖檔處理：height：auto；為了保證圖檔的原始寬高比例，以至于圖檔不失真。

     
  1.  .m-home img{       
    2.       
  2.  max-width:          %;       
    3.       
  3.  height:auto;       
    4.       
  4.  }       
    5.

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腳本

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

這裡調用了跨域的remote.js腳本，remote.js代碼如下：

     
  1.  jsonhandle({       
    2.       
  2.  "age" :           ,       
    3.       
  3.  "name":           "John",       
    4.       
  4.  })       
    5.

 動态的添加了一個script标簽，src指向跨域的一個腳本，并且将js函數名作為callback參數傳入

     
  1.  <script type=          "text/javascript">       
    2.       
  2.  function jsonhandle(data){       
    3.       
  3.  alert(          "age:" + data.age +           "name:" + data.name);       
    4.       
  4.  }       
    5.       
  5.  <          /script>       
    6.       
  6.  <script type="text/javascript          ">       
    7.       
  7.  $(document).ready(function(){       
    8.       
  8.  var url = "http:          //www.practice-zhao.com/student.php?id=1&callback=jsonhandle";       
    9.       
  9.  var obj = $(          '<script><\/script>');       
    10.       
  10.  obj.attr(          "src",url);       
    11.       
  11.  $(          "body").append(obj);       
    12.       
  12.  });       
    13.       
  13.  </script>       
    14.

   這裡動态的添加了一個script标簽，src指向跨域的一個php腳本，并且将上面的js函數名作為callback參數傳入

JSONP将通路跨域請求變成了執行遠端JS代碼，服務端不再傳回JSON格式的資料，而是傳回了一段将JSON資料作為傳入參數的函數執行代碼。

jQuery提供了友善使用JSONP的方式

     
  1.  $(          document).ready(          function(){       
    2.       
  2.  $.ajax({       
    3.       
  3.  type :           "get",       
    4.       
  4.  async:           false,       
    5.       
  5.  url :           "http://www.practice-zhao.com/student.php?id=1",       
    6.       
  6.  dataType:           "jsonp",       
    7.       
  7.  jsonp:          "callback",           //請求php的參數名       
    8.       
  8.  jsonpCallback:           "jsonhandle",          //要執行的回調函數       
    9.       
  9.  success :           function(data) {       
    10.       
  10.  alert(          "age:" + data.age +           "name:" + data.name);       
    11.       
  11.  }       
    12.           
  12.  });       
    13.       
  13.  });       
    14.

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

<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
										if(!window.csdn.anonymousUserLimit.judgment()){
											window.csdn.anonymousUserLimit.Jumplogin();
											return false;
										}else if(!currentUserName){
											window.csdn.anonymousUserLimit.updata();
										}
									}
									
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>

1、實作數組扁平化

面試筆試題 今日頭條 實習面試
上一篇: Python-drf前戲38-前端Vue
下一篇: Windows 8.1 update1洩露下載下傳

繼續閱讀