【第四部分 | JavaScript 基础】2：运算、控制流程、数组

古城微笑少年丶 2023-09-23 15:55 54阅读 0赞

**目录**

| 运算符

概述

浮点数有精度误差

自增和自减

比较运算符

逻辑运算符

赋值运算符

运算优先级

| 流程控制

条件判断 if、if...else

三元表达式

分支语句 switch

| 循环

| 断点调试

| 数组

创建数组

访问与遍历

获取数组长度

JavaScript的数组 和 Java 的区别

--------------------

### | 运算符 ###

#### 概述 ####

![ffb2ff8ba7874a5b8bbf6756f7e2b9b8.png][]

--------------------

#### 浮点数有精度误差 ####

![bcbffd4c35d349edbff84376ac363a30.png][]

--------------------

#### 自增和自减 ####

![f20c714ab8034621a62b53d55f6b4e9a.png][]

--------------------

#### 比较运算符 ####

![ec5ef02c1a8e45a3b69b2dcdb3b61350.png][]

![1074f2081b654091952b1eb06e9ee875.png][]

--------------------

#### 逻辑运算符 ####

![fae4d16c899c42e982618d557d05f8d6.png][]

--------------------

#### 赋值运算符 ####

![f5b50941e5d741368ae774f7668a5c31.png][]

--------------------

#### 运算优先级 ####

![2fa9ee7b0b904995b90afdddd7a75ade.png][]

--------------------

### | 流程控制 ###

#### 条件判断 if、if...else ####

![695c11221bf741d1ae4752aaebed6496.png][]

--------------------

#### 三元表达式 ####

![e4b4ce239cf2488584014306e523b1c1.png][]

--------------------

#### 分支语句 switch ####

经过测试，表达式和value的值可以是数字、也可以是字符串等等

![94a54277d5214bbb822cba25d20a4837.png][]

### | 循环 ###

![67951b917e4c429484b239015b183065.png][]

--------------------

### | 断点调试 ###

JavaScript在浏览器端进行断点调试

火狐

![387ad91b84bf438dbbe9d01dab513941.png][]

谷歌

![5a39869fcdad44a793afa41be7e665d3.png][]

--------------------

### | 数组 ###

#### 创建数组 ####

![71101e864304435690e2b54cd16fa810.png][]

--------------------

#### 访问与遍历 ####

访问

![39c4b6e4383e42909e35fba78543f105.png][]

JS没有数组越界异常。 如果访问了一个不存在的下标元素，则得到的元素值为 undefined

遍历：使用循环进行遍历 示例如下：

--------------------

#### 获取数组长度 ####

数组名.length

--------------------

#### JavaScript的数组 和 Java 的区别 ####

区别

*  JS的数组：可以不指定数组初始容量，可以自动扩容，不会出现数组越界（越界会返回undefined），数组中可以存放任意数据类型甚至混合放不同数据类型
 *  Java的数字：必须指定初始容量，且长度一旦确定不能更改，会出现ArrayIndexOutOfBoundsException异常，数组中只能存放一种指定的类型

\[案例\] 利用JS的特性 剔除数组中不为0的数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            var nums = [1,2,0,3,4,5,0,2,3];
            var newNums = [];
            for(var i = 0 ; i < nums.length ; i++) {
                if(nums[i] != 0) {
                    // 很巧妙地把数组玩成了集合，可以灵活变换长度（JS数组的特性）
                    newNums[newNums.length] = nums[i];
                }
            }
            console.log(newNums);
        </script>
    </head>
    <body>
        
    </body>
    </html>

上述代码，利用了JavaScript可以动态扩容的特性。 同样的一段代码，放在Java中则会报错：newNums数组未初始化

![7d2965fc26b5475098440a46688e7743.png][]

[ffb2ff8ba7874a5b8bbf6756f7e2b9b8.png]: https://img-blog.csdnimg.cn/ffb2ff8ba7874a5b8bbf6756f7e2b9b8.png
[bcbffd4c35d349edbff84376ac363a30.png]: https://img-blog.csdnimg.cn/bcbffd4c35d349edbff84376ac363a30.png
[f20c714ab8034621a62b53d55f6b4e9a.png]: https://img-blog.csdnimg.cn/f20c714ab8034621a62b53d55f6b4e9a.png
[ec5ef02c1a8e45a3b69b2dcdb3b61350.png]: https://img-blog.csdnimg.cn/ec5ef02c1a8e45a3b69b2dcdb3b61350.png
[1074f2081b654091952b1eb06e9ee875.png]: https://img-blog.csdnimg.cn/1074f2081b654091952b1eb06e9ee875.png
[fae4d16c899c42e982618d557d05f8d6.png]: https://img-blog.csdnimg.cn/fae4d16c899c42e982618d557d05f8d6.png
[f5b50941e5d741368ae774f7668a5c31.png]: https://img-blog.csdnimg.cn/f5b50941e5d741368ae774f7668a5c31.png
[2fa9ee7b0b904995b90afdddd7a75ade.png]: https://img-blog.csdnimg.cn/2fa9ee7b0b904995b90afdddd7a75ade.png
[695c11221bf741d1ae4752aaebed6496.png]: https://img-blog.csdnimg.cn/695c11221bf741d1ae4752aaebed6496.png
[e4b4ce239cf2488584014306e523b1c1.png]: https://img-blog.csdnimg.cn/e4b4ce239cf2488584014306e523b1c1.png
[94a54277d5214bbb822cba25d20a4837.png]: https://img-blog.csdnimg.cn/94a54277d5214bbb822cba25d20a4837.png
[67951b917e4c429484b239015b183065.png]: https://img-blog.csdnimg.cn/67951b917e4c429484b239015b183065.png
[387ad91b84bf438dbbe9d01dab513941.png]: https://img-blog.csdnimg.cn/387ad91b84bf438dbbe9d01dab513941.png
[5a39869fcdad44a793afa41be7e665d3.png]: https://img-blog.csdnimg.cn/5a39869fcdad44a793afa41be7e665d3.png
[71101e864304435690e2b54cd16fa810.png]: https://img-blog.csdnimg.cn/71101e864304435690e2b54cd16fa810.png
[39c4b6e4383e42909e35fba78543f105.png]: https://img-blog.csdnimg.cn/39c4b6e4383e42909e35fba78543f105.png
[7d2965fc26b5475098440a46688e7743.png]: https://img-blog.csdnimg.cn/7d2965fc26b5475098440a46688e7743.png