[JavaScript] 第三章语法

小鱼儿 2024-04-23 21:03 62阅读 0赞

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

> ?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?  
> ?简历模板、学习资料、面试题库、技术互助
> 
> ?文末获取联系方式 ?  
> ![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

## 系列专栏目录 ##

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

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

##### 3.2.4.3、字符串运算符 #####

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

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

##### 3.2.4.4、自增、自减运算符 #####

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>名称</th> 
   <th>影响</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>++x</td> 
   <td>自增运算符</td> 
   <td>将 x 加 1，然后返回 x 的值</td> 
  </tr> 
  <tr> 
   <td>x++</td> 
   <td>自增运算符</td> 
   <td>返回 x 的值，然后再将 x 加 1</td> 
  </tr> 
  <tr> 
   <td>–x</td> 
   <td>自减运算符</td> 
   <td>将 x 减 1，然后返回 x 的值</td> 
  </tr> 
  <tr> 
   <td>x–</td> 
   <td>自减运算符</td> 
   <td>返回 x 的值，然后将 x 减 1</td> 
  </tr> 
 </tbody> 
</table>

##### 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微服务架构 ####

![在这里插入图片描述][c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/fafba850c13148fc8d8578a4b24cc227.png
[Java_ _Java]: https://blog.csdn.net/s445320/category_12345409.html
[Aws_ Aws Linux_nginx_git_JDK_Vue]: https://blog.csdn.net/s445320/category_12492968.html
[Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]: https://blog.csdn.net/s445320/category_12439818.html
[Java_ Java_HashMap_String_StringBuffer_JVM_]: https://blog.csdn.net/s445320/category_12369312.html
[Springboot_ _Springboot_RestFul_Swagger_]: https://blog.csdn.net/s445320/category_12273537.html
[Spring MVC_ _Spring MVC_RestFul_]: https://blog.csdn.net/s445320/category_12295009.html
[_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]: https://blog.csdn.net/s445320/category_12426609.html
[Java_ _Java_Selenium_GoogleWebDriver _bing_]: https://blog.csdn.net/s445320/category_8863085.html
[Vue_ _Vue3_axios_Element-ui_]: https://blog.csdn.net/s445320/category_12278346.html
[Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]: https://blog.csdn.net/s445320/category_12283629.html
[c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/04587f67197b4deaa609952e91c925bf.jpeg