目录
一、JavaScript 初印象
在当今互联网时代,我们每天都在与各种各样的网页和 Web 应用程序打交道,无论是购物、社交、学习还是工作,这些交互体验背后离不开前端开发技术的支撑。而 JavaScript,作为前端开发的核心语言,无疑扮演着举足轻重的角色 。
想象一下,当你在电商网站上滑动鼠标查看商品详情,点击按钮将心仪的商品加入购物车,页面无需刷新就能实时更新;又或者在社交平台上,动态点赞、评论后,页面瞬间做出响应,这些流畅且富有交互性的体验,都离不开 JavaScript 的功劳。它赋予了网页生命,使其不再是静态的展示页面,而是能够与用户进行实时互动的智能界面。
JavaScript 的应用场景极为广泛,远不止我们日常浏览网页时的交互操作。在单页应用(SPA)领域,像 React、Vue 和 Angular 这些流行的前端框架,都是基于 JavaScript 构建,它们能够实现复杂的页面逻辑和高效的用户交互,让用户在使用 Web 应用时感受到如同原生应用般的流畅体验。在服务器端,Node.js 的出现让 JavaScript 突破了前端的界限,得以进行服务器端编程,处理 HTTP 请求、连接数据库、执行后台任务等,实现全栈开发。不仅如此,借助 Electron 等框架,JavaScript 还能用于开发跨平台的桌面应用程序,如大家熟知的文本编辑器 Atom 和 Visual Studio Code;在移动应用开发中,React Native、Ionic 等框架也让 JavaScript 成为编写跨平台移动应用的重要工具;甚至在游戏开发领域,JavaScript 也占有一席之地,通过 WebGL 和 Three.js 等库,可以开发出令人惊叹的 3D 网页游戏。
二、搭建学习环境
“工欲善其事,必先利其器” ,在正式开启 JavaScript 学习之旅前,我们需要搭建一个合适的开发环境。主要涉及安装 Node.js 和选择一款称手的代码编辑器,这里推荐使用 Visual Studio Code(简称 VS Code) 。
2.1 安装 Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,它让 JavaScript 能够在服务器端运行,极大地拓展了 JavaScript 的应用范围。在学习过程中,我们可以利用 Node.js 运行 JavaScript 代码,还能使用 npm(Node Package Manager)来管理项目依赖。
安装步骤如下:
-
打开 Node.js 官方网站(https://nodejs.org/ ) ,在首页可以看到 “LTS”(长期支持版本)和 “Current”(当前版本)两个下载选项,对于初学者,建议下载 “LTS” 版本,其稳定性更高。
-
根据你的操作系统,选择对应的安装包进行下载,如 Windows 系统下载.exe 文件,Mac 系统下载.pkg 文件。
-
下载完成后,双击安装包,按照安装向导的提示进行操作,一般保持默认设置,一路点击 “Next” 或 “下一步” 即可。在安装过程中,注意勾选 “Add to PATH” 选项,这一步很关键,它会将 Node.js 和 npm 添加到系统环境变量中,方便后续在命令行中直接使用相关命令。
-
安装完成后,验证是否安装成功。按下 “Win + R” 键(Windows 系统)或 “Command + Space” 键(Mac 系统),输入 “cmd”(Windows 系统)或 “terminal”(Mac 系统),打开命令行终端。在终端中输入 “node -v” 和 “npm -v”,如果分别输出版本号,说明 Node.js 和 npm 安装成功。
2.2 安装 VS Code
`VS Code 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言,拥有丰富的插件生态系统,能够极大地提高我们的开发效率。
安装步骤如下:
-
访问 VS Code 官方网站(https://code.visualstudio.com/ ) ,点击 “Download” 按钮,根据你的操作系统选择对应的安装包进行下载。
-
下载完成后,双击安装包进行安装。在安装过程中,可以根据个人需求选择安装路径、是否创建桌面快捷方式等选项。
-
安装完成后,打开 VS Code。首次打开时,VS Code 会自动检测并安装一些基础组件,等待安装完成即可。
-
为了更好地进行 JavaScript 开发,我们还需要安装一些插件。点击 VS Code 界面左侧的扩展图标(或使用快捷键 “Ctrl + Shift + X”),在搜索框中输入 “JavaScript”,安装官方提供的 “JavaScript (ES6) code snippets” 插件,该插件提供了许多常用的 JavaScript 代码片段,方便我们快速编写代码;再安装 “ESLint” 插件,它能帮助我们检查代码语法错误和规范问题,提高代码质量。
三、语法基础入门
3.1 变量与数据类型
变量是编程中的基本概念,它就像是一个容器,用于存储各种数据值。在 JavaScript 中,有多种声明变量的方式,最常用的是使用var、let和const关键字 。
-
var:具有函数作用域或全局作用域。例如在函数内部声明的var变量,在整个函数内都可访问;在函数外部声明则为全局变量。它存在变量提升现象,即可以在声明前访问,只是值为undefined ,并且同一作用域内可多次声明同一个变量,后面的声明会覆盖前面的。比如:
function example() {
console.log(num); // 输出undefined
var num = 10;
console.log(num); // 输出10
}
example();
-
let:拥有块级作用域,在{}(如if语句块、for循环块等)内声明的let变量,在块外无法访问 。它不存在变量提升,在声明前访问会报错,且同一作用域内不能重复声明。例如:
{
let num = 20;
console.log(num); // 输出20
}
console.log(num); // 报错,num未定义
- const:用于声明常量,一旦赋值,值不可更改 。它和let一样具有块级作用域,不存在变量提升。需要注意的是,如果const声明的是对象或数组,虽然不能重新赋值给变量本身,但可以修改对象的属性或数组的元素。例如:
const PI = 3.14159;
// PI = 3.14; // 报错,无法重新赋值
const arr = [1, 2, 3];
arr[0] = 10; // 可以修改数组元素
console.log(arr); // 输出[10, 2, 3]
JavaScript 中的常见数据类型包括:
-
数字(Number):用于表示数值,涵盖整数和浮点数。例如:let age = 25; 、let price = 9.99; 。数字类型还支持不同进制表示,如十进制(默认)、八进制(以 0 开头)、十六进制(以 0x 开头)。例如:let octalNum = 07; (八进制的 7,等于十进制的 7),let hexNum = 0xA; (十六进制的 A,等于十进制的 10)。同时,数字类型有一些特殊值,如Infinity(无穷大)、-Infinity(无穷小)和NaN(非数值)。比如console.log(1 / 0); 会输出Infinity ,console.log('abc' - 1); 会输出NaN ,可以使用isNaN()函数来判断一个值是否为NaN ,如isNaN(NaN)返回true 。
-
字符串(String):用于表示文本数据,用单引号或双引号括起来。例如:let name = 'John'; 、let message = "Hello, World!"; 。字符串支持单双引号嵌套使用,如let str = 'I\'m a "programmer"'; 。还可以使用转义字符\来表示特殊字符,如换行符\n 、制表符\t等 。获取字符串长度可通过length属性,如let str = 'javascript'; console.log(str.length);会输出 10 。可以通过索引访问字符串中的字符,索引从 0 开始,如console.log(str[0]);会输出j 。多个字符串可使用+进行拼接,若与其他类型数据拼接,会先将其他类型转换为字符串,如let num = 10; console.log('The number is'+ num);会输出The number is 10 。
-
布尔值(Boolean):只有两个值,true(真)和false(假),用于表示逻辑判断结果。例如:let isReady = true; 、let isAdmin = false; 。在条件判断、逻辑运算等场景中广泛使用,如if (isReady) { console.log('Let\'s go!'); } 。
3.2 运算符与表达式
运算符是 JavaScript 中用于执行各种操作的符号,通过运算符和操作数组成的式子就是表达式 。
- 算术运算符:用于执行数学计算,常见的有+(加法)、-(减法)、*(乘法)、/(除法)、%(取余)、++(自增)、--(自减) 。例如:
let num1 = 5;
let num2 = 3;
console.log(num1 + num2); // 输出8
console.log(num1 - num2); // 输出2
console.log(num1 * num2); // 输出15
console.log(num1 / num2); // 输出1.6666666666666667
console.log(num1 % num2); // 输出2
let count = 10;
console.log(count++); // 先返回10,然后count变为11
console.log(++count); // 先将count加1变为12,然后返回12
需要注意的是,+运算符在与字符串一起使用时,会进行字符串拼接,而不是加法运算,如console.log('5' + 5);会输出55 。
-
比较运算符:用于比较两个值的大小或是否相等,返回一个布尔值(true或false) 。常见的有>(大于)、<(小于)、>=(大于等于)、<=(小于等于)、==(相等)、===(全等,值和数据类型都相等)、!=(不相等)、!==(不全等) 。例如:
let num1 = 5;
let num2 = 3;
console.log(num1 > num2); // 输出true
console.log(num1 < num2); // 输出false
console.log(num1 >= num2); // 输出true
console.log(num1 <= num2); // 输出false
console.log(num1 == 5); // 输出true
console.log(num1 === 5); // 输出true
console.log(num1 == '5'); // 输出true,只比较值
console.log(num1 === '5'); // 输出false,值和类型都要相同
console.log(num1 != num2); // 输出true
console.log(num1!== num2); // 输出true
-
逻辑运算符:用于连接多个条件判断,返回布尔值 。常见的有&&(与)、||(或)、!(非) 。
-
&&:只有当左右两边的值都为true时,结果才为true,否则为false,并且具有短路特性,如果左边的值为false,右边的值就不会再计算 。例如:true && true返回true ,true && false返回false ,false && true返回false ,false && false返回false ,let a = 5; let b = 3; (a > 3) && (b < 5)返回true 。
-
||:只要左右两边有一个值为true,结果就为true,只有两边都为false时,结果才为false,也有短路特性,如果左边的值为true,右边的值就不会再计算 。例如:true || true返回true ,true || false返回true ,false || true返回true ,false || false返回false ,let c = 2; let d = 4; (c > 3) || (d < 5)返回true 。
-
!:对一个值进行取反操作,true变为false,false变为true 。例如:!true返回false ,!false返回true ,let e = 10;!(e > 5)返回false 。
-
运算符优先级:不同运算符具有不同的优先级,优先级高的运算符会先被计算 。大致优先级顺序为:括号() 、一元运算符(如!、++、--等)、算术运算符(先乘除后加减)、比较运算符、逻辑运算符(&&高于||)、赋值运算符 。例如:let result = 2 + 3 * 4 > 10 &&!false; ,先计算3 * 4 = 12 ,再计算2 + 12 = 14 ,然后14 > 10为true ,!false为true ,最后true && true得到true 。
3.3 流程控制语句
流程控制语句用于控制程序的执行流程,根据不同条件执行不同的代码块 。
- if - else 语句