你不知道的JavaScript（中卷）

1、typeof安全机制

• undefined 和 undeclared是两码事，但是typeof 对 undefined 和 undeclared 变量返回都是 undefined
• undeclared变量在进行使用的时候，浏览器会报错（如下所示）

if(DEBUG){
  consoel.log("Debugging is starting");
}

VM635:1 Uncaught ReferenceError: DEBUG is not defined
    at <anonymous>:1:13

判断变量是否存在，typeof自带的安全机制，可避免报错

if(typeof DEBUG !== 'undefined'){
  consoel.log("Debugging is starting");
}

或者通过全局对象进行判断,即使变量DEBUG不存在，会返回undefined，boolean类型为false

if(window.DEBUG){
  // pass
}

• 为某个脚本缺失的功能写polyfill，内部不能通过关键字var（声明提升）进行声明，防止与浏览器中一些特殊的内建全局变量冲突，重复声明会报错，去掉var可以防止声明被提升

if(typeof atob === 'undefined'){
  atob = function(){
    // pass
  }
}

2、数组

• 数组使用delete 运算符可以将单元从数组中删除，删除后数组长度不发生改变
• 对数组未设置的单元，会显示通过undefined填充，但与直接设置a[1] = undefined 不同

let a = [];
a[0] = 0;
a[2] = 2;
console.log(a)                                // [0, empty, 2]
console.log([...a])                           // [0, undefined, 2]
console.log(JSON.stringify(a))                // [0, null, 2] 

• 数组通过数字进行索引，同时也是对象，可以包含键值对，但是不计算在长度（length）之内

let a=[]
a[0] = 0
a[1] = 1
a['a'] = 'a'
a['b'] = 'b'
console.log(a, a.length)                      // [0, 1, a:'a', b: 'b']

注意：如果键值中有可以被强制转换为十进制数字，就会被当做数字索引来处理

a['12'] = 1
console.log(a.length)                         // 13

3、字符串

• 字符串经常被当成字符数组，都是类数组，本质并不相同，
• 字符串可以借助数组函数处理字符串

var a = "foo" ;
var b = ["f", "o", "o"] ;
var c = Array.prototype.join.call( a, "-")
var d = Array.prototype.map.call( a, function(v){
  return v.toUpperCase() + '.'
}).join("")
console.log(c, d)                            //  f-o-o    F.O.O.

但是无法通过借助数组reverse方法翻转字符串

console.log(Array.prototype.reverse.call(a)) 
// Cannot assign to read only property '0' of object '[object String]'

字符串只可以借助部分数组方法，为什么呢？

1. 字符串本身是不可变的，变异函数是在变量本身进行修改
2. 数组方法（非变异函数）可以通过改变this指向处理字符串

转变思路
将字符串转换为数组，逆序后再将数组转变为字符串

var a = "foo"
var c = a.split("").reverse().join("")
console.log(c)                // "oof"

4、数字

• 数字可以使用一些省略写法

var a = 0.42      =>     var a = .42
var b = 42.0      =>     var b = 42.

• 所以数字在使用一些方法的时候，有歧义的情况下，会优先识别为数字的一部分，导致一些语法错误

// 无效语法
42.toFixed( 3 )               // SyntaxError 
// 正确语法
0.42.toFixed(3)               // 0.420
(42).toFixed(3)               // 42.000
42..toFixed(3)                // 42.000
42 .toFixed(3)                // 42.000    注意有空格哦😯

• 小数精度问题

0.1 + 0.2 === 0.3             // false

计算机在存储的时候通过二进制编码，整数部分通过除以2取余，小数部分通过乘以2取整，对于无线循环的部分会进行截取（2进制，类似于四舍五入）

• 机器精度（ES6新增）

if(!Niumber.EPSILON){
  Number.EPSILON = Math.pow(2, -52)
}
function numbersCloseEnoughToEqual(n1, n2){
  return Math.abs( n1- n2 ) < Number.EPSILON
}

• 整数安全范围（ES6）

Number.MAX_VALUE                        1.79E+308
Number.MAX_SAFE_INTEGER                 Math.pow(2, 53) - 1
Number.MIN_SAFE_INTEGER             - ( Math.pow(2, 53) - 1 )

if (num1 * num2 <= Number.MAX_VALUE) {
   func1();
} else {
   func2();
}

• NaN 不是数字的数字，仍然是数字类型（）

var num = 2 / "foo";                                   // NaN
typeof num === "number";                               // true 
NaN !== NaN                                            // true
isNaN(num)

Js提供了isNaN方法用于类型判断

Number.isNaN( "foo" )                                  // true

// 满足 isNaN方法 且 typeof 返回 number 的情况
if(!Number.isNaN){
  Number.isNaN = function(n){
    return ( typeof n === "number" && window.isNaN(n)  )
  }
}

//  NaN是 `Js` 中唯一一个不等于自身的值
if(!Number.isNaN){
  Number.isNaN = function(n){
    return n !== n
  }
}

5、值和引用

• JavaScript 中没有指针，引用的工作机制也不尽相同。在JavaScript 中变量不可能成为指针指向另一个变量的引用。
• JavaScript 引用指向的是值。如果一个值有10个引用，这些引用指向的都是同一个值，它们相互之间没有引用 / 指向关系。

var a = 2;
var b = a;
b++;
a ;             // 2
b ;             // 3

var c = [1, 2, 3] ;
var d = c ;
d.push(4);
c ;             // [1, 2, 3, 4]
d ;             // [1, 2, 3, 4]

• 由于引用指向的是值本身而非变量，所以一个引用无法更改另一个引用的指向

var a = [1, 2, 3]
var b = a
a ;             // [1, 2, 3]
b ;             // [1, 2, 3]

b = [4, 5, 6]
a ;             // [1, 2, 3]
b ;             // [4, 5, 6] 

• 如果想通过b来修改a的值，应该在相同指向的时候进行对值修改，而非重新修改引用

var a = [1, 2, 3]
var b = a
a ;             // [1, 2, 3]
b ;             // [1, 2, 3]

b.length = 0
b.push(4, 5, 6)
a ;             // [4, 5, 6]
b ;             // [4, 5, 6] 

• 然而基础类型不可修改

function foo(x){
  x = x + 1
  console.log(x)//  3
}
var a = 2 
foo(a)
console.log(a)  //  2

引用功能强大，但有时也会成为阻碍，赋值 / 参数传递是通过引用还是值复制完全由值的类型来决定，所以使用那种类型也间接决定了赋值 / 参数传递的方式。

6、原生函数（内建函数）

原生函数可以被当做构造函数来进行使用，但是构造出来的对象和直接赋值的对象有所不同
new String(‘abc’) 创建的是字符串"abc"的封装对象，而非基本类型值"abc"

var a = new String( "abc" )
console.log(a)                                        // String {'abc'}
console.log(typeof a);                                // object
console.log(a instanceof String);                     // true
console.log(Object.prototype.toString.call( a ));     // "[object String]"
let b = 'b'
console.log(b)                                        // b
console.log(typeof b);                                // string
console.log(b instanceof String);                     // false
console.log(Object.prototype.toString.call( b ))      // "[object String]" 

• 于是就出现了奇怪的现象，
  这里new关键字创建的是false的封装对象，而不是基本类型false本身。对象本身是真值

var a = new Boolean( false )  
if(!a){
  console.log( "I'm here!" )    // 执行不到这里
}

• 那么如果想要获得封装对象中的基本类型值呢？(valueOf方法)

var a = new String( "abc" )
var b = new Number( 42 )
var c = new Boolean( true )

a.valueOf() ;   //  "abc"
b.valueOf() ;   //  42
c.valueOf() ;   //  true