JavaScript 基础特性全面解析 - javascript-tutorial 技术指南

JavaScript 基础特性全面解析 - javascript-tutorial 技术指南

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。 项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

JavaScript 作为现代 Web 开发的核心语言，其基础特性是每位开发者必须掌握的。本文将从代码结构到核心语法，系统性地介绍 JavaScript 的基础特性，帮助初学者构建完整的知识体系。

代码结构与分号规则

JavaScript 的代码结构遵循特定的语法规则：

1. 语句分隔：传统上使用分号(;)分隔语句

   console.log('Hello'); console.log('World');
   

2. 自动分号插入(ASI)：JavaScript 引擎会自动在换行处插入分号

   console.log('Hello')
   console.log('World')
   

重要提示：虽然 ASI 机制存在，但显式使用分号是更可靠的编码实践，可以避免以下典型问题：

alert("示例")
[1, 2].forEach(alert)  // 这里会出现错误

严格模式详解

严格模式('use strict')是现代 JavaScript 开发的基石：

'use strict';
// 严格模式下的代码

严格模式的主要优势：

• 消除 JavaScript 的一些静默错误
• 修复导致 JavaScript 引擎难以优化的缺陷
• 禁止使用未来版本可能定义的语法

注意：类(class)和模块(module)会自动启用严格模式

变量声明与数据类型

变量声明方式

1. let - 块级作用域变量
2. const - 块级作用域常量
3. var - 函数作用域变量(旧式)

变量命名规范

• 首字符必须是字母、$或_
• 后续字符可以是字母、数字、$或_
• 区分大小写
• 非ASCII字符允许但不推荐

JavaScript 的8大数据类型

| 类型 | 描述 | 示例 | |------|------|------| | number | 整数或浮点数 | 42, 3.14 | | bigint | 任意精度整数 | 123n | | string | 文本数据 | "hello" | | boolean | 逻辑值 | true, false | | null | 空值 | null | | undefined | 未定义值 | undefined | | object | 复杂数据结构 | {name: "John"} | | symbol | 唯一标识符 | Symbol("id") |

特殊注意：

typeof null === "object"  // 历史遗留问题
typeof function(){} === "function"  // 函数的特殊处理

用户交互方法

浏览器环境提供了三种基本的用户交互方式：

1. alert(message) - 显示消息对话框

   alert("Welcome!");
   

2. confirm(question) - 确认对话框

   let isOK = confirm("Are you sure?");
   

3. prompt(question, [default]) - 输入对话框

   let name = prompt("Your name?", "Anonymous");
   

特性说明：这些方法都会产生模态窗口，阻塞代码执行直到用户响应

运算符全面解析

算术运算符

• 基础运算：+, -, *, /, %(取余), **(幂)
• 字符串连接：+(当任一操作数为字符串时)

  "1" + 2 = "12"  // 字符串连接
  1 + "2" = "12"  // 字符串连接
  

比较运算符

• == 松散相等(会进行类型转换)

  0 == false  // true
  "" == 0     // true
  

• === 严格相等(不进行类型转换)

  0 === false  // false
  "" === 0     // false
  

逻辑运算符

• && (逻辑与) - 返回第一个假值或最后一个值
• || (逻辑或) - 返回第一个真值或最后一个值
• ! (逻辑非) - 返回布尔值的反值

特殊运算符

• 空值合并运算符(??) - 返回第一个非null/undefined的值

  let value = input ?? "default";
  

• 三元运算符 - condition ? expr1 : expr2

流程控制结构

循环结构

1. while循环

   while (condition) {
     // 代码块
   }
   

2. do...while循环

   do {
     // 代码块
   } while (condition);
   

3. for循环

   for (let i = 0; i < 10; i++) {
     // 代码块
   }
   

控制语句：

• break - 退出整个循环
• continue - 跳过当前迭代

switch语句

switch使用严格相等(===)进行比较：

switch (expression) {
  case value1:
    // 代码块
    break;
  case value2:
    // 代码块
    break;
  default:
    // 默认代码块
}

注意：case子句通常需要break语句，否则会继续执行下一个case

函数定义与使用

JavaScript提供了多种函数定义方式：

1. 函数声明

   function sum(a, b) {
     return a + b;
   }
   

2. 函数表达式

   let sum = function(a, b) {
     return a + b;
   };
   

3. 箭头函数 (ES6+)

   // 简洁形式
   let sum = (a, b) => a + b;
   
   // 多行形式
   let sum = (a, b) => {
     let result = a + b;
     return result;
   };
   

函数特性：

• 参数默认值：function greet(name = "Guest") {...}
• 返回值：无return语句时返回undefined
• 作用域：函数内部声明的变量只在函数内可见

结语

本文全面介绍了 JavaScript 的基础特性，从代码结构到核心语法要素。掌握这些基础知识是成为 JavaScript 开发者的第一步。随着学习的深入，你会发现 JavaScript 还有更多强大的特性和高级概念等待探索。

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。 项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info