[JavaScript] 第三章 语法

春花秋月何时了，往事知多少。此付费专栏不要订阅，不要订阅，听人劝。

🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助

🌹文末获取联系方式 📝

系列专栏目录

[Java项目实战] 介绍Java组件安装、使用；手写框架等
[Aws服务器实战] Aws Linux服务器上操作nginx、git、JDK、Vue等
[Java微服务实战] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
[Java基础篇] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中
[Springboot篇] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
[Spring MVC篇] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
[华为云服务器实战] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
[Java爬虫] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
[Vue实战] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
[Spring] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等

---

前言

本章介绍JavaScript的语法，包括注释、变量命名规则、变量定义、JavaScript数据类型等。

---

1、注释

单行注释以双斜杠//开头
多行注释以/*开头，以/结尾

/** 
 * 登录方法
 * @param name 用户名
 * @param pwd
 * @returns {*}
 */

2、变量

2.1、命名规则

在 JavaScript 中，变量名称并不能随便定义，需要遵循标识符的命名规则，如下所示：

• 变量名中可以包含数字、字母、下划线_、美元符号$；
• 变量名中不能出现汉字；
• 变量名中不能包含空格；
• 变量名不能是 JavaScript 中的关键字、保留字；
• 变量名不能以数字开头，即第一个字符不能为数字。

2.2、变量定义

2.2.1、var 变量名

var num =1;// 定义一个变量 num 并将其赋值为 1
var a =2, b =3, c =4;// 同时定义 a、b、c 三个变量并分别赋值为 2、3、4

2.2.2、变量提升

document.write(str);  //显示undefined
str = "http://baidu.com/";
document.write(str);//显示 http://baidu.com/
var str;

2.2.3、let 和 const 关键字

使用 let 关键字声明的变量只在其所在的代码块中有效
const定义常量

const PI =3.1415// 声明一个常量 PI，并赋值为 3.1415
console.log(PI)// 在控制台打印 PI

3、JavaScript的数据类型

JavaScript 是一种动态类型的语言，在定义变量时不需要提前指定变量的类型，变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的

3.1、基本数据类型（值类型）

字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol( Symbol表示独一无二的值)

var str ="123";
var sym1 =Symbol(str);
var sym2 =Symbol(str);
console.log(sym1);// 输出 Symbol(123)
console.log(sym2);

3.2、引用数据类型

对象（Object）、数组（Array）、函数（Function）

3.2.1、Object 类型

JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }，语法格式如下：

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}
Object.name1 = value1

3.2.2、Array 类型

数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据

[1,2,3,'hello',true,null]
new Array(1,2,3,4);

3.2.3、Function 类型

函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行

function sayHello(name){
  return"Hello, "+ name;
}
var sayHello = function(name) {
  return"Hello, "+ name;
}

var res =sayHello("Peter");
console.log(res);// 输出 Hello, Peter

3.2.3.1、typeof 操作符

获取变量类型

typeof x;// 获取变量 x 的数据类型
typeof(x);// 获取变量 x 的数据类型

3.2.4、运算符

3.2.4.1、算术运算符

运算符 描述 示例

+	加法运算符	x + y 表示计算 x 加 y 的和
-	减法运算符	x - y 表示计算 x 减 y 的差
*	乘法运算符	x * y 表示计算 x 乘 y 的积
/	除法运算符	x / y 表示计算 x 除以 y 的商
%	取模（取余）运算符	x % y 表示计算 x 除以 y 的余数

3.2.4.2、赋值运算符

运算符	描述	示例
=	最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量	x = 10 表示将变量 x 赋值为 10
+=	先进行加法运算，再将结果赋值给运算符左侧的变量	x += y 等同于 x = x + y
-=	先进行减法运算，再将结果赋值给运算符左侧的变量	x -= y 等同于 x = x - y
*=	先进行乘法运算，再将结果赋值给运算符左侧的变量	x *= y 等同于 x = x * y
/=	先进行除法运算，再将结果赋值给运算符左侧的变量	x /= y 等同于 x = x / y
%=	先进行取模运算，再将结果赋值给运算符左侧的变量	x %= y 等同于 x = x % y

3.2.4.3、字符串运算符

JavaScript 中的+和+=运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：

- +运算符表示将运算符左右两侧的字符串拼接到一起；
- +=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量

3.2.4.4、自增、自减运算符

运算符	名称	影响
++x	自增运算符	将 x 加 1，然后返回 x 的值
x++	自增运算符	返回 x 的值，然后再将 x 加 1
–x	自减运算符	将 x 减 1，然后返回 x 的值
x–	自减运算符	返回 x 的值，然后将 x 减 1

3.2.4.5、比较运算符

运算符 名称 示例

==	等于	x == y 表示如果 x 等于 y，则为真
===	全等	x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真
!=	不相等	x != y 表示如果 x 不等于 y，则为真
!==	不全等	x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真
<	小于	x < y 表示如果 x 小于 y，则为真
>	大于	x > y 表示如果 x 大于 y，则为真
>=	大于或等于	x >= y 表示如果 x 大于或等于 y，则为真
<=	小于或等于	x <= y 表示如果 x 小于或等于 y，则为真

3.2.4.6、逻辑运算符

运算符 名称 示例

&&	逻辑与	x && y 表示如果 x 和 y 都为真，则为真
||	逻辑或	x || y 表示如果 x 或 y 有一个为真，则为真
!	逻辑非	!x 表示如果 x 不为真，则为真

3.2.4.7、三元运算符

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

4、输出语句

• 使用 alert() 函数来弹出提示框；
• 使用 confirm() 函数来弹出一个对话框；
• 使用 document.write() 方法将内容写入到 HTML 文档中；
• 使用 innerHTML 将内容写入到 HTML 标签中；
• 使用 console.log() 在浏览器的控制台输出内容。

---

联系方式

微信公众号：Java微服务架构