【前端 06】JavaScript基础语法

JavaScript基础语法

在掌握了JavaScript的引入方式之后，接下来我们深入学习JavaScript的书写语法，这是编写JavaScript代码的基础。JavaScript的语法规则简单而直观，但掌握它们对于编写高效、可维护的代码至关重要。

书写语法

JavaScript的书写语法遵循以下基本规则：

• 区分大小写：JavaScript是区分大小写的语言，因此variable和Variable会被视为两个不同的标识符。

• 分号：虽然JavaScript在大多数情况下会自动在语句末尾添加分号，但显式添加分号是一个好习惯，尤其是当代码行较长或包含多个语句时。

• 代码块：使用大括号{}来定义代码块，这些代码块可以包含多个语句，通常与条件语句、循环语句或函数体等一起使用。

• 注释

  ：

  • 单行注释：以//开头，直到行末的文本都会被视为注释。
  • 多行注释：以/*开头，以*/结束，之间的所有内容都会被视为注释。

为了演示这些语法规则，我们将使用JavaScript中的三种输出语句：

• window.alert()：显示一个带有指定消息和一个确定按钮的警告框。
• document.write()：向HTML文档写入内容。注意，在现代Web开发中，document.write()的使用已经大大减少，因为它会重写整个页面的内容。
• console.log()：向浏览器的控制台输出信息，是调试JavaScript代码时最常用的方法之一。

变量有关的语法

变量是存储信息的容器，JavaScript中的变量声明与Java等语言有所不同。JavaScript通过var、let和const三个关键字来声明变量。

• var：ECMAScript 5中引入的变量声明关键字，声明的变量具有函数作用域或全局作用域，且可以重复声明。
• let：ECMAScript 6中新增的变量声明关键字，声明的变量具有块级作用域，且不能在同一作用域内重复声明。
• const：ECMAScript 6中新增的常量声明关键字，声明的常量具有块级作用域，且一旦声明，其值就不能被重新赋值。

在JavaScript中，变量名需要遵循以下规则：

• 可以包含字母、数字、下划线（_）或美元符号（$）。
• 不能以数字开头。
• 遵循驼峰命名法可以提高代码的可读性。

JavaScript是一门弱类型语言，这意味着变量可以存储任何类型的数据，并且可以在运行时更改其类型。然而，使用const声明的常量除外，其值一旦确定就不能更改。

示例代码：

<script>  
    // 使用var声明全局变量  
    var a = 10;  
    a = "张三"; // 变量类型可以更改  
    alert(a); // 弹出"张三"  
  
    // var声明的变量具有全局作用域  
    {  
        var x = 1;  
    }  
    alert(x); // 弹出1，因为x是全局变量  
  
    // 使用let声明块级作用域变量  
    {  
        let y = 2;  
        // let y = 3; // 如果取消注释，会报错，因为let不允许在同一作用域内重复声明变量  
    }  
    // alert(y); // 如果取消注释，会报错，因为y是块级作用域变量，在外部无法访问  
  
    // 使用const声明常量  
    const pi = 3.14;  
    // pi = 3.15; // 如果取消注释，会报错，因为const声明的常量值不能更改  
    // alert(pi); // 取消注释后，这里将不会执行，因为上一行会报错  
</script>

通过上述示例，我们可以清楚地看到var、let和const在变量声明和作用域方面的差异。在实际开发中，推荐使用let和const来声明变量，因为它们提供了更清晰的作用域控制，有助于减少潜在的错误。

数据类型和运算符

在JavaScript中，尽管它是一个弱类型（也称为动态类型）语言，但仍然存在明确的数据类型。了解这些数据类型及其特点对于编写有效和可预测的JavaScript代码至关重要。JavaScript的数据类型主要分为两大类：原始类型（Primitive Types）和引用类型（Reference Types）。

原始类型

原始类型是最基本的数据类型，它们直接存储在栈（Stack）内存中。JavaScript中的原始类型包括：

• number：用于表示数值，包括整数、小数以及特殊的数值NaN（Not a Number）。
• string：用于表示文本数据，可以使用单引号或双引号定义。
• boolean：表示逻辑值，只有true和false两个值。
• null：一个特殊的关键字，表示空对象引用。
• undefined：当一个变量被声明但未初始化时，它的值就是undefined。

使用typeof函数可以方便地检测一个变量的数据类型。

引用类型

引用类型（如对象、数组和函数）不是直接存储在栈内存中，而是存储在堆（Heap）内存中，变量中存储的是指向堆内存中对象的引用（即内存地址）。

运算符

JavaScript提供了丰富的运算符，用于执行各种算术、赋值、比较、逻辑和条件等操作。

• 算术运算符：+, -, *, /, %, ++, --等，用于执行基本的数学运算。
• 赋值运算符：=, +=, -=, *=, /=, %=等，用于给变量赋值。
• 比较运算符：>, <, >=, <=, !=, ==, ===等，用于比较两个值。其中，==会进行类型转换后比较值，而===（严格等于）不仅比较值，还比较类型。
• 逻辑运算符：&&, ||, !等，用于执行逻辑运算。
• 三元运算符：条件表达式 ? 表达式1 : 表达式2，根据条件表达式的真假，选择执行并返回表达式1或表达式2的结果。

类型转换

在JavaScript中，尽管是弱类型语言，但在进行数值计算或比较时，有时需要进行类型转换。parseInt()函数是常用的类型转换函数之一，它可以将字符串转换为整数。需要注意的是，如果字符串以非数字开头，parseInt()会解析到第一个非数字字符为止，并返回解析到的整数部分；如果无法解析，则返回NaN。

真值假值（Truthy and Falsy Values）

在JavaScript中，0、null、undefined、空字符串""和NaN被视为假值（falsy values），它们在布尔上下文中会被转换为false。其他所有值都被视为真值（truthy values），包括所有对象、非零数字、非空字符串和true。

这一特性经常用于条件判断中，例如：

if (0) {  
    // 这里的代码不会执行，因为0被视为false  
}  
  
if (1) {  
    alert("除0和NaN其他数字都转为 true"); // 这里的代码会执行，因为1被视为true  
}

了解这些数据类型和运算符，以及它们如何相互作用，是深入学习JavaScript的基础。掌握这些概念将有助于你编写更加高效、可维护和易于理解的代码。