JavaScript 基础入门：语法、数据类型与函数原理详解

简介与代码引入

JavaScript 是由网景公司开发的基于客户端的对象驱动型网页脚本语言，主要用于实现表单验证、网页特效、小游戏及 Ajax 异步通信等交互功能。

在 HTML 文件中编写 JavaScript 主要有两种方式：

1. 内联编写：直接在 <script> 标签中书写逻辑。

<script language='javascript'>
  document.write('hello');
</script>

2. 外部引用：将代码保存为 .js 文件，通过 src 属性引入。

<script src='demo01.js'></script>

注意：一个 <script> 标签不能同时使用内部代码和外部源（即有了 src 就不能写内部代码）。

基础语法规范

第 1 步：理解大小写与语句结构

JavaScript 严格区分大小写，变量 a 与 A 被视为不同标识符。每条语句末尾可选加分号。若需在脚本中输出 HTML 标记（如表格或列表），需通过字符串拼接输出。

<script>
  document.write('<table></table>');
</script>

第 2 步：声明变量与作用域

变量是存储数值的容器。使用 var 声明的变量受作用域限制（局部变量），而未使用 var 声明的变量会直接暴露在全局作用域中。

• 命名规则：首字符必须是字母或下划线，后续可包含数字；严禁使用保留字。
• 作用域判定：函数内用 var 声明为局部，全局范围无声明则为全局。

第 3 步：掌握五种基本数据类型

JS 属于弱类型语言，定义时不需指定类型。常见类型如下：

• String (字符串)：由单引号 ' ' 或双引号 " " 包裹。
• Number (数字)：支持整数、浮点数。
• Boolean (布尔)：true 或 false。
• Undefined：未定义。
• Null：空值。

结合代码示例演示：

<script>
  var name = '张三', age = 30, marry = true, height = 1.8;
  document.write('<ol>');
  document.write('<li>姓名: '+name+'</li>');
  document.write('<li>婚否: '+marry+'</li>');
  document.write('</ol>');
</script>

第 4 步：运算符与严格相等判断

算术运算符包含 ++、--。需要特别注意的是比较运算符：

• ==：只判断数值是否相等（类型会自动转换）。
• ===：全等于，要求值和类型均一致。

var i = 5;     // Number
var j = "5";   // String
// 下面的判断结果为真，因为 JS 进行了隐式类型转换
if(i == j){ 
  document.write('值相等'); 
}
// 下面的判断结果为假，因为 Number 不等于 String
if(i === j){ 
  document.write('全等于'); 
}

流程控制结构

程序执行流主要包括顺序、分支和循环三种结构。其中条件分支可通过 if...else 或 switch 实现；循环则常用 for、while 等。

以下是一个简单的猜数游戏逻辑，展示了随机数生成与 while 循环的结合：

<script>
  var n = Math.round(Math.random()*500); // 生成 1-500 随机数
  while(true) {
    var number = prompt('请输入一个数字');
    if(number > n) alert('大了');
    else if(number < n) alert('小了');
    else {
      alert('答对了');
      break; // 跳出循环
    }
  }
</script>

函数定义与调用

函数的目的是模块化代码，减少重复。函数必须先定义后调用，其核心要素包含函数名、参数列表和函数体。若需返回值，使用 return 关键字，一旦遇到 return，函数立即终止执行后续代码。

匿名函数是一种特殊的写法，常用于封装初始化代码或避免重名冲突：

// 自调用匿名函数
(function(first) {
  alert(first);
})(10); // 传入实参 10

难点解析：JS 的传参机制

理解 JavaScript 的值传递与引用传递是进阶的关键。

基本类型：按值传递 (Call by Value)

当传递的是基本类型（如数字、字符串）时，传递的是变量的副本。修改形参不会影响实参。

var a = 1;
function foo(x) { x = 2; }
foo(a);
console.log(a); // 输出 1，不受影响

对象类型：按共享传递 (Call by Sharing)

对象（Object）是可变的，传递的是对象的地址引用。这意味着：

1. 如果直接修改对象的属性（如 o.x = 3），由于 o 和 obj 指向同一内存块，实参会被改变。
2. 如果在函数内重新给形参赋值（如 o = 100），只是让形参指向了新位置，不会影响到原来的实参。

这种机制被称为“按共享传递”——变量持有对值的引用，对于不可变的基本类型，它等同于按值传递；对于可变对象，它们共享同一个底层数据。

arguments 对象的使用

在函数内部，可以使用内置的 arguments 属性来获取所有传入的参数。它是一个类数组对象，可以处理不确定数量的参数。

应用场景：计算任意多个员工的工资总额。

function display() {
  var sum = 0;
  for(var i=0; i<arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
display(1000, 2000, 5000); // 灵活接收任意个参数

作用域链深入

JavaScript 遵循作用域链查找规则：若在当前层找不到变量，会逐层向上（向外）查找，直到找到全局作用域为止。如果在任意层级都没有找到声明且未使用 var 声明，它会默认成为全局变量。

以上就是 JavaScript 基础入门教程的详细解读，涵盖了从环境搭建、语法规范到函数闭包的所有核心知识点，更多关于前端开发的基础资料请关注本站其它相关文章！