JS基礎之undefined與null的區別分析

zhigoo 發布于2019-08-21 11:31 / 3253人閱讀

摘要：例如自定義局部變量作用域上的引用比較作用域上的引用比較其中，定義局部變量時，其初始值會是對屬性值的引用。新定義的局部變量存在與該函數的作用域上。這就是許多前端框架為什么常常要自己定義一個局部變量的原因

在javascript開發中，開始學習js的時候時常困惑我的就是null和undefined的區別，所以很想總結下我對這兩個的理解
學習過js的同學都知道：

null==undefined;
true
null!==undefined;
true

那這個到底是怎么回事呢？

1.null
首先他是一個對象，但是是一個空對象，因為是一個對象，所以

typeof null;
"object"

null是js保留的關鍵字；
null在參與數值運算的時候將自動轉換成 0 ；例如：

var c = 123 + null;
c
123

var a = 188*null;
a
0

2.undefined
首先undefined是全局對象中的一個特殊屬性，他的值是一個未定義的，我們來看看他是否為全局對象的屬性：

alert("undefined" in window);

上述這段代碼會在瀏覽器輸出true;
然而當我們創建一個空對象的時候：

var anObj = {}; 
alert("undefined" in anObj); //輸出：false

undefined參與的所有數值運算，其值都會返回 NaN

var h=123+undefined;
h;
NaN

當我們在程序中使用undefined值時，實際上使用的是window對象的undefined屬性。 
同樣，當我們定義一個變量但未賦予其初始值，例如：

var vaule ;
undefined

這個時候JavaScript預編譯會將其初始值的設置為 window.undefined 的引用。

于是，當我們將一個變量或值與undefined比較時，實際上是與window對象的undefined屬性比較。這個比較過程中，JavaScript會搜索window對象名叫‘undefined"的屬性，然后再比較兩個操作數的引用指針是否相同。
由于window對象的屬性值是非常多的，在每一次與undefined的比較中，搜索window對象的undefined屬性都會花費時間。在需要頻繁與undefined進行比較的函數中，這可能會是一個性能問題點。因此，在這種情況下，我們可以自行定義一個局部的undefined變量，來加快對undefined的比較速度。例如：

function anyFunc() 
{ 
var undefined; //自定義局部undefined變量 
if(x == undefined){console.log(undefined)} //作用域上的引用比較 
while(y != undefined){console.log(undefined)} //作用域上的引用比較 
};

其中，定義undefined局部變量時，其初始值會是對window.undefined屬性值的引用。新定義的局部undefined變量存在與該函數的作用域上。在隨后的比較操作中，JavaScript代碼的書寫方式沒有任何的改變，但比較速度卻很快。因為作用域上的變量數量會遠遠少于window對象的屬性，搜索變量的速度會極大提高。
這就是許多前端JS框架為什么常常要自己定義一個局部undefined變量的原因！

云服務器 GPU云服務器 undefined與null區別 null的區別 null和空的區別 javascript與js的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86804.html

分析 JavaScript 的數據類型與變量

摘要：基本數據類型在中，基本數據類型有種，即數值字符串布爾值。兩個布爾值轉為數值進行比較。對于對象和布爾值，調用它們的方法得到對應的字符串值，然后進行字符串相加。減法對于字符串布爾值或者，自動調用，轉換結果若為，那么最終結果為。這篇文章，來聊聊 JS 中的數據類型與變量。這是在學習 JS 時最基礎的一類問題，但卻很重要。希望我的分享有幫助到你。文章開頭，我先提幾個面試中遇到的問題：比如...

Mike617 2019-08-23 13:13 評論0 收藏0
前端每周清單第 10 期：Firefox53、React VR發布、Microsoft Edge現代

摘要：新聞熱點國內國外，前端最新動態發布近日，正式發布新版本中提供了一系列的特性與問題修復。而近日正式發布，其能夠幫助開發者快速構建應用。前端每周清單第 10 期：Firefox53、React VR發布、JS測試技術概述、Microsoft Edge現代DOM樹構建及性能之道為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆者的 Web 前端入門...

MingjunYang 2019-08-20 16:04 評論0 收藏0
前端面經整理之JS和CSS

摘要：作為對象原型鏈的終點。調用函數時，應該提供的參數沒有提供，該參數等于。它可以用于引用該函數的函數體內當前正在執行的函數。一 JS 二 CSS 一 JS ==和===的區別 ===叫做嚴格運算符 ==叫做相等運算符嚴格運算符比較時不僅僅比較數值還要比較數據類型是否一樣相等運算符在比較相同類型的數據時，與嚴格相等運算符完全一樣。在比較不同類型的數據時，相等運算符會先將數據進行類型轉換，...

stonezhu 2019-08-21 17:34 評論0 收藏0
前端面經整理之JS和CSS

摘要：作為對象原型鏈的終點。調用函數時，應該提供的參數沒有提供，該參數等于。它可以用于引用該函數的函數體內當前正在執行的函數。一 JS 二 CSS 一 JS ==和===的區別 ===叫做嚴格運算符 ==叫做相等運算符嚴格運算符比較時不僅僅比較數值還要比較數據類型是否一樣相等運算符在比較相同類型的數據時，與嚴格相等運算符完全一樣。在比較不同類型的數據時，相等運算符會先將數據進行類型轉換，...

lvzishen 2019-08-29 13:48 評論0 收藏0
從[]==![]為true來剖析JavaScript各種蛋疼的類型轉換

摘要：將他們放在堆中是為了不影響棧的效率。所以簡單數據類型的值直接存放在棧中。可以對比上面那張圖默認是調用方法的依，于是等于空字符串。空字符串中國標準時間方法返回對象的原始值，可能是字符串數值或值等，看具體的對象。，需要兩個操作數同時轉為。你是否在面試中遇到過各種奇葩和比較細節的問題? []==[] //false []==![] //true {}==!{} //false {}==![...

Jeff 2019-08-20 14:27 評論0 收藏0