本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！
一、课程目标
- 语句与注释
- 赋值语句
- 条件语句
- while语句
- for语句
二、详情解读
2.1.单行语句与语句注释
1.//用于单行注释
2./*用于多行注释*/
3.每行语句以；结束
4.console.log、console.info、console.debug、console.warn
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 单行注释
/*
一次性注释多行
可以大块大块的注释
*/
// console.log、console.info、console.debug、console.warn、console.error
//var a = 10
var b = 20
var c = 20
</script>
</body>
</html>
运行结果：
2.2.赋值语句
1.var a = 10;
2.var a = b = c = 10;
3. var a = 10, b = 12, c = 13
4. 复合赋值 -=、+=、*=、/=、<<=、>>=、>>>=
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
/*
var a = 10;
var a=b=c=10;
var a=10, b=12, c=13;
复合赋值 -=、+=、*=、/=、<<=、>>=、>>>=
移位： 首先转换为二进制，比如 2 转为 0000...0000010
取反码： 1111....1111101
取补码： 1111....1111110
*/
// var a = 10;
// a = b = c = 20
// a = b = c = 100-81
</script>
</body>
</html>
运行结果：
2.3.条件语句
比较运算符：>、<、>=、<=、==、!=、===、!==：
1.如果操作数是数值，直接比较，返回true或者false
2.如果操作数是字符串，则比较字符串的对应字符编码值
3.如果一个操作数是数值，则将另一个操作数变为数值进行比较
4.如果有一个值是布尔值，先转换为数值再比较
5.null与undefined相等
6.NaN不等于任何数，包括NaN
7.使用相等比较两个对象时，如果两个对象指向同一个对象，返回true
8.全等与全不等比较前不做任何类型转换
示例结果：
2.3.1.逻辑表达式
布尔操作符-逻辑非！：
1.如果操作数是一个对象，返回false
2.如果操作数是一个空字符串，返回true
3.如果是非空字符串，返回false
4.如果操作数是0，返回false
5.如果操作数是任意非0数，返回false
6.如果操作数是null、NaN、undifiend，返回true
示例结果：
布尔操作符-逻辑与&&：
var res = 操作数1 && 操作数2
1.如果第一个操作数为对象，返回第2个操作数
2.如果第一个操作数是false、null、undeifined，NaN,""，0，直接返回第一个操作数
短路操作：如果操作数1的布尔值为false，那么不会对操作数2求值
a = 10
b = 10
c = 11
a - b && c++
示例结果：
布尔操作符-逻辑或 ||：
var res = 操作数1 || 操作数2
1.如果第一个操作数是对象，返回第一个操作数
2.如果第一个操作数的求值结果是false，返回第二个操作数
短路操作: 如果操作数1的布尔值是true，那么不会对操作数2求值
a = 10
b = 10
c = 11
a - b || c++
示例结果：
2.3.2.条件语句if…else…
if(condition)
//单行语句
else if(condition) {
//多行语句
}
else {
//多行语句
}
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
a = 10
b = 11
condition = a < b
if (!condition) {
console.log(condition)
}
if (!condition) {
console.log(condition)
} else {
console.info(condition)
}
a = 1
b = 2
condition = a + b
if (condition==1) {
console.log("condition=",condition)
} else if (condition==2) {
console.info("condition=", condition)
} else if (condition==4){
console.warn("condition=", condition)
} else {
console.debug("condition=", condition)
}
</script>
</body>
</html>
2.3.3.多条件分支语句switch
// 注意每个分支都要有break，不然会执行下面的分支
switch(expression){
case value:
//语句
break;
case value:
//语句
break;
default:
//语句
}
2.3.4.三元条件操作符
var = (condition) ? true_value: false_value;
//例子：
a = 12
b = 11
c = (a>b) ? a : b; // c = 12
2.4.while循环语句
// 第一种：
while(condition){
// do
}
// 第二种：该语句结构至少执行一次循环
do{
//do
} while(condition)
// 注意：一般不使用死循环，否则浏览器会卡死导致崩溃
//示例：
a = 10
while(a > 0) {
a--
console.log(a)
}
do{
a--
console.log(a)
}while(a > 0)
运行结果：（两个程序运行结果都是一样的）
2.5.for循环语句
for(initialization; expression; post-loop-expression) {
//do
}
// 示例：
for (i=0;i<=10; i++) {
console.log(i)
console.log("hello")
}
i = 5
for (;i<10; i++) {
console.log(i)
}
i = 5
for (;i<10;) {
i++
console.log(i)
}
i = 5
for (i=0, j=0;i<10 && j < 18;i++, j+=1) {
console.log(i, j)
}
2.6.for…in…循环语句
for(item in items) {
// do
}
该语句结构为迭代语句
示例：
array = [1,2,3,4,5]
for (item in array) {
console.log(array[item])
}
运行结果：
2.7.循环控制
2.7.1.break语句
break语句 用于中断循环
2.7.2.continure语句
continue语句 用于跳过本次循环
2.7.3.label语句
label语句 可以添加一个标签，用于break、continue引用
代码示例：
No1:
for (i=0;i<10;i++) {
for (j=0;j<3;j++){
if (j > 1) {
console.warn(j)
break No1
}
console.log("j=", j)
}
console.debug("i=",i)
}
运行结果：
i = 0
No2:
while (i < 100){
i++
console.debug("i=", i)
for (j=0; j<5; j++){
if (i%2==0) continue No2
console.warn(j)
}
console.log("---------------------------")
}
运行结果：
三、课程小结
1.学习了javascript的基本语句
2.学习了javascript的条件语句
3.学习了javascript的循环语句
4.学习了javascript的循环控制
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
