JavaScript基础——操作符及流程控制语句

操作符

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符叫二元运算符

++ 自身加1

-- 自身减1

// 前置++
var num = 1 ;
// ++num 表达式 先让num自身+1，然后再返回表达式的结果
console.log(++num) // 2

var num1 = 2 ; 
console.log(num + ++num1 ); //2 + 3 = 5
console.log(num1); //3


// 后置++
var num = 5 ;
// num++ 表达式 先返回表达式的结果，然后再让num自身+1
console.log(num++) // 5

var num1 = 4 ;
console.log(num + num1++); // 6 + 4 = 10
console.log(num1); // 5

//练习题
var a = 5; var b = ++a + ++a ; console.log(b); // 6 + 7 = 13
var a = 5; var b = a++ + ++a ; console.log(b); // 5 + 7 = 12
var a = 5; var b = a++ + a++ ; console.log(b); // 5 + 6 = 11
var a = 5; var b = ++a + a++ ; console.log(b); // 6 + 6 = 12

逻辑运算符

  1. && 与，两个操作数同时为true，结果为true，否则都是false；
  2. || 或，两个操作数有一个为true，结果为true，否则为false；
  3. ！ 非，取反，是一个一元运算符；
var a = true ;
var b = false ;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
console.log(!b); //true

比较运算符

返回值为true或false

符号 含义 符号 含义
< 小于 == 等于，只进行值的比较
> 大于 != 非等于，只进行值的比较
>= 大于等于 === 等于，类型和值同时比较
<= 小于等于 !== 非等于，类型和值同时比较 
var a = 5 ;
var b = 10 ;
console.log(a > b) ; // false
console.log(a < b) ; // true
console.log(a >= b) ; // false
console.log(a <= b) ; // true

var c = 8 ;
var d = '8'
console.log(c == d) ; // true
console.log(c != d) ; // false
console.log(c === d) ; // false
console.log(c !== d) ; // true

赋值运算符

符号 含义 符号 含义
= 右边的（表达式）值赋值给左边的变量 *= a *= 5 等于 a = a * 5
+= 左边变量值自身加右边（表达式）值后赋值给左边变量 /= a /= 5 等于 a = a / 5
-= a -= 5 等于 a = a - 5 %= a %= 5 等于 a = a % 5 
var a = 5 ;
var b = a + 10 ;
console.log(a += 10) ; // 15
console.log(b -= 10) ; // 5

var c = 3 ;
var d = 2 ;
var e = 8 ;
console.log(c *= 10) ; // 30
console.log(d /= 10) ; // 0.2
console.log(e %= 10) ; // 8

运算符优先级

优先级由高到低

  1. 小括号 ()
  2. 一元运算符 ++ -- !
  3. 算数运算符 先 * / % ，后 + -
  4. 关系运算符 > < <= >=
  5. 相等运算符 == != === !==
  6. 逻辑运算符，先 && 后 ||
// 练习题1
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true

// 练习题2
var num = 10 ;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。

表达式可以放在任何需要值的地方

var a = 5 ; // 其中 ‘5’ 是一个表达式
var b = 10 + 2 ; // 其中 ‘10 + 2’ 是一个表达式
var c = a + b ; // 其中 ‘ a+b ’是一个表达式

语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。

一个程序有很多个语句组成，一般情况下使用“；”分割一个一个的语句

var a = 5 ; // 其中 ‘var a = 5’ 是一个语句
var b = 10 + 2 ; // 其中 ‘var b = 10 + 2’ 是一个语句
var c = a + b ; // 其中 ‘ var c = a + b ’是一个语句
a ++ ; // 其中 ‘ a++ ’是一个语句
console.log(a) ; // 其中 ‘ console.log(a) ’是一个语句

流程控制

程序的三种基本结构：顺序结构，分支结构和循环结构

顺序结构

从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的

st=>start: 开始
e=>end: 结束
op1=>operation: 语句1
op2=>operation: 语句2

st->op1->op2->e

分支结构

根据不同情况，执行对应代码

st=>start: 开始
cond=>condition: 条件
op1=>operation: 语句1
op2=>operation: 语句2
e=>end: 结束

st->cond
cond(yes)->op1->e
cond(no)->op2->e

循环结构

循环做一件事情

st=>start: 开始
cond=>condition: 条件
op1=>operation: 语句1
op2=>operation: 语句2
e=>end: 结束

st->cond
cond(yes)->op1->cond(yes)
cond(no)->op2->e

分支结构

if语句

语法结构

if (/* 条件表达式 */) {
    // 成立执行语句
}

if (/* 条件表达式 */) {
    // 成立执行语句
} else {
    //否则执行语句
}

if (/* 条件1表达式 */) {
    // 条件1成立执行语句
} else if (/* 条件2表达式 */) {
    //条件2成立执行语句
} else if (/* 条件3表达式 */) {
    //条件3成立执行语句
} else if (/* 条件4表达式 */) {
    //条件4成立执行语句
} else {
    //否则执行语句
}

案例

  1. 求两个数的最大数
  2. 判断一个数是偶数还是奇数
  3. 分数转换，把百分制转换成ABCDE，小于60分的为E，60-70分的为D，70-80分的为C，80-90分的为B，90-100分的为A。
// 1. 求两个数的最大数
		var num1 = 50 ;
		var num2 = 23 ;
		if (num1 > num2) {
			console.log(num1)
		} else {
			console.log(num2)
		}

// 2. 判断一个数是偶数还是奇数
		var a = 10
		if (a % 2 === 0) {
			console.log('a为偶数')
		} else {
			console.log('a为奇数')
		}

// 3. 分数转换，把百分制转换成ABCDE，小于60分的为E，60-70分的为D，70-80分的为C，80-90分的为B，90-100分的为A。
		var achievement = 908 ;
		if (achievement >= 90 && achievement <= 100) {
			console.log('成绩为A')
		} else if (achievement >= 80 && achievement < 90) {
			console.log('成绩为B')
		} else if (achievement >= 70 && achievement < 80) {
			console.log('成绩为C')
		} else if (achievement >= 60 && achievement < 70) {
			console.log('成绩为D')
		} else if (achievement < 60) {
			console.log('成绩为E')
		} else {
			console.log('成绩错误')
		}

作业

  1. 判断一个年份是闰年还是平年
    • 闰年：能被4整除，但是不能被100整除，或者能被400整除的年份
  2. 判断一个人的年龄是否满18岁（是否成年）

三元运算符

三元运算符是对if...else语句的一种简化写法

语法结构

/*表达式1*/ ? /*表达式2*/ : /*表达式3*/
  1. 表达式1：布尔类型->返回一个布尔类型值
  2. 当表达式1成立，返回表达式2的值
  3. 当表达式1不成立，返回表达式3的值

案例

  1. 是否年满18岁
  2. 从两个数中找最大值
// 案例1
var age = 19 ;
// age > 18 ? console.log('已成年') : console.log('未成年')
// console.log(age > 18 ? '已成年' : '未成年');
var msg = age > 18 ? '已成年' : '未成年' ;
console.log(msg);

//案例2
var num1 = 6 ;
var num2 = 20 ;
// num1 > num2 ? console.log(num1) : console.log(num2)
// console.log(num1 > num2 ? num1 : num2);
var max = num1 > num2 ? num1 : num2 ;
console.log(max);

Switch语句

语法结构

switch (/*表达式*/) {
        case /*常量1*/:
        /*执行语句1*/ ;
        break ;
        case /*常量2*/:
        /*执行语句2*/ ;
        break ;
        case /*常量3*/:
        /*执行语句3*/ ;
        break ;
        case /*常量4*/:
        /*执行语句4*/ ;
        break ;
        default:
        /*否则执行语句*/ ;
}

注意事项

  1. Switch中的相等判断使用的是===，既要判断值是否相等，还要判断类型是否相等；
  2. 执行语句后要加break语句，如果不加break语句，会执行到下面的代码（有一个穿透效果）

案例

  1. 输入一个数字，打印对应星期
  2. 把成绩转换成ABCD
// 案例1 输入一个数字，打印对应星期
var day = 2 ;
switch (day) {
	case 1 :
	console.log('星期一') ;
	break ;
	case 2 :
	console.log('星期二') ;
	break ;
	case 3 :
	console.log('星期三') ;
	break ;
	case 4 :
	console.log('星期四') ;
	break ;
	case 5 :
	console.log('星期五') ;
	break ;
	case 6 :
	console.log('星期六') ;
	break ;
	case 7 :
	console.log('星期七') ;
	break ;
	default :
	console.log('报错') ;
    break ;
}

// 案例2 把成绩转换成ABCD
var achievement = 89 ;
var achievement2 = parseInt(achievement / 10) ;
switch (achievement2) {
	case 10 :
    case 9 :  
	console.log('A') ;
	break ;
	case 8 :
	console.log('B') ;
	break ;
	case 7 :
	console.log('C') ;
	break ;
	case 6 :
	console.log('D') ;
	break ;
	default :
	console.log('E') ;
    break ;
}

布尔类型隐式转换

不调用方法，自动转换成布尔类型

  1. 流程控制中的条件语句一般都是布尔类型的隐式转换
false true
''空字符串 非空字符串
0 非0数字
NaN 任何对象
null
undefined 
var message ;
if (message) {  // 会自动吧message转换成false
    // to do
}
  1. 利用！转换为布尔类型
var a = !!'123' // true

循环结构

在JavaScript中，循环语句有三种，while、do...while、for循环。

while语句

while语句流程图

st=>start: 开始
cond=>condition: 条件
op1=>operation: 语句1
op2=>operation: 语句2
e=>end: 结束

st->cond
cond(true)->op1->cond
cond(false)->op2->e

语法结构

// 当循环条件为true时，执行循环体
// 当循环条件为false时，结束循环
// 注意要在循环体后加自增
while () {
       // 循环体
       }

案例

  1. 计算1-100之前所有数的和；
  2. 打印100以内7的倍数；
  3. 打印100以内所有偶数；
  4. 打印100以内所有偶数的和；
// 案例1 计算1-100之前所有数的和；
var i = 1 ;
var sum = 0 ;
while (i <= 100) {
    sum += i ;
    i++ ;
}
console.log(sum) ;

//案例2 打印100以内7的倍数；
var i = 1 ;
while (i <= 100) {
    if (i % 7 === 0) {
        console.log(i);
    } ;
    i++ ;
}

//案例3 印100以内所有偶数；
var i = 1 ;
while (i <= 100) {
    if (i % 2 === 0) {
        console.log(i);
    } ;
    i++ ;
}

// 打印100以内所有偶数的和；
var i = 1 ;
var sum = 0 ;
while (i <= 100) {
    if (i % 2 === 0) {
        sum += i ;
    } ;
    i++ ;
}
console.log(sum) ;

作业

  1. 打印100以内的奇数；
  2. 打印100以内的奇数的和；

do...while语句

  1. do...while循环和while循环非常像，二者经常可以相互替代；
  2. do...while的特点是不管条件成不成立，都会执行一次。

do...while语句流程图

st=>start: 开始
op1=>operation: 语句1
op2=>operation: 语句2
cond=>condition: 条件
e=>end: 结束

st->op1
op1->cond(true)->op1
cond(false)->op2->e

语法结构

// 限执行一次循环体语句，再判断while中循环条件
// 当循环条件为true时，执行循环体
// 当循环条件为false时，结束循环
// 注意要在循环体后加自增
do {
    //循环体 ;
} while (/*循环条件*/) ;

案例

  1. 计算1-100之前所有数的和；
  2. 求100以内所有3的倍数的和；
  3. 使用do...while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？（yes/no）”，如果输入为yes则打印“我们形影不离”，如果输入为no，则继续询问。
// 案例1 计算1-100之前所有数的和；
var i = 1 ;
var sum = 0 ;
do {
    sum += i ;
    i++;
} while (i <= 100) ;
console.log(sum) ;

// 案例2 求100以内所有3的倍数的和；
var i = 1 ;
var sum = 0 ;
do {
    if (i % 3 ===0) {
        sum += i ;
    }
    i++ ;
} while (i <= 100) ;
console.log(sum) ;

//案例3 使用do...while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？（yes/no）”，如果输入为yes则打印“我们形影不离”，如果输入为no，则继续询问。
do {
    var msg = prompt('我爱你，嫁给我吧？','请输入yes/no');
    // prompt函数：使浏览器弹出对话框，用户可以输入内容，逗号后是提示用户输入的内容；
} while (msg !== 'yes') ;
console.log('我们形影不离') ;

for语句

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便。

for语句流程图

st=>start: 开始
op1=>operation: 表达式1 ( var i = 0 )
cond=>condition: 条件（表达式2）
op2=>operation: 表达式3 ( i++ )
op3=>operation: 循环体
e=>end: 结束

st->op1
op1->cond(true)->op3
op3->op2->cond
cond(false)->e

语法结构

// for循环的表达式之间用的是；号分隔的，千万不要写成，
for (/*初始化表达式1*/;/*条件表达式2*/;/*自增表达式3*/) {
    // 循环体
}


// for循环也可以省略 初始化表达式1 、 自增表达式3
// 条件表达式2 也可以省略，但是会成为死循环
// 一定不能省略分号";"。
for (;/*条件表达式2*/;) {
    // 循环体
}

执行顺序：1243 —— 243 —— 243 —— 知道循环条件变成false

  1. 初始化表达式
  2. 判断表达式
  3. 自增表达式
  4. 循环体

案例

  1. 打印1-100之间所有数字；
  2. 求1-100之间所有数的和；
  3. 求1-100之间所有数的平均值；
  4. 求10-100之间所有偶数的和；
  5. 同时求1-100之间所有偶数和奇数的和；
  6. 打印正方形；
  7. 打印三角形；
  8. 打印九九乘法表；
// 案例1 打印1-100之间所有数字；
for (var i = 1; i <= 100; i++ ) {
    console.log(i) ;
};

// 案例2 求1-100之间所有数的和；
var sum = 0 ;
for (var i = 1; i <= 100; i++ ) {
    sum += i ;
};
console.log(sum);

// 案例3 求1-100之间所有数的平均值；
var sum = 0;
var ave;
for (var i = 1; i <= 100; i++ ) {
    sum += i;
};
ave = sum / 100;
console.log(ave);

// 案例5 求1-100之间所有偶数和奇数的和；
var evensum = 0;
var oddsum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 === 0) {
        evensum += i;
    } else {
        oddsum += i;
    }
}
console.log('所有偶数和等于'+evensum);
console.log('所有奇数和等于'+oddsum);

// 案例6 打印正方形
var star = '';
for (var i = 0; i <= 9; i++) {
    for (var j = 0; j <= 9; j++) {
        star += '*\t';
    }
    star += '/n'
}
console.log(star);

// 案例7 打印三角形
var star = '';
for (var i = 0; i <= 9; i++) {
    for (var j = i; j <= 9; j++) {
        star += '*\t';
    }
    star += '/n'
}
console.log(star);

// 案例7 打印九九乘法表
var str = '';
for (var i = 0; i <= 9; i++) {
    for (var j = i; j <= 9; j++) {
        str += i + 'x' + j + '=' + i * j;
        str += '\t'
    }
    str += '\n';
}

作业

  1. 求1-100之间所有数的乘积；
  2. 求1-100之间所有奇数的和；
  3. 计算1-100之间能被3整除的数的和；
  4. 计算1-100之间不能被7整除的数的和；
  5. 本金10000元存入银行，年利率是千分之三，没过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？
  6. 有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对兔子，而一对兔子从出生后第三个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么一对兔子一年内能繁殖成多少对？（兔子的规律为数列，1、1、2、3、5、8、13、21）
// 案例5
var principal = 10000;
var AIR = 0.003;
for (var i = 0; i < 5; i++) {
	var interest = principal * AIR;
	principal += interest;
}
console.log(principal); 

//案例6
var month1 = 1;
var month2 = 1;
var month;
for (var i = 3; i <= 12; i++) {
	month = month1 + month2;
	month1 = month2;
	month2 = month;

}
console.log(month);

break和continue

  1. break：立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
  2. continue：立即跳出当前循环，继续下一次循环（跳到i++的地方）

案例

  1. 求整数50-200的第一个能被7整除的数；
  2. 求整数1-100的累加值，但要求跳过所有个位为3的数。
// 案例1 求整数50-200的第一个能被7整除的数；
for (var i = 50; i <= 200; i++) {
    if (i % 7 === 0) {
        console.log(i);
        break;
    }
}

// 案例2 求整数1-100的累加值，但要求跳过所有个位为3的数。
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 10 === 3) {
        continue;
    }
    sum += i;
}
console.log(sum);

作业

  1. 求1-100之间不能被7整除的整数的和（用continue）；
  2. 求200-300之间所有的奇数的和（用continue）；
  3. 求200-300之间第一个能被7整数的数（break）。
Javascript基础

相关

javascript基础知识(29) 实现继承的方式

JavaScript基础

JavaScript基础

day33.JavaScript基础

JavaScript基础

JavaScript基础1

JavaScript基础2

JavaScript基础3

JavaScript基础第01天笔记

JavaScript基础知识1

JavaScript基础知识笔记

Nice！JavaScript基础语法知识都在这儿了

标签