网页编程和设计 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...的简写形式,因此可以用于多种场合。

相关文章
|
29天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
68 1
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
10天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
18 2
|
1月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
14 1
【JavaScript】网页交互的灵魂舞者
|
16天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
11 2
|
1月前
|
XML 监控 JavaScript
JavaScript 语言对企业上网监控的技术支持
在数字化企业环境中,上网监控对企业信息安全和提升员工效率至关重要。JavaScript 作为广泛应用的脚本语言,提供了强大的技术支持,包括数据获取与分析、与服务器端交互、监控页面加载时间和网络活动,助力企业有效管理上网行为,保障信息安全。
26 6
|
1月前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
|
1月前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
150 0
|
2月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果