你不知道的JavaScript（八）：类型和语法

àì夳堔傛蜴生んèń 2024-04-06 12:41 26阅读 0赞

#### 你不知道的JavaScript 中卷 第一部分 - 类型和语法 ####

*  类型
 *   *  内置类型
     *  值和类型
 *  值
 *   *  数组
     *  字符串
     *  数字
     *   *  语法
         *  较小的数值
         *  整数的安全范围
         *  整数检测
     *  特殊的值
     *   *  不是值的值
         *  特殊的数字
         *  特殊等式
 *  原生函数
 *   *  \`new String('abc')\` 和 \`'abc'\` 和 \`String('abc')\`
     *  内部属性\`\[\[CLass\]\]\`
     *  封装对象包装、拆封
     *  原生函数作为构造函数
     *   *  \`Array(..)\`
         *  \`Object(..)\`、\`Function(..)\` 和 \`RegExp(..)\`
         *  \`Date(..)\` 和 \`Error(..)\`
         *  符号-\`Symbol(..)\`
         *  \`原生原型\`
 *  强制类型转换
 *   *  值类型转换
     *  抽象值操作
     *   *  ToString
         *  ToNumber
         *  ToBoolean
     *  显式强制类型转换
     *   *  字符串和数字之间的显式转换
         *  显式解析数字字符串
     *  隐式强制类型转换
     *   *  字符串和数字之间的隐式强制类型转换
         *  隐式强制类型转换为布尔值
         *  || 和 &&
         *  符号(Symbol)的强制类型转换
     *  宽松相等(\`==\`) 和 严格相等(\`===\`)
     *   *  相等比较操作的性能
         *  抽象相等
         *  比较少见的情况
     *  抽象关系比较
 *  语法
 *   *  语句和表达式
     *   *  语句的结果值
         *  表达式的“副作用”
         *  上下文规则
     *  函数参数
     *  \`try..finally\`
     *  switch
 *  混合环境JavaScript
 *   *  全局DOM变量
     *  \`<script>\`
     *  保留字

## 类型 ##

### 内置类型 ###

> 历史遗留问题

typeof null === 'object'; // true
    
    // 判断是否为null的合理方法
    let a = null;
    (!a && typeof a === 'object'); // true

### 值和类型 ###

> 变量在未持有值的时候为`undefined`,此时`tyoeof`返回字符串格式的`"undefined"`

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>undefined</code></td> 
   <td>已在作用域中声明但还没有赋值的变量，是 <code>undefined</code> 的</td> 
  </tr> 
  <tr> 
   <td><code>undeclared</code></td> 
   <td>还没有在作用域中声明过的变量，是 <code>undeclared</code> 的、是 <code>is not defined</code> 的</td> 
  </tr> 
 </tbody> 
</table>

// 例如:
    var a;
    console.log(a); // undefined
    console.log(b); // ReferenceError: b is not defined

// 例如:
    var a;
    console.log(typeof a); // "undefined"
    console.log(typeof b); // "undefined"

*  注意：
    
     *  `undefined` 并不等于 `b is not defined`
     *  如果浏览器的报错换成 `b is not found` 或者 `“b is not declared` 才更加准确
     *  对于```a``b```变量使用`typeof`均返回`"undefined"`,这是因为`typeof`有一个特殊的安全防范机制,此时`typeof`如果能返回 `undeclared`（而非 `undefined`）的话，情况会好很多
     *  `typeof`的安全防范机制可用于检查变量是否被定义了
        
            if(typeof DEBUG !== "undefined") console.log('Hello');
     *  访问对象上不存在的字段不会报 `ReferenceError` 错误，另一种判断就可以是：
        
            if(window.DEBUG) console.log('Hello');

## 值 ##

### 数组 ###

*  `delete`运算符可以将单元从数组中删除，删除后数组的`length`并不会改变
    
        var list = [1, 2, 3];
        delete list[1];
        console.log(list); // (3) [0: 1, 2: 3, length: 3]
 *  虽然在Chrome中`list[1]`等于`undefined`，但与`list[1] = undefined`这种赋值的方式还是存在区别的
    
     *  注意：`永远不要创建和使用空单元数组`
    
        // 以下数组存在空单元（不带有索引1和值）
        var list = [1, 2, 3];
        delete list[1];
        console.log(list); // (3) [0: 1, 2: 3, length: 3]
        
        // 以下数组不存在空单元（带有索引1和值）
        var list = [1, 2, 3];
        list[1] = undefined;
        console.log(list); // (3) [0: 1, 1: undefined, 2: 3, length: 3]
 *  数组也是对象，所以可以包含`字符串类型的key`，但这些并不计算在数组长度内（不建议，存放键值建议使用对象）
    
        var list = [1, 2, 3];
        list.name = '123';
        console.log(list); // (3) [1, 2, 3, name: '123']
        console.log(list.length); // 3
 *  当数组中定义的`key能被强制转换成十进制数字`时，会被当做`数字索引值`处理
    
        var list = [1, 2, 3];
        list['5'] = 5;
        console.log(list); // (6) [0: 1, 1: 2, 2: 3, 5: 5, length: 6]
        console.log(list.length); // 6
 *  将类数组转换为数组
    
        function foo(){
              
            // 类数组
            console.log(arguments); // Arguments(2) ['foo', 'bar', callee: ƒ, Symbol(Symbol.iterator): ƒ]
            
            // 类数组转换为数组，方式一:
            console.log(Array.prototype.slice.call(arguments)); // ['foo', 'bar']
            
            // 类数组转换为数组，方式二:
            console.log(Array.from(arguments)); // ['foo', 'bar']
        }
        foo('foo', 'bar');

### 字符串 ###

> `字符串`不是`字符数组`，字符串无法借用数组的一些方法

### 数字 ###

#### 语法 ####

var a = 0.12;
    var a = .12;

var b = 0.10;
    var b = 0.1;

var c = 1.0;
    var c = 1.;

// 指数显示法
    var d = 5E8;
    d; // 500000000
    d.toExponential(); // "5e+8"

// toPrecision 用来指定有效数位的显示位数
    var e = 42.59;
    e.toPrecision(1); // "4e+1" 
    e.toPrecision(2); // "43" 
    e.toPrecision(3); // "42.6" 
    e.toPrecision(4); // "42.59" 
    e.toPrecision(5); // "42.590" 
    e.toPrecision(6); // "42.5900"

// tofixed 方法可指定小数部分的显示位数
    42.toFixed(2); // SyntaxError: Invalid or unexpected token
    (42).toFixed(2); // "42.00"
    42 .toFixed(2); // "42.00"
    42..toFixed(2); // "42.00"

#### 较小的数值 ####

> 判断两个数相等

*  由于js数字精度导致的问题：
    
        0.1 + 0.2 === 0.3; // false
 *  解决方法
    
        // 兼容写法
        if (!Number.EPSILON) {
              
            Number.EPSILON = Math.pow(2,-52);
        }
        // 绝对值相减是否小于精度引发的偏差值
        function numbersCloseEnoughToEqual(n1,n2) {
              
            return Math.abs( n1 - n2 ) < Number.EPSILON;
        }
        numbersCloseEnoughToEqual(0.1 + 0.2, 0.3); // true
        numbersCloseEnoughToEqual(0.1E-10, 0.2E-10); // false
        numbersCloseEnoughToEqual(0.1E-1000, 0.2E-1000); // true 当数字相差过小还是会出现精度问题

#### 整数的安全范围 ####

> 数字的呈现方式决定了“整数”的安全值范围远远小于 `Number.MAX_VALUE`

Number.MAX_VALUE; // 1.7976931348623157e+308
    Number.MAX_SAFE_INTEGER; // 9007199254740991
    Number.MIN_SAFE_INTEGER; // -9007199254740991

#### 整数检测 ####

*  整数检测
    
        Number.isInteger(42); // true 
        Number.isInteger(42.000); // true 
        Number.isInteger(42.3); // false
        
        // 兼容写法
        if (!Number.isInteger) {
               
            Number.isInteger = function(num) {
               
                return typeof num == "number" && num % 1 == 0; 
            }; 
        }
 *  安全整数检测

Number.isSafeInteger(Number.MAX_SAFE_INTEGER); // true 
    Number.isSafeInteger(Math.pow(2, 53)); // false 
    Number.isSafeInteger(Math.pow(2, 53) - 1); // true
    
    // 兼容写法
    if (!Number.isSafeInteger) {
         
        Number.isSafeInteger = function(num) {
         
            return Number.isInteger(num) && Math.abs(num) <= Number.MAX_SAFE_INTEGER; 
        }; 
    }

### 特殊的值 ###

#### 不是值的值 ####

> undefined 和 null 常被用来表示“空的”值或“不是值”的值。二者之间有一些细微的差别

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>undefined</code></td> 
   <td>undefined 指没有值(missing value); undefined 指从未赋值;</td> 
  </tr> 
  <tr> 
   <td><code>null</code></td> 
   <td>null 指空值(empty value); null 指曾赋过值，但是目前没有值;</td> 
  </tr> 
 </tbody> 
</table>

*  void 运算符
    
        void 1; // undefined
        void undefined; // undefined

#### 特殊的数字 ####

*  `NaN`
    
        NaN === NaN; // false
        typeof NaN; // 'number'
        isNaN(NaN); // true
 *  `无穷数`
    
        1 / 0; // Infinity
        -1 / 0; // -Infinity
        1 / 0 === Infinity; // true
        -1 / 0 === -Infinity; // true
        Number.MAX_VALUE + 1E1000; // Infinity
 *  `零值`
    
     *  加法和减法运算不会得到负零
        
            0 / -3; // -0
            0 * -3; // -0
            -0 === 0; // true
     *  `-0`字符串后变为`"0"`
        
            var a = 0 / -3;
            a; // -0
            a.toString(); // '0'
            a + ''; // '0'
            JSON.stringify(a); // '0'
     *  `"-0"`将字符串转换为数字后变为`-0`
        
            +"-0"; // -0
            Number( "-0" ); // -0
            JSON.parse( "-0" ); // -0
     *  判断是否为`-0`(`比如用于判断动画方向需要使用0的符号位`)
        
            function isNegZero(n) {
                    
                n = Number( n );
                return (n === 0) && (1 / n === -Infinity);
            }
            isNegZero( -0 ); // true
            isNegZero( 0 / -3 ); // true
            isNegZero( 0 ); // false

#### 特殊等式 ####

> 判断两个值是否绝对相等

Object.is(null, undefined); // false
    Object.is(-0, 0); // false
    Object.is(-0, -0); // true
    Object.is(NaN, NaN); // true
    Object.is(NaN, 0 / 'str'); // true

## 原生函数 ##

### `new String('abc')` 和 `'abc'` 和 `String('abc')` ###

// new String('abc') 
    let str1 = new String('abc');
    // String {0: "a", 1: "b", 2: "c", length: 3, [[Prototype]]: String, [[PrimitiveValue]]: "abc"}
    str1; 
    str1.toString(); // 'abc' 
    str1.length; // 3
    typeof str1; // 'object'
    str1 instanceof String; // true
    Object.prototype.toString.call(str1); // [object String]
    
    // 'abc'
    let str2 = 'abc';
    str2; // abc
    str2.toString(); // 'abc'
    str2.length; // 3
    typeof str2; // 'string'
    str2 instanceof String; // false
    Object.prototype.toString.call(str2); // '[object String]'
    
    // String('abc')
    let str3 = String('abc');
    str3; // abc
    str3.toString(); // 'abc'
    str3.length; // 3
    typeof str3; // 'string'
    str3 instanceof String; // false
    Object.prototype.toString.call(str3); // '[object String]'
    
    str1 === str2; // false
    str1 == str2; // true
    
    str1 === str3; // false
    str1 == str3; // true
    
    str2 === str3; // true
    str2 == str3; // true

*  总结：
    
     *  `new String("abc")` 创建的是字符串 `"abc"` 的封装对象，而非基本类型值 `"abc"`
     *  `'abc'` 和 `String('abc')` 一致

### 内部属性`[[CLass]]` ###

> 认为每个对象的内部都包含一个内部属性`[[CLass]]`,这个属性无法直接进行访问需要通过`Object.prototype.toString.call(..)`这种方式来查看

// 示例：
    let arr = new Array(1, 2, 3);
    Object.prototype.toString.call(arr); // '[object Array]'

### 封装对象包装、拆封 ###

> 由于基本类型值没有 `.length` 和 `.toString()` 这样的属性和方法，需要通过封装对象才能访问，此时 JavaScript 会自动为基本类型值包装（box 或者 wrap）一个封装对象

> 一般情况下，我们不需要直接使用封装对象。最好的办法是让 JavaScript 引擎自己决定什么时候应该使用封装对象

// 示例：
    let str = 'abc';
    str.length; // 3

*  注意：
    
     *  一般不推荐使用封装对象，比如`Boolean`
        
            let a = new Boolean(false);
            if(!a) console.log('abc');
            else console.log('Lee');
     *  以上代码最终返回 `Lee`，并不返回 `abc`, 因为对象返回`真`
     *  解决办法：
        
            let a = new Boolean(false);
            if(!a.valueOf()) console.log('abc');
            else console.log('Lee');
     *  提示：如果想要浏览器自行的去封装基本类型的值，可以使用 `Object(a)`
        
            let a = Object('abc'); 
            a; // String {'abc'}
            a.valueOf(); // abc
            
            let b = Object(12345); 
            b; // Number {12345}
            b.valueOf(); // 12345
            
            let c = Object(false); 
            c; // Boolean {false}
            c.valueOf(); // false
            
            let d = Object([1, 2]); 
            d; // (2) [1, 2]
            d.valueOf(); // (2) [1, 2]

### 原生函数作为构造函数 ###

> 关于`数组（array）`、`对象（object）`、`函数（function）`和`正则表达式`，我们通常喜欢以常量的形式来创建它们。实际上，使用常量和使用构造函数的效果是一样的（创建的值都是通过封装对象来包装）

#### `Array(..)` ####

*  构造函数 Array(…) 不要求必须带 new 关键字。不带时，它会被自动补上。因此 Array(1,2,3) 和 new Array(1,2,3) 的效果是一样的。
    
        var a = new Array( 1, 2, 3 );
        a; // [1, 2, 3]
        
        var b = [1, 2, 3];
        b; // [1, 2, 3]
 *  重点：`永远不要创建和使用空单元数组`

#### `Object(..)`、`Function(..)` 和 `RegExp(..)` ####

> `除非万不得已，否则尽量不要使用 Object(..)/Function(..)/RegExp(..)`

> `不要把 Function(..) 当作 eval(..) 的替代品，你基本上不会通过这种方式来定义函数`

#### `Date(..)` 和 `Error(..)` ####

> `Date(..)` 和 `Error(..)` 没有对应的常量形式来作为他们的替代

> 错误对象通常与 throw 一起使用

![请添加图片描述][f377e14dfe9843b0a4ce2a2e3d304830.png_pic_center]

> 除 `Error(..)` 之外，还有一些针对特定错误类型的原生构造函数，如 `EvalError(..)`、 `RangeError(..)`、`ReferenceError(..)`、`SyntaxError(..)`、`TypeError(..)` 和 `URIError(..)`。这些构造函数很少被直接使用，它们在程序发生异常（比如试图使用未声明的变量产生 ReferenceError 错误）时会被自动调用。

#### 符号-`Symbol(..)` ####

> 符号是具有唯一性的特殊值（并非绝对），用它来命名对象属性不容易导致重名

> 符号可以用作属性名，但无论是在代码还是开发控制台中都无法查看和访问它的值，只会显示为诸如 `Symbol(Symbol.create)` 这样的值

> 符号并非对象，而是一种简单标量基本类型

> 通过 `Object.getOwnPropertySymbols(..)` 便可以公开获得对象中的所有符号

> 很多开发人员喜欢用它来替代有下划线（\_）前缀的属性，而下划线前缀通常用于命名私有或特殊属性

#### `原生原型` ####

*  将原型作为默认值，对未赋值的变量来说，它们是很好的默认值
    
        // Function.prototype 是一个空函数
        Function.prototype; // ƒ () { [native code] }
        let a;
        let fun = a || Function.prototype;
        
        // RegExp.prototype 是一个“空”的正则表达式（无任何匹配）
        RegExp.prototype; // /(?:)/
        let a;
        let reg = a || RegExp.prototype;
        
        // Array.prototype 是一个空数组
        Array.prototype; // []
        let a;
        let arr = a || Array.prototype;

## 强制类型转换 ##

### 值类型转换 ###

> `显式类型转换(显式强制类型转换)`：将值从一种类型显示转换为另一种类型;

> `强制类型转换(隐式强制类型转换)`: 将值从一种类型隐式转换为另一种类型;

let a = 123;
    
    let b = a + '';     // 隐式强制类型转换
    
    let c = String(a);  // 显式强制类型转换

> `注意`: 理解上，`显式` 和 `隐式` 并没有明确的分界线，理解其含义那么它就是显式，不理解其意它也可以是隐式

### 抽象值操作 ###

#### ToString ####

> toString() 可以被显式调用，或者在需要字符串化时自动调用

*  对于极大或极小的值，`toString`方法在转换时会将数字转换为指数形式
    
        let num = 0.123 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000;
        num.toString(); // 1.23e+23
 *  对普通对象来说，除非自行定义，否则 `toString()`（`Object.prototype.toString()`）返回内部属性 `[[Class]]` 的值，如 `"[object Object]"`
    
        Object.prototype.toString(); // '[object Object]'
 *  数组的默认 toString() 方法经过了重新定义，将所有单元字符串化以后再用 “,” 连接起来
    
        var a = [1,2,3];
        a.toString(); // "1,2,3"
 *  安全的JSON值：
    
     *  `所有安全的 JSON 值（JSON-safe）都可以使用 JSON.stringify(..) 字符串化`
     *  `安全的JSON 值是指能够呈现为有效 JSON 格式的值`
 *  不安全的JSON值：
    
     *  `undefined`、`function`、`symbol`、`包含循环引用（对象之间相互引用，形成一个无限循环）的对象`
    
        JSON.stringify(undefined); // undefined
        JSON.stringify(function(){
              }); // undefined
        JSON.stringify(Symbol); // undefined
        JSON.stringify(Symbol.iterator); // undefined
        JSON.stringify([1, undefined, function(){
              }, 4]); // '[1,null,null,4]'
        JSON.stringify({
              a: 2, b: function(){
              }}); // '{"a":2}'
    
        // 对包含循环引用的对象执行 JSON.stringify(..) 会出错
        let a = {
              };
        let b = {
              a};
        a.b = b;
        JSON.stringify(b); // TypeError: Converting circular structure to JSON
 *  如果对象中定义了 `toJSON()` 方法，JSON 字符串化时会首先调用该方法，然后用它的返回值来进行序列化
    
     *  `toJSON()` 应该`“返回一个能够被字符串化的安全的 JSON 值”`，而不是`“返回一个 JSON 字符串”`
    
        let obj = {
              
            name: 'Lee',
            toJSON(){
              
                return {
              name1: this.name};
            } 
        }
        JSON.stringify(obj); // '{"name1":"Lee"}'
 *  所以 `深拷贝` 和 `JSON.parse(JSON.stringify(...))` 本质上不一样
 *  `JSON.stringify()`可以接收3个参数
    
        JSON.stringify(
            // 需要序列化的数据
            value: any,
            /**
             * 用来指定对象序列化过程中哪些属性应该被处理，哪些应该被排除，和 toJSON() 很像
             *      数组：必须是一个字符串数组，其中包含序列化要处理的对象的属性名称，除此之外其他的属性则被忽略
             *      函数：它会对对象本身调用一次，然后对对象中的每个属性各调用一次，每次传递两个参数，键和值。如果要忽略某个键就返回 undefined，否则返回指定的值
             */ 
            replacer?: (key: string, value: any) => any, 
            // 缩进
            space?: string | number
        ): string
    
     *  replacer数组示例：
        
            var obj = {
                    
                a: 123,
                b: "123",
                c: [1, 2, 3],
                d: {
                    
                    a: 123,
                    b: "123",
                    c: [1, 2, 3],
                }
            };
            let json1 = JSON.stringify(obj, ['a', 'b', 'd'], 1);
            /**
             * {
             *  "a": 123,
             *  "b": "123",
             *  "d": {
             *   "a": 123,
             *   "b": "123"
             *  }
             * }
             */
            console.log(json1);
     *  replacer函数示例：  
        ![在这里插入图片描述][873c0ec9608446b6b5c452486386ce4e.png]
        
            var obj = {
                    
                a: 123,
                b: "123",
                c: [1, 2, 3],
                d: {
                    
                    a: 123,
                    b: "123",
                    c: [1, 2, 3],
                }
            };
            let json1 = JSON.stringify(obj, (k, v)=>{
                    
                console.log('【key】', k, '【value】', v);
                return v;
            }, null);
            // {"a":123,"b":"123","c":[1,2,3],"d":{"a":123,"b":"123","c":[1,2,3]}}
            console.log(json1);
     *  space缩进示例：
        
            var obj = {
                    
                b: 123,
                c: "123",
                d: [1, 2, 3]
            };
            let json1 = JSON.stringify(obj, null, 4);
            /**
             * {
             *     "b": 123,
                *     "c": "123",
                *     "d": [
                *         1,
                *         2,
                *         3
                *     ]
                * }
                */
            console.log(json1);
            
            let json2 = JSON.stringify(obj, null, '--');
            /**
             * {
             * --"b": 123,
                * --"c": "123",
                * --"d": [
                * ----1,
                * ----2,
                * ----3
                * --]
                * }
                */
            console.log(json2);

#### ToNumber ####

Number(true); // 1
    Number(false); // 0
    Number(undefined); // NaN
    Number(null); // 0
    Number(''); // 0
    Number([]); // 0
    Number(['a', 1]); // NaN
    Number([1, 2, 3]); // NaN
    Number({
        }); // NaN

*  ToNumber 对以 0 开头的十六进制数并不按十六进制处理(而是按十进制)
    
        Number(0x10); // 16 解析成十进制
        Number(010); // 8 解析成十进制

> 为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会
> 
> 首先（通过内部操作 DefaultValue）检查该值是否有 valueOf() 方法。
> 
> 如果有并且返回基本类型值，就使用该值进行强制类型转换。
> 
> 如果没有就使用 toString()的返回值（如果存在）来进行强制类型转换。
> 
> 如果 valueOf() 和 toString() 均不返回基本类型值，会产生 TypeError 错误。

Number({
         valueOf(){
         return '123' } }); // 123
    Number({
         valueOf(){
         return 'abc' } }); // NaN
    Number({
         valueOf(){
         return '' } }); // 0
    
    let a = [1, 2, 3];
    a.valueOf = () => '111';
    a.toString = () => '456';
    Number(a); // 111
    
    let a = [1, 2, 3];
    a.toString = () => '456';
    Number(a); // 456

#### ToBoolean ####

*  假值(可以被强制类型转换为false的值)
    
     *  `undefined` `null` `false` `+0` `-0` `NaN` `''` `""`
 *  真值(真值就是假值列表之外的值)

### 显式强制类型转换 ###

#### 字符串和数字之间的显式转换 ####

*  日期对象显式转换为时间戳
    
        let timestamp = new Date();
        +timestamp; // 时间戳
 *  `~`运算符（字位运算符`非`）(不推荐使用,难以理解)
    
     *  `~x` 大致等同于 `-(x+1)` （`大致等同于` 不等于 `等于`）
    
        let arr = [1, 2, 3];
        
        // arr.indexOf(2); // 1
        // ~arr.indexOf(2); // -2
        
        // arr.indexOf(4); // -1
        // ~arr.indexOf(4); // 0
        
        function isOfData1(x){
              
            if(arr.indexOf(x) !== -1)
                console.log(x, '存在');
            else
                console.log(x, '不存在');
        }
        
        function isOfData2(x){
              
            if(~arr.indexOf(x))
                console.log(x, '存在');
            else
                console.log(x, '不存在');
        }
        
        isOfData1(2); // 2 '存在'
        isOfData2(2); // 2 '存在'
        
        isOfData1(4); // 4 '不存在'
        isOfData2(4); // 4 '不存在'
 *  字位截除
    
        ~~12.123; // 12

#### 显式解析数字字符串 ####

*  `parseInt`只支持字符串和数字类型的参数，尽量不要传入非这两种类型的参数
    
        Number({
               valueOf: _ => 123 }); // 123
        parseInt('123'); // 123
        parseInt({
               valueOf: _ => 123 }); // NaN
        parseInt({
              }); // NaN
 *  `parseInt` 的 `坑`
    
     *  如果没有第二个参数来指定转换的数（又称为 radix），parseInt(…) 会根据字符串的第一个字符来自行决定基数
        
            parseInt('0x10'); // 16
            parseInt('0x10', 10); // 0
     *  解析非字符串
        
            parseInt(1/0, 19);      // 18
            parseInt(Infinity, 19); // 18
     *  `parseInt` 一些奇怪的返回值
        
            parseInt(0.000008);     // 0    ("0" 来自于 "0.000008")
            parseInt(0.0000008);    // 8    ("8" 来自于 "8e-7")
            parseInt(false, 16);    // 250  ("fa" 来自于 "false")
            parseInt(parseInt, 16); // 15   ("f" 来自于 "function..")
            parseInt("0x10");       // 16
            parseInt("103", 2);     // 2
 *  注意：合理使用 `parseInt`

### 隐式强制类型转换 ###

> 隐式强制类型转换的作用是减少冗余，让代码更简洁

#### 字符串和数字之间的隐式强制类型转换 ####

#### 隐式强制类型转换为布尔值 ####

> 相对布尔值，数字和字符串操作中的隐式强制类型转换还算比较明显

*  下面的情况会发生布尔值隐式强制类型转换:
    
     *  `if (..)` 语句中的条件判断表达式
     *  `for ( .. ; .. ; .. )` 语句中的条件判断表达式（第二个）
     *  `while (..)` 和 `do..while(..)` 循环中的条件判断表达式
     *  `? :` 中的条件判断表达式
     *  逻辑运算符 `||（逻辑或）`和 `&&（逻辑与）`左边的操作数（作为条件判断表达式）

#### || 和 && ####

> 短路语句

*  `&&` : 返回第一个为假的表达式,否则返回最后一个表达式
 *  `||` : 返回第一个为真的表达式,否则返回最后一个表达式

#### 符号(Symbol)的强制类型转换 ####

> 从符号到字符串的显式强制类型转换
> 
> 从符号到字符串的隐式强制类型转换会产生错误

var s1 = Symbol( "cool" );
    String( s1 ); // "Symbol(cool)"
    var s2 = Symbol( "not cool" );
    s2 + ""; // TypeError: Cannot convert a Symbol value to a string

### 宽松相等(`==`) 和 严格相等(`===`) ###

> 推荐 `===` ，原因：`严格`

#### 相等比较操作的性能 ####

> 有人觉得 `==` 会比 `===` 慢，实际上虽然强制类型转换确实要多花点时间，但仅仅是微秒级（百万分之一秒）的差别而已。

> 如果进行比较的两个值类型相同，则 `==` 和 `===` 使用相同的算法，所以除了 JavaScript 引擎实现上的细微差别之外，它们之间并没有什么不同。
> 
> 如果两个值的类型不同，我们就需要考虑有没有强制类型转换的必要，有就用 `==`，没有就用 `===`，不用在乎性能

#### 抽象相等 ####

*  字符串和数字之间的相等比较
    
     *  (1) 如果 `Type(x)` 是数字，`Type(y)` 是字符串，则返回 `x == ToNumber(y)` 的结果;
     *  (2) 如果 `Type(x)` 是字符串，`Type(y)` 是数字，则返回 `ToNumber(x) == y` 的结果;
 *  其他类型和布尔类型之间的相等比较
    
     *  (1) 如果 `Type(x)` 是布尔类型，则返回 `ToNumber(x) == y` 的结果;
     *  (2) 如果 `Type(y)` 是布尔类型，则返回 `x == ToNumber(y)` 的结果;
 *  `null` 和 `undefined` 之间的相等比较
    
     *  (1) 如果 `x` 为 `null`，`y` 为 `undefined`，则结果为 true;
     *  (2) 如果 `x` 为 `undefined`，`y` 为 `null`，则结果为 true;
 *  对象和非对象之间的相等比较(`ToPrimitive` 抽象操作特性（如 `toString()`、`valueOf()`）)
    
     *  (1) 如果 `Type(x)` 是字符串或数字，`Type(y)` 是对象，则返回 `x == ToPrimitive(y)` 的结果;
     *  (2) 如果 `Type(x)` 是对象，`Type(y)` 是字符串或数字，则返回 `ToPrimitive(x) == y` 的结果;

#### 比较少见的情况 ####

*  返回其他数字
    
        Number.prototype.valueOf = function() {
              
            return 3;
        };
        new Number(2) == 3; // true
 *  假值的相等比较
    
        "0" == null;            // false
        "0" == undefined;       // false
        "0" == false;           // true -- 晕！
        "0" == NaN;             // false
        "0" == 0;               // true
        "0" == "";              // false
        false == null;          // false
        false == undefined;     // false
        false == NaN;           // false
        false == 0;             // true -- 晕！
        false == "";            // true -- 晕！
        false == [];            // true -- 晕！
        false == {
              };            // false
        "" == null;             // false
        "" == undefined;        // false
        "" == NaN;              // false
        "" == 0;                // true -- 晕！
        "" == [];               // true -- 晕！
        "" == {
              };               // false
        0 == null;              // false
        0 == undefined;         // false
        0 == NaN;               // false
        0 == [];                // true -- 晕！
        0 == {
              };                // false
 *  极端情况
    
        [] == [];               // false
        [] == ![];              // true
        2 == [2];               // true
        "" == [null];           // true
        0 == "\n";              // true
        42 == "43";             // false
        "foo" == 42;            // false
        "true" == true;         // false
        42 == "42";             // true
        "foo" == [ "foo" ];     // true
 *  安全运用隐式强制类型转换
    
     *  如果两边的值中有 `true` 或者 `false`，千万不要使用 `==`
     *  如果两边的值中有 `[]`、`""` 或者 `0`，尽量不要使用 `==`

![在这里插入图片描述][01c2083db97843acaec058e9049048ee.png_pic_center]

### 抽象关系比较 ###

*  双方首先调用 ToPrimitive，如果结果出现非字符串，就根据 ToNumber 规则将双方强制类型转换为数字来进行比较
    
        var a = [ 42 ];
        var b = [ "43" ];
        
        a < b; // true
        b < a; // false
 *  比较双方都是字符串，则按字母顺序来进行比较
    
        var a = [ "42" ];
        var b = [ "043" ];
        a < b; // false
 *  在js中`<=`不解释为`小于等于`,而是解释为`不大于`
    
        var a = {
               b: 42 };
        var b = {
               b: 43 };
        
        a < b;  // false
        a == b; // false
        a > b;  // false
        
        a <= b; // true
        a >= b; // true

## 语法 ##

### 语句和表达式 ###

> 语句不是表达式
> 
> 语句相当于“句子”，而表达式相当于“短语”。“句子”由多个“短语”组成。

let a; // 声明语句
    a = 3 * 2; // 赋值表达式
    a; // 表达式语句

#### 语句的结果值 ####

> 语句都有一个结果值, `undefined` 也算

var a, b;
    a = if (true) {
        b = 4 + 38;}; // SyntaxError: Unexpected token 'if'
    
    // eval 不推荐
    var a, b;
    a = eval( "if (true) { b = 4 + 38; }" );
    a; // 42

#### 表达式的“副作用” ####

*  a++ 首先返回变量 a 的当前值 42（再将该值赋给 b），然后将 a 的值加 1
    
        var a = 42;
        var b = a++;
        a; // 43
        b; // 42
 *  `a++` 和 `++a`
    
        var a = 42;
        a++;    // 42
        a;      // 43
        ++a;    // 44
        a;      // 44

#### 上下文规则 ####

*  标签语句（不推荐使用）
    
        // obj对象
        var obj = {
              
            foo: () => 123
        }
    
     *  当去掉 `var obj =` 去掉后，并不会报错，而是变成了一个`标签语句`,如下：
        
            // 代码块
            {
                    
                /**
                 * 标签语句
                *  结果：
                *      0 0
                *      1 0
                *      2 0
                */
                foo: for (let i = 0; i < 3; i++) {
                    
                    for (let j = 0; j < 3; j++) {
                    
                        console.log(i, j);
                        continue foo;
                    }
                }
            }
 *  标签语句用于非循环代码块(但只有 break 才可以)
    
        (()=>{
              
            foo: {
              
            console.log('Hello');
                break foo;
                console.log(234);
            }
            console.log('Lee');
        })()
        // Hello
        // Lee
 *  代码块
    
     *  `[] + {};` 和 `{} + [];`
        
            [] + {
                    }; // '[object Object]' 原因：[]被处理成了'',而{}在表达式中被处理成了空对象，所以输出'[object Object]'
            {
                    } + []; // 0 原因：{}被看作了代码块，而[]被处理成了'',故+[]为0
 *  对象结构
    
        var {
              a, b} = {
              a: 123, b: 456};
        var {
              a: a, b: b} = {
              a: 123, b: 456};
        var {
              a: c, b: d} = {
              a: 123, b: 456};
        var [a, b] = [123, 456];

### 函数参数 ###

*  参数默认值
    
        function foo(a = 1, b = a + 1) {
              
            return a + b;
        }
        foo();              // 3
        foo(2);             // 5
        foo(2, 2);          // 4
        foo(undefined, 1);  // 2
        foo(void 123, 1);   // 2
        foo(null, 1);       // 1

### `try..finally` ###

try {
        
        foo();
    } catch (error) {
        
        console.log(error); // ReferenceError: foo is not defined
    } finally {
        
        console.log('Hello Lee!'); // Hello Lee!
    }

*  当 `finally` 中存在 `return` 会覆盖掉 `try` 和 `catch` 中的 `return` 返回值
    
        function foo(){
              
            try {
              
                // return bar();
                return 'abc';
            } catch (error) {
              
                console.log(error);
                return 'error';
            } finally {
              
                return 123;
            }
        }
        console.log(foo()); // 123
 *  `finally` 和带`标签`的 `break` 混合使用
    
        function foo(){
              
            bar: {
              
                try {
              
                    return 'abc';
                } catch (error) {
              
                    console.log(error);
                    return 'error';
                } finally {
              
                    break bar;
                }
            }
        
            console.log('Hello');
        
            return 'World';
            
        }
        console.log(foo()); // Hello World

### switch ###

*  `switch (a)` 执行的是 `===` 判断
 *  `switch (true)` 可以自定义执行对变量的比较操作

var a = '10';
    
    // a 为 10 or '10'
    switch (true) {
        
        case a == 20:
            console.log(`a 为 20 or '20'`);
            break;
        case a == 10:
            console.log(`a 为 10 or '10'`);
            break;
        default:
            console.log('没有分析出a的值');
            break;
    }
    
    // 没有分析出a的值
    switch (a) {
        
        case 20:
            console.log(`a 为 20 or '20'`);
            break;
        case 10:
            console.log(`a 为 10 or '10'`);
            break;
        default:
            console.log('没有分析出a的值');
            break;
    }

## 混合环境JavaScript ##

### 全局DOM变量 ###

> 由于浏览器演进的历史遗留问题，在创建带有`id`属性的`DOM元素`时也会创建同名的`全局变量`

<div id="foo"></div>
    <script>
        console.log(foo); // HTML元素
    </script>

### `<script>` ###

> 多个 `<script>` 标签下的代码可以互相调用，但前提是需要保证前后顺序

console.log(foo()); // undefined
    function foo(){
        };

### 保留字 ###

> `保留字`不能用作变量名（包括四类：`关键字` `预留关键字` `null常量` `true/false布尔常量`）

[f377e14dfe9843b0a4ce2a2e3d304830.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/eee714aecc034a8aa086eb94bfd4b469.png
[873c0ec9608446b6b5c452486386ce4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2674f24eae98460aa3b76c00b3f4095a.png
[01c2083db97843acaec058e9049048ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3aa619ea501d406cb46dbc09fca622c5.png