[JavaScript] JavaScript 运算符与流程控制

本文主要介绍switch,do-while,for-in,for-of的使用方法.
有关if-else,for,while等简单流程控制,和别的语言相似且常见,我没有自己写,本文将展示教程配套课件中的代码,以及我写的解释.
课程来源:后盾人.

switch的使用

• 匹配到case之后,就会傻呵呵地往下走,直到碰到break

let namee = 'test'
switch (namee) {
   
  case 'aaa':
    console.log('aaa')
  case 'test':
    console.log('test')
  case 'ddd':
    console.log('ddd')
    break
  default:
    console.log('default')
}

运行结果

do-while的使用

• 不判断条件,先进来,进来之后再看要不要继续
• 就跟买衣服,可以先进去看看,买不买就不一定了
• while()循环就是会所,要先办会员卡,才能进
• (这例子是老师举的,跟我没关系,我听不懂)

let start = 0
do {
   
  let n = 0
  do {
   
    document.write(
      `<div> <span>hello</span> </div>`,
    )
  } while (++n <= start)
} while (++start <= 5)

如果你不清楚下面这一段代码是干什么用的,现在不用考虑它.这一串代码表示在浏览器中输出显示部分,当然也可以用console.log代替测验.

document.write(
      `<div> <span>hello</span> </div>`,
    )

运行结果:

for-in的使用

对于一个数组里的每一个键进行遍历(不是键值对key-value形式么,就是那个"键")

let hd = [
  {
    title: 'title1', lesson: 1 },
  {
    title: 'title2', lesson: 2 },
  {
    title: 'title3', lesson: 3 },
]
document.write(
  `<table border="1" > <thead> <tr> <th>标题</th> <th>编号</th> </tr> </thead>`,
)

for (let i in hd) {
   
  document.write(
    `<tr> <td>${
     hd[i].title}</td> <td>${
     hd[i].lesson}</td> </tr>`,
  )
}
document.write(`</table>`)

运行结果

for-of

与for-in不同的是,for-of取的是键值对里的"值",仔细观察以下部分:

for (let i of hd) {
   
  document.write(
    `<tr> <td>${
     i.title}</td> <td>${
     i.lesson}</td> </tr>`,
  )
}

直接用i代替hd[i]就能实现取值
完整代码如下:

let hd = [
  {
    title: 'title1', lesson: 1 },
  {
    title: 'title2', lesson: 2 },
  {
    title: 'title3', lesson: 3 },
]
document.write(
  `<table border="1" > <thead> <tr> <th>标题</th> <th>编号</th> </tr> </thead>`,
)

for (let i of hd) {
   
  document.write(
    `<tr> <td>${
     i.title}</td> <td>${
     i.lesson}</td> </tr>`,
  )
}
document.write(`</table>`)

运行效果同上

赋值运算

在JS中用=赋值,和别的语言一样

let a = 5,
b = 3;

一元运算

• 这一点不想讲了,+ - * /还看不懂吗…

n++和++n的区别

let f = 2;
let d = f + n++;

• n++:先赋值,再自增
• ++n:先自增,再赋值
• 记忆:什么时候碰到++,什么时候自增,什么时候碰到n,什么时候赋值

判断运算if

function query(name) {
   
        return document.querySelector(`[name='${
     name}']`);
      }
      let inputs = document.querySelectorAll(
        "[name='password'],[name='confirm_password']"
      );
      [...inputs].map(item => {
   
        item.addEventListener("keyup", function() {
   
          let msg = "";
          if (
            query("password").value != query("confirm_password").value ||
            query("password").value.length < 5
          ) {
   
            msg = "两次密码不一致或密码长度小于五位";
          }
          query("msg").innerHTML = msg;
        });
      });

• 代码是比较复杂,看不懂的花几分钟看看课程原视频,链接在本文顶端
• ...是解构赋值,就是把里面的东西一项一项摆出来
• 这段代码里涉及很多dom操作,不会dom操作的…看下面这段代码吧
• 总之就是和别的语言一样啊!!!
  

for循环

用for循环画个杨辉三角

function hd(row = 5) {
   
        for (let i = 1; i < row; i++) {
   
          for (let n = row - i; n > 0; n--) {
   
            document.write(`<span>*</span>`);
          }
          for (let m = i * 2 - 1; m > 0; m--) {
   
            document.write("*");
          }
          document.write("<br/>");
        }
      }
      hd(20);

运行结果: