news 2026/1/31 23:21:47

JavaScript 流程控制与数组实战闯关

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript 流程控制与数组实战闯关

运算符

JavaScript 中的运算符和 Java 用法基本相同,此处不做详细介绍了。

算术运算符
  • +
  • -
  • *
  • /
  • %
赋值运算符 & 复合赋值运算符
  • =
  • +=
  • -=
  • *=
  • /=
  • %=
自增自减运算符
  • ++: 自增 1
  • --: 自减 1
比较运算符
  • <
  • >
  • <=
  • >=
  • ==:比较相等(会进行隐式类型转换)
  • !=
  • ===:比较相等(不会进行隐式类型转换)
  • !==

逻辑运算符

用于计算多个 boolean 表达式的值。

  • &&:与(一假则假)
  • ||:或(一真则真)
  • !:非

位运算

  • &:按位与
  • |:按位或
  • ~:按位取反
  • ^:按位异或

移位运算

  • <<:左移
  • >>:有符号右移(算术右移)
  • >>>:无符号右移(逻辑右移)

条件语句

if 语句

基本语法格式条件表达式为 true,则执行 if 的{}中的代码

// 形式1 if (条件) { 语句 } // 形式2 if (条件1) { 语句1 } else { 语句2 } // 形式3 if (条件1) { 语句1 } else if (条件2) { 语句2 } else if ...... { 语句... } else { 语句N }

练习案例

  • 代码示例 1: 判定一个数字是奇数还是偶数
var num = 10; if (num % 2 == 0) { console.log("num 是偶数"); } else { console.log("num 是奇数"); }

注意!不能写成num % 2 == 1就是奇数,负的奇数 %2 结果可能是 - 1。

  • 代码示例 2: 判定一个数字是正数还是负数
var num = 10; if (num > 0) { console.log("num 是正数"); } else if (num < 0) { console.log("num 是负数"); } else { console.log("num 是 0"); }
  • 代码示例 3: 判定某一年份是否是闰年
var year = 2000; if (year % 100 == 0) { // 判定世纪闰年 if (year % 400 == 0) { console.log("是闰年"); } else { console.log("不是闰年"); } } else { // 普通闰年 if (year % 4 == 0) { console.log("是闰年"); } else { console.log("不是闰年"); } }
三元表达式

if else的简写写法。

条件 ? 表达式1 : 表达式2

条件为真,返回表达式 1 的值;条件为假,返回表达式 2 的值。注意,三元表达式的优先级是比较低的。

switch

更适合多分支的场景。

switch (表达式) { case 值1: 语句1; break; case 值2: 语句2; break; default: 语句N; }

用户输入一个整数,提示今天是星期几

var day = prompt("请输入今天星期几:"); 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("输入有误"); }

循环语句

重复执行某些语句

while 循环
while (条件) { 循环体; }

执行过程:

  • 先执行条件语句
  • 条件为 true,执行循环体代码
  • 条件为 false,直接结束循环

代码示例 1: 打印 1-10

var num = 1; while (num <= 10) { console.log(num); num++; }

代码示例 2: 计算 5 的阶乘

var result = 1; var i = 1; while (i <= 5) { result *= i; i++; } console.log(result)
continue

结束这次循环(比如:吃五个李子,发现第三个李子有虫子,扔掉这个,继续吃下一个)

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; } console.log("找到了3的倍数,为:" + num); num++; }
break

结束整个循环(比如:吃五个李子,发现第三个有虫子,剩下的也不吃了)

var i = 1; while (i <= 5) { if (i == 3) { break; } console.log("我在吃第" + i + "个李子"); i++; }

输出结果

我在吃第1个李子 我在吃第2个李子

代码示例:找到 100-200 中第一个 3 的倍数

执行结果:

找到了3的倍数,为:102
for 循环
for (表达式1; 表达式2; 表达式3) { 循环体 }
  • 表达式 1: 用于初始化循环变量
  • 表达式 2: 循环条件
  • 表达式 3: 更新循环变量

执行过程:

  1. 先执行表达式 1,初始化循环变量
  2. 再执行表达式 2,判定循环条件
  3. 如果条件为 false,结束循环
  4. 如果条件为 true,则执行循环体代码
  5. 执行表达式 3,更新循环变量

代码示例:计算 5 的阶乘

var result = 0; for (var i = 1; i <= 5; i++) { result *= i; } console.log("result = " + result);

数组

创建数组
  • 使用 new 关键字创建
// Array的A要大写 var arr = new Array();
  • 使用字面量方式创建(常用)
var arr = []; var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为“元素”

注意: JS 的数组不要求元素是相同类型。这一点和 C、C++、Java 等静态类型语言差别很大,但是 Python、PHP 等动态类型语言也是如此。

获取数组元素

使用下标的方式访问数组元素(从 0 开始)

var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"]; console.log(arr); console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); arr[2] = "小狐凯迪"; console.log(arr);

如果下标超出范围读取元素,则结果为 undefined:

console.log(arr[3]); // undefined console.log(arr[-1]); // undefined

注意:不要给数组名直接赋值,此时数组中的所有元素都没了。(相当于本来 arr 是一个数组,重新赋值后变成字符串了)

var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"]; arr = "小狐凯迪";
新增数组元素
  1. 通过修改 length 新增相当于在末尾新增元素,新增的元素默认值为 undefined
var arr = [9, 5, 2, 7]; arr.length = 6; console.log(arr); console.log(arr[4], arr[5]);

输出结果:

(6) [9, 5, 2, 7, empty × 2] undefined undefined
  1. 通过下标新增如果下标超出范围赋值元素,则会给指定位置插入新元素
var arr = []; arr[2] = 10; console.log(arr)

此时这个数组的 [0] 和 [1] 都是 undefined,输出结果:

Array(3) 2: 10 length: 3 __proto__: Array(0)
  1. 使用 push 进行追加元素代码示例:给定一个数组,把数组中的奇数放到一个 newArr 中
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);
删除数组中的元素

使用 splice 方法删除元素

var arr = [9, 5, 2, 7]; // 第一个参数表示从下标为 2 的位置开始删除,第二个参数表示要删除的元素个数是 1 个 arr.splice(2, 1); console.log(arr); // 结果 [9, 5, 7]

目前咱们已经用到了数组中的一些属性和方法:

  • arr.length: length 使用的时候不带括号,此时 length 就是一个普通的变量(称为成员变量,也叫属性)
  • arr.push()arr.splice(): 使用的时候带括号,并且可以传参数,此时是一个函数(也叫做方法)
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/1/26 13:56:14

从零到精通:TranslucentTB透明任务栏配置全攻略

从零到精通&#xff1a;TranslucentTB透明任务栏配置全攻略 【免费下载链接】TranslucentTB 项目地址: https://gitcode.com/gh_mirrors/tra/TranslucentTB 厌倦了Windows系统沉闷的实色任务栏&#xff1f;想要为桌面注入一抹轻盈的透明美感&#xff1f;本文将为你揭秘…

作者头像 李华
网站建设 2026/1/30 15:42:27

2024年CSDN重磅技术趋势预测

CSDN年度技术趋势预测文章大纲技术趋势概述分析当前全球技术发展背景&#xff0c;包括经济、社会、产业等因素对技术演进的影响介绍年度技术预测的核心方向与热点领域人工智能与机器学习生成式AI&#xff08;如GPT、Stable Diffusion&#xff09;的行业应用深化多模态模型与边缘…

作者头像 李华
网站建设 2026/1/31 2:26:30

猫抓扩展终极指南:三步搞定网页视频下载难题

猫抓扩展终极指南&#xff1a;三步搞定网页视频下载难题 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为网页视频无法保存而烦恼吗&#xff1f;当你发现精彩的在线课程、有趣的短视频或重要的工…

作者头像 李华
网站建设 2026/1/28 14:52:29

XUnity自动翻译插件技术实现深度解析

XUnity自动翻译插件技术实现深度解析 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator XUnity Auto Translator作为Unity游戏自动翻译解决方案的核心组件&#xff0c;通过深度集成游戏引擎的文本渲染流程&a…

作者头像 李华
网站建设 2026/1/26 17:20:43

大数据领域数据中台的宠物行业市场分析

当数据中台遇到萌宠&#xff1a;揭秘宠物行业的大数据魔法关键词&#xff1a;数据中台、宠物行业、大数据应用、用户行为分析、智能服务、它经济、IoT数据联动 摘要&#xff1a; 当“撸猫撸狗”成为当代年轻人的治愈方式&#xff0c;“它经济”正以每年20%的增速崛起。但宠物行…

作者头像 李华
网站建设 2026/1/31 10:42:46

DLSS Swapper终极指南:轻松升级游戏DLSS版本提升画质表现

DLSS Swapper终极指南&#xff1a;轻松升级游戏DLSS版本提升画质表现 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 你是否厌倦了游戏中模糊的画面效果&#xff1f;想要在不升级硬件的情况下获得更好的图像质量&#…

作者头像 李华