JavaScript数据类型之Undefined类型

JavaScript数据类型之Undefined类型详解

、Undefined类型

Undefined类型只有一个值，即特殊的undefined值。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined，例如：

var message;
alert(message==undefined); //true

这个例子只生命了变量message，但未对其进行初始化。比较这个变量与undefined字面量，结果表明它们是相等的。这个例子与下面的例子是等价的：

var message=undefined;
alert(message==undefined); //true

这个例子使用undefined值显式初始化了变量message。但我们没有必要这么做，因为未经初始化的值默认就会取得undefined值。

一般而言，不存在需要显式地把一个变量设置为undefined值的情况。字面值undefined的主要目的是用于比较，而ECMA-262第3版之前的版本中并没有规定这个值。第3版引入这个值是为了正式区分空对象指针与未经初始化的变量。

二、未初始化的变量与尚未定义的变量

不过，未初始化的变量与尚未定义的变量是不一样的，看看下面这个例子：

var message;
//var age;
alert(message); //"undefined"
alert(age); //产生错误

运行以上代码，第一个警告框会显示变量message的值，即“undefined”。而第二个警告框，由于传递给alert()函数的是尚未声明的变量age，则会导致抛出一个错误。对于尚未声明过的变量，只能执行一项操作，即使用typeof操作符检测其数据类型（对未经声明的变量调用delete不会导致错误，但这样做没什么实际意义，而且在严格模式下确实会导致错误）。

然而，令人困惑的是：对未经初始化的变量执行typeof操作符会返回undefined值，而对未声明的变量执行typeof操作符同样也会返回undefined值。来看下面的例子：

var message;
//var age
alert(typeof message); //"undefined"
alert(typeof age); //"undefined"

结果表明，对未经初始化和未声明的变量执行typeof操作符都返回了undefined值，这个结果有其逻辑上的合理性。因为虽然这两种变量从技术角度看有本质区别，但实际上无论对哪种变量也不可能执行真正的操作。

即便未初始化的变量会自动被赋予undefined值，但显示地初始化变量依然是明智的选择。如果能够做到这一点，那么当typeof操作符返回“undefined”值时，我们就知道被检测的变量还没有被声明，而不是尚未初始化。

篇文章给童靴们讲解了typeof操作符的用法，从这篇开始我们分六篇详细讲解js数据类型。

Undefined 类型

Undefined只有一个特殊的值，就是undefined。在使用var变量声明变量但是并没有给其初始化时，它的值就是undefined。

var message;
console.log(message==undefined); //true

上面的栗子只声明了一个变量message，没有给它初始化。我们在控制台输出变量message与字面量undefined比较后的结果是相等的。这个栗子与下面的栗子等价的：

var message=undefined;
console.log(message==undefined); //true

上面的栗子给message初始化一个值undefined，结果也是一样的。不过我们不需要如此麻烦，一个没有初始化的值默认会取undefined值。

童靴们还要注意的是，没有初始化的变量和尚未定义的变量还是不一样的。我们举个栗子区分一下：

//var age;
console.log(age) //产生错误

var name；
console.log(name); //undefined

上面栗子中第一段代码，因为age是注释的，并没有声明变量age，所以在控制台中输出会导致一个错误：

控制台报错

第二段代码声明了一个变量name，所以在控制台中会显示name的值undefined：

对尚未声明的变量，我们只能执行一项操作就是typeof操作符检测其类型。另大家都疑惑的是，未初始化的变量执行typeof操作符返回的值是undefined，而没有声明的变量执行typeof操作符也会返回undefined。

var name;
//var age
console.log(typeof name) //undefined
console.log(typeof age) //undefined

这种结果可能童靴们会疑惑，其实还是有一定逻辑上的合理性的。虽然它们在技术角度看有本质的区别，但是这两种变量都是不可能执行真正的操作。

爱学习的孩子运气不会差哦~

关注小白前端，持续收到文章推送！

vue与axios直接在html文件中使用的时候，位于axios的请求中的this指向并不是指向vue,而是指向window，如果在请求中直接用this获取data中的数据会出现undefined的问题，解决思路是将ES5的函数语法更换为箭头函数即可解决此问题，深层的原因就得深入去了解箭头函数和普通函数之间的区别了！

案例：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(function (response) {
      	   // 这里的this.carousels是undefined，因此上下边的赋值是不起作用的
           this.carousels=res.data
       }).catch(function (error) {
           console.log(err)
       });
     },
 })

以上案例可以发现在axios中使用this获取data中的值是获取不到的，这就是this的指向问题造成的，他不是指向vue，只需要修改如下，将function函数改为箭头函数即可解决！

修改代码如下：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(res=> {
           this.carousels=res.data
       }).catch(err=> {
           console.log(err)
       });
     },
 })

到此问题就解决了！

在线咨询

上一篇：terraform providers 国内不容易那
下一篇：网页中实现文件上传下载的三种解决方案(推荐)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript数据类型之Undefined类型

Undefined 类型

您的项目需求