【JavaScript 03】语句 变量 变量提升 标识符 注释 区块 作用域 条件语句 循环语句 break continue 标签

JS

      • 语句
      • 变量
      • 变量提升
      • 标识符
      • 注释
      • 区块
      • 条件语句
        • if
        • if...else
        • switch
        • 三元运算符 ?:
      • 循环语句
        • while
        • for
        • do...while
        • break语句 and continue语句
        • 标签

语句

JS程序的执行单位是行(line)

**语句(statement)**是为了完成特定任务而进行的操作,如下面的赋值语句

var a = 3 + 3;

该语句使用var命令声明变量a
而后将3 + 3的运算结果赋值给变量a

3 + 3是为表达式(expression),是一个用于获得返回值的计算式

语句以分号结尾,一个分号表示一条语句结束
因此语句可以写在同一行内

var a = 1 + 1; var b = 'zane';

分号前面也可以没有内容,JS引擎视为空语句

;;;

变量

变量是对值的具名引用
JS的变量名区分大小写
变量的声明和赋值是两个分开的步骤

var a = 1;var a;
a = 1;

若只是声明变量而不赋值,则变量的值为 undefined,是特殊的值,表示无定义

变量赋值忘记var命令,语句同样有效
但这种做法不利于表达意图,容易莫名创建全局变量

若变量没有声明便直接使用,则JS将报错
ReferenceError: x is not defined
在这里插入图片描述
在一条var命令中可以声明多个变量

var a, b;

JS是动态类型语言,变量的类型没有限制,可以随时更改类型

var a = 666;
a = 'Zane';

使用var重新声明一个已经存在的变量是无效的(不会覆盖为undefined)
但是如果声明的同时进行赋值则会覆盖

变量提升

JS引擎的工作方式是首先解析代码并获取所有声明的变量,然后进行逐行运行
导致所有变量的声明语句会被提升到代码头部,是为变量提升(hoisting)

console.log(a);
var a = 1;

以上代码首先使用console.log方法在console显示变量a的值,但此时a还没有声明与赋值,但实际上不会报错,由于变量提升导致真正运行的代码逻辑是

var a;
console.log(a);
a = 1;

因此最后显示undefined,表示声明但未赋值定义

标识符

identifier 标识符是指用于识别各种值的合法名称
常见的标识符有变量名和函数名(之后还有标签label啥的)
JS的标识符对大小写敏感

标识符命名规则是

  1. 首字符可以是任意的Unicode字母(英文or其他文字)以及美元符号($)和下划线(_)
  2. 后面的字符除了Unicode字母,$,_之外还可以使用0 - 9
  3. JS保留字不能用作identifier

合法的标识符:

arg0
_tmp
$elem
π
临时变量 // 中文是合法的

不合法的标识符

1a // 数字
*** // 不能包含*
a+b // 不能包含+
-d // 不能包含-

JS保留字有:
argument, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, eval, export, extends, false, finally, for, function, if, implements, import, in, instanceof, interface, let, new, null, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield

注释

源码中被JS引擎忽略的部分即为注释

单行 //
多行 /**/
同时JS可以兼容HTML代码的注释 <!-- -->
function countdown(n) {while (n --> 0) console.log(n);
}
countdown(3)
// 上面的代码中n-->0会被解释为n-- >0
// 因此输出2、1、0

区块

JS使用大括号将多个相关语句组合为区块(block)
对于var命令,JS区块并不构成单独作用域(scope),与不使用block没有任何区别

{var a = 1;
}
a // 1

JS单独使用区块并不常见,block通常用来构成复杂的语法结构如for, if, while, function等

条件语句

JS提供 if 和 switch结构以及三元运算符用于条件判断
满足预设条件方可执行相应语句

if

if 结构将判断条件表达式的布尔值
由布尔值的真伪(true or false)决定执行不同的语句

// 圆括号表示对表达式求值
if (布尔值)语句;// or
if (布尔值) 语句;

这种写法只能用于条件表达式后面只有一条语句的情况,否则必须在判断之后加上大括号构成代码块
(block使得多条语句合并为一条),并且我们建议always如此,因为这样方便插入语句同时结构清晰

if (m === 3) {m += 1;m -= 2;
}
var x = 1;
var y = 2;
if (x = y) {console.log(x);
}
// "2"

上面代码的原意是,当x等于y的时候,才执行相关语句
但是不小心将严格相等运算符写成赋值表达式,结果变成了将y赋值给变量x,再判断变量x的值(等于2)的布尔值(结果为true)
这种错误可以正常生成一个布尔值,因而不会报错
为了避免这种情况,有些开发者习惯将常量写在运算符的左边,这样的话,一旦不小心将相等运算符写成赋值运算符,就会报错,因为常量不能被赋值

if…else

if (m === 6) {// 满足条件
} else {// 不满足条件
}// 还可以对同一个变量进行多次判断,使用连写
if (m === 0) {// ...
} else if (m === 1) {// ...
} else if (m === 2) {// ...
} else {// ...
}

else代码块总是与离自己最近的那个if语句配对

var m = 1;
var n = 2;if (m !== 1)
if (n === 2) console.log('hello');
else console.log('world');

以上代码没有输出,else代码块与第二个if匹配,都无法执行,相当于

if (m !== 1) {if (n === 2) {console.log('hello');} else {console.log('world');}
}

若想要第二个代码块得到执行,可以改变大括号的位置

if (m !== 1) {if (n === 2) {console.log('hello');}
} else {console.log('world');
}
// world

switch

多个if…else连在一起使用的时候,可以转为使用更方便的switch结构

switch (fruit) {case "banana":// ...break;case "peach":// ...break;default:// ...
}

上面代码根据变量fruit的值,选择执行相应的case
若所有case都不符合,则执行最后的default部分

switch语句部分和case语句部分,都可以使用表达式

switch (1 + 3) {case 2 + 2:f();break;default:neverHappens();
}

需要注意的是,switch语句后面的表达式,与case语句后面的表示式比较运行结果时,采用的是严格相等运算符(===),这意味着比较时不会发生类型转换

var x = 1;switch (x) {case true:console.log('x 发生类型转换');break;default:console.log('x 没有发生类型转换');
}
// x 没有发生类型转换

三元运算符 ?:

三元运算符需要三个运算子

(条件) ? 表达式1 : 表达式2var even = (n % 2 == 0) ? true : false;// 如果n可以被2整除,则even等于true,否则等于false
// 等同于var even;
if (n % 2 === 0) {even = true;
} else {even = false;
}

三元运算符可以看做是简写if…else…
有许多应用场合

var myVar;
console.log(myVar ?'myVar has a value' :'myVar does not have a value'
)
// myVar does not have a valuevar msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');

循环语句

重复

while

while语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块

while (条件) 语句;// or 
while (条件) 语句;

当然和if语句一样最好加上大括号,如下面的无限循环

while (true) {console.log('Zanebla is a cool boy');
}

for

for语句是循环命令的另一种形式

for (初始化表达式; 条件; 递增表达式)语句// 或者for (初始化表达式; 条件; 递增表达式) {语句
}var x = 3;
for (var i = 0; i < x; i++) {console.log(i);
}
// 0
// 1
// 2
  1. 初始化表达式(initialize)确定循环变量的初始值,只在循环开始时执行一次
  2. 条件表达式(test)每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环
  3. 递增表达式(increment)每轮循环的最后一个操作,通常用来递增循环变量

所有for循环,都可以改写成while循环。上面的例子改为while循环,代码如下

var x = 3;
var i = 0;while (i < x) {console.log(i);i++;
}

当然initialize, test, increment都可以省略,如下面的无限循环

for (;;) {console.log('Zanebla is a nice man');
}

do…while

do…while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件

do语句
while (条件);// 或者
do {语句
} while (条件);

break语句 and continue语句

break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行
break语句用于跳出代码块或循环

var i = 0;while (i < 100) {console.log('i 当前为: ' + i);i++;if (i === 10) break;
}

上面代码只会执行10次循环,一旦i等于10,就会跳出循环
for循环也可以使用break语句跳出循环

而continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环

var i = 0;while (i < 100) {i++;if (i % 2 === 0continue;console.log('i 当前是: ' + i);
}

上面代码只有在i为奇数时,才会输出i的值
如果i为偶数,则直接进入下一轮循环

如果存在多重循环,不带参数的break语句和continue语句都只针对最内层循环

标签

JS允许语句前有label作为定位符,用于跳转至程序的任意位置
标签可以是任意的标识符,但不能是保留字,语句部分可以是任意语句
标签通常与break语句和continue语句配合使用来跳出特定的循环或者代码块

top1:for (var i = 0; i < 3; i++){for (var j = 0; j < 3; j++){if (i === 1 && j === 1) break top1;console.log('i=' + i + ', j=' + j);}}
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0foo: {console.log(1);break foo;console.log('本行不会输出');
}
console.log(2);
// 1
// 2top2:for (var i = 0; i < 3; i++){for (var j = 0; j < 3; j++){if (i === 1 && j === 1) continue top2;console.log('i=' + i + ', j=' + j);}}
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面代码中,continue命令后面有一个标签名,满足条件时,会跳过当前循环,直接进入下一轮外层循环,否则只能进入下一轮的内层循环

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/3599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32(HAL库)驱动SHT30温湿度传感器通过串口进行打印

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 软件IIC引脚配置 2.3 串口外设配置 2.4 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 SHT30驱动添加 3.3 主函数代 3.4 效果展示 1、简介 本文通过STM32F103C8T6单片机通过HAL库…

【25】SCI易中期刊推荐——神经网络科学(中科院4区)

💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…

Docker 基本管理与应用

目录 一、Docker介绍 1、docker概述 2、容器优势 3、Docker与虚拟机的区别 4、Docker核心概念 二&#xff1a; 安装 Docker 1、环境准备、安装依赖包 2、 设置阿里云镜像源&#xff0c;安装 Docker-CE并设置为开机自动启动 3、信息查看 ​三&#xff1a;Docker 镜像操作…

【数据结构常见七大排序(三)上】—交换排序篇【冒泡排序】And【快速排序】

目录 前言 1.冒泡排序 1.1冒泡排序动图 1.2冒泡排序源代码 1.3冒泡排序的特性总结 2.快速排序&#x1f451; 2.1hoare版本实现思想 排序前 排序中 排序后 2.2hoare版本快排源代码 2.3分析先走 情况1&#x1f947; 情况2&#x1f948; 前言 交换类排序两个常见的排…

包的使用及其创建

文章目录 前言类名冲突完整的类路径创建包导入类包总结 前言 java语言中&#xff0c;包在整个管理过程中发挥了重要的作用。使用包&#xff0c;可以有效地管理繁多的类文件&#xff0c;解决了类名重复的问题。在类中应用包和权限修饰符&#xff0c;可以控制他人对类成员的方法的…

【Jenkins】Jenkins构建前端流水线

目录 一、前言二、新建前端流水线1、点击新建任务2、填写流水线名称&#xff08;这里我选择的是自由风格的软件项目&#xff09;&#xff0c;任务名称一般格式为&#xff1a;项目名称-前后端3、创建成功后的结果 三、配置前端流水线1、进入刚创建好的任务页面中&#xff0c;点击…

Grafana_数据可视化工具

目录 一、简介 二、安装部署 1、下载 2、安装 3、启用 三、使用简介 1、添加数据源 2、创建DashBoard 3、查看dashboard 4、选择查看的时间段 5、阈值颜色控制 源码等资料获取方法 一、简介 Grafana是一个跨平台开源的纯html/js编写的度量分析和可视化工具&#x…

Meta提出全新参数高效微调方案,仅需一个RNN,Transformer模型GPU使用量减少84%!

近来&#xff0c;随着ChatGPT和GPT-4模型的不断发展&#xff0c;国内外互联网大厂纷纷推出了自家的大语言模型&#xff0c;例如谷歌的PaLM系列&#xff0c;MetaAI的LLaMA系列&#xff0c;还有国内公司和高校推出的一些大模型&#xff0c;例如百度的文心一言&#xff0c;清华的C…

Linux——认识Linux的目录结构 常用命令 vim命令 权限及其控制

目录 linux的目录结构常用linux的命令ls(list)和llcd 切换目录mkdir 创建文件夹touch命令&#xff1a;创建普通文本文件pwd 显示路径whoamisu&#xff1a;普通--超级账号man&#xff1a;查看手册rm&#xff1a;删除网络命令ifconfig重定向 >>cat 查看文本文件clear清屏hi…

kubernetes中特定域名使用自定义DNS服务器出现的解析异常

故障发生背景&#xff1a; 租户反馈生产业务服务连接到中间件的时候&#xff0c;偶尔会有连接失败的情况&#xff0c;然后我们查看对应组件服务正常&#xff0c;手动请求组件服务也显示正常&#xff0c;让租户查看业务服务日志发现报错无法解析对应的域名&#xff0c;我们手动是…

MySQL高阶语句

文章目录 一.常用查询1.按关键字排序&#xff08;ORDER BY 语句&#xff09;1.1 语法格式1.2 ASC和DESC的排序概念1.3 举例1.3.1 数据库有一张info表&#xff0c;记录了学生的id&#xff0c;姓名&#xff0c;分数&#xff0c;地址和爱好1.3.2 按分数排序&#xff0c;默认不指定…

springmvc @RequestMapping注解中produces以及consumes属性的含义(转载请删除括号里的内容)

http协议基础知识 首先需要了解什么叫MediaType&#xff08;媒体类型&#xff09;&#xff1f; 通俗来说&#xff0c;在http协议中&#xff0c;用来表示传输内容的格式就是MediaType&#xff0c;比如text/html&#xff0c;application/json等&#xff0c;其中text代表介质&am…

Python调用ImageMagick生成PDF文件缩略图

使用Python调用ImageMagick生成PDF文件缩略图 Imagemagick使用Ghostscript作为其依赖项之一&#xff0c;以便能够处理和转换PDF相关的图像。 准备 安装Ghostscript&#xff0c;网站安装ImageMagick&#xff0c;网站 安装完毕后&#xff0c;需要自行配置环境路径 脚本 使用示…

ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升

专题一 空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门 1.5 Geodatabase地理数据库 专题二 ArcGIS专题地图制作 2.1专题地图制作规范 2.2 空间数据的准备与处理 2.3 空间数据可视化&#xff1a;地图符号与注…

vue-cli多页面配置(vue2.0)

目录 概述 多页面的配置 步骤1&#xff1a;编写配置文件 vue.config.js 步骤2&#xff1a;在src目录下创建目录pages 步骤3&#xff1a;创建HTML文件&#xff08;主组件挂载点&#xff09; 测试 完毕&#xff0c;总结 概述 我们知道使用vue脚手架vue-cli创建的项目默认是…

1haclon 简单操作

文章目录 *读取图片 read_image(Image,claudia) *转换为灰度 rgb1_to_gray(Image,GrayImage)阈值分割 区域连接 获取最衣服 *读取图片 read_image(Image,claudia) *转换为灰度 select_shape (Connection, SelectedRegions, area, and, 40963.3, 44724.8) rgb1_to_gray(Image,Gr…

Redis远程字典服务

目录 前言 1.NoSQL 1.1NOSQL和关系型数据库比较 1.2非关系型数据库的优势 1.3关系型数据库的优势 ​编辑 2.主流的NOSQL产品 键值(Key-Value)存储数据库 列存储数据库 文档型数据库 图形(Graph)数据库 3.Redis简介 redis的应用场景 4.命令操作 4.1字符串类型 s…

zabbix监控自己

目录 一、实验环境准备 二、server端 1、配置阿里云yum源 2、部署lamp环境 3、启动lamp对应服务 4、准备java环境 5、源码安装zabbix 6、mariadb数据库授权 7、创建zabbix程序用户并授权防止权限报错 8、修改zabbix配置文件 9、配置php与apache 10、web安装zabbix …

访问Liunx文件系统

访问Liunx文件系统 识别文件系统和设备 存储管理概念 Linux服务器上文件按文件系统层次结构访问。该文件系统层次结构测试由系统可用的存储设备所提供的文件系统组装而来。每个文件系统都是一个已格式化的存储设备&#xff0c;可用于存储文件。 文件系统和挂载点 要让文件系…

STM32学习笔记(十三)丨USART通用同步/异步收发器(串口外设的基本使用丨串口发送数据、串口发送+接收数据)

本篇文章包含的内容 一、STM32的USART外设1.1 STM32的USAER外设简介1.2 USART外设的结构和工作原理1.3 串口通信数据帧1.4 起始位侦测和USART的噪声判断机制1.5 波特率发生器 二、串口发送和接收数据包2.1 HEX数据包2.2 文本数据包2.3 固定包长HEX数据包接收2.4 可变包长文本数…