前端面試總結（自己總結的）
1.給出一個數組如何去掉重複的項？
var arr = [1,2,3,4,5,6,1,5,6];
function removeRepeat(arr) {
var i,tempArr = [];
for(i in arr){ //一種for迴圈寫法
if(tempArr.join(',').indexOf(arr[i])=== -1){
//join() 方法用於把陣列中的所有元素放入一個字串 ()傳入拼接規則
//indexOf()方法可返回某個指定的字串值在字串中首次出現的位置 不存在的話返回 -1
tempArr.push(arr[i])
console.log(tempArr)
}
}
return tempArr;
}
console.log(removeRepeat(arr));
語言描述：首先宣告一個空的陣列，然後遍歷陣列，用join()方法把陣列每個元素轉換成一個字串，同用indexOf()方法把陣列的每個元素和字串對比，如果不存在就把陣列每個元素新增到空數組裡儲存，這樣就得到了沒有重複的陣列了
2. DOM 物件轉成 jQuery 物件
對於已經是一個 DOM 物件，只需要用 $() 把 DOM 物件包裝起來，就可以獲得一個 jQuery 物件了，$(DOM 物件)
如： var v = document.getElementById("v"); //DOM 物件
var $v = $(v); //jQuery 物件
轉換後，就可以任意使用 jQuery 的方法。
3. jQuery 物件轉成 DOM 物件
(1) jQuery 物件是一個數據物件，可以通過 [index] 的方法，來得到相應的 DOM 物件（描述）
var $v = $("#v");
console.log($v);//假設這個是個陣列物件
var v = $v[0];
console.log(v);
(2) jQuery 本身提供，通過.get(index) 方法得到相應的 DOM 物件（描述）
var $v = $("#v");
var v = $v.get(0); // get()方法獲得由選擇器指定的 DOM 元素。
console.log(v);
4.jq 常見選擇器？
$("*") 匹配頁面所有元素
$("#id") id選擇器
$(".class") class選擇器
$("div") 標籤選擇器
擴充套件
$("p:first") first選擇器
$("p:last") last選擇器
$("p:odd") odd選擇器 奇數選擇器 [ɑd]
$("p:even") even選擇器 偶數選擇器
5.bind 和 live 的區別?
live方法其實是bind方法的變種，其基本功能就同bind方法的功能是一樣的，都是為一個元素繫結某個事件，但是bind方法只能給當前存在的元素繫結事件，對於事後採用JS等方式新生成的元素無效，而live方法則正好彌補了bind方法的這個缺陷，它可以對後生成的元素也可以繫結相應的事件。
自己理解：
（1）$("div").bind("click",function(){});
（2）$("div").live("click",function(){});
bind執行繫結事件是隻對綁在當前標籤上生效，而對後來的標籤比如父標籤不生效
live執行繫結事件不僅僅對當前標籤上生效，對後來的標籤也生效
6.this指向問題
看這個網頁詳解
6物件取值
var obj = {T1:[{'naem' : 'jack'},{'naem' : 'jack'},{'naem' : 'jack'}]}
console.log(obj.T1) //拿到陣列
7 學習不知道的新東西的方法
｛
1. 菜鳥教程:
http://www.runoob.com/ 或者 W3school
http://www.w3school.com.cn/
2. (備用)
http://www.w3cplus.com/
3.
github.com
去搜索你要的東西, 然後點進去可能會有API
4.
npmjs.com 去搜索你要的東西, 注意看更新日期和星數.
｝
8 vue生命週期
它可以總共分為8個階段：
beforeCreate（建立前）,
created（建立後）,
beforeMount(載入前),
mounted（載入後）,
beforeUpdate（更新前）,
updated（更新後）,
beforeDestroy（銷燬前）,
destroyed（銷燬後）
9.React腳手架搭建
npm init react-app react-my
安裝router模組
npm install --save react-router-dom
安裝axios模組
npm install --save react-router-dom
{this.state.obj.map((item,index)=>{
return <div style={div_text}>
<img style={img} src={'https://images.weserv.nl/?url='+ item.cover.url} alt=""/>
<div>
{item.title}
</div>
</div>
})
}
map是遍歷陣列方法，不能遍歷物件
'https://images.weserv.nl/?url='+ item.cover.url
其實是豆瓣限制了圖片的載入，我自己用了一個辦法把圖片快取下來：
10. div居中問題
水平垂直居中
《方法1》
<div id="" style="background-color:blue;width:100%;height: 500px;position: relative;">
<div style="background-color: red;width: 300px;height: 200px;position: absolute;top: 50%;left:50%;margin-top: -100px;margin-left: -150px;">
</div>
</div>
《方法2》
<div id="" style="background-color:green;width:100%;height: 500px;position: relative;">
<div style="background-color: red;width: 300px;height: 200px;position: absolute;left:0;top: 0;bottom: 0;right: 0;margin:auto">
</div>
</div>
水平居中
<div id="" style="background-color:#000022;width:100%;height: 500px;">
<div style="background-color: red;width: 300px;height: 200px;margin:0 auto;">
</div>
</div>
11. 顏色表示對方法
① rgb(0,255,0), ② 通過十六進位制（Hex）的顏色值排序 #00FF00 ③英文單詞表示 比如red，white
12.圖片、文字居中問題
圖片垂直居中
<div style="height: 600px;line-height: 600px">
<img src="img/QQ拼音截圖20180917143211.png" alt="" style="vertical-align: middle">
</div>
文字水平垂直居中
<div style="height: 600px;line-height: 600px;text-align: center">
<span>傻瓜不會死它</span>
</div>
圖片水平垂直居中
給div設定text-align:center;可使圖片水平居中，再給圖片img設定 vertical-align:middle;即可達到垂直居中（切記，是給圖片加，不是div，很多人容易搞錯）
<div style="height: 600px;line-height: 600px;text-align: center">
<img src="img/QQ拼音截圖20180917143211.png" alt="" style="vertical-align: middle">
</div>
13.
1.解釋一下display的幾個常用的屬性值，inline ， block， inline-block
- inline:
-
- 使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨佔一行.
- 不能更改元素的height，width的值，大小由內容撐開.
- 可以使用padding，margin的left和right產生邊距效果，但是top和bottom就不行.
- block:
-
- 使元素變成塊級元素，獨佔一行，在不設定自己的寬度的情況下，塊級元素會預設填滿父級元素的寬度.
- 能夠改變元素的height，width的值.
- 可以設定padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果.
- inline-block:
-
- 結合了inline與block的一些特點，結合了上述inline的第1個特點和block的第2,3個特點.
- 用通俗的話講，就是不獨佔一行的塊級元素。如圖:
14.字型適配問題
viewpoint
css3提供了一些與當前viewpoint相關的元素，vw，vh，vim等。
“viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大
相容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+
15.http狀態碼意思：
401 檢視得知：401 - 未授權: 由於憑據無效，訪問被拒絕。程式碼其中一塊需要讀寫檔案,已經去掉只讀，然後授權iis_users讀寫，解決問題。
404 網頁不存在
16，談談MVC MVVM
MVC是一種開發模式，就是一種模型—檢視—控制器（MVC）模式。
mvvm的設計思想主要實現頁面和資料模型的同步，當view改變的時候會自動將資料同步到model,model改變的時候也會自動將資料同步到view,更新view的動態顯示，Model可以簡單理解為與網頁關聯的本地資料引擎。
MVVM在vue裡面使用最多 就是一種模型—檢視—檢視模型器（MVVC）模式。
<!--
幫助我們理解 MVVM M - model V - Val
Val 要在data內定義
-->
<input type="text" v-model="Val">
<h3>{{Val}}</h3>
使用v-model指令去繫結data裡面的key名為Val，然後在h3標籤裡引入{{Val}}
MVVM與MVC最大的區別就是：它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性後該屬性對應View層顯示會自動改變。非常的神奇~
整體看來，MVVM比MVC精簡很多，不僅簡化了業務與介面的依賴，還解決了資料頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高程式碼的可重用性。
17、JavaScript中的3種彈出式訊息提醒的命令是什麼？ - alert()：帶確認按鈕的對話方塊，點選確認按鈕，對話方塊關閉； - confirm()：帶有確認和取消按鈕的對話方塊，點選確認和取消按鈕都會關閉對話方塊，只是會返回不同的boolean值，然後可以根據boolean值執行不同的操作； - prompt()：帶有確認和取消按鈕，還帶有輸入框
18、float和position:absolute脫離文字流的區別
CSS中脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。
需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。
而對於使用absolute positioning脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它 --------