JavaScript的面試問答題有哪些

本篇內容介紹了“JavaScript的面試問答題有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

JavaScript的數據類型都有什么？

基本數據類型：String,Boolean,Number,Undefined,Null

引用數據類型：Object(Array,Date,RegExp,Function)

javascript中==和===的區別是什么？

==會自動進行類型轉換，===不會

例舉3種強制類型轉換和2種隱式類型轉換?

強制（parseInt,parseFloat,Number()）

隱式（==） 1==”1”//true

null==undefined//true

原生 JS 中 call()、apply()、bind() 方法有什么區別？

三個方法都可以改變函數運行時的 this 指向。

三個方法第一個參數都是函數調用執行時this 指向的對象。

call() 方法第二個參數是個可變參數，是函數調用執行時本身所需要的參數。

apply() 方法第二個參數是數組或arguments。call()與apply()都是立即調用函數執行，在運行時修改this指向。

bind()是返回一個新的函數，新函數的函數主體與原函數的函數主體一致，當新函數被調用時，函數體中 this 指向的是 bind() 方法第一個參數傳遞的對象，而bind() 方法不會影響原函數本身的 this 指向。

什么是閉包？特點是？

閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。

閉包的特點：

（1）作為一個函數變量的一個引用，當函數返回時，其處于激活狀態。

（2） 一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。

簡單的說，JavaScript 允許使用內部函數---即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。

事件委托是什么？

符合W3C標準的事件綁定 addEventLisntener /attachEvent

讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

如何阻止事件冒泡和默認事件

e. stopPropagation();//標準瀏覽器

event.canceBubble=true;//ie9之前

阻止默認事件：

為了不讓a點擊之后跳轉，我們就要給他的點擊事件進行阻止

return false

e.preventDefault();

document load 和document ready的區別？

Document.onload 是在結構和樣式加載完才執行js

window.onload：不僅僅要在結構和樣式加載完，還要執行完所有的樣式、圖片這些資源文件，全部加載完才會觸發window.onload事件

Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將, &, “進行轉義

return str.replace(/[”&]/g, function(match) {
    switch (match) {
      case “”:
          return “>”;
      case “&”:
          return “&”;
      case “\””:
         return “"”;
     }
  });
}

簡述創建函數的幾種方式

第一種（函數聲明）：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封閉之前 和封閉之后有什么區別？瀏覽器會如何解析它們？

如果說放在body的封閉之前，將會阻塞其他資源的加載

如果放在body封閉之后，不會影響body內元素的加載

iframe的優缺點？

優點：

1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2. Security sandbox

3. 并行加載腳本

缺點：

1. iframe會阻塞主頁面的Onload事件

2. 即時內容為空，加載也需要時間

3. 沒有語意

Javascript如何實現繼承？

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

請你談談Cookie的弊端？

缺點：

1.Cookie 數量和長度的限制。部分瀏覽器每個 domain 最多只能有50條 cookie，基本所有瀏覽器中每個 cookie 長度不能超過4KB，否則會被截掉。

2.安全性問題。如果 cookie 被人攔截了，那人就可以取得所有的 session 信息。即使加密也與事無補，因為攔截者并不需要知道 cookie 的意義，他只要原樣轉發 cookie 就可以達到目的了。

3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。

4.占用網絡上傳帶寬。每次請求服務器資源時，都會攜帶 cookie 信息向服務器傳遞。

DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

創建新節點

• createDocumentFragment() // 創建一個DOM片段

• createElement() // 創建一個具體的元素

• createTextNode() // 創建一個文本節點

添加、移除、替換、插入

• appendChild()

• removeChild()

• replaceChild()

• insertBefore() // 在已有的子節點前插入一個新的子節點

查找

• getElementsByTagName() // 通過標簽名稱

• getElementsByName() // 通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)

• getElementById() // 通過元素Id，唯一性

js延遲加載的方式有哪些？

1. defer和async

2. 動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack）

3. 按需異步載入js

documen.write和 innerHTML 的區別？

document.write 只能重繪整個頁面

innerHTML 可以重繪頁面的一部分

哪些操作會造成內存泄漏？

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。

1. setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

2. 閉包

3. 控制臺日志

4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

判斷一個字符串中出現次數最多的字符，統計這個次數?

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+'次');

數組扁平化

數組扁平化是指將一個多維數組變為一個一維數組

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(',');

但數據類型都會變為字符串

方法三：正則改良版本

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循環+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--，減少循環次數提升性能
        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;
}

類數組轉化為數組

類數組是具有length屬性，但不具有數組原型上的方法。常見的類數組有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（防抖）

觸發高頻時間后n秒內函數只會執行一次,如果n秒內高頻時間再次觸發,則重新計算時間。

const debounce = (fn, time) => {
  let timeout = null;
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, time);
  }
};

防抖常應用于用戶進行搜索輸入節約請求資源，window觸發resize事件時進行防抖只觸發一次。

throttle（節流）

高頻時間觸發,但n秒內只會執行一次,所以節流會稀釋函數的執行頻率。

const throttle = (fn, time) => {
  let flag = true;
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, time);
  }
}

節流常應用于鼠標不斷點擊觸發、監聽滾動事件。

函數珂里化

指的是將一個接受多個參數的函數 變為 接受一個參數返回一個函數的固定形式，這樣便于再次調用，例如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;
}

“JavaScript的面試問答題有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！