运算符
houdunren.com (opens new window)@ 向军大叔
#赋值运算符
使用 = 进行变量赋值
let url = ‘houdunren.com’;
#算术运算符
包括以下几种算术运算符。
| 运算符 | 说明 |
|---|---|
| * | 乘法 |
| / | 除法 |
| + | 加法 |
| - | 减法 |
| % | 取余数 |
let a = 5,b = 3;
console.log(a * b); //15
console.log(a % b); //2
#复合运算符
可以使用 =、/=、+=、-=、%= 简写算术运算。即 n=2 等同于 n=n2。
let n = 2;
n = 2;
console.log(n);
对变量加减相应数值。
let n = 2;
n += 3;
console.log(n); //0
n -= 5;
console.log(n); //5
n+=3 是 n=n+3 的简写形式
#一元运算符
#前置操作
前置操作会在表达式最先执行。
let n = 1;
++n
console.log(n);
—n
console.log(n);
++n 就是 n=n+1 的简写形式。
使用后置操作符，++n 会在最先执行，所以f的结果是33。
let n = 2;
let f = 30 + ++n;
console.log(f);
#后置操作
后置操作会在表达式最后执行。
let n = 1;
n++
console.log(n);
使用后置操作符，n++ 会在最后执行，所以f的结果是32。
let n = 2;
let f = 30 + n++;
console.log(f);
参与数学计算
let a = 1;
b = a++ + 2;
console.log(b); //3
#比较运算符
| 运算符 | 说明 |
|---|---|
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于等于 |
| == | 强制类型转换比较 |
| === | 不强制类型转换比较 |
下面来体验不同类型的比较结果
let a = 1,b = 2,c = ‘1’;
console.log(a < b); //true
console.log(a == b); //false
console.log(a == c); //true
console.log(a === c); //false
console.log(a == true); //true
console.log(a === true); //false
以下示例不允许年龄超过90岁
#逻辑运算符
#逻辑与
使用 && 符号表示逻辑与，指符号两端都为 true 时表达式结果为true。
let a = true,b = true;
if (a && b) {
console.log(‘表达式成立’);
}
#逻辑或
使用 || 符号表示逻辑或，指符号左右两端有一方为true，表达式即成立。
let a = true,b = false;
if (a || b) {
console.log(‘表达式成立’);
}
#逻辑非
使用 ! 符号表示逻辑非，即原来是true转变为false，反之亦然。
let a = true,b = false;
if (a && !b) {
console.log(‘表达式成立’);
}
#优先级
下列中因为 && 的优先级高所以结果是 true。
console.log(true || false && false);
可以使用 () 来提高优先级
console.log((true || false) && false);
#密码比对实例
#流程控制
#if
当条件为真时执行表达式代码块。
let state = true;
if (true) {
console.log(‘表达式成立’);
}
如果只有一条代码块，可以不用写 {}
let state = true;
if (true)
console.log(‘表达式成立’);
console.log(‘一直都显示的内容’);
#if/else
下面是使用多条件判断密码强度的示例
#三元表达式
是针对 if 判断的简写形式。
let n = true ? 1 : 2;
console.log(n); //1
let f = true ? (1 == true ? ‘yes’ : ‘no’) : 3;
console.log(f); // yes
下面是创建DIV元素的示例，使用三元表达式设置初始值
function div(options = {}) {
let div = document.createElement(“div”);
div.style.width = options.width ? options.width : “100px”;
div.style.height = options.height ? options.height : “100px”;
div.style.backgroundColor = options.bgcolor ? options.bgcolor : “red”;
document.body.appendChild(div);
}
div();
#switch
可以将 switch 理解为 if 的另一种结构清晰的写法。
- 如果表达式等于 case 中的值，将执行此 case 代码段
- break 关键字会终止 switch 的执行
- 没有任何 case匹配时将执行default 代码块
- 如果case执行后缺少break则接着执行后面的语句
let name = ‘视频’;
switch (name) {
case ‘产品’:
console.log(‘hdcms.com’);
break;
case ‘视频’:
console.log(‘houdunren.com’);
break;
default:
console.log(‘houdunwang.com’)
}
case 合用示例
let error = ‘warning’;
switch (error) {
case ‘notice’:
case ‘warning’:
console.log(‘警告或提示信息’);
break;
case ‘error’:
console.log(‘错误信息’);
}
在switch 与 case 都可以使用表达式
function message(age) {
switch (true) {
case age < 15:
console.log(“儿童”);
break;
case age < 25:
console.log(“青少年”);
break;
case age < 40:
console.log(“青年”);
break;
case age < 60:
console.log(“中年”);
break;
case age < 100:
console.log(“老年”);
break;
default:
console.log(“年龄输出错误”);
}
}
message(10);
下面例子缺少break 后，会接着执行后面的switch代码。
switch (1) {
case 1:
console.log(1);
case 2:
console.log(2);
default:
console.log(“default”);
}
#while
循环执行语句，需要设置跳出循环的条件否则会陷入死循环状态。下面是循环输出表格的示例。
let row = 5;
document.write(<table border="1" width="100">);
while (row— != 0) {
document.write(<tr><td>${row}</td></tr>);
}
document.write(</table>);
#do/while
后条件判断语句，无论条件是否为真都会先进行循环体。
下面通过循环输出三角形示例，要注意设置循环跳出的时机来避免死循环。
*
function hd(row = 5) {
let start = 0;
do {
let n = 0;
do {
document.write(“*”);
} while (++n <= start);
document.write(“
“);
} while (++start <= row);
}
hd();
#for
可以在循环前初始化初始计算变量。下面是使用for 打印倒三角的示例
**
*
**
*
**
*
*
*
for (let i = 10; i > 0; i—) {
for (let n = 0; n < i; n++) {
document.write(‘*’);
}
document.write(“
“);
}
下面是使用循环制作杨辉三角的案例
*<br /> ***<br /> *****<br /> *******<br />*********
for (let i = 1; i <= 5; i++) {
for (let n = 5 - i; n > 0; n—) {
document.write(‘^’);
}
for (let m = i 2 - 1; m > 0; m—) {
document.write(‘‘);
}
document.write(“
“);
}
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;
}
}
#label
标签(label) 为程序定义位置，可以使用continue/break跳到该位置。
下面取i+n 大于15时退出循环
houdunren: for (let i = 1; i <= 10; i++) {
hdcms: for (let n = 1; n <= 10; n++) {
if (n % 2 != 0) {
continue hdcms;
}
console.log(i, n);
if (i + n > 15) {
break houdunren;
}
}
}
#for/in
用于遍历对象的所有属性，for/in主要用于遍历对象，不建议用来遍历数组。
遍历数组操作
let hd = [
{ title: “第一章 走进JAVASCRIPT黑洞”, lesson: 3 },
{ title: “ubuntu19.10 配置好用的编程工作站”, lesson: 5 },
{ title: “媒体查询响应式布局”, lesson: 8 }
];
document.write(<br /> <table border="1" width="100%"><br /> <thead><tr><th>标题</th><th>课程数</th></thead><br />);
for (let key in hd) {
document.write(<br /> <tr><br /> <td>${hd[key].title}</td><br /> <td>${hd[key].lesson}</td><br /> </tr><br />);
}
document.write(““);
遍历对象操作
let info = {
name: “后盾人”,
url: “houdunren.com”
};
for (const key in info) {
if (info.hasOwnProperty(key)) {
console.log(info[key]);
}
}
遍历window对象的所有属性
for (name in window) {
console.log(window[name]);
}
#for/of
用来遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构。
与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。
后面在讲到遍历器 章节后大家会对for/of有更深的体会
let arr = [1, 2, 3];
for (const iterator of arr) {
console.log(iterator);
}
遍历字符串
let str = ‘houdunren’;
for (const iterator of str) {
console.log(iterator);
}
使用迭代特性遍历数组（后面章节会介绍迭代器）
const hd = [“hdcms”, “houdunren”];
for (const [key, value] of hd.entries()) {
console.log(key, value); //这样就可以遍历了
}
使用for/of 也可以用来遍历DOM元素
若有收获，就点个赞吧
0 人点赞
