JavaScript面試經，offer拿到手軟

猿友 2020-09-28 10:31:19 瀏覽數 (2921)

反饋

文章來源于公眾號：猴哥說前端作者：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如何實現(xiàn)繼承？

原型鏈繼承，借用構造函數繼承，組合繼承，寄生式繼承，寄生組合繼承

請你談談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)）

判斷一個字符串中出現(xià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('出現(xiàn)次數最多的是:'+iIndex+'出現(xiàn)'+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)

經典面試題：實現(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()) => {
  // 對于傳入參數處理
  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拿到手軟的相關介紹了，希望對大家有所幫助。

JavaScript

0 人點贊

JavaScript面試經，offer拿到手軟