一、变量声明与作用域管理

1.1 变量声明方式对比

JavaScript提供三种变量声明方式：var、let和const，三者存在本质差异：

var：函数作用域声明，存在变量提升现象

console.log(x); // undefined（变量提升）
var x = 10;

let：块级作用域声明，支持TDZ（暂时性死区）

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

const：常量声明，必须初始化且不可重新赋值

const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable

1.2 作用域链解析

变量查找遵循从内向外的作用域链机制：

let globalVar = 'global';
function outer() {
    let outerVar = 'outer';
    function inner() {
        console.log(globalVar); // 访问全局变量
        console.log(outerVar);  // 访问外层函数变量
    }
    inner();
}
outer();

二、数据类型与类型检测

2.1 原始类型与引用类型

JavaScript包含7种原始类型和1种引用类型：

原始类型：number、string、boolean、null、undefined、symbol、bigint
引用类型：object（包含数组、函数、日期等）

2.2 类型检测方法

// typeof操作符（无法区分null和对象）
console.log(typeof 42);       // "number"
console.log(typeof 'hello');   // "string"
console.log(typeof null);      // "object"（历史遗留问题）
// instanceof检测对象类型
console.log([] instanceof Array); // true
// Object.prototype.toString方法
function getType(value) {
    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}
console.log(getType(new Date())); // "date"

2.3 特殊值处理

undefined：变量未初始化时的默认值
null：显式赋值为空值

NaN：非数字值的特殊表示

console.log(Number('abc')); // NaN
console.log(isNaN('123'));  // false（会先尝试类型转换）
console.log(Number.isNaN('abc')); // true（严格检测）

三、运算符与表达式

3.1 数值运算特性

JavaScript采用IEEE 754双精度浮点数标准，存在精度限制：

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(3.1234567890123456789); // 3.1234567890123457（有效数字16位）

3.2 严格相等比较

使用===进行严格比较，避免类型转换带来的意外：

console.log(0 == false);    // true（类型转换）
console.log(0 === false);   // false（严格比较）
console.log(null == undefined); // true（特殊规则）
console.log(null === undefined); // false

四、流程控制结构

4.1 条件判断进阶

// 多条件判断优化
function getStatus(code) {
    return {
        200: 'OK',
        404: 'Not Found',
        500: 'Server Error'
    }[code] || 'Unknown Status';
}
// switch语句注意事项
let day = 3;
let dayName;
switch (day) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        dayName = 'Weekday';
        break; // 必须包含break
    default:
        dayName = 'Weekend';
}

4.2 循环控制技巧

// for...of遍历数组
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
    console.log(color);
}
// while循环注意事项
let i = 0;
while (i < 5) {
    if (i === 3) break; // 提前终止
    console.log(i);
    i++;
}

五、数组操作全解

5.1 数组创建方式

// 字面量方式
const arr1 = [1, 2, 3];
// Array构造函数
const arr2 = new Array(5); // 创建长度为5的空数组
const arr3 = new Array(1, 2, 3); // 等同于字面量
// Array.of方法（ES6新增）
const arr4 = Array.of(5); // [5]（与构造函数区别）

5.2 常用数组方法

// 不可变方法（返回新数组）
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
// 可变方法（修改原数组）
const letters = ['a', 'b', 'c'];
letters.push('d'); // ['a', 'b', 'c', 'd']
letters.splice(1, 1); // ['a', 'c', 'd']
// 迭代方法
numbers.forEach(n => console.log(n));
const found = numbers.find(n => n > 2); // 3

5.3 类数组对象转换

// arguments对象转换
function sum() {
    const args = Array.from(arguments);
    return args.reduce((a, b) => a + b);
}
// DOM元素集合转换
const divs = document.querySelectorAll('div');
const divArray = Array.from(divs);

六、最佳实践建议

严格模式：在文件顶部添加'use strict';启用严格模式
变量命名：采用驼峰命名法，避免使用保留字
常量定义：全部使用const声明，仅在需要重新赋值时使用let
错误处理：使用try...catch处理可能抛出异常的操作
性能优化：避免在循环中创建函数，注意闭包引用

通过系统掌握这些核心语法特性，开发者能够编写出更健壮、更易维护的JavaScript代码。建议结合实际项目进行实践验证，逐步深化对语言特性的理解。

JavaScript基础语法全解析：从变量到数据结构的实践指南