JavaScript中直接写undefined的用法剖析

目录
  • 介绍
  • 原因
  • 解决
  • 结语

介绍

众所周知，在JavaScript 语言中，一个没有被赋值的变量会有个默认值 undefined ，而 undefined 作为全局对象的一个属性经常会用作一些赋值返回，逻辑判断等业务场景中。可本期要说的是，尽量不要直接去拼写 undefined 了，因为那是不太严谨的行为，可能出现很多意外情况。

原因

我们经常在判断某个变量是否等于 undefined ，如下：

function test(value) {
  if (value === undefined) {
    return `value is undefined`;
  }
  return `value is not undefined`;
}
let value;
test(value);  // 'value is undefined'

这样看上去没有什么毛病，而且 window.undefined 的 writable 为 false 这意味着它是只读的没发写入修改，你在 window 下，修改 undefined 也是无济于事。

undefined = "hello world";
console.log(undefined); // undefined

对这样是没错，看似万无一失。但是还有一种情况没有考虑到，那就是 undefined 它是 window 对象的一个全局属性，那么我们可以局部也起一个也叫 undefined 的变量给它赋值，那么问题就来了。如下：

function test(value) {
  let undefined = "hello world";
  if (value === undefined) {
    return `value is undefined`;
  }
  return `value is not undefined`;
}
let value;
test(value);  // 'value is not undefined'

我们可以看到验证入参是否是 undefined 的方法就出现了bug。因为，我们把 undefined 赋了一个新值，在这个作用域下找到的所有 undefined 都是那个新的值，这样我们就没法通过这种方式去验证判断 undefined 了。

解决

不卖关子了，我们通常会用 void 0 或者 void(0) 来去直接替代 undefined ，因为他返回的也是 undefined 。

function test(value) {
  let undefined = "hello world";
  if (value === void 0) {
    return `value is undefined`;
  }
  return `value is not undefined`;
}
let value;
test(value);  // 'value is undefined'

void 运算符是对给定的表达式进行求值，然后返回 undefined 。而且， void 是不能重新定义的，不然会报语法错误，这样也保证了用 void 来代替 undefined 的不会出现被重定义而造成的bug。

function func() {
    var void = function() {};
    return void(0);
}
// Uncaught SyntaxError: Unexpected token 'void'

结语

其实在很早之前，很多大厂的前端规范都会写到用 void 0 去代替 undefined 作为准则，去防止一些意外发生。对于大型项目来说，这点严谨也是值得考虑的。 PS：随着前端工程化的推进，打包和校验时都会规避掉这个问题，但我们依然要认识到这个写法背后的原因，养成习惯，虽然后面遇到的可能性概率几乎为0。

以上就是不要在JavaScript中直接写undefined了的详细内容，更多关于JavaScript undefined的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js删除对象/数组中null、undefined、空对象及空数组方法示例

    js删除对象/数组中null、undefined、空对象及空数组方法示例

    这两天在项目中遇到后台需要传的数据为不能有null,不能有空值,而这个数据又是一个庞大的对象,对组集合,所以写了个方法来解决这个问题.为了兼具所有的种类类型,封装了方法,代码如下: let obj = { a: { a_1: 'qwe', a_2: undefined, a_3: function (a, b) { return a + b; }, a_4: { a_4_1: 'qwe', a_4_2: undefined, a_4_3: function (a, b) { return a +

  • JavaScript中undefined和is not defined的区别与异常处理

    目录 Javascript中undefined和notdefined有什么区别? JavaScript中undefined和isnotdefined异常 总结 Javascript中undefined和not defined有什么区别? 概念上的解释: undefined是javascript语言中定义的五个原始类中的一个,换句话说,undefined并不是程序报错,而是程序允许的一个值. not defined是javascript在运行我们的javascript代码时,遇到没有定义就用来运算

  • js实现for循环跳过undefined值示例

    js实现for循环跳过undefined值示例

    本文实例讲述了js实现for循环跳过undefined值的方法.分享给大家供大家参考,具体如下: <script> var narr=['a','b','c','d','e']; console.log(narr); for (var j=0;j<narr.length;j++){ console.log(j+'=>'+narr[j]); }; console.log(narr); for (var j=0;j<narr.length;j++){ console.log(j+

  • JavaScript中的null和undefined用法解析

    1.概述 null和undefined属于js中两种不同的基本数据类型,都可以表示"没有",含义非常相似.将一个变量赋值为undefined或null,老实说,语法效果几乎没区别.并且在if语句的判断条件中,它们都会自动转为false,相等运算符(==)甚至直接报告两者相等 var a = null; var b = undefined; if (!a) { console.log('a is false'); }//a is false if (!b) { console.log('

  • 处理JavaScript值为undefined的7个小技巧

    前言 我刚刚开始学习JavaScript时,大约是八年前,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值. 他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true. 现在的大多数语言,像Ruby, Python or Java,他们有一个单独的空值(nil 或 null),这似乎才是一个合理的方式. 而在JavaScript里,当你要获取一个变量或对象(未初始化)的值时,js引擎会返回 un

  • JavaScript中直接写undefined的用法剖析

    目录 介绍 原因 解决 结语 介绍 众所周知,在JavaScript 语言中,一个没有被赋值的变量会有个默认值 undefined ,而 undefined 作为全局对象的一个属性经常会用作一些赋值返回,逻辑判断等业务场景中.可本期要说的是,尽量不要直接去拼写 undefined 了,因为那是不太严谨的行为,可能出现很多意外情况. 原因 我们经常在判断某个变量是否等于 undefined ,如下: function test(value) { if (value === undefined) {

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • javascript中$(function() {});写与不写有哪些区别

    javascript中$(function() {....}) 是 jQuery 中的经典用法,等同于 $(document).ready(function() {....}),即在页面加载完成后才执行某个函数,如果函数中要操作 DOM,在页面加载完成后再执行会更安全,所以在使用 jQuery 时这样的写法很常见. $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标

  • javascript中innerText和innerHTML属性用法实例分析

    本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • Javascript中数组sort和reverse用法分析

    本文实例讲述了Javascript中数组sort和reverse用法.分享给大家供大家参考.具体分析如下: sort() 方法用于对数组的元素进行排序. reverse()将数组中的元素逆序 首先我们来试试以下这段代码: 复制代码 代码如下: var values = [1, 0, 5, 15, 10]; values.reverse(); console.log(values); 输出结果会是什么呢: [ 10, 15, 5, 0, 1 ] reverse()也就是很简单的把数组倒过来而已,那

  • javascript中2个感叹号的用法实例详解

    在javascript代码中经常会见到!!的情况,本文即以实例形式较为深入的分析javascript中2个感叹号的用法.分享给大家供大家参考之用.具体分析如下: javascript中的!!是逻辑"非非",即是在逻辑"非"的基础上再"非"一次.通过!或!!可以将很多类型转换成bool类型,再做其它判断. 一.应用场景:判断一个对象是否存在 假设有这样一个json对象: { color: "#E3E3E3", "fon

  • JavaScript中arguments和this对象用法分析

    本文实例讲述了JavaScript中arguments和this对象用法.分享给大家供大家参考,具体如下: 在函数内部有两个特殊的对象 : arguments和this. 1.arguments对象 js函数不介意定义多少参数,也不在乎传递进来多少参数,也就是说,即使定义的函数只接收2个参数,在调用时候也未必传递2个参数,因为js的函数参数在内部使用一个数组表示的,在函数体内可以通过arguments对象访问此参数数组.因此,js函数可以不显式地使用命名参数. 当函数被调用时,传入的参数将保存在

  • javascript中的闭包概念与用法实践分析

    本文实例讲述了javascript中的闭包概念与用法.分享给大家供大家参考,具体如下: 闭包的概念:闭包是指有权访问另一个函数作用域中的变量的函数 (引自<javascript高级程序设计第三版>178页).闭包的优点是不会产生全局变量,避免变量污染问题,但是闭包也有一个缺点就是闭包携带包含它的函数作用域会比其它函数占用更多的内存,过度使用会导致内存占用过多. wiki上关于闭包的概念: In programming languages, closures (also lexical clos

  • JavaScript中var let const的用法有哪些区别

    目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let.const不支持重复声明. 1.1 var var a = 1; var a = 2; console.log(a); 输出结果: 2 1.2 let let b = 3; let b = 4; c

  • javascript 中null和undefined区分和比较

    javascript 中null和undefined区分和比较 Undefined类型 Undefined 类型只有一个值,即特殊 undefined .在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined , 例如: var message; alert(message == undefined); //true 这个例子只声明了变量 message ,但未对其进行初始化.比较这个变量与 undefined 字面量,结果表明它们是相等的.这个例子与下面的例子是等价

随机推荐