JavaScript 核心特性精要 - javascript-tutorial 重点解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00324/article/details/148361585

JavaScript 核心特性精要 - javascript-tutorial 重点解析

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

前言

本文将对 JavaScript 的基础核心特性进行系统性梳理，帮助开发者建立清晰的知识框架。我们将从代码结构到函数定义，全面覆盖 JavaScript 的基础要点。

代码结构与分号规范

JavaScript 的语句通常以分号结尾，但解释器具备"自动分号插入"(ASI)机制：

// 显式分号
alert('Hello'); alert('World');

// 依赖ASI
alert('Hello')
alert('World')

最佳实践建议：

始终显式使用分号结束语句
代码块 {} 后不需要分号
额外的分号不会导致错误，会被安全忽略

严格模式的重要性

现代 JavaScript 开发应该始终启用严格模式：

'use strict';

// 你的代码

严格模式带来的改进：

消除静默错误，抛出更多异常
优化编译器性能
禁用未来可能成为语法的功能
使 eval 和 arguments 更简单

注意：某些现代特性（如 class）会自动启用严格模式。

变量声明与数据类型

声明方式对比

| 关键字 | 作用域 | 可重新赋值 | 需要初始值 | |--------|--------|------------|------------| | let | 块级 | 是 | 否 | | const| 块级 | 否 | 是 | | var | 函数级 | 是 | 否 |

数据类型总览

JavaScript 有 8 种基本数据类型：

原始类型：
- number - 整数和浮点数
- bigint - 任意长度整数
- string - 字符串
- boolean - 逻辑值 true/false
- null - 表示"无"或"空"
- undefined - 表示"未赋值"
- symbol - 唯一标识符
引用类型：
- object - 复杂数据结构

类型检测陷阱：

typeof null === "object"  // 语言设计遗留问题
typeof function(){} === "function"  // 特殊处理

浏览器交互方法

在浏览器环境中，常用的用户交互方法有：

alert(message)
显示警告对话框，阻塞代码执行直到用户确认
prompt(question, [default])
显示带输入的对话框，返回用户输入或 null
confirm(question)
显示确认对话框，返回 true/false

示例应用：

const userName = prompt("请输入您的名字", "张三");
const isConfirmed = confirm("确认提交吗？");

alert(`用户: ${userName}`); 
alert(`确认状态: ${isConfirmed}`);

运算符详解

算术运算符

基本运算：+, -, *, /, % (取余), ** (幂运算)
字符串连接：+ 会自动类型转换

'3' + 4 // "34"
3 + '4' // "34"

比较运算符

== 会进行类型转换
=== 严格相等，不转换类型

特殊比较规则：

null == undefined // true
null === undefined // false
0 == false // true
'' == false // true

逻辑运算符

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

空值合并运算符 `??`

返回第一个已定义的值：

let user = null;
alert(user ?? "匿名"); // "匿名"

流程控制结构

循环结构

while 循环：
```
while (condition) {
  // 代码块
}
```

do...while 循环：

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

for 循环：

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

控制语句：

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

switch 语句

使用严格比较 ===：

switch (表达式) {
  case 值1:
    // 代码块
    break;
  
  case 值2:
    // 代码块
    break;
  
  default:
    // 默认代码块
}

注意：忘记 break 会导致 case 穿透！

函数定义方式

1. 函数声明

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

特点：

存在函数提升
块级作用域中行为特殊

2. 函数表达式

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

特点：

无函数提升
可作为参数传递

3. 箭头函数

// 简洁形式
const sum = (a, b) => a + b;

// 多行形式
const sum = (a, b) => {
  return a + b;
};

// 无参数
const greet = () => console.log('Hello');

// 单参数
const square = x => x * x;

特点：