文章來源于公眾號：猴哥說前端 作者：monkeysoft
本文給大家分享一些 JavaScript 面試經驗，在這金九銀十的招聘季，希望大家都能找到滿意的工作。
JavaScript的數據類型都有什么？
基本數據類型：String,Boolean,Number,Undefined,Null
引用數據類型：Object(Array,Date,RegExp,Function)
javascript中==和===的區(qū)別是什么？
==會自動進行類型轉換，===不會
例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,Number()）
隱式（==） 1==”1”//true
null==undefined//true
原生 JS 中 call()、apply()、bind() 方法有什么區(qū)別？
三個方法都可以改變函數運行時的 this 指向。
三個方法第一個參數都是函數調用執(zhí)行時this 指向的對象。
call() 方法第二個參數是個可變參數，是函數調用執(zhí)行時本身所需要的參數。
apply() 方法第二個參數是數組或arguments。call()與apply()都是立即調用函數執(zhí)行，在運行時修改this指向。
bind()是返回一個新的函數，新函數的函數主體與原函數的函數主體一致，當新函數被調用時，函數體中 this 指向的是 bind() 方法第一個參數傳遞的對象，而bind() 方法不會影響原函數本身的 this 指向。
什么是閉包？特點是？
閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。
閉包的特點：
（1）作為一個函數變量的一個引用，當函數返回時，其處于激活狀態(tài)。
（2） 一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區(qū)。
簡單的說，JavaScript 允許使用內部函數---即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。
事件委托是什么？
符合W3C標準的事件綁定 addEventLisntener /attachEvent
讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！
如何阻止事件冒泡和默認事件
e. stopPropagation();//標準瀏覽器
event.canceBubble=true;//ie9之前
阻止默認事件：
為了不讓a點擊之后跳轉，我們就要給他的點擊事件進行阻止
return false
e.preventDefault();
document load 和document ready的區(qū)別？
Document.onload 是在結構和樣式加載完才執(zhí)行js
window.onload：不僅僅要在結構和樣式加載完，還要執(zhí)行完所有的樣式、圖片這些資源文件，全部加載完才會觸發(fā)window.onload事件
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)
為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將, &, “進行轉義
return str.replace(/[”&]/g, function(match) {
switch (match) {
case “”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}簡述創(chuàng)建函數的幾種方式
第一種（函數聲明）：function sum1(num1,num2){ return num1+num2; }
第二種（函數表達式）：var sum2 = function(num1,num2){ return num1+num2; }
第三種（函數對象方式）：var sum3 = new Function("num1","num2","return num1+num2");
把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會如何解析它們？
如果說放在body的封閉之前，將會阻塞其他資源的加載
如果放在body封閉之后，不會影響body內元素的加載
iframe的優(yōu)缺點？
優(yōu)點：
- 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
- Security sandbox
- 并行加載腳本
缺點：
- iframe會阻塞主頁面的Onload事件
- 即時內容為空，加載也需要時間
- 沒有語意
Javascript如何實現繼承？
原型鏈繼承，借用構造函數繼承，組合繼承，寄生式繼承，寄生組合繼承
請你談談Cookie的弊端？
缺點：
1.Cookie 數量和長度的限制。部分瀏覽器每個 domain 最多只能有50條 cookie，基本所有瀏覽器中每個 cookie 長度不能超過4KB，否則會被截掉。
2.安全性問題。如果 cookie 被人攔截了，那人就可以取得所有的 session 信息。即使加密也與事無補，因為攔截者并不需要知道 cookie 的意義，他只要原樣轉發(fā) cookie 就可以達到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
4.占用網絡上傳帶寬。每次請求服務器資源時，都會攜帶 cookie 信息向服務器傳遞。
DOM操作——怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點?
創(chuàng)建新節(jié)點
- createDocumentFragment() // 創(chuàng)建一個DOM片段
- createElement() // 創(chuàng)建一個具體的元素
- createTextNode() // 創(chuàng)建一個文本節(jié)點
添加、移除、替換、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() // 在已有的子節(jié)點前插入一個新的子節(jié)點
查找
- getElementsByTagName() // 通過標簽名稱
- getElementsByName() // 通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)
- getElementById() // 通過元素Id，唯一性
js延遲加載的方式有哪些？
- defer和async
- 動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）
- 按需異步載入js
documen.write和 innerHTML 的區(qū)別？
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
哪些操作會造成內存泄漏？
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環(huán)的，那么該對象的內存即可回收。
- setTimeout 的第一個參數使用字符串而非函數的話，會引發(fā)內存泄漏。
- 閉包
- 控制臺日志
- 循環(huán)（在兩個對象彼此引用且彼此保留時，就會產生一個循環(huán)）
判斷一個字符串中出現次數最多的字符，統(tǒng)計這個次數?
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');數組扁平化
數組扁平化是指將一個多維數組變?yōu)橐粋€一維數組
const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]方法一：使用flat()
const res1 = arr.flat(Infinity);方法二：利用正則
const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');但數據類型都會變?yōu)樽址?/p>
方法三：正則改良版本
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');方法四：使用reduce
const flatten = arr => {
return arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
}, [])
}
const res4 = flatten(arr);方法五：函數遞歸
const res5 = [];
const fn = arr => {
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
fn(arr[i]);
} else {
res5.push(arr[i]);
}
}
}
fn(arr);數組去重
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]方法一：利用Set
const res1 = Array.from(new Set(arr));方法二：兩層for循環(huán)+splice
const unique1 = arr => {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
// 每刪除一個樹，j--保證j的值經過自加后不變。同時，len--，減少循環(huán)次數提升性能
len--;
j--;
}
}
}
return arr;
}方法三：利用indexOf
const unique2 = arr => {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
}
return res;
}方法四：利用include
const unique3 = arr => {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) res.push(arr[i]);
}
return res;
}方法五：利用filter
const unique4 = arr => {
return arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
}方法六：利用Map
const unique5 = arr => {
const map = new Map();
const res = [];
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i], true)
res.push(arr[i]);
}
}
return res;
}類數組轉化為數組
類數組是具有l(wèi)ength屬性，但不具有數組原型上的方法。常見的類數組有arguments、DOM操作方法返回的結果。
方法一：Array.from
Array.from(document.querySelectorAll('div'))方法二：Array.prototype.slice.call()
Array.prototype.slice.call(document.querySelectorAll('div'))方法三：擴展運算符
[...document.querySelectorAll('div')]方法四：利用concat
Array.prototype.concat.apply([], document.querySelectorAll('div'));debounce（防抖）
觸發(fā)高頻時間后n秒內函數只會執(zhí)行一次,如果n秒內高頻時間再次觸發(fā),則重新計算時間。
const debounce = (fn, time) => {
let timeout = null;
return function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, time);
}
};防抖常應用于用戶進行搜索輸入節(jié)約請求資源，window觸發(fā)resize事件時進行防抖只觸發(fā)一次。
throttle（節(jié)流）
高頻時間觸發(fā),但n秒內只會執(zhí)行一次,所以節(jié)流會稀釋函數的執(zhí)行頻率。
const throttle = (fn, time) => {
let flag = true;
return function() {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}節(jié)流常應用于鼠標不斷點擊觸發(fā)、監(jiān)聽滾動事件。
函數珂里化
指的是將一個接受多個參數的函數 變?yōu)?接受一個參數返回一個函數的固定形式，這樣便于再次調用，例如f(1)(2)
經典面試題：實現add(1)(2)(3)(4)=10; 、 add(1)(1,2,3)(2)=9;
function add() {
const _args = [...arguments];
function fn() {
_args.push(...arguments);
return fn;
}
fn.toString = function() {
return _args.reduce((sum, cur) => sum + cur);
}
return fn;
}深拷貝
遞歸的完整版本（考慮到了Symbol屬性）：
const cloneDeep1 = (target, hash = new WeakMap()) => {
// 對于傳入參數處理
if (typeof target !== 'object' || target === null) {
return target;
}
// 哈希表中存在直接返回
if (hash.has(target)) return hash.get(target);
const cloneTarget = Array.isArray(target) ? [] : {};
hash.set(target, cloneTarget);
// 針對Symbol屬性
const symKeys = Object.getOwnPropertySymbols(target);
if (symKeys.length) {
symKeys.forEach(symKey => {
if (typeof target[symKey] === 'object' && target[symKey] !== null) {
cloneTarget[symKey] = cloneDeep1(target[symKey]);
} else {
cloneTarget[symKey] = target[symKey];
}
})
}
for (const i in target) {
if (Object.prototype.hasOwnProperty.call(target, i)) {
cloneTarget[i] =
typeof target[i] === 'object' && target[i] !== null
? cloneDeep1(target[i], hash)
: target[i];
}
}
return cloneTarget;
}
以上就是W3Cschool編程獅關于JavaScript面試經，offer拿到手軟的相關介紹了，希望對大家有所幫助。
