一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
运算符
也称为操作符，用于实现赋值、比较和执行算术运算等功能的符号
js中常用的运算符有：
- 算数运算符
console.log(1 / 1);// 1
//1. % 取余（模）
//可以用来判断 一个数 能否被整除
console.log(3 % 5);// 3
console.log(4 % 2);// 0
//2. 浮点数 算术运算里面会有问题
console.log(0.1 + 0.2);// 0.30000000000000004
console.log(0.07 * 100);// 7.000000000000001
//3. 我们不能直接拿着浮点数来进行相比较
var num = 0.1 + 0.2;
console.log(num == 0.3);// false
- 递增和递减运算符
//1.前置递增运算符 ++ 写在变量的前面
var age = 10;
++age;//类似于age = age + 1;
console.log(age);
//2. 先自加1 后返回值
var p = 10;
console.log(++p + 10);// 21
//3. 后置自增
var num = 10;
num++;
console.log(num);
//4. 口诀：先返回值 后自加1
var age = 10;
console.log(age++ + 10);// 20
// 前置自增盒后置自增如果单独使用 效果是一样的
- 比较运算符
比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
//1. 我们程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3 == 5);// false
console.log('joy' == '刘德华');// false
console.log(18 == 18);// true
console.log(18 != 18);// false
//2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以
console.log(18 === 18);// true
console.log(18 === '18');// false
//3. 总结：= 等号赋值 == 判断 === 全等
- 逻辑运算符
//1. 逻辑与 && and 两侧都为true 结果才为 true
console.log(3 > 2 && 3 < 0);// false
console.log(3 < 5 && 3 > 2);// true
//2. 逻辑或 || or 两侧都为假 结果才为假
console.log(1 > 6 || 4 >3);// true
console.log(3 > 5 || 3 < 2);// false
//3. 逻辑非 ！ not
console.log(!9);// false
逻辑中断（短路操作）
//1. 用我们的布尔值参与的逻辑运算 true && false == false
//2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
//3. 逻辑运算与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1 为假 那么返回表达式1
console.log(123 && 456);// 456
console.log(0 && 456);// 0
//如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
console.log('' && 1 + 2 && 456 * 45678);//'' 结果为空
//4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
console.log(123 || 456);// 123
console.log(123 || 456 || 456 + 123);// 123
console.log(0 || 1234 + 345 || 345);// 1579
// 逻辑中断很重要 它会影响我们程序的运行结果
var num = 0;
console.log(123 || ++num);
console.log(num);// 0
- 赋值运算符
用来把数据赋值给变量的运算符。
var age = 10;
age += 5;// 相当于 age = age + 5;
age -= 5;// 相当于 age = age - 5;
age *= 10;// 相当于 age = age * 10;
运算符的优先级
流程控制
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
- 顺序结构
是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行
- 分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句
- if 语句
//1. if 的语法结构 如果if
if (条件表达式) {
//执行语句
}
//2. 执行思路 如果if 里面的条件表达式为真 true 则执行大括号里的执行语句
//如果 if 条件表达式结果为假 则不执行大括号面的语句 则执行if 语句后面的代码
//3. 体验
if(3 < 5){
alert('hello!');
}
//判断输入的年份是否是闰年？
var year = prompt('请输入年份');
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert(year + '是闰年！');
}else{
alert(year + '是平年');
}
if else if 语句(多分支语句结构)
// 1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
// 2. if else if语句是多分支语句
// 3. 语法规范
if (条件表达式1) {
// 语句1;
} else if (条件表达式2) {
// 语句2;
} else if (条件表达式3) {
// 语句3;
} else {
// 最后的语句;
}
// 4. 执行思路
// 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
// 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
// 如果上面的所有条件表达式都不成立，则执行else 里面的语句
// 5. 注意点
// (1) 多分支语句还是多选1 最后只能有一个语句执行
// (2) else if 里面的条件理论上是可以任意多个的
// (3) else if 中间有个空格
//判断成绩级别
var gald = prompt('请输入你的考试分数');
if(gald >= 90){
alert('A');
}else if(gald >= 80){
alert('B');
}else if(gald >= 70){
alert('C');
}else if(gald >= 60){
alert('D');
}else(gald < 60)
alert('E');
三元表达式
// 1. 有三元运算符组成的式子我们称为三元表达式
// 2. ++num 3 + 5 ? :
// 3. 语法结构
// 条件表达式 ？ 表达式1 ： 表达式2
// 4. 执行思路
// 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
// 5. 代码体验
var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
console.log(result);
// if (num > 5) {
// result = '是的';
// } else {
// result = '不是的';
// }
// 用户输入0~59之间的一个数字
// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则 不做操作
// 用一个变量接受这个返回值，输出
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
- switch 语句
// 1. switch 语句也是多分支语句 也可以实现多选1
// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思
switch(表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
case value3:
执行语句3;
break;
...
default:
执行最后的语句;
}
// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句
// 4. 代码验证
switch (8) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}
// switch注意事项
var num = 1;
switch (num) {
case 1:
console.log(1);
case 2:
console.log(2);
case 3:
console.log(3);
break;
}
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
- 循环结构
在JS中，主要有三种类型的循环语句：
- for 循环
// 循环的目的：可以重复执行某些代码
// 1. for 通常跟计数有关系
// 2. for 语法结构
// for (初始化变量;条件表达式;操作表达式){
// //循环体
// }
//3. 初始化变量 就是var 声明的一个普通变量，通常用于作为计数器使用
//4. 条件表达式 就是用来决定每次循环是否继续执行 就是终止的条件
//5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
//6. 重复打印
for (var i = 1; i <= 100; i++) {
console.log('hello!')
}
//可以让用户控制输出的次数
// var num = prompt('请你输入次数');
// for (var i = 1; i <= num; i++) {
// console.log('hello!')
// }
//for 循环可以重复执行不同的代码 因为我们有计数器变量的存在 i每次循环值都会变化
//
for (var i = 1; i <= 100; i++){
if(i == 1){
console.log('他1岁了，出生了')
}else if (i == 100){
console.log('他100岁了，去世了');
}else{
console.log('这个人今年'+ i +'岁了');
}
}
// 1. 求1-100之间所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average 变量
var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
}
average = sum / 100;
console.log(average);
// 2. 求1-100之间所有偶数和奇数的和 我们需要一个偶数的和变量 even 还需要一个奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
even = even + i;
} else {
odd = odd + i;
}
}
console.log('1~100 之间所有的偶数和是' + even);
console.log('1~100 之间所有的奇数和是' + odd);
// 3. 求1-100之间所有能被3整除的数字的和
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
// result = result + i;
result += i;
}
}
console.log('1~100之间能够被3整数的数字的和是：' + result);
//求学生成绩案例
var num = prompt('请输入班级总人数');// num 总的班级人数
var sum = 0;// 求和的变量
var avg = 0;// 求平均值的变量
for (var i = 1; i <= num ;i++){
var grade = prompt('请输入第'+ i +'个学生的成绩');
//因为prompt取过来的数据是字符串型需要转换为数字型
sum += parseFloat(grade);
}
avg = sum/num;
alert('班级学生的总成绩为' + sum);
alert('班级学生的平均成绩为' + avg;
// for (var i = 1; i <= 5; i++){
// console.log('*');
// }
// var str = '';
// for (var i = 1; i <= 5; i++){
// str = str + '*';
// }
// console.log(str);
//双重for 循环
// for (var i = 1; i <= 3; i++){
// console.log('这是外层循环第'+ i +'次');
// for (var j = 1; j <= 3; j++){
// console.log('这是里层循环第' + j + '次');
// }
// }
//打印n行n列星星
var rows = prompt('请输入打印的行数');
var cols = prompt('请输入打印的列数');
var str = '';
for (var i = 1;i <= rows;i++){
for (var j = 1;j <= cols;j++){
str = str + '*';
}
str = str + '\n';
}
alert(str);
// var str = '';
// for (var i = 1; i <= 10; i++){
// for (var j = i; j <= 10; j++){
// str = str + '*';
// }
// str = str + '\n';
// }
// console.log(str);
//打印九九乘法表
var str = '';
for (var i =1; i <= 9;i++){
for (j = 1; j <=i; j++){
str += i + 'x' + j + '=' + i*j + '\t';
}
str = str + '\n';
}
console.log(str);
- while 循环
// 1. while 循环语法结构 while 当...的时候
// while (条件表达式) {
// // 循环体
// }
// 2. 执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环
// 3. 代码验证
var num = 1;
while (num <= 100) {
console.log('好啊有');
num++;
}
// 4. 里面应该也有计数器 初始化变量
// 5. 里面应该也有操作表达式 完成计数器的更新 防止死循环
// while循环案例
// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁了');
i++;
}
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++
}
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗?');
}
alert('我也爱你啊！');
- do...while 循环
// 1.do while 循环 语法结构
do {
// 循环体
} while (条件表达式)
// 2. 执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 3. 代码验证
var i = 1;
do {
console.log('how are you?');
i++;
} while (i <= 100)
// 4. 我们的do while 循环体至少执行一次
var message = prompt('你爱我吗?');
do {
message = prompt('你爱我吗?');
}while (message !== '我爱你');
alert('我也爱你啊！');
continue
// continue 关键字 退出本次（当前次的循环） 继续执行剩余次数循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
}
console.log('我正在吃第' + i + '个包子');
}
//1. 求1~100之间 除了能被7整除以外的其它数之和
var sum = 0;
for (var i = 1; i <= 100; i++){
if(i % 7 == 0){
continue;
}
sum += i;
}
console.log(sum);
break
// break 退出整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
JS命名规范以及语法格式
- 标识符命名规范
变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词
- 操作符规范
// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
}
console.log('我正在吃第' + i + '个包子呢');
}
- 单行注释规范
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 单行注释前面注意有个空格
}
console.log('我正在吃第' + i + '个包子呢');
}
- 其他规范
括号与花括号之间留出空格，循环结构代码注意对齐，增加代码的可读性
//简易ATM 实现
var num = prompt('请输入您要的操作：' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出');
var result = 100;
if (num == 1) {
var add = prompt('请输入你要存入的金额');
result = result + parseFloat(add);
alert('你账户的余额为' + result);
}else if (num == 2) {
var draw = prompt('请输入你要取出的金额');
var result = result - parseFloat(draw);
alert('你账户的余额为' + result);
}else if (num == 3) {
alert('你账户的余额为' + result);
}else if (num == 4) {
alert('已退出');
}else {
alert('输入错误，请重新输入');
prompt('请输入您要的操作：' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出');
}
