文章來源于公眾號:猴哥說前端 作者:monkeysoft
本文給大家分享一些 JavaScript 面試經驗,在這金九銀十的招聘季,希望大家都能找到滿意的工作。
JavaScript的數(shù)據(jù)類型都有什么?
基本數(shù)據(jù)類型:String,Boolean,Number,Undefined,Null
引用數(shù)據(jù)類型:Object(Array,Date,RegExp,Function)
javascript中==
和===
的區(qū)別是什么?
==
會自動進行類型轉換,===
不會
例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,Number())
隱式(==
) 1==”1”//true
null==undefined//true
原生 JS 中 call()、apply()、bind() 方法有什么區(qū)別?
三個方法都可以改變函數(shù)運行時的 this 指向。
三個方法第一個參數(shù)都是函數(shù)調用執(zhí)行時this 指向的對象。
call() 方法第二個參數(shù)是個可變參數(shù),是函數(shù)調用執(zhí)行時本身所需要的參數(shù)。
apply() 方法第二個參數(shù)是數(shù)組或arguments。call()與apply()都是立即調用函數(shù)執(zhí)行,在運行時修改this指向。
bind()是返回一個新的函數(shù),新函數(shù)的函數(shù)主體與原函數(shù)的函數(shù)主體一致,當新函數(shù)被調用時,函數(shù)體中 this 指向的是 bind() 方法第一個參數(shù)傳遞的對象,而bind() 方法不會影響原函數(shù)本身的 this 指向。
什么是閉包?特點是?
閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環(huán)境的表達式(通常是一個函數(shù)),因而這些變量也是該表達式的一部分。
閉包的特點:
(1)作為一個函數(shù)變量的一個引用,當函數(shù)返回時,其處于激活狀態(tài)。
(2) 一個閉包就是當一個函數(shù)返回時,一個沒有釋放資源的棧區(qū)。
簡單的說,JavaScript 允許使用內部函數(shù)---即函數(shù)定義和函數(shù)表達式位于另一個函數(shù)的函數(shù)體內。而且,這些內部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內部函數(shù)。當其中一個這樣的內部函數(shù)在包含它們的外部函數(shù)之外被調用時,就會形成閉包。
事件委托是什么?
符合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)
為了保證頁面輸出安全,我們經常需要對一些特殊的字符進行轉義,請寫一個函數(shù)escapeHtml,將, &, “進行轉義
return str.replace(/[”&]/g, function(match) {
switch (match) {
case “”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
簡述創(chuàng)建函數(shù)的幾種方式
第一種(函數(shù)聲明):function sum1(num1,num2){ return num1+num2; }
第二種(函數(shù)表達式):var sum2 = function(num1,num2){ return num1+num2; }
第三種(函數(shù)對象方式):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如何實現(xiàn)繼承?
原型鏈繼承,借用構造函數(shù)繼承,組合繼承,寄生式繼承,寄生組合繼承
請你談談Cookie的弊端?
缺點:
1.Cookie 數(shù)量和長度的限制。部分瀏覽器每個 domain 最多只能有50條 cookie,基本所有瀏覽器中每個 cookie 長度不能超過4KB,否則會被截掉。
2.安全性問題。如果 cookie 被人攔截了,那人就可以取得所有的 session 信息。即使加密也與事無補,因為攔截者并不需要知道 cookie 的意義,他只要原樣轉發(fā) cookie 就可以達到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如,為了防止重復提交表單,我們需要在服務器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端,那么它起不到任何作用。
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容錯能力較強,會得到一個數(shù)組,其中包括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 可以重繪頁面的一部分
哪些操作會造成內存泄漏?
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象,并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環(huán)的,那么該對象的內存即可回收。
- setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話,會引發(fā)內存泄漏。
- 閉包
- 控制臺日志
- 循環(huán)(在兩個對象彼此引用且彼此保留時,就會產生一個循環(huán))
判斷一個字符串中出現(xiàn)次數(shù)最多的字符,統(tǒng)計這個次數(shù)?
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('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');
數(shù)組扁平化
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐粋€一維數(shù)組
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(',');
但數(shù)據(jù)類型都會變?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);
方法五:函數(shù)遞歸
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);
數(shù)組去重
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)次數(shù)提升性能
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;
}
類數(shù)組轉化為數(shù)組
類數(shù)組是具有l(wèi)ength屬性,但不具有數(shù)組原型上的方法。常見的類數(shù)組有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秒內函數(shù)只會執(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é)流會稀釋函數(shù)的執(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)聽滾動事件。
函數(shù)珂里化
指的是將一個接受多個參數(shù)的函數(shù) 變?yōu)?接受一個參數(shù)返回一個函數(shù)的固定形式,這樣便于再次調用,例如f(1)(2)
經典面試題:實現(xiàn)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()) => {
// 對于傳入?yún)?shù)處理
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拿到手軟的相關介紹了,希望對大家有所幫助。