JavaScript基础语法与核心组成详解

JavaScript的应用领域与组成

JavaScript（简称JS）最初主要用于网页特效开发，如今已具备“通用”编程能力。其应用场景包括：

• 前端交互与网页游戏开发
• 服务器端开发（如Node.js环境）
• 桌面应用程序开发（依托Electron框架）
• 移动端应用开发

JS代码的执行依赖于JavaScript引擎（主流如V8），类似于Java依赖JVM。其语言标准主要由三部分组成：

• ECMAScript (ES)：定义语言核心语法
• DOM (Document Object Model)：页面文档对象模型，用于操作页面元素
• BOM (Browser Object Model)：浏览器对象模型，用于操作浏览器窗口

DOM和BOM均为浏览器提供的API接口，使JS能够与环境和页面进行交互。

第1步：Hello World示例

JS最简单的执行方式是弹出提示框，通常嵌入在HTML中：

<script>
    alert('hello world');
</script>

注意：在实际项目中，alert()因影响用户体验，不建议频繁使用，它主要用于教学或调试演示。

第2步：理解JavaScript的书写形式

JS代码与HTML结合有三种常见方式：

内嵌式（Internal）

将代码直接写入HTML文件的<script>标签内：

<script>
    alert('hello world');
</script>

内联式（Inline）

将JS代码作为事件属性值放在HTML标签中：

<button onclick="alert('hello world')">点击按钮</button>

单双引号规范：JS中字符串支持单引号和双引号。HTML属性推荐双引号，JS内部字符串推荐单引号，避免嵌套冲突。

外部式（External）

将JS代码存入独立的.js文件，通过src属性引入：

<script src="hello.js"></script>

alert("hello world");

这种方式类似C语言的#include，将文件内容拷贝至标签处。优势在于代码复用、便于维护及缓存优化。

第3步：学习代码注释

不同技术栈的注释语法如下：

第4步：掌握输入输出操作

JS提供了几种基本的控制台交互方式：

• 输入：prompt("请输入...")，弹出输入框返回用户输入的字符串。
• 警告输出：alert("msg")，阻断式弹窗，显示信息。
• 控制台输出：console.log('msg')，将结果打印到开发者工具控制台，用于非阻塞式调试。

console.log('hello world');

在浏览器中按F12打开控制台即可看到输出。部分网站（如Bilibili）会在控制台中包含彩蛋代码。

变量声明与动态类型

第5步：变量的定义方式

JS中推荐使用let和const（常量），较少使用老旧的var：

var name = 'Gujiu'; // 旧式写法，作用域坑较多
let age = 18;      // 新式写法，块级作用域，推荐使用

关键概念：

• 动态类型：JS不强制声明变量类型，变量的类型由赋值决定。若赋值为字符串，变量即为String类型；赋值为数字，则为Number类型。
• 自动推导：类似C++的auto、Java 11+的var、Go的:=，JS在运行时推断类型。

动态类型的优缺点

JS是典型的弱类型语言，变量类型在运行期间可发生变化：

int num = 10;
num = "hello"; // Java报错：类型不匹配

而在JS中：

(此处应展示JS允许变量类型随意切换的截图)

• 优点：灵活度高，函数可接收多种类型参数，相当于自带泛型。
• 缺点：大型项目或多团队协作时，缺乏静态类型检查容易导致隐蔽Bug，增加维护难度。

基本数据类型详解

第6步：Number（数字类型）

JS中整数和浮点数统一归为Number类型，无显式区分：

let a = 1;
console.log(a / 2); // 输出 0.5

特殊值：

• Infinity：正无穷大（通常由除以0产生）。
• -Infinity：负无穷小。
• NaN：Not a Number，表示非数字（如'hello' - 10）。

第7步：String（字符串）

字符串可使用单引号' '或双引号" "包裹。若内部包含同种引号需转义：

let name1 = "My name is \"Gujiu\"";
let name2 = 'My name is "Gujiu"';

常用操作：

• 长度：str.length，计算字符数而非字节数。
• 拼接：使用+，数字会自动隐式转换为字符串。
• 比较：==用于判断内容是否相等。

第8步：Boolean（布尔类型）

值为true或false。JS支持隐式转换：true转为1，false转为0。这种灵活性虽方便，但易引发混淆，强类型语言（如Java）禁止此类混合运算。

第九步：Undefined与Null

• undefined：变量已声明但未赋值，或访问不存在的属性。算术运算结果为NaN，字符串拼接转为字符串"undefined"。
• null：表示“空值”，强调盒子存在但内容为空。常用于手动重置对象引用。

区别：Undefined是“没定义”，Null是“定义了但为空”。

常用运算符

JS运算符与Java/C大致相同，需注意以下细节：

比较运算符

• ==：宽松相等，会发生隐式类型转换（如'1' == 1为true）。
• ===：严格相等，类型不同直接返回false，推荐在开发中使用。

逻辑运算符

• &&：与。若第一项为真，返回第二项；否则返回第一项。
• ||：或。b = a || 0含义：若a为真则b=a，否则b=0。
• !：非。

其他运算符

• 算术：+ - * / %
• 赋值：= += -= *= /= %=
• 自增/减：++ --
• 位运算：& | ~ ^
• 移位：<< >> >>>

以上就是JavaScript 之JS的组成与基本语法的详细内容，更多关于JS的组成与基本语法的资料请关注本站其它相关文章！