【JavaScript从入门到精通】第七课 javascript基础-02

此内容来自开课吧石川微信公众号

运算符

我们将JS的运算符分为以下几种类型:

  • 算术:+ 加、- 减、* 乘、/ 除、% 取模
  • 赋值:=、+=、-=、*=、/=、%=
  • 关系:<、>、<=、>=、==、===、!=、!==
  • 逻辑:&& 与、|| 或、! 否
  • 运算符优先级:括号(可以改变运算符的优先级)

算术运算符的加减乘除与其数学定义相同,%是取模运算符,返回的是符号两端整数相除后所取的余数,例如:12%5=2。我们可以通过求模运算符实现一些功能。首先是隔行变色功能,通过与2取模获得的余数的不同进行判断并赋予元素不同的颜色。具体实现方式如下:

<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
window.onload = function () {
    var aLi = document.getElementsByTagName('li');

    for (var i = 0; i < aLi.length; i++) {
        //i 0 1 2 3 4 5 6....
        if (i % 2 == 0) {
            //0 2 4 6 8 10
            aLi[i].style.background = '#CCC';
        }
        else {
            //1 3 5 7 9
            aLi[i].style.background = '';
        }
    }
};

i在循环中不断自增,当为奇数(i%2==0)时执行if内的语句,使元素背景变为灰色,当为偶数(%2==0)时执行if内的语句,使元素背景颜色保持不变。这样就实现了一行灰色一行白色的效果。

效果如下:

【JavaScript从入门到精通】第七课  javascript基础-02

我们还可以用求模运算符实现秒转时间的功能。实现方式和上例差不多,用秒数和60取模即可。

var s=1345;
alert(s+'秒等于'+parseInt(s/60)+'分'+s%60+'秒');

效果如下:

【JavaScript从入门到精通】第七课  javascript基础-02

我们在之前已经讲过,i=i+1可以简化为i++,其实它还可以用赋值运算符简化成另一种写法:i+=1。比起i+=1,i++一次只能加1,如果我们想让i+3,那么就只有:i=i+3或i+=3两种写法。能理解+=,-=、*=、/=、%=这几个赋值运算符也不难理解了。

在关系运算符里,我们前面已经仔细探讨过==和===之间的区别,而!=与!==则是==与===的对立事件,当判断符号两端不相等时返回结果true。

我们这里详细讲一下逻辑运算符。&&与运算符,其意思为“并且”,代表了好几个条件的同时成立,||或运算符,其意思为“或者”,代表了满足条件中的一个。我们用下面一个小例子说明:

var n=123;
if(n>9 && n<100)
{
  alert('两位数');
}
else
{
  alert('不是');
}

这个函数的作用是判断一个数是不是两位数,需要同时满足两个条件:n>9且n<100,因此他们通过&&运算符连接。

此外,逻辑运算符里还有一个!否运算符,其作用是将true与false的结果颠倒,可以看到下面一个例子:

alert(!true);  //true->false
alert(!!true);//true->false->true

弹出来的结果分别为false,true。

程序流程控制

程序流程控制一般包括以下三个部分:

  • 判断
  • 循环
  • 跳出

我们已经讲过了if判断语句,但是对于纯粹的if…else语句来说,只能做出两种情况的判断,功能上比较捉襟见肘。当我们需要进行多重判断时,可以借助else if语句实现。结构如下:

if (条件1) {
  语句1
}
else if(条件2){
  语句2
}
...
else{
  语句n
}

当条件1成立时,执行语句1;若条件1不成立而条件2成立,则执行语句2,依次类推,若所有条件都不成立,则执行语句n。一个if语句可以包含任意多个else if语句,但最多只能包含一个else语句。

除了if语句外,JS还提供了另一种判断语句:switch。switch语句中用于判断的不是条件而是变量,并通过case 值:语句的形式进行判断,具体结构如下:

switch (变量) {
  case 值1:语句1;
    break;
  case 值2:语句2;
    break;
   ...
  default:语句n;
}

我们可以简单地理解为,当变量等于值1的时候,执行语句1,当变量的值等于值2的时候,执行语句2,依次类推,当变量不等于给出的任何值时,执行default中的语句n(default不是必要的)。我们举一个例子,在登录一个网站时,经常会弹出欢迎登录的提示,而根据用户性别的不同,具体提示语会有区别,我们可以通过switch语句做到这一点。

var name='abc';
var sex='男';
switch (sex) {
  case '男':
    alert(name+'先生,你好');
  case '女':
   alert(name+'女士,你好');
    break;
  default:
   alert(name+'你好');
 }

效果如下:

【JavaScript从入门到精通】第七课  javascript基础-02

根据性别的不同,该程序输出结果也不同,如果用户没有填性别或者性别不为男/女中的一种,则会执行default中的语句。

此外,JS还存在一种用于判断的运算符:三目(三元)运算符。三元运算符的结构为:条件?语句1:语句2。在作用上,三元运算符和if…else语句基本一致,我们可以把它当做if…else语句的简写版。因为它的写法比较方便,所以我们时常会用到它,但对于比较复杂的语句使用三元运算符会显得非常杂乱,所以这种情况下还是使用if语句更好。下例是用三元运算符进行奇偶数的判断。

var a=12;
a%2==0?alert('偶数'):alert('奇数');

循环语句while和for我们前面已经细讲过,这里不再多说。而跳出语句breakcontinue,则是判断或循环里特有的语句,可以看到在switch语句里我们已经用到过break语句,你或许会疑惑,为什么我们要在每个case语句的最末加上break呢?

break可以理解为打破、中断,而continue是继续的意思。现在我们来写一个正常的循环:

for(var i=0;i<5;i++;)
{
  alert(i);
}

很明显浏览器会依次弹出0,1,2,3,4。但现在如果我加上break语句:

for(var i=0;i<5;i++;)
{
  if(i==2)
  {
    break; //整个循环中断
  }
  alert(i);
}

结果如下:

【JavaScript从入门到精通】第七课  javascript基础-02

break的作用就在于,当循环执行到break语句时,直接跳出循环。在这个例子里,当i==2之后,循环执行到了break,因此直接跳出了该循环,不再执行后面的语句。

和break语句相对的是continue语句,若我们将上面的代码改为:

for(var i=0;i<5;i++;)
{
  if(i==2)
  {
    continue; //中断本次循环
  }
  alert(i);
}

结果如下:

【JavaScript从入门到精通】第七课  javascript基础-02

continue和break最大的区别是,continue并不是中断整个循环,而是中断本次循环并进入下一次循环,在这个例子中,当i==2之后,循环执行到了continue,本次循环中断,所以不会弹出2的提示框,但会进入下一次循环,i继续自增,然后弹出i=3的提示框。

什么是真、什么是假

通常情况下,我们在if语句里放置的是一个条件。如果我们在if语句中放入一个变量,会发生什么呢?

var a=true;
if(a){
  alert('真的');
}
else{
  alert('假的');
}

执行这段代码,浏览器会弹出’真的’提示框。实际上在if语句里,无论输入变量还是条件最后都会转换为true或false的布尔值,对于条件是真是假的判断其实都是取决于布尔值是true还是false。那么,在JS里,哪些变量是真,哪些变量是假呢? 我们对JS变量的真假进行了如下总结:

  • 真:true,非零数字,非空字符串,非空对象
  • 假:false,数字0,空字符串,空对象,undefined

JSON

JSON是一种基于JavaScript的轻量级的数据交换格式。JSON依附于JS而产生,用于专门描述JS里的数据。

JSON在本质上和数组比较像,用于存储数据。数组采用[]的形式存储数据,而JSON则采用{}的形式,例如 :

var json={a: 12,b: 5,c: 'abc'};

JSON里的数据均是采用名字:值的方式一一对应储存,各个数据之间用逗号分隔。如果想取出JSON里的数据,直接采用.字符连接JSON名即可。

json.a++;
alert(json.a);

我们将JSON和数组进行比较。他们之间有什么区别呢?之前我们讲过,JS里所有的.字符都可以通过[”] 的方式替代,因此我们可以改写JSON取出数据的形式,例如下例:

var json={a:12,b:5,c:7};
var arr=[12,5,7];
alert(json['a']);
alert(arr[0]);

这里通过对比可以得知JSON和数组的一个重要区别:JSON的下标为字符串,数组的下标为数字

数组有一个很重要的属性:length,我们前面讲过它用于获取数组的长度,而JSON没有length属性,那么,如果我想用循环输出JSON的数据,我们应该如何获取它的长度呢?我们先来复习一下前面的数组循环:

for(var i=0;i<arr.length;i++)
{
  alert('第'+i+'东西是'+arr[i]);
}

实际上,我们有一种for in语句可以将循环改写为另一种写法:

for(var i in arr)
{
  alert('第'+i+'东西是'+arr[i]);
}

二者执行结果没有任何区别。而在for in方法里,并没有出现length属性。因此,for in循环也适用于JSON,可以通过这种方法来循环输出JSON。

for(var i in json)
{
  alert('第'+i+'东西是'+arr[i]);
}

一般来说,我们使用循环的时候,如果对象是数组,我们一般采用0-length的方法;如果对象是JSON,我们一般采用for in的方法。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/479.html

发表评论

登录后才能评论