一、条件语句
1、if语句(单分支)
<script>
var A=0
if(A) { //如果()内的逻辑为真,则运行{}内代码;反之不运行
//多条语句
}
</script>
2、if else语句(双分支)
if(A){}eLse{}A判定为真就执行第一个大括号,假执行eLse后面的大括号
js的执行引擎:如果执行体只有一个语句可以省略执行体
<script>
if(a>22){
console.log("可以喝酒还可以结婚")
}else{
console.log("可以喝酒")
}
</script>
3、if-else-if-else 语句(多分支)
if、if else是标准语法
if-else-if-else 不是js的标准语法,是程序员利用js引擎的纠错功能实现了其他语言的这个功能
<script>
var a = 20;
if(a>22){
console.log("可以喝酒还可以结婚")
}else if(a>18){
console.log("可以喝酒")
}else {
console.log("未成年")
}
//等价于:
var a = 20;
if(a>22){
console.log("可以喝酒还可以结婚")
}else {
if(a>18){
console.log("可以喝酒")
}else {
console.log("未成年")
}
}
</script>
4、switch语句
switch语句基于不同的条件来执行不同的操作 ,与if else-if else语句相同,但是switch更具有业务性,if else-if else更具有逻辑性。
<script>
var a=6 //设置一个变量
switch(a){ //作为判断条件
case 1:
console.log("打印1");
break;//阻止往下继续执行
case 2:
console.log("打印2");
break;
case 3:
console.log("打印31");
break;
case 4:
console.log("打印4");
break;
case 5:
console.log("打印5");
break;
default : //无匹配的选项就执行default下的语句
console.log("无型匹配的");
}
</script>
二、 for语句(重点)
循环可以将代码块执行指定的次数。
1、 for循环的执行顺序,展示:
<script>
for(A;B;C){D}
//执行流程:
{
A
label:if(B){//判断条件
D;
C;
//再次执行label
}
else{
//退出for循环
}
}
//具体例子:
for(var i=0;i<4;i++){
console.log(i)
}
//解析:
{
i=0
if(0<4){
console.log(0);
i=0+1;
if(1<4){
console.log(1);
i=1+1
if(2<4){
console.log(2);
i=2+1;
if(3<4){
console.log(1);
i=3+1
if(4<4){ //不成立
console.log(1);
i=4+1
}else{
//退出for循环
}
}
}
}
}
}
</script>
补充:for循环没有作用域
练习:
<script>
// 打印0-19
for(var i=0;i<20;i++){
console.log(i);
}
//遍历得到数组元素
var arr=["hi","ji",29]
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
//打印数组的第三个到第八个的元素
var arr1=[2,333,4,65,7,8,6,99,76,46]
for(var i=2;i<8;i++){ //第三个元素下标为2,第八个元素下标为7
console.log(arr[i])
}
//打印数组中下标为奇数的元素
//第一种方法分析:奇数的下标 初始值是:1
//结束值:arr.length-1 如果为奇数,就是它 为偶数就是arr.length-2==>不能arr.length
//变化规律:每次变化量+2
for(var i=1;arr.length;i+=2){
console.log(arr[i])
}
//第二种方法分析:
//初始值:0
//结束值:arr.length-1==>不能arr.length
//变化规律:每次变化量+1
for(var i=0;i<arr.length;i++){
if(i%2==1){console.log(arr[i])}
}
</script>
2、在选择题中出现
<script>
var i=0;
for(false;i++,i<5;){
console.log(i) //打印结果 1 2 3 4
}
//解析过程:
{
i=0
{
false
if(0++,1<5){ //i++会执行,再执行i<5,因为是,号操作符,结果是最后一个表达式
console.log(1)
空
if(1++,2<5){ //先执行i++
console.log(2)
//重复操作直到不满足if条件
}
}
}
}
</script>
<script>
for(var i=0,j=6;i<4,j>0;i++,j--){ //i<4,j>0 以j>0为准
//6 5 4 3 2 1
//0 1 2 3 4 5
console.log(i) //打印0 1 2 3 4 5
}
</script>
<script>
var arr=[]
for(var i=0;i<4;i++){
arr[i]=function(){console.log(i)}
}
arr[0]()//4
arr[1]()//4
解析过程:
/*
var arr=[]
{
var i=0//1 2;
if(0<4){
arr[0]=function(){console.log(i)}//console.log(i)不运行不取值
i=i+1
if(1<4){
arr[1]=function(){console.log(i)}//console.log(i)不运行不取值
i=i+1
if(2<4){
arr[2]=function(){console.log(i)}//console.log(i)不运行不取值
i++
if(3<4){
arr[3]=function(){console.log(i)}//console.log(i)不运行不取值
i++
if(4<4){}else{跳出循环}
}
}
}
}
}
arr[0]()//
console.log(i)//i最后一次保存的数据
*/
<script>
3、for中的业务条件筛选和数据处理
for遍历数据容器-for最常用的功能;遍历就是把容器中每一个数据都取出
<script>
var arr=[
{age:20,name:"karen",rank:580},
{age:14,name:"jack",rank:480},
{age:19,name:"marry",rank:600},
{age:12,name:"zhangsan",rank:680}
]
//打印数组中的对象的名字
for(var i=0;i<arr.length;i++){
console.log(arr[i].name);
}
//打印年龄大于18岁的对象的名字
for(var i=0;i<arr.length;i++){
if(arr[i].age>18)
console.log(arr[i].name);
}
//打印年龄大于18而且rank大于480的对象的名字
for(var i=0;i<arr.length;i++){
if(arr[i].age>18 && arr[i].rank>480)
console.log(arr[i].name);
}
// 打印年龄小于18而且rank大于400的对象的名字拼接一个字符串"少年班"
//大于等于18rank大于480的名字拼接"普通班"
for(var i=0;i<arr.length;i++){
if(arr[i].age<18 && arr[i].rank>400){
console.log(arr[i].name + '-少年班');
}else if(arr[i].age>=18 && arr[i].rank>480){
console.log(arr[i].name + '-普通班');
}
</script>
<script>
var arr=[
{id:123,text:"内容1",created_at:"2022-04-28 19:47",user:{name:"karen",online_status:1}},
{id:124,text:"内容2",created_at:"2022-04-27 19:22",user:{name:"jack",online_status:0}},
{id:125,text:"内容3",created_at:"2022-04-28 19:12",user:{name:"maryy",online_status:1}},
]
//打印每一个对选的text内容 而且在内容后面拼接 在线/不在线(根据online_status 1为在线 0为不在线)
for(var i=0;i<arr.length;i++){
if( arr[i].user.online_status == 1){
console.log( arr[i].text + '在线');
}else{
console.log( arr[i].text + '不在线');
}
}
//显示内容和时间 时间必须显示(刚刚 "x分钟前" "xx:xx" )
for(var i=0;i<arr.length;i++){
var now = new Date()
var mytime = new Date(arr[i].created_at)
var bin = now - mytime
time=null
// console.log(bin);
if(bin<1000*60){
console.log(arr[i].text + '刚刚');
}else if(bin > 1000*60 && bin < 1000*60*60){
time = Math.floor((bin/1000/60))
console.log(arr[i].text +'--'+ time +'分钟前');
}else if(bin> 1000*60*60 && bin< 1000*60*60*24){
time = mytime.getHours()+':'+mytime.getMinutes()
console.log( arr[i].text+ '--'+ time );
}
}
</script>
4、for的嵌套和业务混合
for循环该怎么嵌套
1.不要管内部的for与外部的for的执行问题==>每一个for都是遍历的自己的数组
2.for内部有条件语句和数据处理 得到了一个数组 然后用for去遍历它
<script>
var arr = [{
name: "karen",
its: ["css", "js", "html"],
books: ["book1", "book5"]
},
{
name: "jack",
its: ["nodejs", "html"],
books: ["book2", "book3", "book6"]
},
{
name: "marry",
its: [],
books: ["book2"]
}
]
打印arr数组中的所有字符串
//步骤:
//1.遍历arr 取出每一个对象obj
//2.obj取出它的每一个成员
//2.1成员是name直接打印
//2.2成员是its 是个数组(遍历它)
//2.3成员是books 是个数组(遍历它)
for(var i=0;i<arr.length;i++){
console.log(arr[i].name);
for(var j=0;j<arr[i].its.length;j++){
console.log(arr[i].its[j]);
}
for(var k=0;k<arr[i].books.length;k++){
console.log(arr[i].books[k]);
}
}
</script>
<script>
var data = [{
name: "四川",
next: [{
name: '成都',
next: ["东站", "北站", "南站", "西站", "汽车客运站", "双流机场"]
}, {
name: '绵阳',
next: ["富乐汽车站", "南湖汽车站", "火车站"]
}, {
name: '广安',
next: ["广安南站", "广安北站"]
}]
}, {
name: "云南",
next: [{
name: '大理',
next: ["东站", "北站", "南站"]
}, {
name: '昆明',
next: ["东站", "北站", "南站", "东站", "北站", "南站"]
}, {
name: '五华区',
next: ["东站", "北站"]
}, {
name: '水富县',
next: ["东站", "北站", "南站"]
}, {
name: '安宁县',
next: ["东站", "北站", "南站", "东站", "北站", "南站"]
}, {
name: '香格里拉',
next: ["东站", "北站"]
}]
}, {
name: "浙江",
next: [{
name: '杭州',
next: ["一区", "二区", "三区", "四区", '五区', "六区"]
}, {
name: '温州',
next: ["1区", "2区"]
}, {
name: '金华',
next: ["壹区", "贰区", "叁区", "肆区"]
}]
}, {
name: "重庆",
next: [{
name: '万州',
next: ["东站", "北站", "南站"]
}, {
name: '渝北',
next: ["东站", "北站", "南站", "东站", "北站", "南站"]
}, {
name: '北碚',
next: ["东站", "北站"]
}, {
name: '渝中',
next: ["东站", "北站", "南站"]
}, {
name: '大渡口',
next: ["东站", "北站", "南站", "东站", "北站", "南站 "]
}]
}]
//1.打印1级数组中的每一个对象
for(var i=0;i<data.length;i++){
console.log(data[i]);
}
//2.打印1级数组中的每一个对象的name属性
for(var i=0;i<data.length;i++){
console.log(data[i].name);
}
//3.打印1级数组中的第一个对象的name属性 和 next属性
console.log(data[0].name);
console.log(data[0].next);
//4.打印1级数组中的第一个对象的name属性 和 next数组中的每一个元素
console.log(data[0].name);
for(var j=0;j<data[0].next.length;j++){
console.log(data[0].next[j]);
}
//5.打印1级数组中的第一个对象的next数组中的每一个元素的name属性
for(var j=0;j<data[0].next.length;j++){
console.log(data[0].next[j].name);
}
</script>