前端高頻面試題彙總正題+(附答案解析)

来源:https://www.cnblogs.com/liushihong21/archive/2023/09/24/17725851.html
-Advertisement-
Play Games

在現代的Web開發中，優化用戶體驗至關重要。一種常見的方法是在頁面載入時預載入圖片，並展示一個載入進度條，讓用戶瞭解載入進度。在本文中，我們將深入探討如何實現這兩個關鍵功能，以提高網站性能和用戶滿意度 ...


正題

1、

 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);

2、

1 var a = 10;
2 function test() {
3     console.log(a);
4     a = 100;
5     console.log(this.a);
6     var a;
7     console.log(a);
8 }
9 test();

3、

1 var a = 10;
2 function f1() {
3     var b = 2 * a; 
4     var a = 20;
5     var c = a + 1;
6     console.log(b);
7     console.log(c);
8 }
9 f1();

4、

1 var a = 10;
2 function fn1() {
3     console.log(a);
4 }
5 function fn2() {
6     var a = 20;
7     fn1();
8 }
9 fn2();

5、

1 var a = b = 10; 
2 function f1() {
3     var a = b = 20;
4     var c = a + 1;
5     console.log(c);
6 }
7 f1();
8 console.log(a);
9 console.log(b);

6、

 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();

7、

 1 var x = 1;
 2 function f(y) { 
 3     return this.x + y;
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () {
 9     return f.apply(obj, arguments) 
10 }
11 var z = f2(3);
12 console.log(z);

8、

 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);
 7 console.log(3);
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5);
11 });
12 p.then(res => {
13     console.log(res);
14 });
15 console.log(6);

9、

 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);

10、

給一個數組 const arr = [3,1,7,8]和目標值n=10，請求出該數組中元素相加等於目標值的下標。
比如： arr=[1,2,3,4] n=7; 輸出：[2,3]

解析

第1題解析 
 1 var length = 1;
 2 function fn() {
 3     console.log(this.length);
 4 }
 5 var obj = {
 6     length: 100,
 7     action: function (callback) {
 8         callback();
 9         arguments[0]();
10     }
11 }
12 obj.action(fn, ...[1, 2, 3, 4]);
13 // 考核點：this的指向
14 // 輸出結果：1 5
15 // 第一個輸出1，是因為fn在全局被調用，this指向是window
16 // 第二個輸出5，是因為fn被arguments調用，而arguments里有length屬性，傳入了五個參數，length為5，所以輸出是5
View Code

第2題解析

 1 var a = 10; // 全局變數
 2 function test() {
 3     console.log(a); // 變數提升
 4     a = 100;
 5     console.log(this.a); // this指向全局的window
 6     var a;
 7     console.log(a); // 局部變數
 8 }
 9 test();
10 // 考核點：變數提升
11 // 輸出結果：undefined 10 100
View Code

第3題解析

 1 var a = 10;
 2 function f1() {
 3     var b = 2 * a; // a=undefined
 4     var a = 20;
 5     var c = a + 1;
 6     console.log(b);
 7     console.log(c);
 8 }
 9 f1();
10 // 考核點：
11 // 輸出結果：NaN 21
View Code

第4題解析

 1 var a = 10;
 2 function fn1() {
 3     console.log(a);
 4 }
 5 function fn2() {
 6     var a = 20;
 7     fn1();
 8 }
 9 fn2();
10 // 考核點：
11 // 輸出結果：10
View Code

第5題解析

 1 var a = b = 10;    // 相當於b = 10; var a = b;
 2 function f1() {
 3     var a = b = 20; // 相當於 b=20; var a = 20;
 4     var c = a + 1;  // c = 20 + 1
 5     console.log(c);
 6 }
 7 f1();
 8 console.log(a);
 9 console.log(b);
10 // 考核點：JavaScript中變數作用域、變數聲明提升和變數賦值的知識點
11 // 輸出結果：21 10 20
View Code

第6題解析

 1 const motion = () => {
 2     let speed = 100;
 3     return {
 4         run() {
 5             speed++;
 6             console.log(speed);
 7         }
 8     }
 9 };
10 const m1 = motion();
11 const m2 = motion();
12 m1.run();
13 m1.run();
14 m2.run();
15 // 考核點：閉包
16 // 輸出結果：101 102 101
View Code

舉例：

 1 var a = 100;
 2 function f1() {
 3     a++;
 4     console.log(a);
 5 }
 6 f1(); // 101
 7 f1(); // 102
 8 
 9 function f1() {
10     var a = 100;
11     a++;
12     console.log(a);
13 }
14 f1(); // 101
15 f1(); // 101
16 
17 // 閉包保存變數的狀態
18 function f1() {
19     var a = 100; // 局部變數
20     return function () {
21         a++;
22         console.log(a);
23     }
24 }
25 
26 var a1 = f1();
27 a1(); // 101
28 a1(); // 102
View Code

第7題解析

 1 var x = 1;
 2 function f(y) { // 函數申明
 3     return this.x + y; // this指向
 4 }
 5 var obj = {
 6     x: 2
 7 }
 8 var f2 = function () { // 函數表達式
 9     return f.apply(obj, arguments) // obj={ x: 2 }, arguments=3，arguments 類似於數組，代表參數集合  
10 }
11 var z = f2(3);
12 console.log(z);
13 // 考核點：call()和apply()，改變this的指向 arguments
14 // 輸出結果：5
View Code

舉例：

 1 f.apply(obj, 參數);
 2 
 3 var id = 10;
 4 function fn() {
 5     console.log(this.id); // 10
 6 }
 7 fn();
 8 
 9 var o1 = {
10     id: 999
11 }
12 // 如何讓fn函數中this的指向o1
13 fn.apply(o1) // this.id = o1.id 相當於fn函數在o1對象中執行
14 
15 function Person(name, age) {
16     this.name = name;
17     this.age = age;
18 }
19 
20 var y1 = new Person('y1', 20);
21 var o2 = {}; //o2空對象
22 Person.apply(o2, ['o2', 18]); // apply 參數是一個數組
23 console.log(o2.name);
24 
25 var o3 = {};
26 Person.call(o3, "hsl", 18);  // call 參數是字元串
27 console.log(o3.name);
View Code

第8題解析

 1 setTimeout(() => {
 2     console.log(1)
 3 }, 100);  // 非同步-巨集任務
 4 setTimeout(() => {
 5     console.log(2)
 6 }, 0);  // 非同步-巨集任務
 7 console.log(3); // 同步
 8 let p = new Promise((resolve, reject) => {
 9     resolve(4);
10     console.log(5); // 同步
11 });
12 p.then(res => {
13     console.log(res); // 非同步-微任務
14 });
15 console.log(6);  // 同步
16 // 考核點：同步、非同步-微任務、非同步-巨集任務
17 // 微任務：Promise的then『Promise同步，但Promise中的then是非同步』、async await
18 // 巨集任務：setTimeout、setInterval
19 // 輸出結果：3 5 6 4 2 1
View Code

第9題解析

 1 function f2() {
 2     console.log(1);
 3     setTimeout(() => {
 4         console.log(2);
 5     }, 100)
 6 }
 7 async function f() {
 8     console.log(3);
 9     await f2();
10     console.log(4);
11 }
12 f();
13 console.log(5);
14 // 考核點：async和await
15 // 輸出結果：3 1 5 4 2
View Code

第10題解析

 1 /*
 2 給一個數組 const arr = [3,1,7,8]和目標值n=10，請求出該數組中元素相加等於目標值的下標。
 3 比如： arr=[1,2,3,4] n=7; 輸出：[2,3]
 4 */
 5 
 6 // 方法一
 7 function arrFn(arr, n) {
 8     let newArr = [];
 9     for (let i = 0, len = arr.length; i < len; i++) {
10         for (let j = i + 1, len = arr.length; j < len; j++) {
11             if (n === arr[i] + arr[j]) {
12                 newArr.push(i, j);
13             }
14         }
15     }
16     return newArr;
17 }
18 console.log(arrFn([3, 1, 7, 8], 10));
19 
20 // 方法二
21 function twoSum(nums, target) {
22     // 1、構造哈希表
23     const map = new Map(); // 存儲方式 {need, index}
24 
25     // 2、遍曆數組
26     for (let i = 0; i < nums.length; i++) {
27         // 2.1 如果找到 target - nums[i] 的值
28         if (map.has(nums[i])) {
29             return [map.get(nums[i]), i]
30         } else {
31             // 2.2 如果沒找到則進行設置
32             map.set(target - nums[i], i)
33         }
34     }
35 }
36 console.log(twoSum([3, 1, 7, 8], 10));
View Code

 鑒定完畢，歡迎友友們一起交流學習！！

本文來自博客園，作者：紅石榴21，轉載請註明原文鏈接：https://www.cnblogs.com/liushihong21/p/17725851.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 攔截|篡改|偽造.NET類庫中不限於public的類和方法
    大家好，我是沙漠盡頭的狼。 本文首發於Dotnet9，介紹使用Lib.Harmony庫攔截第三方.NET庫方法，達到不修改其源碼並能實現修改方法邏輯、預期行為的效果，並且不限於只攔截public訪問修飾的類及方法，行文目錄： 什麼是方法攔截？ 示常式序攔截 非public方法怎麼攔截？ 總結 1. ...
  • 6.swagger完善：界面顯示註釋+多版本控制
    周末，寫點簡單的水一下。 新版本的vs創建項目的時候可以選擇自帶一個swagger。然而這隻是基本的swagger功能。 幾個介面無所謂啦，隨著介面越來越多，就這麼丟給你，一時間也會懵逼，所以這篇文章要做的有兩個功能。 給swagger文檔添加註釋 給swagger添加切換“版本”的功能(也可以理解 ...
  • 嵌入式軟體調試與驗證2模擬
    痞子衡嵌入式半月刊： 第 81 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞，農曆年分二十四節氣，希望在每個交節之日準時發佈一期。 本期刊是開源項目（GitHub: JayHeng/pzh-mcu-bi-weekly），歡迎提交 issue，投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • Redis 命令工具
    Redis 命令工具 redis-server Redis 伺服器啟動命令 redis-cli shutdown 停止服務 redis-benchmark：性能測試工具，用於檢測 Redis 在本機的運行效率 redis-check-aof：修複有問題的 AOF 持久化文件 redis-check- ...
  • Vue-進階：路由及elementUI組合開發
    Vue-router路由 什麼是vue-router？ 服務端路由指的是伺服器根據用戶訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用中點擊一個鏈接時，瀏覽器會從服務端獲得全新的 HTML，然後重新載入整個頁面。 然而，在單頁面應用中，客戶端的 JavaScrip ...
  • 竟然可以在一個項目中混用 Vue 和 React？
    React和Vue是前端開發中的兩大熱門框架，各自都有著強大的功能和豐富的生態系統。然而，你有沒有想過，在一個項目中同時使用React和Vue？是的，你沒有聽錯，可以在同一個項目中混用這兩個框架！本文就來分享 3 個用於混合使用 React 和 Vue 的工具！ Veaury Veaury 是一個基 ...
  • 2023 年前端 UI 組件庫概述，百花齊放！
    UI組件庫提供了各種常見的 UI 元素，比如按鈕、輸入框、菜單等，只需要調用相應的組件並按照需求進行配置，就能夠快速構建出一個功能完善的 UI。 雖然市面上有許多不同的UI組件庫可供選擇，但在2023年底也並沒有出現一兩個明確的解決方案能夠適用於所有情況。因為不同的前端框架（例如React、Angu ...
  • antd/fusion表格增加圈選複製功能
    背景介紹 我們存在著大量在PC頁面通過表格看數據業務場景，表格又分為兩種，一種是 antd / fusion 這種基於 dom 元素的表格，另一種是通過 canvas 繪製的類似 excel 的表格。 基於 dom 的表格功能豐富較為美觀，能實現多表頭、合併單元格和各種自定義渲染（如表格中渲染圖形 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類