js前端面試題總結及答案
轉載https://yeaseonzhang.github.io/
“金三銀四，金九銀十”，用來形容求職最好的幾個月。但是隨著行業的飽和，初中級前端er就業形勢不容樂觀。
行業狀態不可控，我們能做的當然只是讓自己變得更加具有競爭力。
今年自己也用了幾個月的時間來準備筆記面試，鞏固基礎知識。特此將自己在這個過程總結的題目分享出來，希望對於求職和準備求職的同學有所幫助。
CSS
列舉不同的清除浮動的技巧
12345678910111213141516171819202122232425262728 |
/* 1.新增新元素 */<div class="outer"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="clearfix"></div></div>.clearfix { clear: both;}/* 2.為父元素增加樣式 */.clearfix { overflow: auto; zoom: 1; // 處理相容性}/* 3.:after 偽元素方法 (作用於父元素) */.outer { zoom: 1; &:after { display: block; height: 0; clear: both; content: '.'; visibillity: hidden; }} |
一畫素邊框
使用sass語法。
12345678910111213141516171819202122232425262728293031323334 |
/* 定義 */@mixin border-1px ($color) { position: relative; &:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid $color; context: ''; }}@media (-webkit-min-device-pixel-radio: 1.5), (min-device-pixel-radio: 1.5) { border-1px { &:after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } }}@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) { border-1px { &:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } }}/* 使用方式 */@inclue border-1px(rgba(7, 17, 27, .1)); |
形成BFC(Block Formatting Context)的幾種方式
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。
float為left|rightoverflow為hidden|auto|scrolldisplay為table-cell|table-caption|inline-blockposition為absolute|fixed
佈局
-
左定寬右自適應寬度，並且等高佈局(最小高度200px)
123456789101112131415161718192021222324252627282930 |
/* HTML */<div class="container"> <div class="left">Left silder</div> <div class="content">Main content</div></div>/* CSS */.container { overflow: hidden;}.left { float: left； width: 200px; margin-bottom: -9999px; padding-bottom: 9999px; background-color: #eee;}.content { margin-left: 200px; margin-bottom: -9999px; padding-bottom: 9999px; background-color: #ccc;}.left, .content { min-height: 200px; height: auto !important;}
|
JS
async與defer區別
非同步(async) 指令碼將在其載入完成後立即執行，而 延遲(defer) 指令碼將等待 HTML 解析完成後，並按載入順序執行。
location.replace()與location.asign()區別
location.replace()的url不會出現在history中
new操作符
- 建立一個空物件，並且
this變數引用該物件，同時還繼承了 該函式的原型 - 屬性和方法被加入到
this引用的物件中 - 新建立的物件由
this所引用，並且最後隱式的返回this
AMD CMD CommonJS
12345678910111213141516171819 |
/* AMD是RequireJS對模組化的定義 * CMD是seaJS對模組化的定義 * CommonJS是Node對模組化的規範 **//* AMD 依賴關係前置 */define(['./a', './b'], function (a, b) { a.something(); b.something();})/* CMD 按需載入，依賴就近 */define(function (require, exports, module) { var a = require('./a'); a.something(); var b = require('./b'); b.something();})
|
DOM 操作
123456789101112131415161718 |
// 建立節點createDocumentFragment()createElement()createTextNode()// 新增 移除 替換 插入appendChild()removeChild()replaceChild()insertBefore()// 查詢getElementsByTagName()getElementsByName()getElementsByClassName()getElementById()querySelector()querySelectorAll() |
JS設定css樣式的幾種方式
1234567891011121314 |
/* 1.直接設定style屬性 */element.style.height = '100px';/* 2.直接設定屬性 */element.setAttribute('height', '100px');/* 3.使用setAttribute設定style屬性 */element.setAttribute('style', 'height: 100px !important');/* 4.使用setProperty設定屬性，通過第三個引數設定important */element.style.setProperty('height', '300px', 'important');/* 5.設定cssText */element.style.cssText += 'height: 100px !important';
|
阻止預設行為
12345678910 |
function stopDefault( e ) { // 阻止預設瀏覽器動作(W3C) if ( e && e.preventDefault ) { e.preventDefault(); } else { // IE中阻止函式器預設動作的方式 window.event.returnValue = false; } return false;}
|
阻止冒泡
12345678910 |
function stopBubble(e) { // 如果提供了事件物件，則這是一個非IE瀏覽器 if ( e && e.stopPropagation ) { // 因此它支援W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否則，我們需要使用IE的方式來取消事件冒泡 window.event.cancelBubble = true; }}
|
Ajax互動過程
- 建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.
- 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊.
- 設定響應HTTP請求狀態變化的函式.
- 傳送HTTP請求.
- 獲取非同步呼叫返回的資料.
- 使用JavaScript和DOM實現區域性重新整理.
考察知識點最廣的JS面試題
1234567891011121314151617 |
function Foo() { getName = function () { alert(1); } return this;}Foo.getName = function () { alert(2); }Foo.prototype.getName = function () { alert(3); }var getName = function () { alert(4); }function getName () { alert(5); }/* 寫出輸出 */Foo.getName();getName();Foo().getName();getName();new Foo.getName();new Foo().getName();new new Foo().getName();
|
JS陣列深淺拷貝
slice實現
12345678 |
var arr = ['old', 1, true, null, undefined];var new_arr = arr.slice();new_arr[0] = 'new';console.log(arr) // ["old", 1, true, null, undefined]console.log(new_arr) // ["new", 1, true, null, undefined] |
concat實現
12345678 |
var arr = ['old', 1, true, null, undefined];var new_arr = arr.concat();new_arr[0] = 'new';console.log(arr) // ["old", 1, true, null, undefined]console.log(new_arr) // ["new", 1, true, null, undefined] |
以上兩種方法只是淺拷貝，如果陣列元素是基本型別，就會拷貝一份新的；但是如果陣列元素是物件或者陣列，就只會拷貝引用（類似指標），修改其中一個就會影響另外一個。
123456789 |
var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];var new_arr = arr.concat();new_arr[0] = 'new';new_arr[3][0] = 'new1';console.log(arr) // ["old", 1, true, ['new1', 'old2'], {old: 1}]console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]
|
JSON.stringify實現陣列深拷貝
123456789 |
var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];var new_arr = JSON.parse(JSON.stringify(arr));new_arr[0] = 'new';new_arr[3][0] = 'new1';console.log(arr) // ["old", 1, true, ['old1', 'old2'], {old: 1}]console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]
|
簡單粗暴，但是問題是不能拷貝函式，不推薦。
然後我們來手動實現深淺拷貝。
- 淺拷貝
12345678910111213 |
var shallowCopy = function (obj) { // 判斷是否是陣列或者物件 if (typeof obj !== 'object') { return } var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj;}
|
- 深拷貝
123456789101112 |
var deepCopy = function (obj) { if (typeof obj !== 'object') { return } var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]; } } return newObj}
|
陣列去重
filter+indexOf
123456 |
function unique (arr) { var res = arr.filter(function (item, index, array) { return array.indexOf(item) === index; }) return res;}
|
filter+sort
12345 |
function unique (arr) { return arr.concat().sort().filter(function (item, index, array) { return !index || item !== array[index - 1]; })}
|
ES6
123 |
function uniqu3 (arr) { return [... new Set(arr)];}
|
找出陣列中的最大值
reduce
1234567 |
var arr = [6, 4, 1, 8, 2, 11, 3];function max (prev, next) { return Math.max(prev, next)}console.log(arr.reduce(max));
|
apply
123 |
var arr = [6, 4, 1, 8, 2, 11, 3];console.log(Math.max.apply(null, arr)); |
ES6
1234567 |
var arr = [6, 4, 1, 8, 2, 11, 3];function max (arr) { return Math.max(...arr);}console.log(max(arr));
|