前端面試問題彙總

時間 2019-11-13

原文原文鏈接

1.css 垂直居中 2.JS數據類型和數組複製javascript

1.css/css3實現未知寬高元素的垂直居中和水平居中php

解決思路：css

<div class="demo">
　　 <img src="img/pic3.jpg" />
</div>

.demo{
    /*設置元素絕對定位*/
    position: fixed;/*沒用定寬高，寫了一個定位left:50%離左邊百分之五十，transform: translateX(-50%); 這一句的做用就是讓自身位置水平左移自身50%的寬度。這樣就恰好實現咱們想要的效果。*/  top:50%;

  left:50%;
  transform:translate(-50%,-50%);
 -webkit-transform: translateX(-50%);//兼容到ie9
 -ms-transform: translateX(-50%);//兼容到ie9
}
2.JS數據類型和數組複製
解決思路：

2.js的數據類型

jscript 有三種->主要數據類型、兩種->複合數據類型和兩種->特殊數據類型。html

基本數據類型：String,boolean,Number,Undefined, Null
　　引用數據類型：Object(Array,Date,RegExp,Function)java

主要（基本）數據類型

字符串
數值
布爾

複合（引用）數據類型

對象
數組

特殊數據類型

Null
`Undefined`

Array 對象方法

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值

2、使用slice()jquery

Array.slice 方法:css3

public slice([startIndex:Number], [endIndex:Number])web

返回由原始數組中某一範圍的元素構成的新數組，而不修改原始數組。返回的數組包括 startIndex 元素以及從其開始到 endIndex 元素（但不包括該元素）的全部元素。ajax

可以使用slice()進行復制，由於slice()返回也是數組。json

var array1 = new Array("1","2","3");
var array2;
array2 = array1.slice(0);
array1.length = 0;
alert(array2); //返回一、二、3

3、使用concat()

注意concat()返回的並非調用函數的Array，而是一個新的Array，因此能夠利用這一點進行復制。

var array1 = new Array("1","2","3");
var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回一、二、3

3.js跨域 什麼是跨域
解決思路：

什麼是跨域？

跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源，這裏跨域是廣義的。

廣義的跨域：

1.) 資源跳轉： A連接、重定向、表單提交
2.) 資源嵌入： <link>、<script>、<img>、<frame>等dom標籤，還有樣式中background:url()、@font-face()等文件外鏈 3.) 腳本請求： js發起的ajax請求、dom和js對象的跨域操做等

其實咱們一般所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

什麼是同源策略？
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。

同源策略限制如下幾種行爲：

1.) Cookie、LocalStorage 和 IndexDB 沒法讀取 2.) DOM 和 Js對象沒法得到 3.) AJAX 請求不能發送

常見跨域場景

URL                                      說明                    是否容許通訊
http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不一樣文件或路徑 容許 http://www.domain.com/lab/c.js  http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不一樣端口 不容許  http://www.domain.com/a.js https://www.domain.com/b.js 同一域名，不一樣協議 不容許  http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名對應相同ip 不容許  http://www.domain.com/a.js http://x.domain.com/b.js 主域相同，子域不一樣 不容許 http://domain.com/c.js  http://www.domain1.com/a.js http://www.domain2.com/b.js 不一樣域名 不容許

1、jsonp解決跨域
 
jsonp的原理
   JSONP的最基本的原理是：動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。
  JSONP即JSON with Padding。因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源。若是要進行跨域請求， 咱們能夠經過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中能夠直接使用JSON傳遞javascript對象。 這種跨域的通信方式稱爲JSONP。 
   Jsonp的執行過程以下： 
   首先在客戶端註冊一個callback (如:'testjsonpcallback'), 而後把callback的名字(如:testjsonpcallback)傳給服務器。注意：服務端獲得callback的數值後，要用testjsonpcallback(......)把將要輸出的json內容包括起來，此時，服務器生成 json 數據才能被客戶端正確接收。 
   而後以 javascript 語法的方式，生成一個function， function 名字就是傳遞上來的參數 'callback'的值 testjsonpcallback 
最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。 
   客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時javascript文檔數據，做爲參數， 傳入到了客戶端預先定義好的 callback 函數

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
<h1>測試jsonp</h1>
<ul>
<li class="num">手機號碼: <span></span></li>
<li class="province">歸屬省份: <span></span></li>
<li class="operators">運營商: <span></span></li>
</ul>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function testjsonpcallback(data){
alert(JSON.stringify(data));
var province = data.province,
operators = data.catName,
num = data.telString;

$('.num span').html(num);
$('.province span').html(province);
$('.operators span').html(operators);

}

</script>
<script src ="http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15510588888&callback=testjsonpcallback" type="text/javascript"></script>
</body>
</html>

2、jquery 基本概念和ajax解決跨域

ajax的基本概念

瞭解這個概念，首先得先知道同步交互與異步交互

同步交互：客戶端瀏覽器給服務器發送一個請求，服務器返回一個頁面，返回的頁面會把以前的頁面覆蓋掉，咱們把這種交互方式稱爲同步交互
異步交互：就是可會斷瀏覽器給服務器發送一個請求，服務器返回數據，返回的數據不會把以前的頁面覆蓋掉，咱們把這種交互方式稱之爲異步交互

ajax主要的應用場景：頁面不刷新，就能夠與服務器進行動態的數據交互

交互的原理

同步交互原理：咱們在瀏覽器，怎麼給服務器發送請求呢？能夠點擊超連接，提交表單，瀏覽器地址欄輸入地址，都是給服務器發送請求，其實是瀏覽器幫助咱們給服務器去發送請求
異步交互的原理：JavaScript給咱們提供了一個新的API接口，幫咱們去發送http請求，由XMLHttpRequest 對象來幫助咱們發送請求

咱們全部的交互操做均可以經過這個對象來完成，發送請求，接受服務器的數據

ajax的具體應用場景

前臺能夠經過XMLHttpRequest 給服務器發送請求，而後再經過XMLHttpRequest 對象來接受服務器返回的數據，最後經過dom操做把數據寫到頁面上
ajax：能夠用來表單輸入規範驗證
ajax：也能夠用來作性能優化，好比一個頁面很是龐大，這個頁面不可能一次加載完畢，實現一個滾動加載

XMLHttpRequest 交互的四個步驟

1，實例化XMLHttpRequest 對象
2，想和服務器進行交互，必須和服務器打開一個鏈接
3，給服務器發送數據，發送參數數據到服務器
4，接受服務器返回的數據，服務器在返回給客戶端的時候會返回一些狀態，能夠經過監聽服務器狀態的改變，來更好的操控整個交互流程

①傳統的ajax方法

$("#ajax").click(function(){  
     $.ajax({  
         type: "POST",  
         url: "http://js.phpsong.com/a.php",  
         data: 'name=ajax',  
         dataType:"json",  
         success: function(data){  
            alert(data.name);  
         }  
     });  
 });

②$.getJSON

$.getJSON('http://js.phpsong.com/a.php?name=getjson&callback=?', function(data){  //沒有回調函數，直接處理  
    alert(data.name);    
 });

③$.getScript

$.getScript('http://js.phpsong.com/a.php?name=getscript&callback=getdata');  //回調函數根jsonp同樣

④ajax jsonp

$("#jsonp").click(function(){  
     $.ajax({  
         url: 'http://js.phpsong.com/a.php',  
         data: {name: 'jsonp'},  
         dataType: 'jsonp',  
         jsonp: 'callback',      //爲服務端準備的參數  
         jsonpCallback: 'getdata',   //回調函數  
         success: function(){  
            alert("success");  
         }  
     });  
 });  
  
function getdata(data){  
 $('#Result').text(data.name);  
}