JS基础之undefined与null的区别分析

zhigoo 发布于2019-08-21 11:31 / 3218人阅读

摘要：例如自定义局部变量作用域上的引用比较作用域上的引用比较其中，定义局部变量时，其初始值会是对属性值的引用。新定义的局部变量存在与该函数的作用域上。这就是许多前端框架为什么常常要自己定义一个局部变量的原因

在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的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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