Javascript面試題及詳細答案150道之（016-030）

《前后端面試題》專欄集合了前后端各個知識模塊的面試題，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面試題-專欄總目錄

在這里插入圖片描述

文章目錄

  • 一、本文面試題目錄
      • 16. Symbol 有什么作用？
      • 17. 什么是內存泄漏？
      • 18. 什么是垃圾回收機制？
      • 19. 事件循環（event loop）是什么？
      • 20. 什么是微任務和宏任務？
      • 21. 解釋節流函數 throttle 的實現原理
      • 22. 如何實現函數防抖（debounce）？
      • 23. 什么是淺拷貝和深拷貝？
      • 24. 什么是立即執行函數（IIFE）？有什么作用？
      • 25. 如何將字符串轉換為數字？
      • 26. 如何判斷一個值是否為 NaN？
      • 27. 數組扁平化的方法有哪些？
      • 28. 什么是函數柯里化（Currying）？舉例說明
      • 29. 什么是擴展運算符（...）？有哪些用途？
      • 30. 如何交換兩個變量的值（不使用臨時變量）？
  • 二、150道面試題目錄列表

一、本文面試題目錄

16. Symbol 有什么作用？

Symbol用于創建獨一無二的值，常用于對象屬性名，可避免屬性名沖突。例如：

const key1 = Symbol('key1');
const key2 = Symbol('key1');
let obj = {};
obj[key1] = 'value1';
obj[key2] = 'value2';
console.log(obj[key1]); // value1
console.log(obj[key2]); // value2
console.log(key1 === key2); // false

17. 什么是內存泄漏？

內存泄漏是指程序中不再使用的對象仍然被引用，導致內存無法被垃圾回收機制釋放，從而造成內存浪費。常見場景有全局變量未及時清理、閉包使用不當、定時器未清除、DOM引用未釋放等。

18. 什么是垃圾回收機制？

瀏覽器通常采用標記清除算法或引用計數算法來實現垃圾回收。標記清除算法會先標記所有活動對象（被引用的對象），然后清除未被標記的對象（不再被引用的對象）占用的內存。引用計數算法是通過記錄對象的引用次數，當引用次數為0時，就回收該對象的內存，但這種算法存在循環引用的問題。

19. 事件循環（event loop）是什么？

事件循環是JavaScript實現非阻塞編程的機制。主線程先執行同步任務，當同步任務執行完后，會將異步任務產生的回調放入任務隊列中。事件循環會不斷檢查任務隊列，將符合條件的任務（宏任務或微任務）放入主線程執行。微任務會在當前同步任務執行完后立即執行，宏任務則是在微任務隊列清空后執行。例如：

console.log('start');
setTimeout(() => {console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {console.log('promise then');
});
console.log('end');
// 輸出：start -> end -> promise then -> setTimeout

20. 什么是微任務和宏任務？

  • 微任務：通常在當前同步任務執行完后立即執行，常見的微任務有Promise.then、MutationObserver等。
  • 宏任務：會在微任務隊列清空后執行，常見的宏任務有setTimeout、setInterval、requestAnimationFrame、DOM渲染等。

21. 解釋節流函數 throttle 的實現原理

節流函數用于限制函數在一定時間內只能執行一次，常用于處理頻繁觸發的事件，如滾動事件、 resize事件等。實現原理是通過記錄上一次執行的時間，當本次觸發時間與上一次時間間隔大于設定的延遲時間時，才執行函數。示例代碼如下：

function throttle(fn, delay) {let last = 0;return function() {const now = Date.now();if (now - last >= delay) {fn.apply(this, arguments);last = now;}};
}
function handleScroll() {console.log('scrolling');
}
window.addEventListener('scroll', throttle(handleScroll, 500));

22. 如何實現函數防抖（debounce）？

防抖函數是指在事件觸發后，延遲一段時間再執行函數，如果在這段時間內事件又被觸發，則重新計時，直到最后一次觸發后的延遲時間結束才執行函數。常用于搜索框輸入、按鈕多次點擊等場景。示例代碼如下：

function debounce(fn, delay) {let timer;return function() {clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};
}
function handleInput() {console.log('input event handled');
}
let input = document.getElementById('input');
input.addEventListener('input', debounce(handleInput, 300));

23. 什么是淺拷貝和深拷貝？

  • 淺拷貝：只復制對象的第一層屬性，如果屬性值是引用類型（如對象、數組），拷貝的是引用地址，原對象和拷貝對象會共享該引用類型的值，修改其中一個會影響另一個。
    常見的淺拷貝方法有 Object.assign()、擴展運算符 ...、數組的 slice() 和 concat() 等。

    // 淺拷貝示例
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1); // 淺拷貝
obj2.b.c = 3; 
console.log(obj1.b.c); // 輸出3，因為obj1和obj2共享b對象的引用

  • 深拷貝：完全復制對象的所有層級屬性，包括嵌套的引用類型，原對象和拷貝對象互不影響。
    實現深拷貝的方法有遞歸遍歷拷貝、JSON.parse(JSON.stringify())（有局限性）等。

    // 深拷貝示例（遞歸實現）
function deepClone(obj) {if (obj === null || typeof obj!== 'object') return obj;let clone = Array.isArray(obj)? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key]); // 遞歸拷貝嵌套屬性}}return clone;
}
const obj3 = { a: 1, b: { c: 2 } };
const obj4 = deepClone(obj3);
obj4.b.c = 3;
console.log(obj3.b.c); // 輸出2，原對象不受影響

24. 什么是立即執行函數（IIFE）？有什么作用？

立即執行函數（Immediately Invoked Function Expression，IIFE）是定義后立即執行的函數，語法上通過將函數包裹在括號中，再添加執行括號實現。

作用：

  • 創建獨立的作用域，避免變量污染全局作用域。
  • 可以封裝私有變量和邏輯，只暴露需要的接口。

示例代碼：

// 基本語法
(function() {const msg = "IIFE執行了";console.log(msg); // 輸出"IIFE執行了"
})();// 帶參數的IIFE
(function(a, b) {console.log(a + b); // 輸出3
})(1, 2);// 避免全局污染示例
const globalVar = "全局變量";
(function() {const globalVar = "局部變量"; // 不影響外部全局變量console.log(globalVar); // 輸出"局部變量"
})();
console.log(globalVar); // 輸出"全局變量"

25. 如何將字符串轉換為數字？

JavaScript 中常見的字符串轉數字方法有：

  • Number()：通用轉換函數，可轉換整數、小數、空字符串（轉為0）等。
  • parseInt()：解析整數，可指定基數（進制），忽略非數字字符。
  • parseFloat()：解析浮點數，只能處理十進制，忽略非數字字符。
  • 一元運算符 +：簡潔的轉換方式，效果類似 Number()。

示例代碼：

const str1 = "123";
const str2 = "123.45";
const str3 = "123abc";
const str4 = "";console.log(Number(str1)); // 123（整數）
console.log(Number(str2)); // 123.45（浮點數）
console.log(Number(str3)); // NaN（包含非數字字符）
console.log(Number(str4)); // 0（空字符串）console.log(parseInt(str1)); // 123
console.log(parseInt(str2)); // 123（忽略小數部分）
console.log(parseInt(str3)); // 123（忽略"abc"）
console.log(parseInt("11", 2)); // 3（解析二進制的"11"為十進制3）console.log(parseFloat(str2)); // 123.45
console.log(parseFloat(str3)); // 123console.log(+str1); // 123（同Number()）
console.log(+str4); // 0

26. 如何判斷一個值是否為 NaN？

NaN（Not a Number）是一個特殊的數值，表示“不是數字”，但 typeof NaN 會返回 'number'，且 NaN 不等于任何值（包括自身）。

判斷方法：

  • 使用全局函數 isNaN()：但會先將參數轉換為數字，非數字轉換后為 NaN 則返回 true（有缺陷）。
  • 使用 Number.isNaN()：ES6 新增，僅當參數是 NaN 時返回 true（更準確）。
  • 利用 NaN!== NaN 的特性：通過值是否不等于自身判斷。

示例代碼：

const a = NaN;
const b = "not a number";
const c = 123;console.log(isNaN(a)); // true
console.log(isNaN(b)); // true（"not a number"轉換為數字是NaN）
console.log(isNaN(c)); // falseconsole.log(Number.isNaN(a)); // true
console.log(Number.isNaN(b)); // false（b是字符串，不是NaN）
console.log(Number.isNaN(c)); // falseconsole.log(a!== a); // true（NaN的獨特特性）
console.log(b!== b); // false

27. 數組扁平化的方法有哪些？

數組扁平化是將多維數組轉換為一維數組，常見方法：

  • Array.prototype.flat(depth)：ES6 方法，depth 為扁平化深度（默認1，Infinity 表示完全扁平化）。
  • 遞歸遍歷：通過遞歸判斷元素是否為數組，非數組則添加到結果。
  • toString() + split()：將數組轉為字符串后分割（僅適用于純數字數組）。

示例代碼：

const arr = [1, [2, [3, [4]], 5]];// 方法1：flat()
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]// 方法2：遞歸
function flatten(arr) {let result = [];for (let item of arr) {if (Array.isArray(item)) {result = result.concat(flatten(item)); // 遞歸處理子數組} else {result.push(item);}}return result;
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5]// 方法3：toString() + split()（僅數字數組）
console.log(arr.toString().split(',').map(Number)); // [1, 2, 3, 4, 5]

28. 什么是函數柯里化（Currying）？舉例說明

函數柯里化是將接收多個參數的函數轉換為一系列接收單個參數的函數的過程，每次調用返回一個新函數，直到接收完所有參數后執行原函數邏輯。

作用：參數復用、延遲執行、提高函數靈活性。

示例代碼：

// 普通函數：計算a + b + c
function add(a, b, c) {return a + b + c;
}// 柯里化后的函數
function curryAdd(a) {return function(b) {return function(c) {return a + b + c;};};
}console.log(add(1, 2, 3)); // 6
console.log(curryAdd(1)(2)(3)); // 6// 參數復用示例：固定第一個參數為10
const add10 = curryAdd(10);
console.log(add10(2)(3)); // 15（10 + 2 + 3）
console.log(add10(5)(5)); // 20（10 + 5 + 5）

29. 什么是擴展運算符（…）？有哪些用途？

擴展運算符（...）用于將可迭代對象（數組、字符串、Set等）展開為獨立元素，常見用途：

  • 復制數組或對象（淺拷貝）。
  • 合并數組或對象。
  • 將類數組轉換為數組。
  • 函數傳參時展開數組作為參數。

示例代碼：

// 1. 復制數組
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]// 2. 合并數組
const arr3 = [4, 5];
const mergedArr = [...arr1, ...arr3]; // [1, 2, 3, 4, 5]// 3. 復制對象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // {a:1, b:2, c:3}// 4. 合并對象（后面的屬性覆蓋前面的）
const obj3 = { b: 3, d: 4 };
const mergedObj = { ...obj1, ...obj3 }; // {a:1, b:3, d:4}// 5. 轉換類數組（如arguments）
function sum() {return [...arguments].reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3)); // 6// 6. 展開字符串
const str = "hello";
console.log([...str]); // ['h', 'e', 'l', 'l', 'o']

30. 如何交換兩個變量的值（不使用臨時變量）？

不使用臨時變量交換兩個變量的值，可通過以下方法：

  • 數組解構賦值（ES6，最簡潔）。
  • 算術運算（僅適用于數字）。
  • 異或運算（適用于整數，利用二進制特性）。

示例代碼：

// 方法1：數組解構賦值（通用）
let x = 10, y = 20;
[x, y] = [y, x];
console.log(x, y); // 20 10// 方法2：算術運算（僅數字）
let a = 5, b = 8;
a = a + b; // a = 13
b = a - b; // b = 13 - 8 = 5
a = a - b; // a = 13 - 5 = 8
console.log(a, b); // 8 5// 方法3：異或運算（適用于整數）
let m = 3, n = 5;
m = m ^ n; // m = 3 ^ 5 = 6（二進制11 ^ 101 = 110）
n = m ^ n; // n = 6 ^ 5 = 3（110 ^ 101 = 011）
m = m ^ n; // m = 6 ^ 3 = 5（110 ^ 011 = 101）
console.log(m, n); // 5 3

二、150道面試題目錄列表

文章序號Javascript面試題150道
1Javascript面試題及答案150道（001-015）
2Javascript面試題及答案150道（016-030）
3Javascript面試題及答案150道（031-045）
4Javascript面試題及答案150道（046-060）
5Javascript面試題及答案150道（061-075）
6Javascript面試題及答案150道（076-090）
7Javascript面試題及答案150道（091-105）
8Javascript面試題及答案150道（106-120）
9Javascript面試題及答案150道（121-135）
10Javascript面試題及答案150道（136-150）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/91788.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/91788.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/91788.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

仿真電路：（十七下）DC-DC升壓壓電路原理簡單仿真

仿真電路：（十七下）DC-DC升壓壓電路原理簡單仿真

1.前言 升壓的環境用的沒降壓的多，但是升壓會用在LED的很多電路上，所以理解一下原理 2.DC-DC升壓原理簡單仿真 升壓原理 下面還是對升壓進行簡單的仿真 拓撲結構以及原理和降壓還是很相似的，只是位置不太一樣，過程推導就不推導…
閱讀更多...
ros2--source

ros2--source

setup腳本類型 install下面會有幾個setup.xxx的shell腳本。 setup.bash setup.ps1 setup.sh setup.zsh 什么區別呢 文件名 Shell 類型 適用場景 setup.bash Bash (Linux/macOS) 標準 Linux/macOS 終端（默認使用） setup.sh 通用 Shell 兼容性更廣，但功能可能受限 setu…
閱讀更多...
40.MySQL事務

40.MySQL事務

1.事務的作用事務用于保證數據的一致性，它由一組相關的 dml (update delete insert) 語句組成，該組的 dml (update delete insert) 語句要么全部成功，要么全部失敗。如：轉賬就要用事務來處理，用以保證數據的一致性。假…
閱讀更多...
java導入pdf（攜帶動態表格，圖片，純java不需要模板）

java導入pdf（攜帶動態表格，圖片，純java不需要模板）

java導出pdf文件一、介紹二、準備三、實現效果四、代碼一、介紹 上一篇文章（java使用freemarker操作word（攜帶動態表格，圖片））https://blog.csdn.net/weixin_45853881/article/details/129298494 緊跟上文&#xff0c…
閱讀更多...
【dropdown組件填坑指南】鼠標從觸發元素到下拉框中間間隙時，下拉框消失，怎么解決？

【dropdown組件填坑指南】鼠標從觸發元素到下拉框中間間隙時，下拉框消失，怎么解決？

開發dropdown組件填坑之hideDelay 引言 在開發下拉菜單（dropdown）或彈出框（popover）組件時，一個常見的用戶體驗問題就是鼠標移出觸發區域后，彈出內容立即消失，這會導致用戶無法移動到彈出內容上…
閱讀更多...
Linux I/O 函數完整清單

Linux I/O 函數完整清單

Linux I/O 函數完整清單 1. 基礎 I/O 函數 1.1 基本讀寫 #include <unistd.h>ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, const void *buf, size_t count);1.2 位置指定讀寫 #include <unistd.h>ssize_t pread(int fd, void *buf, siz…
閱讀更多...
面經——電子電路技術知識詳解

面經——電子電路技術知識詳解

電子電路技術知識詳解 目錄 德摩根定律周期性矩形波產生方法自激振蕩器原理與設計晶體管溫度效應分析反向飽和電流影響因素放大電路負反饋類型判斷正弦波90相移電路直接耦合放大器的缺點二階有源低通濾波器分析開關電源與線性電源對比 德摩根定律 德摩根定律&#xff08;De …
閱讀更多...
docker 安裝 gitlab

docker 安裝 gitlab

null文章瀏覽閱讀445次。問題&#xff1a;運行 docker run hello-world 報錯。原因&#xff1a;原鏡像源網絡不穩定。https://blog.csdn.net/sszdzq/article/details/145733419 鏡像獲取 在線下載 docker pull gitlab/gitlab-ce:17.11.1-ce.0 離線獲取 創建運行 sudo docke…
閱讀更多...
PHP中的日期/時間處理之Carbon組件

PHP中的日期/時間處理之Carbon組件

日常開發中&#xff0c;我們會經常用到日期和時間的操作&#xff0c;但官方的一般操作比較復雜&#xff0c;需要大量的時間進行格式化問題和大量計算等等。Carbon組件 可以幫助我們在 PHP 開發中處理日期/時間變得更加簡單、更語義化&#xff0c;從而使得我們的代碼更容易閱讀和…
閱讀更多...
學習嵌入式第十八天

學習嵌入式第十八天

文章目錄1.數據結構1.概念2.衡量代碼質量和效率1.時間復雜度2.空間復雜度3.數據結構分類1.邏輯結構2.存儲結構3.常見的數據結構2.鏈表1.與順序表的區別2.鏈表分類1.單向鏈表1.定義鏈表節點類型2.空鏈表的創建3.鏈表的頭插法4.鏈表的遍歷5.鏈表元素刪除3.makefile習題1.數據結構…
閱讀更多...
基于SpringBoot+Vue實現校園商鋪系統

基于SpringBoot+Vue實現校園商鋪系統

作者主頁&#xff1a;編程指南針 作者簡介&#xff1a;Java領域優質創作者、CSDN博客專家 、CSDN內容合伙人、掘金特邀作者、阿里云博客專家、51CTO特邀作者、多年架構師設計經驗、多年校企合作經驗&#xff0c;被多個學校常年聘為校外企業導師&#xff0c;指導學生畢業設計并參…
閱讀更多...
從資源閑置到彈性高吞吐，JuiceFS 如何構建 70GB/s 吞吐的緩存池？

從資源閑置到彈性高吞吐，JuiceFS 如何構建 70GB/s 吞吐的緩存池？

AI 模型的訓練與推理對存儲系統提出了極為嚴苛的要求&#xff0c;特別是在高吞吐、高并發以及對海量小文件的高效處理方面&#xff0c;已成為三大主要挑戰。盡管基于 Lustre 或 GPFS 的并行文件系統具備出色的性能&#xff0c;但其成本高昂、吞吐能力與容量強耦合&#xff0c;可…
閱讀更多...
提升JVM性能之CMS垃圾回收器的優化分析與案例剖析

提升JVM性能之CMS垃圾回收器的優化分析與案例剖析

這里寫目錄標題一、CMS基本介紹二、CMS核心優化策略1. 避免并發模式失敗&#xff08;Concurrent Mode Failure&#xff09;2. 減少內存碎片3. 調優并發階段耗時4. 新生代優化配合三、典型案例解析案例1&#xff1a;電商服務頻繁Full GC案例2&#xff1a;金融交易系統碎片導致長…
閱讀更多...
Token系列 - 再談穩定幣

Token系列 - 再談穩定幣

相關政策 2024年12月&#xff0c;歐洲《加密資產市場監管法案》正式成為法律2025年3月&#xff0c;日本細化了加密資產及穩定幣的監管調整2025年5月&#xff0c;英國發布了關于穩定幣發行、加密資產托管及加密資產公司財務穩健性的監管提案&#xff1b;2025年5月20日&#xff…
閱讀更多...
【20min 急速入門】使用Demucs進行音軌分離

【20min 急速入門】使用Demucs進行音軌分離

創建環境 conda create --name mujica python3.10下載加速依賴 先用nvidia-smi檢查機器使用的獨顯版本, 然后從pytorch官網下載對應的GPU版torch, torchaudio 比如我的是12.2, 就下載11.8版本的 pip3 install torch torchvision torchaudio --index-url https://download.p…
閱讀更多...
字節Seed發布擴散語言模型，推理速度達2146 tokens/s，比同規模自回歸快5.4倍

字節Seed發布擴散語言模型，推理速度達2146 tokens/s，比同規模自回歸快5.4倍

用擴散模型寫代碼&#xff0c;不僅像開了倍速&#xff0c;改起來還特別靈活&#xff01;字節Seed最新發布擴散語言模型Seed Diffusion Preview&#xff0c;這款模型主要聚焦于代碼生成領域&#xff0c;它的特別之處在于采用了離散狀態擴散技術&#xff0c;在推理速度上表現出色…
閱讀更多...
海洋大地測量基準與水下導航系列之九我國海洋PNT最新技術進展（下）

海洋大地測量基準與水下導航系列之九我國海洋PNT最新技術進展（下）

三、海洋PNT技術裝備研發與工程化應用 1.海底基準裝備 研制了首批適應海洋環境的多型海底基準站裝備&#xff0c;在我國南海海域成功布設了定位精度優于0.25m的海底大地測量試驗基準網&#xff0c;實現了我國海底大地測量基準技術零的突破。基準方艙具備穩固、抗壓、防腐、防…
閱讀更多...
入門MicroPython+ESP32：安裝逗腦IDE及驅動

入門MicroPython+ESP32：安裝逗腦IDE及驅動

本篇文章將手把手帶大家入門MicroPython ESP32&#xff0c;重點介紹逗腦IDE的安裝過程以及相關驅動的安裝。 一、下載逗腦IDE 要開始使用逗腦IDE&#xff0c;首先需要從官網下載最新版本。請訪問以下網址進行下載&#xff1a;https://www.itprojects.cn/ide 下載時的界面大…
閱讀更多...
CentOS上部署Redis及其哨兵（Sentinel）模式

CentOS上部署Redis及其哨兵（Sentinel）模式

架構&#xff1a;說明我這里是偽集群的&#xff0c;redis 在同一臺機器&#xff0c;Sentinel 只有一個&#xff0c;也存在單點故障問題只能當作開發環境使用&#xff0c;要滿足生產至少是下面這種架構 ------------------- ------------------- ------------------- …
閱讀更多...
《軟件測試與質量控制》實驗報告二 單元測試

《軟件測試與質量控制》實驗報告二 單元測試

目 錄 一、實驗學時 二、實驗目的 三、實驗環境 &#xff08;一&#xff09;硬件環境&#xff1a; &#xff08;二&#xff09;軟件環境&#xff1a; 四、實驗內容 1、實驗方案&#xff1a; 2、實驗步驟&#xff1a; 3、設計思路&#xff1a; 1、安裝JUnit和Eclemma…
閱讀更多...
最新文章

Copyright @ 2022~2023