JavaScript教程-从入门到精通 (二)

2020-5-28


3.7对象

对象与数组比较相似,对象也是一个名字表示一组值,每个值都是对象的属性

创建对象可以使用object关键字,但这个方法我们将在后面的章节讲解

这里我们先说一下创建对象的花括号语法:


{ vehicle:"bud" , time:30 }

即在花括号内以 名称:值 的形式来书写

那么在对象中,名称则是对象的属性,值则是属性值

例如vehicle则是属性,bus是属性值


我们还可以将对象赋给变量,例如:


var GoWork = { vehicle:"bud" , time:30 }



创建完对象我们还可以访问对象属性,具体有两种方法:


方法一:变量名.属性 例如:


GoWork.vehicle

方法二:变量名["属性"] 例如:


GoWork["vehicle"]

对象先讲解到这里,更多内容等到讲完函数再给大家讲解




3.8算数

加减乘除都是一种操作,而这些操作都必须借助操作符来完成,也就是JavaScript定义的一些符号,具体如下表:


运算符 作用 描述 举例
+ 加法 做加法运算 1 + 2
- 减法 做减法运算 4 - 3
* 乘法 做乘法运算 8 * 7
/ 除法 做除法运算 16 / 8
** 将第一个数提升到第二个数的幂 3 ** 2
% 系数 算除法余数 16 % 7
++ 递增 做递增运算 7++
-- 递减 做递减运算 9--

下面是一个简单的加法:


 1 + 2

可以混合运算:


(1+4) * 10

可以将计算写入变量中


var x = (1+4) * 10;
alert(x);

也可以这样:


var x = 10;
var y = 5;
var z = y + 2;
alert( (x+y) % 3 );  //执行结果是1

% 返回除法的余数。





递增:


var x = 2;
x++;
alert(x);  //执行结果为3, 对数值进行递增运算





递减:


var x = 5;
x--;
alert(x);  //执行结果为4, 对数值进行递减运算





幂:


var x = 6;
x ** 2;  // 结果是 36
                


除此之外补充一点,字符串可以相加:


var x = "by";
var y = "bus";
alert (x + " " + y);

点击此处查看运行结果




3.9条件语句

javascript条件语句可以根据人们给出的各种条件做出判断和决策,最常见的条件语句是if语句


if (1 < 2) {
    alert ("hello world");
}

条件需要放在if后面的括号里面

javascript会根据括号里面的条件进行判断并将结果返回为布尔值(true或false),当结果为true时执行花括号里面的内容

但是如何能使条件为false时执行内容呢?这就要用到else了,例如下方:


if (1 < 2) {
    alert ("That's right");
} else { 
    alert ("It's amazing");
}

上面这段代码意为当1小于2时(即为true时)执行alert ("That's right")

当1不小于2时(即为false时)执行alert ("It's amazing")


3.9.1 比较操作符

符号 作用
> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于(和"="不一样,一个等号是赋值的意思)
=== 全等
!= 不等于
!== 不全等

实例:


var x = 3
var y = 10;
if (x < y) {    
    alert ("That's right");
}

当x小于y时执行alert ("That's right")



var my_vehicle = "car";
var your_vehicle = "bus";
if (my_vehicle == your_vehicle) {
    alert ("What a coincidence");
} else {
    alert ("Looks like we're different");
}

当变量my_vehicle的值等于your_vehicle的值时,执行alert ("What a coincidence")。但是我们定义的my_vehicle的值为car,your_vehicle的值为bus,两者不等于,所以将执行else{alert ("Looks like we're different")}

这里我们需要注意一点,相等操作符==并不严格,例如


var x = false;
var y = "";
if (x == y) {
    alert ("x equals y");
}

这个语句的结果为true, 并执行alert ("x equals y");

因为相等操作符==认为flase和空字符串是相等的

如果要避免这个现象就要用到全等操作符===


var x = false;
var y = "";
if (x === y) {
    alert ("x equals y");
}

那么这回结果就为false,不执行执行alert ("x equals y");

当然,同理不等操作!=也是如此,想要更严格就使用!==




3.9.2 逻辑操作符

JavaScript允许把条件操作的语句组合在一起



符号 作用
&& 逻辑与
|| 逻辑或
! 逻辑非


&& 逻辑与

"逻辑与"操作符由两个"&"字符构成


var x = 7
if ( x > 3 && x < 15) {
    alert ("That's right");
}

当x大于3时,返回true,如果不大于则返回false

当x小于15时,返回true,如果不小于则返回false

而中间的&&则决定了:当x>3 和 x<15时返回的均为true(说通俗点就是x符合x>3,也符合x<15)时,条件语句整体为true,触发alert ("That's right")

只要有任意一者为false则条件语句整体返回false


|| 逻辑或

"逻辑或"由两个垂直线字符构成


var x = 7
if ( x > 3 || x < 15) {
    alert ("That's right");
}

只要当x>3 或 x<15 任意一个为true,或者两者都为true时,条件语句整体为true,触发alert ("That's right")

只有当x既不符合x>3,也不符合x<15时,条件语句整体为false


! 逻辑非

“逻辑非”由一个感叹后构成。“逻辑非”操作用于把操作数返回的布尔值取反。如果某个逻辑操作数返回的布尔值为true,则“逻辑非”将它取反为true


if ( !(2 < 3) ) {
    alert ("This is the result of a reversal");
}

例如上方的2 < 3这个操作数返回的布尔值应为true,但是由于前方加了“逻辑非”操作符"!",将布尔值取反为false,所以不会触发下面的alert ("This is the result of a reversal")

这里有一点需要注意:为了避免问题,我们将操作数2 < 3放在了括号里,使操作符"!"作用于整个操作数


我们也可以用“逻辑非”操作符把整个语句颠倒过来,例如:


var x = 7
if ( !( x > 3 || x < 15) ) {
    alert ("This is the result of a reversal");
}



本期教程先到这里,下一期为大家讲解for循环、while循环、函数等等,感谢大家的支持

点击此处前往下一期教程




版权声明:本文为原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://lablog.net/text/javascript/text3