目录前言一、运算符JS 程序的 “计算引擎”1.1 算术运算符1.2 赋值与复合赋值运算符1.3 自增自减运算符1.4 比较运算符1.5 逻辑运算符1.6 位运算符了解二、条件语句让程序拥有 “判断思维”2.1 if 语句最通用的条件判断2.1.1 单分支 if 语句2.1.2 双分支 if-else 语句2.1.3 多分支 if-else if-else 语句2.2 三元表达式if-else 的简化写法2.3 switch 语句适用于多分支等值判断三、循环语句让代码 “重复执行” 不再繁琐3.1 while 循环先判断后执行3.1.1 基本语法3.1.2 基础示例3.1.3 break 和 continue循环的 “控制开关”1continue结束本次循环继续下一次2break结束整个循环3.2 for 循环更简洁的循环方式3.2.1 基本语法3.2.2 基础示例3.2.3 break 和 continue 在 for 循环中的使用3.3 循环的选择技巧四、数组批量数据的 “管理大师”4.1 数组的创建方式4.1.1 字面量方式创建推荐4.1.2 new 关键字创建4.2 数组元素的访问和修改4.2.1 访问数组元素4.2.2 修改数组元素4.3 数组的长度length 属性4.4 数组元素的新增4.4.1 修改 length 属性新增4.4.2 通过下标新增4.4.3 push 方法末尾追加元素推荐4.5 数组元素的删除splice 方法4.6 数组的遍历循环的核心应用总结前言前言在上一篇 JavaScript 基础博客中我们了解了 JS 的前世今生、书写形式、基本数据类型等核心内容而想要真正写出能实现业务逻辑的 JS 代码运算符、条件语句、循环语句和数组这四大核心语法是绕不开的坎。它们就像搭建 JS 程序的 “砖瓦”运算符负责数据的计算处理条件语句让程序有了 “判断能力”循环语句实现代码的重复执行数组则高效管理批量数据。本文将手把手带你吃透这些核心语法让你的 JS 编程能力再上一个台阶下面就让我们正式开始吧一、运算符JS 程序的 “计算引擎”运算符是用来对数据进行运算和处理的符号JavaScript 中的运算符和 Java 在基础用法上高度相似根据功能不同可以分为算术运算符、赋值运算符、自增自减运算符、比较运算符、逻辑运算符、位运算符等熟练掌握运算符的使用是实现数据处理的基础。1.1 算术运算符算术运算符用于基本的数学运算包括加、-减、*乘、/除、%取模求余数这是最基础也是最常用的运算符。// 基本算术运算 console.log(10 5); // 15 加法 console.log(10 - 5); // 5 减法 console.log(10 * 5); // 50 乘法 console.log(10 / 5); // 2 除法 console.log(10 % 3); // 1 取模求10除以3的余数这里需要注意的双重作用当操作数都是数字时执行加法运算当有一个操作数是字符串时会执行字符串拼接这是 JS 动态类型的特点带来的特性也是容易踩坑的点。console.log(100 100); // 200 数字加法 console.log(100 100); // 100100 字符串拼接 console.log(hello world); // hello world 字符串拼接1.2 赋值与复合赋值运算符是最基础的赋值运算符作用是将右侧的值赋值给左侧的变量。而复合赋值运算符是将算术运算符和赋值运算符结合简化代码书写包括、-、*、/、%。// 基础赋值 var num 10; console.log(num); // 10 // 复合赋值 num 5; // 等价于 num num 5 console.log(num); // 15 num - 3; // 等价于 num num - 3 console.log(num); // 12 num * 2; // 等价于 num num * 2 console.log(num); // 24 num / 4; // 等价于 num num / 4 console.log(num); // 6 num % 2; // 等价于 num num % 2 console.log(num); // 01.3 自增自减运算符自增和--自减运算符用于将变量的值加 1 或减 1分为前置和后置两种形式单独使用时两者效果一致参与运算时则有区别前置是先修改变量值再运算后置是先运算再修改变量值。// 单独使用前置和后置效果一致 var a 5; a; console.log(a); // 6 a; console.log(a); // 7 a--; console.log(a); // 6 --a; console.log(a); // 5 // 参与运算前置和后置有区别 var b 5; console.log(b 2); // 7 先运算52再b自增为6 console.log(b); // 6 var c 5; console.log(c 2); // 8 先c自增为6再运算62 console.log(c); // 61.4 比较运算符比较运算符用于判断两个值的大小或是否相等返回结果为布尔类型true/false包括、、、、、!、、!。这里的核心重点是和的区别只比较值是否相等会进行隐式类型转换比如数字 1 和字符串 1 会被判定为相等严格相等既比较值也比较类型不会进行隐式类型转换是实际开发中推荐使用的方式。console.log(10 5); // true console.log(10 5); // false console.log(10 10); // true 只比较值隐式类型转换 console.log(10 10); // false 严格相等类型不同直接返回false console.log(10 ! 5); // true console.log(10 ! 10); // true1.5 逻辑运算符逻辑运算符用于对多个布尔值进行逻辑判断返回结果也是布尔类型是实现条件判断的核心包括逻辑与、||逻辑或、!逻辑非。一假则假只有所有操作数都为 true 时结果才为 true||一真则真只要有一个操作数为 true结果就为 true!取反真变假假变真。// 逻辑与 console.log(true true); // true console.log(true false); // false console.log(10 5 8 9); // true // 逻辑或 console.log(true || false); // true console.log(false || false); // false console.log(10 5 || 8 9); // false // 逻辑非 console.log(!true); // false console.log(!(10 5)); // false1.6 位运算符了解位运算符是直接对二进制位进行操作的运算符包括按位与、|按位或、~按位取反、^按位异或以及移位运算符左移、有符号右移、无符号右移。位运算符在日常开发中使用频率较低主要用于底层开发或性能优化场景这里做简单了解即可核心还是掌握前面的常用运算符。二、条件语句让程序拥有 “判断思维”在实际开发中程序往往需要根据不同的条件执行不同的代码这时候就需要条件语句。JavaScript 提供了if语句、三元表达式和switch语句三种条件判断方式分别适用于不同的判断场景。2.1 if 语句最通用的条件判断if语句是最基础、最通用的条件判断方式根据条件的复杂程度分为单分支、双分支和多分支三种形式条件表达式的结果会被隐式转换为布尔类型进行判断。2.1.1 单分支 if 语句语法如果条件为 true执行大括号内的代码否则直接跳过。if (条件) { // 条件为true时执行的代码 }示例判断一个数字是否大于 10如果是则打印提示var num 15; if (num 10) { console.log(num 大于10); }2.1.2 双分支 if-else 语句语法条件为 true 时执行 if 大括号内的代码为 false 时执行 else 大括号内的代码。if (条件) { // 条件为true时执行 } else { // 条件为false时执行 }示例 1判断一个数字是奇数还是偶数注意不能用num % 2 1判断奇数因为负数取模的结果可能是 - 1正确方式是判断num % 2 ! 0。var num 11; if (num % 2 0) { console.log(num 是偶数); } else { console.log(num 是奇数); }2.1.3 多分支 if-else if-else 语句语法依次判断条件哪个条件为 true 就执行对应的代码所有条件都为 false 时执行最后的 else 代码。if (条件1) { // 条件1为true时执行 } else if (条件2) { // 条件2为true时执行 } else if (条件3) { // 条件3为true时执行 } else { // 所有条件都为false时执行 }示例 1判断一个数字是正数、负数还是 0var num 0; if (num 0) { console.log(num 是正数); } else if (num 0) { console.log(num 是负数); } else { console.log(num 是0); }示例 2判断某一年是否为闰年闰年的判断规则世纪年能被 100 整除能被 400 整除是闰年普通年能被 4 整除是闰年。var year 2024; if (year % 100 0) { // 世纪年 if (year % 400 0) { console.log(year 是闰年); } else { console.log(year 不是闰年); } } else { // 普通年 if (year % 4 0) { console.log(year 是闰年); } else { console.log(year 不是闰年); } }2.2 三元表达式if-else 的简化写法三元表达式是双分支if-else语句的简洁写法适用于简单的条件判断场景一行代码就能完成判断和结果返回让代码更简洁。语法条件 ? 表达式1 : 表达式2条件为 true 时执行并返回表达式 1 的结果条件为 false 时执行并返回表达式 2 的结果。注意三元表达式的优先级较低在复杂运算中建议用括号包裹。示例 1判断两个数字的大小返回较大的数var a 20, b 15; var max a b ? a : b; console.log(较大的数是 max); // 20示例 2判断一个数字是否为偶数返回对应的提示var num 8; var res num % 2 0 ? num 是偶数 : num 是奇数; console.log(res); // 8是偶数2.3 switch 语句适用于多分支等值判断当需要对一个变量进行多个等值判断时使用if-else if-else会让代码显得繁琐而switch语句可以让多分支等值判断的代码更清晰、更易读。语法switch (表达式) { case 值1: // 表达式结果等于值1时执行 break; // 跳出switch防止穿透 case 值2: // 表达式结果等于值2时执行 break; // 更多case default: // 表达式结果不匹配任何case时执行 break; }核心要点switch后的表达式一般是变量或简单运算会和case后的值进行严格相等判断break关键字必须写否则会发生case 穿透即执行完当前 case 后继续执行后续 case 的代码default是可选的用于处理所有不匹配的情况位置可灵活放置。示例根据用户输入的数字提示对应的星期几// prompt获取用户输入parseInt转换为数字类型 var day prompt(请输入今天星期几1-7); switch (parseInt(day)) { case 1: console.log(星期一); break; case 2: console.log(星期二); break; case 3: console.log(星期三); break; case 4: console.log(星期四); break; case 5: console.log(星期五); break; case 6: console.log(星期六); break; case 7: console.log(星期日); break; default: console.log(输入有误请输入1-7的数字); break; }case 穿透的妙用如果多个 case 需要执行相同的代码可以利用 case 穿透简化代码比如判断星期几是工作日还是休息日var day 6; switch (day) { case 1: case 2: case 3: case 4: case 5: console.log(工作日); break; case 6: case 7: console.log(休息日); break; default: console.log(输入有误); break; }三、循环语句让代码 “重复执行” 不再繁琐在开发中经常需要重复执行某一段代码比如打印 1-100 的数字、计算 1-10 的和如果逐行写代码会非常繁琐而循环语句可以让程序根据条件重复执行指定代码大大简化开发。JavaScript 提供了while循环和for循环两种核心循环方式两者可以相互转换适用于不同的循环场景。3.1 while 循环先判断后执行while循环是最基础的循环方式先判断条件再执行循环体条件为 true 时重复执行为 false 时结束循环。3.1.1 基本语法// 初始化循环变量 var 变量 初始值; while (循环条件) { // 循环体需要重复执行的代码 // 更新循环变量关键防止死循环 }核心注意循环体中必须有更新循环变量的代码否则循环条件会一直为 true导致死循环程序会一直执行直到浏览器崩溃。3.1.2 基础示例示例 1打印 1-10 的数字var num 1; // 初始化循环变量 while (num 10) { // 循环条件 console.log(num); // 循环体 num; // 更新循环变量加1 }示例 2计算 5 的阶乘5! 54321var result 1; // 保存阶乘结果初始值为1 var i 1; // 初始化循环变量 while (i 5) { result * i; // 等价于 result result * i i; // 更新循环变量 } console.log(5的阶乘是 result); // 1203.1.3 break 和 continue循环的 “控制开关”在循环中我们可以通过break和continue关键字控制循环的执行流程两者的作用截然不同是实现复杂循环逻辑的核心。1continue结束本次循环继续下一次continue的作用是跳过当前次循环的剩余代码直接进入下一次循环的条件判断相当于 “跳过本次继续干下一次”。示例吃 5 个李子第三个有虫子扔掉继续吃剩下的var i 1; while (i 5) { if (i 3) { i; // 必须先更新变量否则死循环 continue; // 跳过本次循环 } console.log(我在吃第 i 个李子); i; } // 输出1、2、4、5个李子实战案例找到 100-200 中所有 3 的倍数var num 100; while (num 200) { if (num % 3 ! 0) { num; continue; // 不是3的倍数跳过本次 } console.log(找到了3的倍数 num); num; }2break结束整个循环break的作用是直接跳出整个循环循环立即结束不再进行后续的条件判断和循环执行相当于 “不干了直接退出”。示例吃 5 个李子第三个有半个虫子直接不吃了var i 1; while (i 5) { if (i 3) { break; // 跳出整个循环 } console.log(我在吃第 i 个李子); i; } // 输出1、2个李子实战案例找到 100-200 中第一个 3 的倍数var num 100; while (num 200) { if (num % 3 0) { console.log(找到第一个3的倍数 num); // 102 break; // 找到后直接退出循环 } num; }3.2 for 循环更简洁的循环方式for循环是将循环变量初始化、循环条件、变量更新整合在一个括号内的循环方式相比while循环代码更简洁、结构更清晰是实际开发中使用频率最高的循环方式尤其适合已知循环次数的场景。3.2.1 基本语法for (表达式1; 表达式2; 表达式3) { // 循环体 }表达式 1初始化循环变量只在循环开始时执行一次表达式 2循环条件判断为 true 时执行循环体为 false 时结束循环表达式 3更新循环变量每次循环体执行完成后执行。执行流程表达式 1 → 表达式 2true→ 循环体 → 表达式 3 → 表达式 2true→ ... → 表达式 2false→ 结束循环。3.2.2 基础示例示例 1打印 1-10 的数字替代 while 循环for (var num 1; num 10; num) { console.log(num); }示例 2计算 5 的阶乘var result 1; for (var i 1; i 5; i) { result * i; } console.log(5的阶乘是 result); // 1203.2.3 break 和 continue 在 for 循环中的使用for循环中使用break和continue的作用和while循环一致且因为for循环的变量更新在表达式 3无需像while循环那样手动在continue前更新变量更不易出现死循环。示例打印 1-10跳过 5continuefor (var i 1; i 10; i) { if (i 5) { continue; } console.log(i); }示例打印 1-10遇到 6 直接退出breakfor (var i 1; i 10; i) { if (i 6) { break; } console.log(i); }3.3 循环的选择技巧while循环和for循环可以相互转换实际开发中如何选择已知循环次数优先使用for循环比如打印 1-100、计算 n 的阶乘代码更简洁未知循环次数优先使用while循环比如根据用户输入的内容循环执行直到用户输入指定值退出。无论使用哪种循环都要注意防止死循环确保循环条件最终会变为 false。四、数组批量数据的 “管理大师”在开发中我们经常需要处理一组相关的数据比如一个班级的学生姓名、一组商品的价格、一组考试分数如果用单个变量存储会需要定义大量变量管理起来非常麻烦。而数组就是专门用于存储一组数据的容器它可以将多个数据按顺序存储通过下标快速访问和操作是批量数据管理的最佳选择。JavaScript 中的数组非常灵活和 Java、C 等静态语言的数组有很大区别数组中的元素可以是不同的数据类型支持数字、字符串、布尔值、甚至数组、函数等这也是 JS 动态类型的体现。4.1 数组的创建方式JavaScript 提供了两种创建数组的方式字面量方式是实际开发中最常用的更简洁高效。4.1.1 字面量方式创建推荐使用[]创建数组直接在中括号内写入元素元素之间用逗号分隔创建空数组则直接写[]。// 创建空数组 var arr1 []; // 创建包含相同类型元素的数组 var arr2 [1, 2, 3, 4, 5]; // 数字数组 var arr3 [张三, 李四, 王五]; // 字符串数组 // 创建包含不同类型元素的数组JS的特色 var arr4 [1, 张三, true, 3.14]; // 数字、字符串、布尔、浮点数4.1.2 new 关键字创建使用new Array()创建数组Array 的首字母必须大写创建空数组直接调用也可以传入元素作为初始化值。// 创建空数组 var arr1 new Array(); // 创建包含元素的数组 var arr2 new Array(1, 2, 3); console.log(arr2); // [1,2,3]注意如果传入单个数字参数会被当作数组的长度而不是元素这是容易踩坑的点。var arr new Array(5); // 创建长度为5的空数组不是包含元素5的数组 console.log(arr); // [empty × 5]4.2 数组元素的访问和修改数组中的元素是按顺序存储的每个元素都有一个对应的下标索引下标从0开始依次递增。我们可以通过数组名 [下标]的方式访问和修改数组中的元素。4.2.1 访问数组元素语法数组名[下标]var arr [小猪佩奇, 小猪乔治, 小羊苏西]; // 访问下标0的元素 console.log(arr[0]); // 小猪佩奇 // 访问下标1的元素 console.log(arr[1]); // 小猪乔治 // 访问下标2的元素 console.log(arr[2]); // 小羊苏西注意如果访问的下标超出数组的范围会返回undefined。console.log(arr[3]); // undefined console.log(arr[-1]); // undefined4.2.2 修改数组元素语法数组名[下标] 新值var arr [小猪佩奇, 小猪乔治, 小羊苏西]; // 修改下标2的元素 arr[2] 小猫凯迪; console.log(arr); // [小猪佩奇, 小猪乔治, 小猫凯迪]重要提醒不要直接给数组名赋值否则会将数组对象覆盖为其他类型原数组的所有元素都会丢失。var arr [小猪佩奇, 小猪乔治]; arr 小猫凯迪; // 数组被覆盖为字符串 console.log(arr); // 小猫凯迪 console.log(arr[0]); // undefined4.3 数组的长度length 属性数组的length属性用于获取或设置数组的长度元素的个数通过数组名.length访问这是数组的内置属性使用时不带括号。var arr [1, 2, 3, 4]; // 获取数组长度 console.log(arr.length); // 4注意数组的最后一个元素的下标永远是数组名.length - 1这是循环遍历数组的核心依据。var arr [1, 2, 3, 4]; // 访问最后一个元素 console.log(arr[arr.length - 1]); // 44.4 数组元素的新增JavaScript 中数组的长度是动态可变的我们可以通过多种方式给数组新增元素常用的有修改 length 属性、通过下标新增和push 方法追加三种方式其中push方法是最常用的。4.4.1 修改 length 属性新增将length属性设置为大于原长度的值会在数组末尾新增元素新增的元素默认值为undefined。var arr [9, 5, 2, 7]; // 原长度为4设置为6 arr.length 6; console.log(arr); // [9, 5, 2, 7, empty × 2] console.log(arr[4]); // undefined console.log(arr[5]); // undefined4.4.2 通过下标新增如果给超出数组当前下标的位置赋值会在该位置插入新元素中间未赋值的位置会变为empty值为 undefined。var arr []; // 给下标2赋值 arr[2] 10; console.log(arr); // [empty × 2, 10] console.log(arr[0]); // undefined console.log(arr[1]); // undefined4.4.3 push 方法末尾追加元素推荐push方法是数组的内置方法用于在数组末尾追加一个或多个元素会自动更新数组的长度使用时带括号并传入要追加的元素这是实际开发中新增数组元素的首选方式。语法数组名.push(元素1, 元素2, ...)实战案例将一个数组中的所有奇数提取到新数组中// 原数组 var arr [9, 5, 2, 7, 3, 6, 8]; // 空数组用于存储奇数 var newArr []; // 循环遍历原数组 for (var i 0; i arr.length; i) { // 判断是否为奇数 if (arr[i] % 2 ! 0) { // 追加到新数组 newArr.push(arr[i]); } } console.log(newArr); // [9, 5, 7, 3]4.5 数组元素的删除splice 方法JavaScript 中删除数组元素最常用的是splice方法该方法可以删除指定位置、指定个数的元素还可以在删除位置插入新元素功能非常强大。语法数组名.splice(起始下标, 删除个数)起始下标从哪个下标开始删除删除个数要删除的元素数量为 0 则不删除。var arr [9, 5, 2, 7]; // 从下标2开始删除1个元素 arr.splice(2, 1); console.log(arr); // [9, 5, 7] // 从下标0开始删除2个元素 arr.splice(0, 2); console.log(arr); // [7]4.6 数组的遍历循环的核心应用数组遍历是指依次访问数组中的每一个元素这是数组最核心的操作之一结合循环语句可以实现对数组的各种处理比如筛选、计算、修改。数组遍历的核心依据是下标从 0 开始到 length-1 结束常用for循环实现简洁高效。语法for (var i 0; i 数组名.length; i) { // 数组名[i] 就是当前遍历到的元素 console.log(数组名[i]); }示例遍历数组[1, 2, 3, 4, 5]打印每个元素并计算元素总和var arr [1, 2, 3, 4, 5]; var sum 0; // 保存总和 for (var i 0; i arr.length; i) { console.log(当前元素 arr[i]); sum arr[i]; } console.log(数组元素总和 sum); // 15总结本文我们系统学习了 JavaScript 的运算符、条件语句、循环语句和数组四大核心语法这四部分内容是 JS 编程的基础也是实现复杂业务逻辑的核心。这些语法知识点并不是孤立的而是相互结合使用的运算符用于数组元素的计算条件语句用于数组元素的筛选循环语句用于数组的遍历三者结合可以实现绝大多数的数组处理需求。下一篇博客我们将继续学习 JavaScript 的函数、作用域、对象等高级语法让你的 JS 编程能力更上一层楼如果本文对你有帮助欢迎点赞、收藏、关注