网页编程和设计 JavaScript语言(ES5)(二)

简介: 网页编程和设计 JavaScript语言(ES5)(二)

六、运算符

6.1 算数运算符

6.1.1 加减乘除运算符

10 + 10; // 20
100 - 10; // 90
10 * 2; //20
10 / 5; //2

6.1.2 余数运算符

13 % 5 // 3

6.1.3 自增和自减运算符

自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为数值,然后加上1或者减去1

var x = 1;
var y = 1;
++x // 2
--y // 0

自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作;放在变量之前,会先进行自增/自减操作,再返回变量操作后的值。

var x = 1;
var y = 1;
x++ // 1
++y // 2
var x = 10;
var y = 20;
console.log(x++ + y);// 30

6.2 赋值运算符

赋值运算符(Assignment Operators)用于给变量赋值,最常见的赋值运算符,当然就是等号(=)

// 将 1 赋值给变量 x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;

赋值运算符还可以与其他运算符结合,形成变体。下面是与算术运算符的结合

// 等同于 x = x + y
x += y
// 等同于 x = x - y
x -= y
// 等同于 x = x * y
x *= y
// 等同于 x = x / y
x /= y
// 等同于 x = x % y
x %= y

6.3 比较运算符

比较运算符用于比较两个值的大小,然后返回一个布尔值,表示是否满足指定的条件。

2 > 1 // true

JavaScript 一共提供了8个比较运算符。

比较运算符 描述
< 小于运算符
> 大于运算符
<= 小于或等于运算符
>= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符

“==”和“===”的区别

==:双等比较值

===:三等比较值和类型

6.4 布尔运算符

6.4.1 取反运算符(!)

布尔值取反

!true // false
!false // true

非布尔值取反

对于非布尔值,取反运算符会将其转为布尔值。可以这样记忆,以下六个值取反后为true,其他值都为false。

console.log(!undefined) //true
    console.log(!null)//true
    console.log(!false)//true
    console.log(!0)//true
    console.log(!NaN)//true
    console.log(!"")//true

6.4.2 且运算符(&&)

多个条件都要满足

如果一个人一直做好事,突然有一天做了一件坏事,那么人们会认为这个人很虚伪,以前说不定都是装的!对这个人不在认可

console.log(10 < 20 && 10 >5); // true

6.4.3 或运算符(||)

满足一个条件即可

如果一个人一直做坏事,突然有一天做了一件好事,那么人们会认为这个人其实还不错,以前也许是另有原因!对这个人突然就认可了

console.log(10 < 20 || 10 < 5); // true

七、条件语句

7.1 if语句

if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是 JavaScript 的两个特殊值,true表示真,false表示伪。

if语句语法规范

if (布尔值){
  语句; 
}

需要注意的是,“布尔值”往往由一个条件表达式产

var m = 3;
if (m === 3) {
  m++;
}
console.log(m); // 4

注意,if后面的表达式之中,不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。尤其是赋值表达式不具有比较作用。

7.2 if...else语句

7.2.1 if...else基本结构

if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的代码。

if (m === 3) {
 // 满足条件时,执行的语句
} else {
 // 不满足条件时,执行的语句
}

7.2.2 多个if...else连接

对同一个变量进行多次判断时,多个if...else语句可以连写在一起。

if (m === 0) {
 // ...
} else if (m === 1) {
 // ...
} else if (m === 2) {
 // ...
} else {
 // ...
}

7.2.3 if...else嵌套

var eat = true;
var food = "猪肉炖粉条";
if (eat) {
  if (food == "双椒鱼头") {
    console.log('双椒鱼头');    
   }else{
    console.log("猪肉炖粉条");
   }
} else {
  console.log('不吃了');
}

else代码块总是与离自己最近的那个if语句配对。

7.3 Switch语句

多个if...else连在一起使用的时候,可以转为使用更方便的switch结构

switch (fruit) {
 case "banana":
  // ...
  break;
 case "apple":
  // ...
  break;
 default:
  // ...
}

需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。

var x = 1;
switch (x) {
 case 1:
  console.log('x 等于1');
 case 2:
  console.log('x 等于2');
 default:
  console.log('x 等于其他值');
}
// x等于1
// x等于2
// x等于其他值

八、三元运算符

JavaScript还有一个三元运算符(即该运算符需要三个运算子)?:,也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

这个三元运算符可以被视为if...else...的简写形式,因此可以用于多种场合。

相关文章
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
8月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
277 56
|
7月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1195 58
|
4月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
920 0
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
497 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
8月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
234 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
7月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
9月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
10月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
1270 2