前端基礎(chǔ)JS的面試題及答案總結(jié)大全

更新時(shí)間：2026年05月18日 09:18:21 作者：南風(fēng)知我意957

作為前端開發(fā),JS是重中之重,最近結(jié)束了面試的高峰期,下面這篇文章主要介紹了前端基礎(chǔ)JS的面試題及答案總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

作者最近在往中級前端進(jìn)發(fā)，持續(xù)學(xué)習(xí)以保證自身競爭力，因此刷了一些面試題，有難有易，因此更一篇博文，與大家共同成長。

1. 隱式類型轉(zhuǎn)換

題目：請問輸出什么？為什么？

console.log([] == ![]);

結(jié)果：true

解釋：
!的優(yōu)先級比==高，所以先計(jì)算!，右邊得到false（對象轉(zhuǎn)布爾永遠(yuǎn)是true，取反得到false）
現(xiàn)在計(jì)算[] == false，js進(jìn)行比較時(shí)要先轉(zhuǎn)換為原始值，左邊轉(zhuǎn)換：[].tostring() = ‘’
現(xiàn)在變成’’ == false
在[]情況下，''和false都是0，所以得到true

2.this 指向

題目：請問輸出什么？

const User = {
  name: '張三',
  sayName: function() {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  }
};

User.sayName();      
User.sayNameArrow();

輸出：
張三
undefined

解釋：
這是一個(gè)this的指向性問題，sayName由于是function函數(shù)，因此它的this指向User，所以打印張三
而sayNameArrow是箭頭函數(shù)，箭頭函數(shù)沒有自己的this，所以指向全局，全局對象是沒有name的，因此打印undefined

3.閉包實(shí)戰(zhàn)

面試場景：面試官問“你寫過防抖嗎？”這不僅僅是考代碼，是考你對閉包的應(yīng)用。
場景描述：用戶在搜索框瘋狂打字，每打一個(gè)字就發(fā)一次 API 請求，服務(wù)器炸了。你需要做一個(gè)機(jī)制：等用戶停手 500ms 后再發(fā)請求。

function debounce(fn, delay) {
  let timer = null; 
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

閉包的定義：debounce 函數(shù)執(zhí)行完了，按理說 timer 變量應(yīng)該被垃圾回收銷毀。
神奇之處：但因?yàn)榉祷氐哪莻€(gè)新函數(shù)引用了 timer，所以 timer 被迫留在了內(nèi)存里。
實(shí)際效果：每次你打字調(diào)用這個(gè)返回的函數(shù)，它們訪問的都是同一個(gè) timer。這就是閉包最大的作用——保存狀態(tài)。

4.事件冒泡

場景：你需要給一個(gè)無限滾動(dòng)的長列表（比如 10,000 個(gè)商品）綁定點(diǎn)擊事件，點(diǎn)擊跳轉(zhuǎn)詳情。

ul.addEventListener('click', function(e) {
  // e.target 是你實(shí)際點(diǎn)擊的那個(gè)小元素（比如 li 里面的 span）
  // 核心：利用事件冒泡，往上找，看看是不是 li
  if (e.target.tagName === 'LI') {
    console.log('點(diǎn)擊了', e.target.innerText);
  }
});

事件在 DOM 中像泡泡一樣，從最底層的元素（Target）一直往上冒（Bubble）到父元素。我們只需要像“守門員”一樣站在父元素門口，不管下面誰被點(diǎn)了，泡泡總會(huì)冒上來被我抓到。

5.let和var

題目：下面代碼打印什么

var name = 'World';
(function() {
  if (typeof name === 'undefined') {
    var name = 'Jack'; // 注意這里用了 var
    console.log('Goodbye ' + name);
  } else {
    console.log('Hello ' + name);
  }
})();

結(jié)果：Goodbye Jack

var賦值的變量會(huì)被提升到頂層，此時(shí)它在函數(shù)內(nèi)部，但是聲明被提升到了頂層，因此name在外面就變成了undefined，所以進(jìn)入了if分支，重新被賦值，從而打印出Goodbye Jack。

6. 連等賦值

題目：下面的代碼輸出什么？

let a = { n: 1 };
let b = a;
a.x = a = { n: 2 };

console.log(a.x);
console.log(b.x);

結(jié)果：
undefined
{ n: 2 }

js中.的優(yōu)先級高于=，因此a.x 先準(zhǔn)備好，指向了堆內(nèi)存中 {n:1} 這個(gè)對象的一個(gè)新屬性 x（此時(shí)為undefined），然后a = { n: 2 } 執(zhí)行，變量 a 的指針變了，指向了新對象。最后執(zhí)行賦值，把 {n:2} 賦給第一步中準(zhǔn)備好的那個(gè) x。但是b 依然指向舊對象（現(xiàn)在舊對象變成了 {n:1, x: {n:2}}），而 a 指向了新對象 {n:2}（新對象里沒有 x）。

7.類型轉(zhuǎn)換與運(yùn)算

題目：下面代碼會(huì)打印什么

console.log(1 + "1");
console.log(1 - "1");

結(jié)果：
11
0

解釋：加號 (+)：如果有一方是字符串，它就變成字符串拼接。1 變成了 “1”。
減號 (-)：它會(huì)盡最大努力把兩邊都轉(zhuǎn)成數(shù)字進(jìn)行數(shù)學(xué)運(yùn)算。“1” 變成了數(shù)字 1。

8.JSON鍵的理解

題目：下面代碼會(huì)打印什么

var a = {}, b = '123', c = 123;
a[b] = 'b';
a[c] = 'c';
console.log(a[b]);

結(jié)果：c

解釋：因?yàn)閖son的鍵名只能是字符串，所以a[c]實(shí)際上是添加了一個(gè)‘123’：‘c’。打印自然也是c

9. 原型鏈

題目：下面的代碼打印什么

function Foo() {
  Foo.a = function() { console.log(1) }; // 靜態(tài)方法
  this.a = function() { console.log(2) }; // 實(shí)例方法
}
Foo.prototype.a = function() { console.log(3) }; // 原型方法

Foo.a = function() { console.log(4) }; // 覆蓋靜態(tài)方法

Foo.a();
let obj = new Foo();
obj.a();

結(jié)果：
4
2

解釋：Foo.a()：調(diào)用的是構(gòu)造函數(shù)上的靜態(tài)屬性。它先被定義打印 1，后被覆蓋打印 4。
obj.a()：new 出來的實(shí)例 obj。查找屬性遵循：實(shí)例自身 -> 原型鏈。因?yàn)闃?gòu)造函數(shù)里 this.a 給實(shí)例自身加了方法，所以直接執(zhí)
行，打印 2。如果構(gòu)造函數(shù)里沒寫 this.a，才會(huì)去原型上找打印 3。

10.數(shù)組拍平

場景：把數(shù)組[1, [2, [3, 4]]]變?yōu)椋篬1, 2, 3, 4]

const arr = [1, [2, [3, 4]]];

function flatten(ary) {
  return ary.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, []);
}
console.log(flatten(arr));