JavaScript 中的一些奇怪問題

来源:https://www.cnblogs.com/yuzhihui/archive/2023/03/03/17174558.html
-Advertisement-
Play Games

JavaScript 中的一些奇怪問題 JavaScript 在開發過程中可能會出現很多奇怪的問題，以下是一些示例： 1、變數提升問題 變數提升是 JavaScript 中一個常見的問題，特別是當沒有充分理解變數作用域和聲明提升時。以下是一個變數提升導致的問題示例： var a = 1; funct ...


JavaScript 中的一些奇怪問題

JavaScript 在開發過程中可能會出現很多奇怪的問題，以下是一些示例：

1、變數提升問題

變數提升是 JavaScript 中一個常見的問題，特別是當沒有充分理解變數作用域和聲明提升時。以下是一個變數提升導致的問題示例：

var a = 1;
function foo() {
  console.log(a);
  var a = 2;
}
foo(); // 輸出：undefined

預期輸出是 1，但實際上輸出的是 undefined。這是因為在函數內部聲明瞭一個同名變數 a，函數作用域內的變數聲明被提升到了函數開頭，所以 console.log(a) 實際上輸出的是 undefined。

解決該問題的方法是使用 let 或 const 關鍵字聲明變數，這樣可以避免變數提升和作用域污染：

let a = 1;
function foo() {
  console.log(a);
  let a = 2;
}
foo(); // 輸出：報錯 Uncaught ReferenceError: Cannot access 'a' before initialization

2、this 指向問題

this 關鍵字在 JavaScript 中非常重要，但也很容易導致問題。this 關鍵字的指向是動態的，它的值取決於函數的調用方式。以下是一個 this 關鍵字導致的問題示例：

var name = "John";

var person = {
  name: "Bob",
  sayName: function () {
    console.log("name", this.name);
  },
};

var sayName = person.sayName;

sayName();

預期輸出是 "Bob"，但實際上輸出的是 "John"。這是因為在全局作用域中調用 sayName 函數時，this 指向的是全局對象 window，而全局作用域中定義的 name 變數值為 "John"。

解決該問題的方法是使用 call、apply 或 bind 方法來改變 this 的指向：

sayName.call(person);

3、== 和 === 比較問題

console.log(false == "0"); // 輸出 true
console.log(false === "0"); // 輸出 false

在第一行中，"0" 被轉換為 false，因此 false == false，結果為 true。在第二行中，使用了嚴格相等運算符 ===，它不會自動轉換類型，因此 false 和 "0" 不相等，結果為 false。

JavaScript 中的 == 和 === 都是比較運算符，用於比較兩個值是否相等。它們之間的主要區別在於它們在比較時進行的類型轉換的方式不同。

== 比較運算符會進行類型轉換，它在比較之前會嘗試將兩個操作數轉換為相同的類型。具體來說，如果比較的兩個操作數的類型不同，則會按照一定的規則進行類型轉換，轉換後再進行比較。以下是 == 運算符的類型轉換規則：

  • 如果比較的兩個操作數都是字元串，則將它們轉換為數字進行比較。
  • 如果其中一個操作數是數字，另一個操作數是字元串，則將字元串轉換為數字進行比較。
  • 如果其中一個操作數是布爾值，則將其轉換為數字進行比較。
  • 如果其中一個操作數是對象，另一個操作數是原始類型，則將對象轉換為原始類型再進行比較。

例如：

1 == "1"; // true
true == 1; // true
null == undefined; // true

=== 恆等運算符不會進行類型轉換，它僅在兩個操作數嚴格相等時返回 true。兩個操作數嚴格相等的定義是它們的類型和值都相等。以下是 === 運算符的比較規則：

  • 如果比較的兩個操作數類型不同，則返回 false。
  • 如果比較的兩個操作數都是對象，則僅當它們引用同一個對象時才返回 true。
  • 如果比較的兩個操作數都是原始類型，則僅當它們的類型和值都相等時才返回 true。

例如：

1 === "1"; // false
true === 1; // false
null === undefined; // false

因為 === 恆等運算符不會進行類型轉換，所以它通常比 == 比較運算符更加嚴格和安全。在比較兩個值時，建議優先使用 === 運算符。只有在明確需要進行類型轉換時，才應該使用 == 運算符。

4、迴圈中的非同步問題

非同步操作是 JavaScript 中一個重要的特性，但也容易導致一些問題。以下是一個非同步操作導致的問題示例：

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}
// 輸出 5、5、5、5、5

預期輸出是 0、1、2、3、4，但實際上輸出的是 5、5、5、5、5。因為 setTimeout 函數是一個非同步操作，它會在迴圈結束後再執行。當 setTimeout 函數被調用時，i 的值已經變成了 5，因此它會輸出 5，而不是預期的 0、1、2、3 和 4。為瞭解決這個問題，可以使用立即調用的函數表達式（IIFE） 或 let 關鍵字來解決變數作用域的問題。

通過使用 IIFE 來來解決該問題：

for (var i = 0; i < 5; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    }, 1000);
  })(i);
}
// 輸出 0、1、2、3、4

5、引用類型比較問題

在 JavaScript 中，引用類型（如數組和對象）的比較可能導致一些奇怪的問題。以下是一個引用類型比較導致的問題示例：

console.log([] == []); // 輸出 false
console.log([] === []); // 輸出 false

這是因為 JavaScript 中比較引用類型時，比較的是它們在記憶體中的地址，而不是它們的內容。因此，兩個空數組雖然看起來相同，但它們在記憶體中的地址不同，因此比較結果為 false。

6、變數命名問題

不恰當的變數命名可能導致一些問題。以下是一個變數命名導致的問題示例：

var NaN = "not a number";
console.log(NaN); // 輸出 NaN
console.log(typeof NaN); // 輸出 "number"

因為 NaN 是 JavaScript 中一個關鍵字，表示 Not a Number，不應該被用作變數名。因為變數名和關鍵字相同，所以 typeof 操作符返回了 "number"，而不是預期的 "string"。

7、數據類型轉換問題

JavaScript 中有很多不同的數據類型，類型轉換可能導致一些奇怪的問題。以下是一個數據類型轉換導致的問題示例：

console.log(1 + "2" + "2"); // 輸出 "122"
console.log(1 + +"2" + "2"); // 輸出 "32"
console.log(1 + -"1" + "2"); // 輸出 "02"
console.log(+"1" + "1" + "2"); // 輸出 "112"
console.log("A" - "B" + "2"); // 輸出 "NaN2"
console.log("A" - "B" + 2); // 輸出 NaN

這些奇怪的輸出都是因為類型轉換造成的，例如在第一行中，數字 1 和字元串 "2" 相加，得到字元串 "12"，然後再和字元串 "2" 相加，得到字元串 "122"。

8、NaN 的比較問題

NaN 是一種特殊的數值，表示 "Not a Number"。在 JavaScript 中，NaN 與任何值都不相等，包括它自己。以下是一個 NaN 比較導致的問題示例：

console.log(NaN == NaN); // 輸出 false
console.log(NaN === NaN); // 輸出 false

解決該問題的方法是使用全局函數 isNaN() 來判斷一個值是否為 NaN：

console.log(isNaN(NaN)); // 輸出 true

9、0.1 + 0.2 不等於 0.3 問題

在 JavaScript 中，使用浮點數進行計算時，可能會出現精度問題。例如，0.1 + 0.2 的結果並不是 0.3。以下是一個精度問題導致的問題示例：

console.log(0.1 + 0.2 == 0.3); // 輸出 false

解決該問題的方法是將浮點數轉換為整數進行計算，最後再將結果除以 10。或者使用 Number.EPSILON 來比較兩個浮點數是否相等：

console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // 輸出 true

參考：JavaScript 中 0.1+0.2 不等於 0.3 的問題

10、最大整數問題

在 JavaScript 中，最大整數可以通過訪問 Number.MAX_SAFE_INTEGER 屬性來獲取。這個屬性的值為 9007199254740991，它是 JavaScript 中可安全表示的最大整數。超過這個值的整數將不再被準確表示。例如，9007199254740992 將被表示為 9007199254740992，但是 9007199254740993 將被表示為 9007199254740992，因為它超出了 JavaScript 可以準確表示的整數範圍。

11、布爾值的算術運算問題

在 JavaScript 中，當對布爾值使用算術運算符時，它們會被自動轉換為數字類型。true 被轉換為數字 1，false 被轉換為數字 0。

console.log(true + true); // 輸出：2

console.log(true - true); // 輸出：0

12、閉包導致的問題

12.1、記憶體泄漏問題

閉包中引用的外部變數不會被垃圾回收，可能導致記憶體泄漏。以下是導致記憶體泄漏的示例代碼：

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 忘記釋放 inner 函數會導致記憶體泄漏

解決方法：

在使用閉包時，確保在不再需要它時釋放它。在此示例中，可以將 inner 變數設置為 null 以釋放閉包。

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 使用完 inner 函數後釋放它
inner = null;

12.2、意外的變數共用

如果多個閉包共用同一個外部變數，它們可能會意外地修改該變數的值，導致意想不到的結果。以下是示例代碼：

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    result[i] = function () {
      console.log("Index: " + i);
    };
  }

  return result;
}

var functions = createFunctions();

// 所有函數輸出的值都是 5，而不是預期的 0、1、2、3、4
functions[0](); // 輸出 "Index: 5"
functions[1](); // 輸出 "Index: 5"
functions[2](); // 輸出 "Index: 5"
functions[3](); // 輸出 "Index: 5"
functions[4](); // 輸出 "Index: 5"

解決方法：

在迴圈中使用閉包時，需要創建一個新的作用域來存儲迴圈變數的值。可以使用立即調用的函數表達式（IIFE）來創建一個新的作用域。以下是修改後的代碼：

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    (function (i) {
      result[i] = function () {
        console.log("Index: " + i);
      };
    })(i);
  }

  return result;
}

var functions = createFunctions();

// 此時，每個函數都輸出正確的值
functions[0](); // 輸出 "Index: 0"
functions[1](); // 輸出 "Index: 1"
functions[2](); // 輸出 "Index: 2"
functions[3](); // 輸出 "Index: 3"
functions[4](); // 輸出 "Index: 4"

12.3、迴圈中的問題

在迴圈中使用閉包時，可能會出現問題。如果在閉包中使用迴圈變數，它們將共用同一個值，可能導致錯誤結果。以下是示例代碼：

for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

上述代碼屬於閉包情況。請參考《JavaScript 回調函數屬於閉包？》

解決方法：

與上一個示例類似，可以使用 IIFE 創建一個新的作用域來存儲迴圈變數的值。以下是修改後的代碼：

for (var i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i);
    }, 1000);
  })(i);
}

或者可以使用 let 關鍵字聲明迴圈變數，它會在每次迭代中創建一個新的變數，從而避免共用變數的問題。以下是使用 let 關鍵字的代碼：

for (let i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

使用 let 關鍵字是更加簡單和可讀性更高的方法，因為它會自動解決共用變數的問題。但是在一些較老的瀏覽器版本中可能不支持 let 關鍵字，因此使用 IIFE 是更通用的解決方法。

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17174558.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！


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

-Advertisement-
Play Games
更多相關文章
  • 【MySQL速通篇001】5000字吃透MySQL部分重要知識點
    MySQL主鍵和外鍵知識點 | 主鍵的概念 | 主鍵的創建 | desc 表名 | show create table 表名; | 自增列起 始值設置 | 設置自增列初始值語句 | 自增列步長設置 | 唯一索引知識點 | 創建唯一索引的方式 | 外鍵變種 詳細知識點 | 什麼是外鍵變種 | 外鍵變種... ...
  • flink-綜合練習
    案例需求： 假設用戶需要每個1秒鐘需要統計4秒鐘 視窗中數據的量，然後對統計的結果值進行checkpoint處理 ##### 數據規劃 使用自定義運算元每秒鐘產生大約10000條數據 產生的數據為一個四元組（Long，String，String，Interger）-- （id,name,info,co ...
  • Windows故障轉移群集 和 SQLServer AlwaysOn 搭建教程
    資料庫系統概論—基礎篇(1) 一、緒論 1.資料庫系統概述 1.1資料庫四個基本概念 數據：描述事物的符號記錄 資料庫(DB)：存放數據的倉庫 資料庫管理系統(DBMS)：位於用戶與操作系統之間的一層數據管理軟體 資料庫系統(DBS)：由資料庫，資料庫管理系統，應用程式和資料庫管理員組成 1.2數管 ...
  • 關於RecycleView的子元素鎖定吸頂效果
    前言 內容類應用中圖片或文件下載，一般應用中應用更新和升級，這些都是經典的下載場景。下載是項目中基礎且重要的模塊。 從代碼邏輯復用性和人力成本考慮，一直想實現一個純Dart實現的下載庫，作為技術儲備。 最近發現了一個純Dart實現的下載庫flutter_download_manager,相對來說各方 ...
  • 第125篇: 期約Promise基本特性
    好家伙,本篇為《JS高級程式設計》第十章“期約與非同步函數”學習筆記 1.非重入期約 1.1.可重入代碼（百度百科） 先來瞭解一個概念 可重入代碼(Reentry code)也叫純代碼(Pure code)是一種允許多個進程同時訪問的代碼。 為了使各進程所執行的代碼完全相同，故不允許任何進程對其進行修 ...
  • 從0搭建Vue3組件庫(四): 如何開發一個組件
    本篇文章將介紹如何在組件庫中開發一個組件,其中包括 如何本地實時調試組件 如何讓組件庫支持全局引入 如何在 setup 語法糖下給組件命名 如何開發一個組件 目錄結構 在packages目錄下新建components和utils兩個包,其中components就是我們組件存放的位置,而utils包則 ...
  • 記錄--手摸手帶你擼一個拖拽效果
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 最近看見一個拖拽效果的視頻(抖音：艾恩小灰灰)，看好多人評論說跟著敲也沒效果，還有就是作者也不回覆大家提出的一些疑問，本著知其然必要知其所以然的心理，我把實現效果研究了一遍，並且瞭解了其實現原理，這裡給大家復盤其原理，學到就是賺到 ...
  • JavaScript 回調函數屬於閉包？
    JavaScript 回調函數屬於閉包？ 回調函數本身不一定屬於閉包，但是在某些情況下，它們可能會涉及閉包。 回調函數通常是指在非同步操作完成時執行的函數。它們在 JavaScript 中被廣泛使用，例如在處理 AJAX 請求、定時器、事件處理程式等方面。 在使用回調函數時，如果回調函數引用了外部變數 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類