你不知道的JS（下）：深入JS（上）

本文是《你不知道的JavaScript（下卷）》的阅读笔记，第二部分：深入JS（上）。供自己以后查漏补缺，也欢迎同道朋友交流学习。

原文地址

墨渊书肆/你不知道的JS（下）：深入JS（上）

值和类型

JavaScript 的值有类型，但变量无类型。内置类型包括：

字符串 (string)
数字 (number)
布尔型 (boolean)
null 和 undefined
对象 (object)
符号 (symbol，ES6 新增)

使用 typeof 运算符可以查看值的类型。注意：typeof null 返回 "object"，这是一个历史遗留问题。

对象

对象是 JavaScript 中最有用的值类型，可以设置属性。

javascript 复制代码

var obj = { 
    a: "hello world", 
    b: 42, 
    c: true
}; 
obj.a; // "hello world" 
obj["b"]; // 42

数组与函数

数组和函数是对象的特殊子类型：

数组：持有值的对象，通过数字索引位置管理。

javascript 复制代码

var arr = ["hello world", 42, true]; 
arr[0]; // "hello world" 
arr.length; // 3 
typeof arr; // "object"

函数：也是对象的一个子类型，可以拥有属性。
javascript 复制代码
```
function foo() { return 42; } 
foo.bar = "hello world"; 
typeof foo; // "function"
```

内置类型方法

内置类型及其子类型拥有作为属性和方法暴露出来的行为：

javascript 复制代码

var a = "hello world"; 
a.length; // 11 
a.toUpperCase(); // "HELLO WORLD"

值的比较

JavaScript 中任何比较的结果都是布尔值（true 或 false）。

真与假 (Truthy & Falsy)

JavaScript 中的"假"值列表：

""（空字符串）
0、-0、NaN（无效数字）
null、undefined
false 除以上值外，所有其他值均为"真"值。

相等性

相等运算符有四种：==、===、!= 和 !==。

==：允许类型转换情况下的相等性检查。
===：不允许类型转换（严格相等）。

javascript 复制代码

var a = "42"; 
var b = 42;
a == b;  // true (隐式转换)
a === b; // false (严格相等)

关系比较

<、>、<=、>= 用于比较有序值（如数字或字母序字符串 "bar" < "foo"）。

变量与作用域

变量标识符必须由 a-z、A-Z、$ 或 _ 开始，可以包含数字。

ES6 语法扩展

spread/rest 运算符 (...)：取决于使用位置，用于展开数组或收集参数。

javascript 复制代码

// 展开
function foo(x,y,z) { console.log( x, y, z ); } 
foo( ...[1,2,3] ); // 1 2 3
// 收集
var a = [2,3,4]; 
var b = [ 1, ...a, 5 ]; // [1,2,3,4,5]

默认参数值：为缺失参数提供默认值。

javascript 复制代码

function foo(x = 11, y = 31) { console.log( x + y ); } 
foo(5); // 36 (y 使用默认值)
foo(5, undefined); // 36 (undefined 触发默认值)
foo(5, null); // 5 (null 被强制转换为 0)

提升 (Hoisting)

使用 var 声明的变量和函数声明会被"提升"到其所在作用域的最顶端。

javascript 复制代码

var a = 2;
foo(); 
function foo() { 
    a = 3; 
    console.log( a ); // 3 
    var a; // 声明被提升到了 foo() 的顶端
} 
console.log( a ); // 2

作用域嵌套

声明后的变量在当前作用域及其所有内层作用域中随处可见。

javascript 复制代码

function foo() { 
    var a = 1; 
    function bar() { 
        var b = 2; 
        function baz() { 
            var c = 3; 
            console.log( a, b, c ); // 1 2 3 (向上查找作用域链)
        } 
        baz(); 
    } 
    bar(); 
}

条件判断与循环

除了 if..else，JavaScript 还提供了多种控制流机制。

条件判断

switch：适用于多分支判断。
三元运算符 ? :：简洁的条件表达式。

循环

for..of 循环 ：ES6 新增，直接在迭代器产生的值上循环。
javascript 复制代码
```
var a = ["a","b","c"]; 
for (var val of a) { 
    console.log( val ); // "a" "b" "c"
}
```

箭头函数 (=>)

箭头函数不仅是更短的语法，它还解决了 this 绑定的常见痛点（采用词法 this）。

javascript 复制代码

var controller = { 
    makeRequest: function(){ 
        btn.addEventListener( "click", () => { 
            this.makeRequest(); // this 继承自父层，即 controller
        }, false ); 
    } 
};

箭头函数是匿名函数表达式，没有自己的 arguments、super 和 new.target。

小结

深入理解 JavaScript 的第一步是掌握其核心机制：

值与类型：JS 的变量无类型但值有类型。
强制类型转换 ：理解 == 与 === 的区别，以及真假值的判断规则。
作用域与提升 ：掌握 var 的声明提升行为以及嵌套作用域的查找规则。
现代语法 ：熟悉 ES6 带来的 spread 运算符、默认参数、for..of 循环以及箭头函数等新特性。

通过掌握这些基础，我们可以更从容地应对更高级的 JS 特性。