JavaScript（二）—— JavaScript 运算符/JavaScript 流程控制/JavaScript 数组

本篇为 JavaScript 系列笔记第二篇，将陆续更新

一、运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript 中常用的运算符有：

• 算数运算符
• 递增和递减运算符
• 比较运算符
• 逻辑运算符
• 赋值运算符

1. 算术运算符

---

浮点数的精度问题

浮点数值的 最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

• 不要直接判断两个浮点数是否相等
   

2. 递增和递减运算符

---

在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

1. 前置递增运算符

• ++num 等价于 num = num + 1 —— 先自加，后有返回值

2. 后置递增运算符

• num++ 等价于 num = num + 1 —— 先有返回值，后自加

这两种用法和 c语言、java语言 中用法一样，因此不再做解释

 

3. 比较运算符

---

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

• 这里要注意 " === " 和 " !== " 的用法
  
   

4. 逻辑运算符

---

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

1. 逻辑与

语法： 表达式1 && 表达式2

• 如果第一个表达式的值为真，则返回表达式 2
• 如果第一个表达式的值为假，则返回表达式 1

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456 && 789 );  // 789

2. 逻辑或

语法： 表达式1 || 表达式2

• 如果第一个表达式的值为真，则返回表达式 1
• 如果第一个表达式的值为假，则返回表达式 2

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

 

5. 赋值运算符

---

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

 

6. 运算符优先级

---

• 一元运算符里面的逻辑非优先级很高
• 逻辑与 比 逻辑或 优先级高
   

二、流程控制——分支

---

流程控制主要有三种结构，分别是 顺序结构、分支结构 和 循环结构，这三种结构代表三种代码执行的顺序。

JS 语言提供了两种分支结构语句

• if 语句
• switch 语句
   

1. if 语句

---

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

1. 单分支语句——if

if (条件表达式) {
    // 条件成立执行的代码语句
}

• 案例：进入网吧

var age = prompt('请输入您的年龄');
if (age >= 18) {
    alert('您已成年，允许进入网吧');
}

2. 双分支语句——if else

if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

• 案例：判断闰年

var year = prompt('请输入您要检测的年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('该年份是闰年');
} else {
    alert('该年份不是闰年');
}

3. 多分支语句——if else if

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   	语句3；
 	...
} else {
    // 上述条件都不成立执行此处代码
}

2. 三元表达式

表达式1 ? 表达式2 : 表达式3;

• 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

案例 ：用户输入数字，如果数字小于10，则在前面补 0 ，比如01，09 ，如果数字大于10，则不需要补，比如 20

var num = prompt('请输入一个数字：');
num = num < 9 ? '0' + num : num;
alert(num);

3. switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

注意：

• switch 表达式值会与 case 的值做全等匹配（===）

案例 ：查询水果价格

var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
    case '苹果':
        alert('苹果的价格是 3.5/斤');
        break;
    case '榴莲':
        alert('榴莲的价格是 35/斤');
        break;
    default:
        alert('没有此水果');
}

 

三、流程控制——循环

---

在Js 中，主要有三种类型的循环语句：

• for 循环
• while 循环
• do…while 循环

1. for 循环

---

for (初始化变量; 条件表达式; 操作表达式) {
    //循环体
}

• 初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数
• 条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环
• 操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量

案例 ：求1-100之间所有整数的累加和

var sum = 0;
for(var i = 1;i <= 100; i++){
        sumNum += i;
}
console.log('1-100之间整数的和 = ' + sum);

断点调试

打开HTML页面，点击 F12 可以进行断点调试

 

2. 双重 for 循环

---

很多情况下，单层 for 循环并不能满足我们的需求，比如我们要打印一个 5 行 5 列的图形、打印一个倒
直角三角形等，此时就可以通过循环嵌套来实现。

循环嵌套 是指在一个循环语句中再定义一个循环语句的语法结构，例如在 for 循环语句中，可以再嵌套一个 for 循环，这样的 for 循环语句我们称之为 双重 for 循环

3. while 循环

---

while (条件表达式) {
    // 循环体代码 
}

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
• while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

4. do while 循环

---

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

• 先执行一次循环体代码
• 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

5. continue 和 break

---

• continue 关键字用于立即跳出本次循环，继续下一次循环
• break 关键字用于立即跳出整个循环

 

四、数组

---

// 普通变量一次只能存储一个值
var  num = 10; 
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

1. 创建数组

---

JS 中创建数组有两种方式

• 利用 new 创建数组

var 数组名 = new Array();
var arr = new Array();   // 创建一个新的空数组

• 利用数组字面量创建数组

var  数组名 = []；
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

var arrStus = ['小白',12,true,28.9];

2. 获取数组元素

---

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）

• 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素

// 定义数组
var arrStus = [1,2,3];

// 获取数组中的第 2 个元素
alert(arrStus[1]);

3. 遍历数组

---

可以通过 for 循环 索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

数组长度

使用 数组名.length 可以访问数组元素的数量（数组长度）

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

4. 数组中新增元素

---

通过修改 length 长度新增数组元素

• 可以通过修改 length 长度来实现数组扩容的目的
• length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

• 其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined

通过修改数组索引新增数组元素

• 可以通过修改数组索引的方式追加数组元素
• 不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

案例： 将数组中大于等于 10 的元素选出来，放入新数组

• 新数组里面的个数，用 length 不断累加