題目來自前端面試--四月二十家前端面試題分享，知道某一題目時(shí)可以直接ctrl+f找答案，有些選擇題或者輸出結(jié)果的題目就沒放到這里，一起學(xué)習(xí)交流~
1、CSS實(shí)現(xiàn)垂直水平居中
<div class="box">
<div class="con"></div>
</div>
解：
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.con {
height: 100px;
width: 100px;
background-color: red;
}
2、原生JS或JQ循環(huán)出li中的內(nèi)容
解：
// JS版本
var aLi = document.querySelectorAll('ul li');
aLi.forEach(function(item, index, arr){
console.log(item.innerHTML);
});
// JQ版本
$('ul li').each(function(index, item){
console.log(item.innerHTML);// item是原生的DOM元素喔
});
3、Ajax請求的時(shí)候GET和POST的區(qū)別
解：
GET大小限制，安全低，POST則相反
GET請求需考慮緩存問題，POST無需關(guān)心
POST請求必須設(shè)置Content-Type值為application/x-form-www-urlencoded
GET請求的參數(shù)寫在url里，所以send函數(shù)發(fā)送的參數(shù)為null，而POST請求的數(shù)據(jù)需要寫在send中
4、JS中函數(shù)split()和join()的區(qū)別
解：
// 根據(jù)傳入?yún)?shù)的不同，字符串拆分成數(shù)組和數(shù)組拆分成字符串
var str = 'my name is moka.';
var arr = str.split(" ");
console.log(arr);// ["my", "name", "is", "moka."]
str = arr.join(" ");
console.log(str);// my name is moka.
5、熟悉微信小程序嗎
解：
實(shí)事求是的隨便扯點(diǎn)吧...去面試時(shí)可以先關(guān)注下該公司是否有做這個(gè)，根據(jù)情況往要點(diǎn)子上扯
6、HTTP狀態(tài)碼及其含義
解：
1開頭表示信息類：收到請求正在處理中
2開頭表示成功類：請求被正確接收，理解和處理，例如：200
3開頭表示重定向類：請求失敗
4開頭表示客戶端錯(cuò)誤：請求有錯(cuò)誤，例如：404代表請求內(nèi)容不存在
5開頭表示服務(wù)器錯(cuò)誤：服務(wù)器不能完成對請求的處理：如 500
7、設(shè)置元素浮動(dòng)后，該元素的display值是多少
解：
var oBox = document.querySelector('#box');
console.log(getComputedStyle(oBox, "null")['display']);// block
// PS：猛一瞅這題嚇我一跳，難道不是block嗎，事實(shí)就是block...
8、請描述cookie、sessionStorage、localStorage的區(qū)別
解：
同：
都是保存在瀏覽器端，且同源的（同協(xié)議，同域名和同端口）
異：
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞，sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存；
cookie數(shù)據(jù)有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下；
cookie數(shù)據(jù)不能超過4k，同時(shí)因?yàn)槊看蝖ttp請求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)，sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大；
數(shù)據(jù)有效期不同，sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持，localStorage始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)，cookie在設(shè)置的過期時(shí)間之前一直有效；
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面，localStorage 在所有同源窗口中都是共享的，cookie也是在所有同源窗口中都是共享的；
Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者，其api接口使用更方便
9、請解釋你對盒模型的理解，以及如何在CSS中告訴瀏覽器使用不同的盒模型來渲染你的布局
解：
W3C標(biāo)準(zhǔn)盒子模型：寬是寬，高是高
IE盒子模型：寬高包括padding和border
box-sizing: border-box;// 變?yōu)镮E盒子模型
10、下面的語句的返回值是什么
var a = 6;
setTimeout(function(){
alert(a);
a = 666;
}, 1000);
a = 66;
解：
是66，setTimeout是異步的
11、CSS選擇符有class選擇符，還有另外兩種是什么，按優(yōu)先級(jí)
解：
選擇符多了去了，后代、兄弟、屬性，這里問的應(yīng)該是常用的ID和標(biāo)簽，優(yōu)先級(jí)：ID、class、標(biāo)簽
12、前端頁面有行為層JS和另外兩個(gè)層是什么，作用是什么
解：
HTML（結(jié)構(gòu)）和CSS（樣式），假如蓋一個(gè)樓：HTML就是整體樓空蕩蕩的框架，CSS相當(dāng)于粉刷裝修，JS就是給屋子里面通電后，電視機(jī)，空調(diào)，電腦等一系列功能性的東西
13、你做的頁面在哪些內(nèi)核瀏覽器測試過，說出3種
解：
Trident(IE內(nèi)核)
Gecko(Firefox內(nèi)核)
Webkit(Safari內(nèi)核)
14、在jQuery中被譽(yù)為工廠函數(shù)的是
解：
$()
我的第一印象以為是要問工具方法有哪些：$.extend()、$.type()、$.proxy()
15、要?jiǎng)討B(tài)改變層中內(nèi)容可以使用的方法有
解：
innerHTML/innerText
16、當(dāng)按鍵盤A時(shí)，使用onkeydown事件打印even.keyCode的結(jié)果是
解：
65
17、能設(shè)置或返回下拉列表中被選選項(xiàng)的索引號(hào)是什么屬性
解：
selectedIndex
18、希望圖片具有”提交”按鈕同樣的功能,該如何編寫表單提交
解：
在圖片的onClick事件中手動(dòng)提交
19、ping基于什么協(xié)議
解：
// 漲姿勢了
ICMP：Internet控制報(bào)文協(xié)議。它是TCP/IP協(xié)議族的一個(gè)子協(xié)議，用于在IP主機(jī)、路由器之間傳遞控制消息
20、JS如何操作select中的值
解：
// http://www.cnblogs.com/jiujiaoyangkang/p/6797315.html
21、console.log(1&&2)和console.log(1||2)結(jié)果是
解：
2和1，"&&"是同真才為真，開始1是真，還不能確定最終的結(jié)果，所以會(huì)繼續(xù)往下運(yùn)行是2，"||"是有真即真，1是真已經(jīng)能確定結(jié)果就不會(huì)往下走了
22、下面代碼的輸出結(jié)果
解：
window.val = 1;
var json = {
val: 10,
dbl: function(){
this.val *= 2;
}
};
json.dbl();// json.val = 20
var dbl = json.dbl;
dbl();// window.val = 2
json.dbl.call(window);// window.val = 4
console.log(window.val + json.val);// 24
(function(){
var val = 1;
var json = {
val: 10,
dbl: function(){
val *= 2;
}
};
json.dbl();
alert(json.val + val);// 12
}());
var foo = "Hello";
(function(){
var bar = " world";
alert(foo + bar);// Hello world
})();
alert(foo + bar);// Uncaught ReferenceError: bar is not defined
(function func(){
var a = b = 'res';
})();
console.log(b);// res
console.log(a);// a is not defined
23、請實(shí)現(xiàn)下列的findDocList方法
var docs = [
{
id: 1,
words: ['hello','world']
},
{
id: 2,
words: ['hello','kids']
},
{
id: 3,
words: ['hello','dogs']
}
];
findDocList(docs, ['hello']);// 文檔1，文檔2，文檔3
findDocList(docs, ['hello','world']);// 文檔1
解：
function findDocList(docs, arr){
for(var i = 0;i < docs.length; i++){
var oBar = false;
for(var j = 0;j < arr.length; j ++){
var str = arr[j];
if(docs[i].words.indexOf(str) == -1){
oBar = true;
}
}
if(!oBar){
console.log('文檔' + docs[i].id);
}
}
}
24、用JS寫一個(gè)繼承實(shí)例
解：
// 構(gòu)造函數(shù)A
function A() {
this.name = 'aaa';
}
A.prototype.showName = function() {
console.log(this.name);
};
// 構(gòu)造函數(shù)B
function B(){ /*...*/ }
// 繼承開始
B.prototype = new A();
B.prototype.constructor = B;
// 使用
var b1 = new B();
b1.showName();
25、移動(dòng)端如何適配不同手機(jī)屏幕，你的適配方案是什么
解：
百分比、REM、Flexible，后面展開說...
26、編寫JS深度克隆函數(shù)deepClone
解：
// 淺拷貝
var json1 = {
name: 'aaa',
age: 25,
data: {
a: 1,
b: 2
}
};
function copy(parent, child) {
var child = child || {};
for(var i in parent) {
child[i] = parent[i];
}
return child;
}
var json2 = copy(json1);
json2.data.a = 3;
console.log(json1.data.a);// json1.data.a受影響也變成3了
console.log(json2.data.a);
// 深拷貝：利用遞歸
var json1 = {
name: 'aaa',
age: 25,
data: {
a: 1,
b: 2
}
};
function deepCopy(parent, child) {
var child = child || {};// 并不是直接聲明一個(gè)新child為空{(diào)}，傳過來的就用傳過來的
for(var i in parent) {
if(typeof parent[i] === 'object') {
child[i] = (parent[i].constructor === Array) ? [] : {};// child.data = {};
deepCopy(parent[i], child[i]);// {a: 1,b: 2}，傳過去的是child.data的空json
}
else {
child[i] = parent[i];// child.data.a ...
}
}
return child;
}
var json2 = deepCopy(json1);
json2.data.a = 3;
console.log(json1.data.a);// json1.data.a不受影響，仍舊是1
console.log(json2.data.a);
27、有一個(gè)數(shù)組a = [8, 10, 30, 55, 78, 90, 1]，新建一個(gè)數(shù)組b，b從a中一次隨機(jī)選取一個(gè)元素，取完為止
解：
var a = [8, 10, 30, 55, 78, 90, 1];
var b = [];
for(var i=0; i<a.length; i++) {
var randomNum = Math.floor( Math.random() * a.length );
var newStr = a.splice( randomNum, 1 ).toString();
i --;// 注意splice后數(shù)組塌陷的問題
b.push( newStr );
}
console.log(b);
27、假設(shè)發(fā)現(xiàn)有一篇文章，var content = "大量文字..."，過濾其中的敏感詞匯，如何發(fā)現(xiàn)敏感詞匯并將其背景標(biāo)記為紅色
解：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>敏感詞高亮</title>
<style>
#div1 {
width: 330px;
height: 200px;
border: 10px solid #063;
font-size: 14px;
font-family: "微軟雅黑";
padding: 10px;
}
span {
background: #F0F;
}
</style>
<script>
window.onload = function() {
// 敏感詞
var arr = ['君子', '也'];
var oDiv = document.getElementById('div1');
var oTxt = oDiv.innerHTML;
for (var i = 0; i < arr.length; i++) {
oDiv.innerHTML = oTxt.split(arr[i]).join("<span>" + arr[i] + "</span>");
// 注意更新
oTxt = oDiv.innerHTML;
}
};
// ps：用正則應(yīng)該是更好的辦法，有時(shí)間再改吧
</script>
</head>
<body>
<div id="div1">
君子曰：學(xué)不可以已。 青，取之于藍(lán)，而青于藍(lán)；冰，水為之，而寒于水。木直中繩，輮以為輪，其曲中規(guī)，雖有槁暴，不復(fù)挺者，輮使之然也。故木受繩則直，金就礪則利，君子博學(xué)而日參省乎己，則知明而行無過矣。故不登高山，不知天之高也；不臨深溪，不知地之厚也；不聞先王之遺言，不知學(xué)問之大也。干、越、夷、貉之子，生而同聲，長而異俗，教使之然也。詩曰：「嗟爾君子，無恒安息。靖共爾位，好是正直。神之聽之，介爾景福。」神莫大于化道，福莫長于無禍。
</div>
</body>
</html>
28、請用JS實(shí)現(xiàn)數(shù)組的快速排序
解：
推薦阮一峰老師的文章快速排序的JS實(shí)現(xiàn)
// 在數(shù)據(jù)集之中，選擇一個(gè)元素作為"基準(zhǔn)"
// 所有小于"基準(zhǔn)"的元素，都移到"基準(zhǔn)"的左邊；所有大于"基準(zhǔn)"的元素，都移到"基準(zhǔn)"的右邊
// 對"基準(zhǔn)"左邊和右邊的兩個(gè)子集，不斷重復(fù)第一步和第二步，直到所有子集只剩下一個(gè)元素為止
var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
if(arr.length == 0) {
return [];
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);// 從索引n開始刪除m個(gè)元素，并返回刪除的元素，原來數(shù)組改變
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
}
else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
29、編寫sum()函數(shù)求和，非number類型參數(shù)需要進(jìn)行過濾
解：
function sum() {
var result = 0;
for(var i = 0; i < arguments.length; i ++) {
if(isNaN(arguments[i])){// 不是數(shù)字
continue;
}
result += arguments[i];
}
console.log(result);
}
sum(7, 'aaa', 8, 'bbb');
30、寫一個(gè)方法將字符串“abcdefg”逆序
解：
var str = "abcdefg";
function reverseStr(str) {
return str.split("").reverse().join("");
}
console.log( reverseStr(str) );
31、<input type="radio" name="hello">，讓radio為選中狀態(tài)
解：
// 注意兩種不同的書寫形式，jQuery中prop相當(dāng)于原生"."的操作形式，attr相當(dāng)于setAttribute
input.checked = true;
setAttribute('checked','checked');
32、HTML5為什么只需要寫<!DOCTYPE html>
解：
HTML5不基于SGML,因此不需要對DTD進(jìn)行引用，只需要doctype來規(guī)范瀏覽器的行為即可。
33、
解：
link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載
link是XHTML標(biāo)簽，是普通DOM節(jié)點(diǎn)，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持
34、HTML5離線緩存有幾種方式
解：
localStorage和sessionStorage兩種
35、Doctype作用，標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別
解：
作用：告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔
區(qū)別：標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行，兼容模式顧名思義...
36、如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景
解：
// 使用足夠大的純色內(nèi)陰影來覆蓋默認(rèn)的背景色
input: -webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
// 或者關(guān)閉這個(gè)自帶功能
autocomplete=‘off’
37、介紹JS的基本數(shù)據(jù)類型
解：
基本：number、string、boolean、null、undefined
引用：object
38、如何將字符串轉(zhuǎn)換為數(shù)字，例如"12.3b"
解：
parseInt/parseFloat
39、如何將浮點(diǎn)數(shù)點(diǎn)左邊的數(shù)12000000.11每3位添加一個(gè)逗號(hào)
解：
// 試著先理解，關(guān)于正則后面專門再寫吧
var num = 12000000.11;
function addDot(num) {
// ?=表示“只能是”，(\d{3})+：表示3的倍數(shù)個(gè)數(shù)字
return num && num.toString().replace( /(\d)(?=(\d{3})+\.)/g, function($1, $2) {
return $2 + ',';
} );
}
var newNum = addDot(num);
console.log(newNum);
40、實(shí)現(xiàn)數(shù)組的隨機(jī)排序，2種方法以上
解：
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.sort(function(num1, num2) {
// -1表示每次num1在num2的前面，1則相反，用Math.random()和0.5相比較，也就實(shí)現(xiàn)隨機(jī)的正反，即隨機(jī)排序
return Math.random() > 0.5 ? -1 : 1;
});
console.log(arr);
41、this在JS中如何工作的
解：
// case1：看方法名前面是否有點(diǎn)，有的話點(diǎn)前面是誰this就是誰
function fn(){
console.log(this);
}
var obj = {
fn:fn
};
fn();// this > window,嚴(yán)格模式下undefined
obj.fn();// this > obj
..........
function Person(){
this.name = "yangk";
}
Person.prototype.showName = function(){
console.log(this.name);
};
var p1 = new Person;
p1.showName();// this > p1
p1.__proto__.showName();// this > p1.__proto__
Person.prototype.showName();// this > p1.prototype
// case2：自執(zhí)行函數(shù)中的this永遠(yuǎn)是window，嚴(yán)格模式下是undefined
(function(){
console.log(this);// this > window
})();
~function(){
console.log(this);// this > window
}();
// case3：元素的某一個(gè)行為綁定一個(gè)方法，this > 元素
function fn(){
console.log(this);
}
oDiv.onclick = fn;
oDiv.onclick = fn();// 注意這里是執(zhí)行的返回結(jié)果返回！?。。。?！undefined
oDiv.onclick = function(){
fn();// this > window
};
// case4：使用call/apply強(qiáng)制改變this
var obj = {
fn: function(){
console.log(this);
}
};
obj.fn();// this > obj
obj.fn.call(12);// this > 12
.........
function sum(){
}
sum.call(100,100...)// 第一個(gè)參數(shù)是this，后面對應(yīng)接受的形參，沒有undefined
sum.call();//在非嚴(yán)格模式下，call的第一個(gè)參數(shù)不寫或者寫null/undefined，默認(rèn)的this都是window，嚴(yán)格模式下寫誰就是誰，寫null就是null，不寫是undefined
apply(obj,[...]);
42、請至少用兩種方法實(shí)現(xiàn)兩個(gè)變量對調(diào)，不借用第三個(gè)變量的情況下
解：
// 首先想到的是利用ES6的解構(gòu)賦值
var a = 'Aaa';
var b = 'Bbb';
[a, b] = [b, a];
console.log(a);
console.log(b);
// 下面這種方法適用a和b都是數(shù)字的情況，還可以用位運(yùn)算（^）有興趣的研究下
var a = 666;
var b = 888;
a = a + b;// 先變和
b = a - b;// 和減b自然等于a，然后賦給b
a = a - b;// 和減b，此時(shí)的b已經(jīng)是調(diào)換后的b了
console.log(a);
console.log(b);
// 把a(bǔ)變成一個(gè)JSON，也可以把a(bǔ)變成一個(gè)Array
var a = 'Aaa';
var b = 'Bbb';
a = {
a: b,
b: a// 此時(shí)的a還是'Aaa'
};
b = a.b;
a = a.a;
console.log(a);
console.log(b);
// 此方法神妙，不知道哪位大神想的，隨意感受下
var a = 'Aaa';
var b = 'Bbb';
a = [b, b = a][0];// b = a先執(zhí)行
console.log(a);
console.log(b);
43、實(shí)現(xiàn)一個(gè)300300的canvas畫布，內(nèi)含100100的紅色矩形
解：
var oCanvas = document.createElement("canvas");
// 注意canvas設(shè)置寬高的正確姿勢，不是oCanvas.style.width，其不是普通的DOM元素，有自己規(guī)則
oCanvas.width = 300;
oCanvas.height = 300;
document.body.appendChild(oCanvas);
var oGC = oCanvas.getContext('2d');
oGC.fillRect(50, 50, 100, 100);// L, T, W, H
oGC.fillStyle = "red";
44、用CSS或者JS實(shí)現(xiàn)物體的平移動(dòng)畫
解：
// CSS
利用transform:translate(x, y)
// JS
利用定時(shí)器
45、一個(gè)滿屏“品”字布局如何設(shè)計(jì)
解：
// 定位或浮動(dòng)，不具體寫了
46、::before雙冒號(hào)和單冒號(hào)的區(qū)別，解釋其作用
解：
// 偽對象選擇符和偽類選擇符，雙冒號(hào)是CSS3新增的，配合content在內(nèi)容最前面添加一些內(nèi)容
47、HTML5有哪些新特性
解：
// case1：新增/廢除了一些標(biāo)簽，例如新增header，廢除s、big
// case2：canvas
// case3：數(shù)據(jù)存儲(chǔ)
// case4：Web Socket
// ...
48、如何判斷變量是否是數(shù)組
解：
// typeof
// instanceof
// constructor
// Object.prototype.toString.call()
49、談?wù)剬﹂]包的理解
解：
// http://www.cnblogs.com/jiujiaoyangkang/p/5879384.html
50、列舉一下JS垃圾回收方法以及原理
解：
// 詳見JavaScript高級(jí)程序設(shè)計(jì)第78頁
