2018年前端面試題（秋季面試隨意整理的）

1.html和css

引入 css 有哪幾種方式

1.使用<link>標籤，引入外部CSS文件（1.經過@import,引入CSS文件（性能較差）
2.將css的樣式代碼放在html文檔的<style></style>標籤中，引入css）
3.內聯樣式（標籤內部書寫）

position 屬性有哪些值，分別什麼含義

1.position: relative;相對定位（相對於自身）
2.position: absolute;絕對定位（相對於最近一個有定位的父元素偏移）
3.position: fixed;固定定位（相對於瀏覽器窗口）
4.position:static：默認值

css 響應式佈局

1.接在link中判斷設備的尺寸，而後引用不一樣的css文件（<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">）
2.直接寫在<style>標籤裏（@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}）

flex:1是什麼意思

1.讓全部彈性盒模型對象的子元素都有相同的長度，且忽略它們內部的內容

CSS 彈性佈局，哪些地方用到過

1.flex佈局

如何實現不定寬高水平和垂直居中

1.最簡單的flex佈局
display: flex;
justify-content: center;
align-items: center;
2.利用table-cell
外層容器
display:table-cell;
text-align:center;
vertical-align:middle;
內部元素
vertical-align:middle;
display:inline-block;
3.使用CSS3 transform
外層容器
display:relative
內部元素
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;

什麼是盒子模型

由content、padding、border、margin組成的元素就是盒子模型，用來設置元素在網頁中的大小和位置。

2.js問題

const 和 let 區別，能夠改變 const 定義的某個對象的屬性嗎

let與const都是隻在聲明所在的塊級做用域內有效。
let：無變量提高（未到let聲明時，是沒法訪問該變量的）
const：無變量提高，聲明一個基本類型的時候爲常量，不可修改；聲明對象能夠修改
const arr = {name:'小可愛', age:'21'}
arr.name = '萱萱'
console.log(arr)
由於對象是引用類型的，arr中保存的僅是對象的指針，這就意味着，const僅保證指針不發生改變，修改對象的屬性不會改變對象的指針，因此是被容許的。也就是說const定義的引用類型只要指針不發生改變，其餘的不論如何改變都是容許的。

對閉包的理解，以及哪些地方用過閉包，以及閉包的缺點

閉包 是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量

1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收

優勢是能夠避免全局變量的污染，變量和方法私有化，不讓外部修改這些屬性
缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露

對跨域瞭解嗎，jsonp 的限制

跨域就是因爲JavaScript同源策略的限制,使得a.com域名下的js沒法操做b.com或c.a.com域名下的對象或數據。簡單理解同一個 域名、相同端口、相同協議!
JSONP(JSON with Padding),就是異步請求跨域的服務器端時,不是直接返回數據,而是返回一個js方法,把數據做爲參數
jsonp只支持get請求而不支持post請求
在登陸模塊中須要用到session來判斷當前用戶的登陸狀態,這時候因爲是跨域的緣由,先後臺的取到的session是不同的,那麼就不
能就行session來判斷.

1-10之間的隨機數

var num=Math.floor(Math.random()*10+1);

javascript的typeof返回哪些數據類型

string,boolean,number,undefined,function,object

ES6 用到過嗎，新增了哪些東西，你用到過什麼

定義變量加入了 let const
箭頭函數
Array.from() 將類數組對象與可遍歷對象轉換爲數組
類class

箭頭函數，箭頭函數的特色，應該是 this 的指向

箭頭函數是匿名函數，不綁定本身的this,arguments,super,new.target
箭頭函數會捕獲其所在上下文的this值，做爲本身的this值，在使用call/apply綁定時，至關於只是傳入了參數，對this沒有影響

瞭解 MVVM 嗎，和 MVC 的區別

對象和類的區別，舉個現實中的例子

你理解的面向對象

說一下原型鏈

ES6 新增的 set() 和 map() 有什麼區別

數組去重

ES6：Array.from(new Set(arr));
<script type="text/javascript">
    let arr = ['1',2,1,3,5,6,5]
    let arrString = arr.toString()
    console.log(arrString)
    arrSplit = arr1.split(',') // 把一個字符串分割成字符串數組。
    //join() 把數組中的全部元素放入一個字符串。
    console.log(arrSplit)
    let set = new Set(arrSplit)
    console.log(set)
    let newArr = Array.from(set)
    console.log(newArr)
</script>

哪些方法會改變原數組

shift：將第一個元素刪除而且返回刪除元素，空即爲undefined
unshift：向數組開頭添加元素，並返回新的長度
pop：刪除最後一個並返回刪除的元素
push：向數組末尾添加元素，並返回新的長度
reverse：顛倒數組順序
sort：對數組排序
splice:splice(start,length,item)刪，增，替換數組元素，返回被刪除數組，無刪除則不返回

深拷貝和淺拷貝

async 和 await 瞭解嗎，（不太瞭解，只知道返回的是 promsie 對象）
call() 和 apply() 的區別和做用？

區別：apply()與call()做用沒有區別，用法與call()方法稍有區別，就是call()的第二個參數(調用函數使用的參數)，是一個一個傳入的；而apply()的第二個參數的值是使用數組的形式傳入的
做用：在Javascript中，每一個函數都包含兩個非繼承而來的方法，call和apply。這兩個方法的用途都是在特定的做用域中調用函數，實際上等於設置函數體內的this對象的值。

apply方法接收兩個參數，第一個參數是在其中運行函數的做用域，第二個是一個參數數組或者arguments對象。
call方法與apply方法做用相同，第一個參數也相同，區別在於，其他的參數須要逐個列出。

apply(thisArg, argArray);
call(thisArg[,arg1,arg2…]);

是使用call仍是apply要看具體的狀況。若是你知道全部參數或者參數的數量很少，可使用call；
若是參數的數量不肯定，或者數量很大，或者你收到的是一個數組或者是個arguments對象，則須要使用apply。