Python web前端 06 运算符 循环
一、运算符
#JS六大数据类型
#number 数字
#string 字符串
#boolean 布尔型
#function 函数
#undefined 未定义：一个变量声明之后没有复制就是未定义
#object 对象
在JS里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将他归为单独一类数据类型null
var a = 11;#number
var a = "aaa";#string js里面双引号的地方也可以用单引号来代替，不过要配对使用
var a = true;#boolean
var a = function(){...} #function
var a ;#undefined
alert(typeof a)#弹窗a的类型
var a = {"name":"xiaopo","age"= "18"};#object
var a = document.getElementById("box");#object
运算符
#算数运算符（基础数字运算）
+ - * / %（取余）
#当不是数字之间的运算的时候
#+号两边一旦有字符串（引号引起来的一坨），那么+号就不在是数学运算了，而变成了字符串拼接，最后结果是字符串
#-*%号是尽量将字符串转化成数字（隐式类型转换）
隐式类型转换：即使结果不是数字，也会对这个结果进行隐式类型转换，将他的类型转换为数字
赋值运算符
+= -= *= /= %=#跟其他脚本语言一样
++ -- #两个都存在隐式类型转换，会全部转换为数字
var x=6;
var y=++x;
++x #x=x+1 y=x 先加再赋值
x++ #y=x x=x+1 先赋值再加
逻辑运算符
#针对布尔值 true false
#&& 与两边都为真，结果才是真，其他是假
#|| 或 两边都为假，结果才是假，其他是真
#！ 非 取反，真变假，假变真
#当逻辑运算符，两边不一定是布尔值的时候
#&&遇到假就停，但是不会进行类型转 换
var a = true&&1&&0&&false #弹窗弹出0（0代表假）
var a = true&&1&&1&&false #弹出false
var a= true&&1&&-2&&5 #弹出5
#|| 遇到真就停，但是不会进行类型转换（假同上）
#！隐式类型转换，将后面的数据先转换为布尔型在取反
var a =!"0" #0是假的，转换为假后再取反，就是真
var a =!"5" # 假
二、循环
1、for循环
#for循环
for(var = 1;i<9;i++){
console.log(i)
} #顺序依次是1、var=1 ；2、i<9 ; 3、 console.log(i) ; 4、i++ 直至条件2不满足的时候跳出循环
2、嵌套循环
for (var i =1;i<5;i++){
for(var j=1;j<3;j++){
console.log(i+";"+j);
}
}
for(var=1;i<20;i++){
if(i==5){
break;#中断循环，终止循环，结束循环，未执行的代码不执行
continue;#跳出本次循环
}
console.log(i) ;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var aLi=document.getElementByTagName("li")
for(var i=0,len=ali.length;i<len;i++){
aLi[i].onclick=function{
alert(i);#照常理来说，鼠标点击的li，就会弹出一个弹窗表示他的下标，但是由于这是个函数的缘故，所以弹出来的都是函数结束时的值（也就是for循环结束时i的值4），这就满足不了需求
}
}
</script>
<script>
var aLi=document.getElementByTagName("li")
for(var i=0,len=ali.length;i<len;i++){
aLi[i].index=i;#index是自定义变量（可以是任何值aa，bb，vv），将每次循环的i赋值给自定义变量index
aLi[i].οnclick=function{
alert(this.index);#循环结束时的i
}
}
</script>
#以后再写for循环的时候，循环里面如果有事件，就必须要赋值变量，用自定义变量存起来，不然打印出来的就是整个函数结束的i
let
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var aLi=document.getElementByTagName("li")
for(let i=0,len=ali.length;i<len;i++){
aLi[i].onclick=function{
alert(i);
}
}
</script>
#直接用let取代var就可以直接满足要求了
3、if循环
#if ==>布尔值
#判断符
> < >= <= == != !== ===
== #只判断是否一样 "5"=5
=== #不仅判断值，还判断类型是否一样 "5"===5 false
#当if的条件 运算完后不是布尔型的时候，会强制类型转换为布尔值
#以下这些值在转换以后为false
#0（number）； false（boolean）； ""（string） ；null（object/null）；undefined（undefined）；NaN（number）
#NaN:Not a Number 属于number类型，一般在非法运算的时候才会出现NaN, isNaN(参数)非常讨厌数字
#首先尽量把参数转换为数字，然后当参数是数字，返回false；不是数字，返回true
#在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据转换需要耗费时间，在两个值比较的时候，能用三等判断的时候，就用三等判断
if(""){
alert("真");#条件为真的时候执行
}else{
alert("假");#条件为假的时候执行；当只需要真语句的时候，假语句可以不写
}
#如果想要假的时候执行，真的时候不执行，在if条件里面加个！（取反）即可
#还有下面两种形式来表示
9>8?alert(1):alert(0);# 条件？真语句：假语句 这便是三目运算
x=5>3?5:3; #如果5大于3，那么x等于5，否则x=3
var x=20;
if(x>20){alert("x>20");}
else if(x>15){alert("x>15");}#弹窗淡出x>15,这里弹出以后，下面满足条件的不会执行了
else if(x>10){alert("x>10");}
else{alert(x<0);}
4、switch
var name="xiaopo";
if(name==="xiaopo"){alert(name+"好漂亮");}
else if(name==="小狗"){alert(name+"好帅");}
else if(name==="小猫"){alert(name+"好丑");}
else{alert(name+"你是谁");}
#switch就可以同样实现上面的功能
var name="xiaopo"
switch(name){
case"xiaopo":#这里加条件
alert(name+"好漂亮");
break;#必须加上break，跳出这个循环
case"小狗":
alert(name+"好帅");
break;
case"小狗":
alert(name+"好丑");
break;
default:
alert(name+"你是谁");
break;
}
while和dowhile
var i = 1;
for(;i<9;){#分号必须写
console.log(i);
i++;
}
#while类似上面
var i=1;#先判断后执行
while(i<9){
console.log(i);
i++;
}
var i=10;#这个dowhile循环先执行在判断，至少会执行一次
do{
console.log(i);
i++;
}while(i<9);
9*9乘法表
var oBox=document.getElementById("box");
for(var i=1;i<10;i++){
for(var j=1;j<i;
var aUl=document.getElementsByTagName("ul");
var len=aUl.length;
var index=0;
for(var i =0;i<len;i++){
aUl[i].qq=i;
aUl[i].onclinck=function(){
aUl[index].className="";
index=this.qq;
aUl[index].className="show";
}
}
j++){
oBox.innerHTML+="<span>"+i+"*"+j+"="+i*j+"</span>";
}
oBox.innerHTML+="<br>";
}
下拉菜单
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
