从"雷峰塔"到"对象"：一份超详细的JavaScript基础语法入门指南
摘要：JavaScript（简称JS）是世界上最流行的编程语言之一。从最初仅用于简单的表单验证，到如今涵盖网页开发、服务器开发（Node.js）、桌面应用（Electron）甚至手机App开发，JS已经成为了通用的编程语言。本文将带你从零开始，梳理JavaScript的基础语法、数据类型、流程控制、数组与函数，以及对象的核心概念。
一、 初识JavaScript：语言的前世今生
1.1 JavaScript是什么？
JavaScript是一个脚本语言，通过解释器运行，主要在客户端（浏览器）上运行，现在也可以基于Node.js在服务器端运行。它的初衷只是为了完成简单的表单验证，但后来"不小心"火了，成为了通用的编程语言。
1.2 发展历史与"雷峰塔"梗
JavaScript之父是布兰登·艾奇（Brendan Eich）。1995年，他用10天时间完成了JS的设计（由于设计时间太短，导致后来很长一段时间JS程序混乱不堪）。最初在网景公司命名为LiveScript，后因Java当时最流行，便改名JavaScript。
Java和JavaScript的关系，就像：
- 雷峰和雷峰塔
- 印度和印度尼西亚
- 周杰和 rappers 周杰伦
- 张三和张三丰
- 黑客和博客
其实它们语法风格相去甚远，但目前基础语法层面还是有一些相似之处的。
1.3 JS与HTML、CSS的关系
- HTML：网页的结构（骨）
- CSS：网页的表现（皮）
- JavaScript：网页的行为（魂）
1.4 JS的组成
- ECMAScript (ES)：JavaScript语法标准。
- DOM：页面文档对象模型，对页面中的元素进行操作。
- BOM：浏览器对象模型，对浏览器窗口进行操作。
注意：如果是运行在服务端的JS（Node.js），则不太需要关注DOM和BOM。
二、 快速上手：第一个程序与注释
2.1 引入JS的三种方式
- 行内式 ：直接嵌入到HTML元素内部（如
onclick="alert('haha')"）。 - 内嵌式 ：写到
<script>标签中。 - 外部式 ：写到单独的
.js文件中，通过<script src="hello.js"></script>引入。注意：此时script标签中间不能写代码。
2.2 注释
- 单行注释 ：
//（推荐使用） - 多行注释 ：
/* */（注意：多行注释不能嵌套）
2.3 输入与输出
- 输入 ：
prompt("请输入您的姓名：");弹出一个输入框。 - 输出 ：
alert("hello");弹出警示对话框。 - 日志 ：
console.log("这是一条日志");在控制台打印，这是程序员调试的重要手段。
console是一个JS中的"对象"，.可以直观理解成"的"，console.log就是使用"控制台"对象的"log"方法。
三、 变量与数据类型：动态类型的魅力
3.1 变量的使用
使用 var 关键字定义变量（ES6中新增了 let，用法基本类似）：
javascript
var name = 'zhangsan';
var age = 20;=表示赋值。- JS中所有的标点都是英文标点。
- 字符串需使用单引号或双引号引起来。
- 动态类型：JS的变量类型是程序运行过程中才确定的，且随着程序运行，变量的类型可能会发生改变（这一点和C、Java等静态类型语言差异较大）。
3.2 基本数据类型
JS中内置了以下几种类型：
- number ：数字（不区分整数和小数）。支持八进制（0开头）、十六进制（0x开头）、二进制（0b开头）。特殊值包括
Infinity（无穷大）、-Infinity（负无穷大）、NaN（非数字）。 - boolean ：
true真，false假。参与运算时当做 1 和 0 看待。 - string：字符串类型。
- undefined ：只有唯一的值
undefined，表示未定义的值（相当于连盒子都没有）。 - null ：只有唯一的值
null，表示空值（相当于有一个空的盒子）。
3.3 字符串的拼接
使用 + 进行拼接。如果数字和字符串拼接，会把数字隐式转成字符串。
javascript
console.log(100 + 100); // 200
console.log('100' + 100); // 100100四、 运算符与流程控制
4.1 运算符
和Java用法基本相同，包括：
- 算术运算符 ：
+ - * / % - 赋值运算符 ：
= += -= *= /= %= - 自增自减 ：
++ -- - 比较运算符 ：
< > <= >= == != === !==（==会进行隐式类型转换，===不会） - 逻辑运算符 ：
&& || ! - 位运算与移位运算 ：
& | ~ ^ << >> >>>
4.2 条件语句
- if / else if / else
- 三元表达式 ：
条件 ? 表达式1 : 表达式2（if else的简化写法，优先级较低） - switch ：更适合多分支的场景，注意每个case后要加
break。
4.3 循环语句
- while循环：先判断条件，再执行循环体。
- continue：结束这次循环，继续下一次。
- break：结束整个循环。
- for循环 ：
for (表达式1; 表达式2; 表达式3) { 循环体 }。
五、 数组与函数
5.1 数组
JS的数组不要求元素是相同类型（和Python等动态语言类似）。
javascript
var arr = [1, 2, 'haha', false];- 获取元素 ：通过下标访问（从0开始），超出范围读取结果为
undefined。 - 新增元素 ：
- 修改
length属性（末尾新增）。 - 通过下标新增（如果下标超出范围）。
- 使用
push方法追加元素。
- 修改
- 删除元素 ：使用
splice方法（arr.splice(起始下标, 删除个数)）。
5.2 函数
javascript
function 函数名(形参列表) {
// 函数体
return 返回值;
}- 函数定义不会执行，必须调用才会执行。
- 函数的定义和调用的先后顺序没有要求（这一点和变量不同）。
- 实参和形参个数可以不匹配（但实际开发一般要求匹配）。
- 函数表达式 ：
var add = function() { ... }，将匿名函数赋值给变量。JS中函数是一等公民，可以像变量一样传递。
5.3 作用域
- 全局作用域：在整个script标签或单独的js文件中生效。
- 局部作用域/函数作用域：在函数内部生效。
- 作用域链：查找变量时，先在当前局部作用域找，找不到去上层找，最后去全局找。
六、 对象：具体事物的抽象
6.1 基本概念
对象是指一个具体的事物（如"我的联想笔记本"）。每个对象包含若干的属性 （特征）和方法 （行为）。
JavaScript的对象和Java的对象概念上基本一致，但语法表现形式差别较大。
6.2 创建对象
1. 使用字面量创建（常用）
javascript
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};- 属性和方法使用键值对的形式组织。
- 键和值之间使用
:分割，键值对之间使用,分割。 - 访问属性：
student.name或student['height']。 - 调用方法：
student.sayHello()。
2. 使用构造函数创建
前面的方式只能创建一个对象，构造函数可以方便地创建多个对象。
javascript
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function() {
console.log(sound);
}
}
var mimi = new Cat("咪咪", "中华田园喵", "喵");this关键字表示当前正在构建的对象。- 构造函数名首字母一般大写。
- 创建对象必须使用
new关键字。
6.3 JS对象与Java对象的区别
- JS没有"类"的概念：对象其实就是"属性"+"方法"。（ES6中引入了class关键字）。
- JS对象不区分"属性"和"方法"：JS中的函数是一等公民。
- JS对象没有 private / public 等访问控制机制：对象中的属性都可以被外界随意访问。
- JS对象没有"继承" ：继承本质是让两个对象建立关联。JS使用原型 （
__proto__）机制实现类似的效果。 - JS没有"多态"：因为JS本身就支持动态类型，程序猿在使用对象的方法时不需要明确区分类型。
结语
JavaScript虽然设计之初有些仓促，但经过多年的发展，ECMAScript标准不断完善，它已经变得非常强大和灵活。掌握好基础语法，理解其动态类型、函数一等公民和原型链等核心概念，是迈向高级前端开发或全栈开发的重要一步。希望这篇博客能帮你梳理清楚JS的基础脉络！