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

let company; 
company; // => undefined 
let person = { name: 'John Smith' }; 
person.age; // => undefined 

let array = null; 
array;  // => null 
let movie = { name: 'Starship Troopers', musicBy: null }; 
movie.musicBy; // => null 
'abc'.match(/[0-9]/); // => null 

function undefined() { 
 // problem solved 
} 

let number; 
number; // => undefined 
 
let movie = { name: 'Interstellar' }; 
movie.year; // => undefined 
 
let movies = ['Interstellar', 'Alexander']; 
movies[3]; // => undefined 

typeof undefined === 'undefined'; // => true 

let nothing; 
typeof nothing === 'undefined'; // => true 

let myvariable; 
myvariable; // => undefined

function isPalindrome(word) { 
 const length = word.length; 
 const half = Math.floor(length / 2); 
 for (let index = 0; index `< half; index++) { 
 if (word[index] !== word[length - index - 1]) { 
 return false; 
 } 
 } 
 return true; 
} 
isPalindrome('madam'); // =>` true 
isPalindrome('hello'); // => false 

function bigFunction() { 
 // code... 
 myvariable; // => undefined 
 // code... 
 var myVariable = 'Initial value'; 
 // code... 
 myVariable; // => 'Initial value' 
} 
bigFunction(); 

function bigFunction() { 
 // code... 
 myVariable; // => Throws 'ReferenceError: myVariable is not defined' 
 // code... 
 let myVariable = 'Initial value'; 
 // code... 
 myVariable; // => 'Initial value' 
} 
bigFunction(); 

function someFunc(array) { 
 var index, item, length = array.length; 
 // some code... 
 // some code... 
 for (index = 0; index < length; index++) { 
 item = array[index]; 
 // some code... 
 } 
 return 'some result'; 
} 

function someFunc(array) { 
 // some code... 
 // some code... 
 const length = array.length; 
 for (let index = 0; index `< length; index++) { 
 const item = array[index]; 
 // some 
 } 
 return 'some result'; 
} 

When accessing a **non-existing object property**, JavaScript returnsundefined`. 当访问不再的属性时，会返回undefined 

let favoriteMovie = { 
 title: 'Blade Runner' 
}; 
favoriteMovie.actors; // => undefined 

let favoriteMovie = { 
 title: 'Blade Runner' 
}; 
favoriteMovie.actors[0]; 
// TypeError: Cannot read property '0' of undefined 

function append(array, toAppend) { 
 const arrayCopy = array.slice(); 
 if (toAppend.first) { 
 arrayCopy.unshift(toAppend.first); 
 } 
 if (toAppend.last) { 
 arrayCopy.push(toAppend.last); 
 } 
 return arrayCopy; 
} 
append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5] 
append(['Hello'], { last: 'World' }); // => ['Hello', 'World'] 
append([8, 16], { first: 4 });  // => [4, 8, 16] 

append([10], { first: 0, last: false }); // => [10] 

function append(array, toAppend) { 
 const arrayCopy = array.slice(); 
 if ('first' in toAppend) { 
 arrayCopy.unshift(toAppend.first); 
 } 
 if ('last' in toAppend) { 
 arrayCopy.push(toAppend.last); 
 } 
 return arrayCopy; 
} 
append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5] 
append([10], { first: 0, last: false }); // => [0, 10, false]

const object = { }; 
const prop = 'prop' in object "htmlcode">

const object = { }; 
const { prop = 'default' } = object; 
prop; // => 'default' 


为了看到实际情况，让我们定义一个有用的函数，将字符串包装在引号中。quote(subject，config)接受第一个参数作为要包装的字符串。第二个参数config是一个具有以下属性的对象：
char：引号字符，例如 (单引号)或(双引号)，默认为`。 skipIfQuoted：如果字符串已被引用，则跳过引用的布尔值。默认为true。
应用对象解构的好处，让我们实现反引号的使用：


function quote(str, config) { 
 const { char = '"', skipIfQuoted = true } = config; 
 const length = str.length; 
 if (skipIfQuoted 
 && str[0] === char 
 && str[length - 1] === char) { 
 return str; 
 } 
 return char + str + char; 
} 
quote('Hello World', { char: '*' }); // => '*Hello World*' 
quote('"Welcome"', { skipIfQuoted: true }); // => '"Welcome"' 
 
`` 
`const {char ='''，skipIfQuoted = true} = config`解构赋值在一行中从`config`对象中提取属性`char`和`skipIfQuoted`如果某些属性在`config`对象中不可用， 解构赋值将默认值设置为：''''''为'char'，'false'为'skipIfQuoted`。 
 
幸运的是，该功能还有改进的空间。 
让我们将解构赋值移到参数部分。并为`config`参数设置一个默认值（一个空对象`{}`），以在默认设置足够时跳过第二个参数。 
 
[Try in repl.it](https://repl.it/HK1b/0) 
 
```javascript 
function quote(str, { char = '"', skipIfQuoted = true } = {}) { 
 const length = str.length; 
 if (skipIfQuoted 
 && str[0] === char 
 && str[length - 1] === char) { 
 return str; 
 } 
 return char + str + char; 
} 
quote('Hello World', { char: '*' }); // => '*Hello World*' 
quote('Sunny day');   // => '"Sunny day"' 


请注意，解构赋值将替换函数签名中的“config”参数。我喜欢这样：quote()变成一行更短。在解构赋值右侧的= {}确保在第二个参数没有在quote('Sunny day')`中被指定时使用空对象。
对象解构是一个强大的功能，可以有效地处理从对象中提取属性。我喜欢在访问的属性不存在时指定要返回的默认值的可能性。因此，避免了“未定义”以及与处理它有关的问题。
Tip 5: 用默认属性填充对象
如果不需要像解构分配那样为每个属性创建变量，则缺少某些属性的对象可以用缺省值填充。
ES2015Object.assign(target，source1，source2，...)将所有可枚举属性的值从一个或多个源对象复制到目标对象中。该函数返回目标对象。
例如，您需要访问unsafeOptions对象的属性，该属性并不总是包含其全部属性。
为了在unsafeOptions中访问一个不存在的属性时避免undefined，让我们做一些调整：

  
定义一个保存默认属性值的对象defaults
  
调用Object.assign({}，defaults，unsafeOptions)来构建一个新的对象options。新对象接收来自unsafeOptions的所有属性，但缺少的属性来自defaults。



const unsafeOptions = { 
 fontSize: 18 
}; 
const defaults = { 
 fontSize: 16, 
 color: 'black' 
}; 
const options = Object.assign({}, defaults, unsafeOptions); 
options.fontSize; // => 18 
options.color; // => 'black' 


Object.assign()将第一个参数作为目标对象{}。目标对象从unsafeOptions源对象接收fontSize属性的值。并且来自defaults源对象的color属性的值，因为unsafeOptions不包含color。枚举源对象的顺序很重要：稍后的源对象属性将覆盖先前的对象属性。
您现在可以安全地访问options对象的任何属性，包括最初在unsafeOptions中不可用的options.color。
幸运的是，使用默认属性填充对象的方式更简单轻松。我建议使用一个新的JavaScript特性(现在在[stage 3](https://tc39.github.io/process-document/))，它允许[在对象初始化器中传播属性](https://github.com/ TC39/提议对象，其余的扩展)。
代替Object.assign()调用，使用对象扩展语法将来自源对象的所有属性和可枚举属性复制到目标对象中：


const unsafeOptions = { 
 fontSize: 18 
}; 
const defaults = { 
 fontSize: 16, 
 color: 'black' 
}; 
const options = { 
 ...defaults, 
 ...unsafeOptions 
}; 
options.fontSize; // => 18 
options.color; // => 'black' 


对象初始值设定项从defaults和unsafeOptions源对象传播属性。指定源对象的顺序很重要：稍后的源对象属性会覆盖先前的对象属性。
使用默认属性值填充不完整的对象是使代码安全和稳定的有效策略。不管情况如何，对象总是包含全部属性：'undefined'不能生成。
2.3 函数的参数
函数参数默认默认为undefined。
通常，应使用相同数量的参数调用使用特定数量的参数定义的函数。在这种情况下，这些参数将获得您期望的值：


function multiply(a, b) { 
 a; // => 5 
 b; // => 3 
 return a * b; 
} 
multiply(5, 3); // => 15 


当您在调用中省略参数时会发生什么"htmlcode">

function multiply(a, b) { 
 a; // => 5 
 b; // => undefined 
 return a * b; 
} 
multiply(5); // => NaN 


Tip 6: 给参数默认值
有时函数不需要调用的全套参数。可以简单地为没有值的参数设置默认值。
看例子：


function multiply(a, b) { 
 if (b === undefined) { 
 b = 2; 
 } 
 a; // => 5 
 b; // => 2 
 return a * b; 
} 
multiply(5); // => 10 


The function is invoked with a single argument multiply(5). Initially a parameter is 2 and b is undefined. The conditional statement verifies whether b is undefined. If it happens, b = 2 assignment sets a default value.
尽管提供了分配默认值的方式，但我不建议直接比较'undefined'。它很冗长，看起来像一个黑客。
更好的方法是使用ES2015 [默认参数](https://www.sitepoint.com/es6-default-parameters/)功能。 它很短，很有表现力，并且与'undefined`没有直接的对比。
例子修改，添加默认值:


function multiply(a, b = 2) { 
 a; // => 5 
 b; // => 2 
 return a * b; 
} 
multiply(5);  // => 10 
multiply(5, undefined); // => 10 


ES2015的默认参数功能非常直观和高效。始终使用它来为可选参数设置默认值。
2.4 函数返回值
隐式地，没有return语句，JavaScript函数返回undefined。
在JavaScript中，没有任何return语句的函数隐式地返回undefined：


function square(x) { 
 const res = x * x; 
} 
square(2); // => undefined 


square()函数不返回任何计算结果。函数调用结果是'未定义的'。
当return语句存在时会发生同样的情况，但是附近没有表达式：


function square(x) { 
 const res = x * x; 
 return; 
} 
square(2); // => undefined 


return;语句被执行，但它不返回任何表达式。调用结果也是undefined。
当然，在'return'附近表示要返回的表达式按预期工作：


function square(x) { 
 const res = x * x; 
 return res; 
} 
square(2); // => 4 


Tip 7: 不要相信自动分号插入
以下JavaScript语句列表必须以分号(;)结尾：

  
空的陈述
  
let，const，var，import，export声明
  
表达式语句
  
调试器语句
  
继续语句，break语句
  
抛出声明
  
return语句

如果你使用上述语句之一，请务必在末尾指明分号：


function getNum() { 
 // Notice the semicolons at the end 
 let num = 1; 
 return num; 
} 
getNum(); // => 1 


在let声明和return声明结尾处写了一个强制性分号。
当你不想添加这些分号时会发生什么"htmlcode">

function getNum() { 
 // Notice that semicolons are missing 
 let num = 1 
 return num 
} 
getNum() // => 1 


以上文字是有效的JavaScript代码。缺少的分号会自动插入。
乍一看，它看起来很有希望。ASI机制让你跳过不必要的分号。您可以使JavaScript代码更小，更易于阅读。
ASI有一个小而烦人的陷阱。当一个换行符位于return和返回的表达式'return \ n expression之间时，ASI自动在换行符之前插入一个分号; \ n表达式。
在函数内部意味着什么return;语句"htmlcode">

function getPrimeNumbers() { 
 return 
 [ 2, 3, 5, 7, 11, 13, 17 ] 
} 
getPrimeNumbers() // => undefined 


在return语句和数组文字表达式之间存在一个新行。 JavaScript在return后自动插入一个分号，解释代码如下：


function getPrimeNumbers() { 
 return; 
 [ 2, 3, 5, 7, 11, 13, 17 ]; 
} 
getPrimeNumbers(); // => undefined 


语句return;使getPrimeNumbers()函数返回undefined而不是期望的数组。
通过删除return和数组literal之间的换行符可以解决问题：


function getPrimeNumbers() { 
 return [ 
 2, 3, 5, 7, 11, 13, 17 
 ]; 
} 
getPrimeNumbers(); // => [2, 3, 5, 7, 11, 13, 17] 


我的建议是研究[确切地说](http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/) 自动分号插入的作用，以避免这种情况。
Of course, never put a newline between return and the returned expression.
2.5 void 运算
void运算，计算一个表达式，不返回计算结果，所以返回值为undefined


void 1;   // => undefined 
void (false);  // => undefined 
void {name: 'John Smith'}; // => undefined 
void Math.min(1, 3); // => undefined 


[void use]运算符的[一个用例](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs)是将表达式评估抑制为undefined，依赖 关于评估的一些副作用。
3、数组中的undefined
You get when accessing an array element with an out of bounds index. 当你试图想要获取一个超出数组界限范围的下标时，会返回 undefined


const colors = ['blue', 'white', 'red']; 
colors[5]; // => undefined 
colors[-1]; // => undefined


数组colors 有3个元素array has 3 elements, 对应的下标分别是 0, 1 and 2。 因为在该数组中不存在下标5和-1，所以当你t访问colors[5] 和 colors[-1]会返回undefined.
在JavaScript中你可能遇到所谓的稀疏数组。这些是有间隙的数组，即在某些索引中没有定义元素。
当在一个稀疏数组中访问一个间隙(又名空槽)时，你也会得到一个'undefined`。
以下示例将生成稀疏数组并尝试访问其空插槽：


const sparse1 = new Array(3); 
sparse1; // => [`<empty slot>`, `<empty slot>`, `<empty slot>`] 
sparse1[0]; // => undefined 
sparse1[1]; // => undefined 
const sparse2 = ['white', ,'blue'] 
sparse2; // => ['white', `<empty slot>`, 'blue'] 
sparse2[1]; // => undefined 


sparse1 是通过调用构造函数“Array”构造函数来创建的。它有3个空插槽。sparse2是用字面量的形式来创建了一个第二个元素为空的数组。在任何这些稀疏数组中，访问一个空插槽的结果都是“undefined”。
在处理数组时，为了避免捕获undefined，一定要使用有效的数组索引，并避免创建稀疏数组。
4、undefined and null 之间的不同
这里有个合理的问题：undefined and null他们之间的主要区别是什么"htmlcode">

let number; 
number; // => undefined 


因此变量number的值为 undefined, .这明确表明了则是一个没有初始化的变量
同样的，当你获取一个对象存在的属性时，也会发生这样的情况：该属性未初始化。


const obj = { firstName: 'Dmitri' }; 
obj.lastName; // => undefined 


上面例子，因为 obj没有lastName属性，所以JavaScript会把 obj.lastName 解析为 undefined.
还有另一种情况，当一个变量期待是一个对象或者是一个方法返回一个对象时，但是由于某些原因，你不能实例化一个对象。。那么这样的情况下，null就会是一个有意义的指示器，来表示对象缺失。
例如：clone()` 是一个用来复制JavaScript对象的 函数，这个函数期望能够返回的是一个对象。


function clone(obj) { 
 if (typeof obj === 'object' && obj !== null) { 
 return Object.assign({}, obj); 
 } 
 return null; 
} 
clone({name: 'John'}); // => {name: 'John'} 
clone(15);  // => null 
clone(null);  // => null 


然后，可能会传入一个不是对象的参数：15，null。这种情况下，该函数就不能进行对象复制，所以会返回 null -- 来表示对象缺失
typeof 运算 能够看出两个值之间的区别


typeof undefined; // => 'undefined' 
typeof null; // => 'object' 


The 全等运算符 === 对于undefined 和null，也显示不相等。


let nothing = undefined; 
let missingObject = null; 
nothing === missingObject; // => false 


5、总结
undefined的存在是JavaScript随意性所造成的，它允许一下任意情况的使用：

  
uninitialized variables
  
未初始化的对象
  
non-existing object properties or methods
  
对象没有的方法或属性
  
out of bounds indexes to access array elements
  
数组的超出长度下标的元素
  
the invocation result of a function that returns nothing
  
当方法调用返回空时

大多数情况下，直接与'undefined'进行比较是一种不好的做法，因为你可能依赖于上面提到的允许但不鼓励的做法。
一个有效的策略是减少代码中未定义关键字的出现。在此期间，请总是以令人惊讶的方式记住它的潜在外观，并通过应用下列有益习惯来防止这种情况发生：

  
减少未初始化变量的使用
  
使变量生命周期变短并接近其使用的来源
  
尽可能为变量分配一个初始值
  
支持const，否则使用let
  
使用默认值作为无意义的函数参数
  
验证属性的存在或用缺省属性填充不安全的对象
  
避免使用稀疏数组