[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')breakdefault:console.log('default')
}

运行结果

do-while的使用

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

let start = 0
do {let n = 0do {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);

运行结果:

[JavaScript] JavaScript 运算符与流程控制相关推荐

JavaScript 系列四：流程控制
快来加入我们吧! "小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章.为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.c ...
好好学python·运算符和流程控制
运算符和流程控制运算符类型 Python算术运算符 Python比较运算符 Python赋值运算符 Python位运算符 Python逻辑运算符 Python成员运算符 Python身份运算符 Py ...
Python基础（二）--数据类型，运算符与流程控制
目录 Python基础(二)--数据类型,运算符与流程控制 1 数据类型 1.1 Python中的数据类型 1.2 整数类型(int) 1.3 布尔类型 1.4 浮点类型 1.5 复数类型 1.6 类 ...
java的注释、关键字、标识符、变量常量、数据类型、运算符、流程控制等
java的注释.关键字.标识符.变量常量. 数据类型.运算符.流程控制等 1. java概述 1.1 java的技术体系 Java SE:是Ja ...
python 运算符与流程控制
运算符与流程控制运算符赋值运算用'='表示,'='的左边只能是变量算术运算 +.-.*:加.减.乘 /:除法运算,运算结果为浮点数 //:除法运算,运算结果为整数(商) %:求余 **:求幂 ...
Java基础语法之变量、运算符、流程控制、数组和方法等基础语法
变量.运算符.流程控制.数组和方法等基础语法.Java程序的执行流程,符合Java语法规则的程序. 1.1.1 Java初识对Java进行简单介绍,Java程序如何执行,以及Java程序的结构. J ...
ChapterTwo---Java基本语法：变量、运算符与流程控制（上）
ChapterTwo---Java基本语法:变量.运算符与流程控制(上) ⑴关键字和保留字 ⑵标识符(Identifier) ⑶变量以及基本数据类型整数类型:byte.short.int.long ...
python给js变量赋值_python 之前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）...
11.4 JavaScript 11.41 变量 1.声明变量的语法 //1. 先声明后定义 var name; //声明变量时无需指定类型,变量name可以接受任意类型 name= "eg ...
python 之前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）...
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
Javascript - 1 引入方式，变量常量，数据类型，运算符，流程控制，数组，函数，对象，DOM
Javascipt:是一门弱类型的脚本语言,需要在网页上执行. html负责框架结构,css负责样式修饰,js负责行为交互,动态效果. 前端三大件:html,css,js. javascript 和 ...

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

switch的使用

do-while的使用

for-in的使用

for-of

赋值运算

一元运算

n++和++n的区别

判断运算if

for循环

[JavaScript] JavaScript 运算符与流程控制相关推荐

最新文章

热门文章