JS基础流程控制

谁践踏了优雅 2023-10-06 21:38 44阅读 0赞

#### 阅读目录 ####

*  if
 *  三元表达式
 *  switch
 *  while
 *  for
 *  break/continue
 *  label
 *  for/in
 *   *  遍历数组操作
     *  遍历对象操作
     *   *  JS \`hasOwnProperty()\` 方法
     *  遍历window对象的所有属性
 *  for/of
 *   *  遍历数组
     *  遍历字符串
     *  使用迭代特性遍历数组
     *   *  JavaScript \`entries()\` 方法
     *  使用 \`for/of\` 也可以用来遍历DOM元素

## if ##

当条件为真时执行表达式代码块。

let state = true;
    if (true) {
        
        console.log('表达式成立');
    }
    
    如果只有一条代码块，可以不用写 {
        }
    
    let state = true;
    if (true) console.log('表达式成立');
    
    console.log('一直都显示的内容');

`if/else`  
下面是使用多条件判断密码强度的示例

<body>
        <input type="password" name="title" />
        <span></span>
    </body>
    
    <script>
        let input = document.querySelector("[name='title']");
    
        input.addEventListener("keyup", function () {
        
    
            let length = this.value.length;
            let msg;
            
            if (length > 10) {
        
                msg = "密码已经无敌了";
            } else if (length > 6) {
        
                msg = "密码安全性中级";
            } else {
        
                msg = "这密码，要完的节奏";
            }
            document.querySelector("span").innerHTML = msg;
        });
    </script>

![在这里插入图片描述][2a39246c54c04d1bb9aa87844c509c2e.gif_pic_center]

## 三元表达式 ##

是针对 `if` 判断的简写形式。

let n = true ? 1 : 2;
    console.log(n); //1
    
    let f = true ? (1 == true ? 'yes' : 'no') : 3;
    console.log(f); // yes

下面是创建DIV元素的示例，使用三元表达式设置初始值

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## switch ##

可以将 switch 理解为 if 的另一种结构清晰的写法。

*  如果表达式等于 case 中的值，将执行此 case 代码段
 *  break 关键字会终止 switch 的执行
 *  没有任何 case 匹配时将执行 default 代码块
 *  如果case执行后缺少break则接着执行后面的语句

let name = '视频';
    switch (name) {
        
        case '产品':
            console.log('产品');
            break;
        case '视频':
            console.log('视频');
            break;
        default:
            console.log('电视')
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
case 合用示例

let error = 'warning';
    switch (error) {
        
      case 'notice':
      case 'warning':
          console.log('警告或提示信息');
          break;
      case 'error':
          console.log('错误信息');
    }

在 switch 与 case 都可以使用表达式

![在这里插入图片描述][44d7a058e6114281aa50cca88073b72f.png]  
下面例子缺少 break 后，会接着执行后面的 switch 代码。

switch (1) {
        
      case 1:
        console.log(1);
      case 2:
        console.log(2);
      default:
        console.log("default");
    }

![在这里插入图片描述][6db362d9b384465c9cc9aa3f5dc09c59.png]

## while ##

循环执行语句，需要设置跳出循环的条件否则会陷入死循环状态。

下面是循环输出表格的示例。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]  
`do/while`  
后条件判断语句，无论条件是否为真都会先进行循环体。

下面通过循环输出三角形示例，要注意设置循环跳出的时机来避免死循环。

## for ##

可以在循环前初始化初始计算变量。  
下面是使用 `for` 打印倒三角的示例：

for 的三个参数可以都省略或取几个

let i = 1;
    for (; i < 10; ) {
        
      console.log(i++);
    }

## break/continue ##

break 用于退出当前循环，continue 用于退出当前循环返回循环起始继续执行。

获取所有偶数，所有奇数使用 continue 跳过

for (let i = 1; i <= 10; i++) {
        
      if (i % 2) continue;
      console.log(i);
    }

获取三个奇数，超过时使用 break 退出循环

let count = 0,num = 3;
    
    for (let i = 1; i <= 10; i++) {
        
      if (i % 2) {
        
        console.log(i);
        if (++count == num) break;
      }
    }

![在这里插入图片描述][79918d6a4f8443f6ba373cce89fc6f81.png]

## label ##

标签 `(label)` 为程序定义位置，可以使用 `continue/break` 跳到该位置。

下面取 `i+n` 大于 15 时退出循环

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]

## for/in ##

用于遍历对象的所有属性，`for/in` 主要用于遍历对象，不建议用来遍历数组。

### 遍历数组操作 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 遍历对象操作 ###

![在这里插入图片描述][31edfbc6d58349e8bccc011bf324b7f2.png]

#### JS `hasOwnProperty()` 方法 ####

JS `hasOwnProperty(propertyName)` 方法：  
是用来检测属性是否为对象的自有属性，如果是，返回true，否者false; 参数 propertyName指要检测的属性名；

hasOwnProperty() 方法是 Object 的原型方法（也称实例方法），它定义在 Object.prototype 对象之上，所有 Object 的实例对象都会继承 hasOwnProperty() 方法。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
hasOwnProperty() 只会检查对象的自有属性，对象原形上的属性其不会检测；  
但是对于原型对象本身来说，这些原型上的属性又是原型对象的自有属性，所以原形对象也可以使用 `hasOwnProperty()` 检测自己的自有属性；

let obj = {
        
        name:'张睿',
        age:18,
        eat:{
        
            eatname:'面条',
            water:{
        
                watername:'农夫山泉'
            }
        }
    }
    console.log(obj.hasOwnProperty('name')) //true
    console.log(obj.hasOwnProperty('age'))  //true
    console.log(obj.hasOwnProperty('eat'))  //true
    console.log(obj.hasOwnProperty('eatname'))  //false
    console.log(obj.hasOwnProperty('water'))  //false
    console.log(obj.hasOwnProperty('watername'))  //false
    console.log(obj.eat.hasOwnProperty('eatname'))  //true
    console.log(obj.eat.hasOwnProperty('water'))  //true
    console.log(obj.eat.hasOwnProperty('watername'))  //false
    console.log(obj.eat.water.hasOwnProperty('watername'))  //true

### 遍历window对象的所有属性 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## for/of ##

用来遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构。

与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。

### 遍历数组 ###

![在这里插入图片描述][ea4ff3af96e44fa693c5909c13fc4b6d.png]

### 遍历字符串 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### 使用迭代特性遍历数组 ###

![在这里插入图片描述][18d37b7c8c824376ad42bc3e4e9383cf.png]

#### JavaScript `entries()` 方法 ####

Array entries() 从数组中创建一个可迭代的对象。

迭代对象的每个实体来自数组对应的元素。

0,Banana

1,Orange

2,Apple

注意: IE11 及其更早的浏览器版本不支持 entries 方法。

<p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    
    <script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.entries();
    
    document.getElementById("demo1").innerHTML = x.next().value;
    document.getElementById("demo2").innerHTML = x.next().value;
    document.getElementById("demo3").innerHTML = x.next().value;
    </script>

定义和用法  
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。

[0, "Banana"]
    [1, "Orange"]
    [2, "Apple"]
    [3, "Mango"]

### 使用 `for/of` 也可以用来遍历DOM元素 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]

<body>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </body>
    
    <script>
        let lis = document.querySelectorAll("li");
        for (const li of lis) {
        
            li.addEventListener("click", function () {
        
                this.style.backgroundColor = "red";
            });
        }
    </script>

[2a39246c54c04d1bb9aa87844c509c2e.gif_pic_center]: https://img-blog.csdnimg.cn/2a39246c54c04d1bb9aa87844c509c2e.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ceb53eb74f4f406f8ad74d4ae8db22bc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f77966adfe0045dcbe98e2f90d7fbeb8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/268b57a623bb409fa3426dc23a5e3a6f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[44d7a058e6114281aa50cca88073b72f.png]: https://img-blog.csdnimg.cn/44d7a058e6114281aa50cca88073b72f.png
[6db362d9b384465c9cc9aa3f5dc09c59.png]: https://img-blog.csdnimg.cn/6db362d9b384465c9cc9aa3f5dc09c59.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b41f7808935344929cbf8e783895c52f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_12,color_FFFFFF,t_70,g_se,x_16
[79918d6a4f8443f6ba373cce89fc6f81.png]: https://img-blog.csdnimg.cn/79918d6a4f8443f6ba373cce89fc6f81.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/00ae1cf22c1e4bed8d8ca69dcbeff56f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/41d7823d2016497badd7a63f57f4c3c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[31edfbc6d58349e8bccc011bf324b7f2.png]: https://img-blog.csdnimg.cn/31edfbc6d58349e8bccc011bf324b7f2.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/f26d8a8a6f7642efaafc489200f3fa05.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d3527f224fdf418d9a036ce4ec328c77.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[ea4ff3af96e44fa693c5909c13fc4b6d.png]: https://img-blog.csdnimg.cn/ea4ff3af96e44fa693c5909c13fc4b6d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/f372e54ef3844115971788683e1df87e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[18d37b7c8c824376ad42bc3e4e9383cf.png]: https://img-blog.csdnimg.cn/18d37b7c8c824376ad42bc3e4e9383cf.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/9e890b56f19a4d12b0d25bd2feccd035.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16