# JavaScript 基础（二）

vienceTang
560 阅读7分钟

运算符

运算符分类

  • 数学运算符 Arithmetic operator

  • 比较运算符 Comparison operator

  • 逻辑运算符 Logical operator

  • 赋值运算符 Assognment operator

  • 按位运算符 Bitwise operator

  • 条件（三元）运算符 Condition operator

1. 数学运算符

1.1 数学运算符

运算符：+、 -、 *、 /、 %、 ++、 --、 ()、

运算顺序：先乘除取余，再加减，优先小括号

取余的余数范围：[0, 除数-1]

  1. 纯数字类型的字符串与数字类型进行运算时(除加法外)，直接隐式转换

    console.log("12" - 2)	// 10
console.log("12" * 2)	// 24

  2. 特殊字符串和布尔值与数字进行运算时，也会隐式转换

    true ==> 1

    fasle ==> 0

    null ==> 0

    console.log(5 * true)	// 5
console.log(5 * false)	// 0
console.log(5 * null)	// 0
console.log(5 + true)	// 6

  3. undefined 和其他字符串和数字进行运算时，得到NaN（拼接除外）

    console.log(5 * undefined)	// NaN
console.log(5 * '你好')	// NaN
console.log(5 * NaN)	// NaN

  4. Infinity

    console.log(5 + Infinity)	// Infinity
console.log(5 - Infinity)	// -Infinity
console.log(5 * Infinity)	// Infinity
console.log(5 / Infinity)	// 0
console.log(5 % Infinity)	// 5

1.2 Math 对象

JavaScript 中内置的功能强大的数学对象，包括数学中的所有属性和方法

Math.random()

随机数，随机产生一个大于等于零且小于一的数 [0, 1)

Math.pow(num, power)

幂的计算，num：底数，power ：幂

Math.sqrt(num)

开平方计算，num：开平方的数

Math.PI

π 的数值

console.log(Math.random())		// 随机数
console.log(Math.pow(2, 3))		// 8
console.log(Math.sqrt(81))		// 9
console.log(Math.PI)		// 3.141592653589793

2. 比较运算符

运算符：>、 <、 ==、 ===、 >=、 <=、 !=、 !==、

比较运算符参与的运算，结果都是 布尔值(true/false)

  1. 纯数字字符串与数字进行比较，进行隐式转换

  2. true、false、null，进行比较时，也会进行隐式转换

    true==>1 false==>0 null==>0

    但null进行==和===运算时不等于0

    console.log(null == 0)		//false 
console.log(null === 0)		//false 
console.log(null >= 0)		// true
console.log(null <= 0)		// true

    ==:只判断数值; ===:同时判断数值和类型

  3. != 与 == 相反；!== 与 === 相反

    先判断 == 和 === 然后对结果取反即可

  4. NaN 进行比较运算

    console.log(NaN == NaN)		// false

  5. Infinity 进行比较运算

    console.log(Infinity == Infinity)		// true
console.log(Infinity === Infinity)		// true

  6. 非纯数字字符串的比较运算，不是比较字符串的长短，而是比较字符的Unicode编码。顺序在前的小于顺序靠后的，如果第一个字符相等，一次往后进行比较。

    数字(0-9) < 大写字母(A-Z) < 小写字母(a-z)

    console.log('12' < '2')		// true
console.log('banana' < 'back')		// true

3. 逻辑运算符

运算符：

逻辑与运算：&&

逻辑或运算： ||

逻辑非运算： !

逻辑运算一般都是布尔值参与运算，得到的结果也是 布尔值(true/false)

  • 逻辑与

    同真为真 一假就假

  • 逻辑或

    一真就真，同假才假

  • 逻辑非

    取反 真->假 假->真

  1. 字符串或数字或特殊字段参与逻辑运算会自动转换成布尔值参与运算，得到的不一定是布尔值

    NaN, 0, ''(空字符串), null, undefined ===> fasle

    非0数字, 非空字符串, Infinity ===> true

  2. 短路语法

    • 逻辑与&&：===> 串联电路：

      逻辑与.png

      若a为真，电流能流到b，结果为b

      若a为假，电流不能流到b，结果为a

    • 逻辑或||：===> 并联电路：

      逻辑或.png

      若a为真，电流能从a完成循环，结果为a

      若a为假，电流流到b完成循环，结果为b

      console.log('123' && true)		// true
console.log('123' || true)		// '123'
console.log('' && true)			// ''
console.log('' || true)			// true
console.log(NaN && false)		// NaN
console.log(NaN || false)		// false
console.log(NaN && true)		// NaN
console.log(NaN || true)		// true
console.log(0 && '1')			// 0
console.log(0 || '1')			// '1'
console.log(undefined && '你好') // undefined
console.log(undefined || '你好') // '你好'
console.log(null && '你好') // null
console.log(null || '你好') // '你好'
console.log(Infinity && '你好') // '你好'
console.log(Infinity || '你好') // Infinity

      总结

      与&&: a -> false, 则为a， 否则为b

      或||: a -> true, 则为a， 否则为b

  3. 逻辑运算符的运算顺序

    非! > 与&& > 或||

false || !false && false || true
// 先非
//fasle || true && false || true
// 在与
//false || false || true
// 最或
//false || true
// true

4 && 'hello' || !false || !true && null
// 先非
//4 && 'hello' || true || false && null
// 在与
//'hello' || true || false
// 最或
//'hello' || false
//’hello‘

4. 运算符综合运算

运算顺序

贴身的（！++ --）> 数学 > 比较 > 逻辑 > 赋值

var a = 4;
var sum = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || 9
// 贴身的
1 * (2 + 3) && 4 || 5 > 6 && 7 < 8 || 9
// 数学
5 && 4 || 5 > 6 && 7 < 8 || 9
// 比较
5 && 4 || false && true || 9
// 逻辑与
4 || false || 9
// 逻辑或
4

var a = 4;
var sum = 1 + 2 && 3 * a++ % 5 || 6 < 7 == 8 / !false
// 贴身的
1 + 2 && 3 * 4 % 5 || 6 < 7 == 8 / true
// 数学
3 && 2 || 6 < 7 == 8
// 比较
3 && 2 || true == 8
3 && 2 || false
// 逻辑与
2 || false
// 逻辑或
2

流程控制语句

JavaScript 的执行顺序通常是从上到下，依次执行，但是可以使用流程控制语句控制执行顺序

  • 顺序结构
  • 分支结构
    • if语句
    • 三元表达式
    • switch语句
  • 循环结构
    • for循环
    • do-while语句
    • while语句

条件分支语句

1. if语句

1.1 单个if语句

语法

if(条件) {
	结构体		// 当条件为真时，执行
} else {
	结构体		// 当条件为假时，执行
}

注：当结构体只有一条JavaScript语句， 大括号可以省略不写

if(条件) 执行体 else 执行体

var a= parseInt(prompt("请输入您的成绩"));
if (a >= 60) {
  alert("考试及格");
} else {
  alert("不及格");
}
//parseInt() 函数解析一个字符串，并返回一个整数。 
//prompt() 用于提示用户输入对话框。
1.2 多分枝if语句(跳楼现象)

语法

if(条件1) {
	结构体		// 当条件1为真时，执行
} else if(条件2) {
	结构体		// 当条件1为假时且条件2为真时，执行
} else {
	结构体		// 当条件1和条件2同事为假时，执行
}

跳楼现象

多分支的if语句，有跳楼现象，只会执行其中一个结构体。

var a= parseInt(prompt("请输入您的成绩"));
if (a >= 90) {
  alert("优秀");
} else if (a >= 80) {
  alert("良好");
} else if (a >= 60) {
  alert("及格");
} else {
  alert("不及格");
}
// 只能执行其中一个结构体

var a= parseInt(prompt("请输入一个10以内的整数"));
if (a <= 3) {
  alert(a += 2);    // A
} else if (a <= 5) {
  alert(a += 2);    // B
} else if (a <= 8) {
  alert(a += 3);    // C
} else {
  alert(a ++);    // D
}
// 当 a=8 时, 执行结构体C, 结果为 11 
// 当 a=5 时, 执行结构体B, 结果为 7
// 当 a=2 时, 执行结构体A, 结果为 4
// 一个a只能执行ABCD中的一个结构体,称为跳楼现象
1.3 if语句的嵌套

if 语句中的结构体中、可以再嵌套一个if语句

var sex = prompt("输入性别");
var age = parseInt(prompt("输入年龄"));

if (sex === "男") {
  if (age >= 22) {
      alert("可以结婚");
  }else {
      alert("不可以结婚");
  }
} else if (sex == "女") {
  if (age >= 20) {
      alert("可以结婚");
  }else {
      alert("不可以结婚");
  }
}

2. 三元表达式（运算符）

语法：条件表达式 ? 值1 : 值2

表示：当条件表达式jis为真时，取值1；当条件表达式为假的时，取值2；

eg1：计算 a，b，c， 中得最大值

var a, b, c;
function max(a, b, c) {
  return a > c ? (a > b ? a : b): (b > c ? b : c);
}
console.log(max(2, 3, 5));
// 5

总结：三元表示式也是条件分支语句。常用于给变量赋值有两种可能时，也就是二选一的情况

eg2：计算年终奖

当工作年限不满一年，工资小于8K，年终奖为工资的1倍，否则为1.2倍

当工作年限不满两年，工资小于10K，年终奖为工资的1.5倍，否则为1.7倍

当工作年限不满三年，工资小于13K，年终奖为工资的2.3倍，否则为3倍

var salary = parseInt(prompt("请输入你的工资"));
var year = parseInt(prompt("请输入你的工作年限"));
var beishu ;
if (year === 0) {
  beishu = salary < 8000 ? 1 : 1.2;
} else if (year === 1) {
  beishu = salary < 10000 ? 1.5 : 1.7;
} else {
  beishu = salary < 13000 ? 2.3 : 3;
}
console.log("您的年终奖是" + salary*beishu);

3. switch语句

switch 语句也是条件分支语句，允许一个程序计算一个表达式的值，让这个值去匹配一个 case 选项，匹配成功，则直接执行该 case 中的结构体

语法

switch (expression) {
  case label1:
    // 匹配label1，执行statements1
    statements1;
    break;
  case label2:
    // 匹配label2，执行statements2
    statements2;
    break;
  default:
    break;
}

break：表示强制跳出 switch 语句，若是不写，即使不满足后面的case，也会执行其中的结构体。

eg1：利用 break 输出每个月多少天

var month = parseInt(prompt("请输入一个月份"));
switch (month) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
    alert("该月有31天");
    break;
  case 2:
    alert("该月有28天");
    break;
  default:
    alert("该月有30天");
    break;
}
// 当case后有表达式时,程序会先计算表达式
// 例如 var a =5, b = 3;  case a + b ==> case 8

总结：if语句 三元表达式 switch语句的使用情况

if语句：最常用,用途广泛

三元表达式：适用于变量赋值二选一时

switch语句：适用于一个值去匹配多种情况时

循环语句

1. for循环

for 循环是前置判断，就是先判断条件表达式

语法

for (初始化表达式; 布尔表达式; 更新表达式) {

循环语句

}

for (let i = 0; i < 100; i++) {
  console.log("这是第" + i + "次输出");
}
console.log("输出结束");
// ①let i = 0
// ②i < 100
// ③console.log("这是第" + i + "次输出");
// ④i++
// ⑤console.log("输出结束");

for 循环先执行 ① ，且只执行一次，然后执行 ② ，但结果为假时，直接跳出 for 循环，执行⑤；当为真时，执行（③ -> ④ -> ②），直到 ②为假时，按照上述执行 ⑤；

var i = 3
for (console.log(i++); i < 13; i += 5) {
  console.log(i);
}
// 3 4 9
// ①console.log(i++)
// ②i < 13
// ③console.log(i);
// ④i += 5

先执行 ① ， 输出3，然后执行 ② ，判断为真，执行 ③ ， 输出4，然后执行④，i变成9，再次执行 ②，判断为真，执行 ③ ， 输出9，然后执行 ④，i变成14，再次执行②，判断为假，跳出循环

for 循环可以嵌套 for 循环语句（i， j， k）

乘法表/加法表

for 循环可以嵌套 if 循环语句（i， j， k）

for (let i = 4; i < 20; i+=5) {
  if (i % 2) {
    console.log(i);
  }
}
// 9 19

// 三位数种的水仙花数(个位十位百位的三次方相加等与本身)
for (let i = 100; i <= 999; i++) {
  let ge = i % 10;
  let shi = parseInt(i / 10) % 10;
  let bai =parseInt(i/ 100);
  let sum = Math.pow(ge, 3) + Math.pow(shi, 3) + Math.pow(bai, 3)
  if (i === sum) {
    console.log(i);
  }
}
// 153 370 371 407

// 累加
// var num = parseInt(prompt("请输入一个正整数"));
var num = 9;
var sum = 0;
for (let i = 0; i < num; i++) {
  if (num % i === 0) {
    sum ++;
    console.log(i);
  }
}
console.log(num + "的总约数个数时" + sum);
// 1
// 3
// 9的总约数个数时2

// 累乘
// var num = parseInt(prompt("请输入一个正整数"));
var num = 5;
var cheng = 1;
for (let i = 1; i <= num; i++) {
  cheng *= i
}
console.log(cheng);
// 120

2. do while 循环语句

do while 循环语句是后测试循环语句，先执行结构，再判断表达式，满足条件继续执行，不满足直接跳出。

语法

do {

结构体

} while (表达式);

var i = 3; // 循环变量必须写在循环语句外
do {
  i += 4;
  console.log(i);
} while (i<25);
// 7 11 15 19 23 27

注： do while 循环语句中的结构体无条件执行一次

var i = 3;
do {
  console.log(i);
} while (i<3);
// 3

3. while 循环语句

do while 循环语句是前测试循环语句，不建议使用，可用 for 循环替代。循环执行一段代码，直到遇到条件为假时，结束语句

语法

while (表达式) {

结构体

}

// 先输出，后增加
var i = 3;
while (i<25) {
  console.log(i);
  i+=4;
}
// 3 7 11 15 19 23

// 先增加，后输出
var i = 3;
while (i<25) {
  i+=4;
  console.log(i);
}
// 7 11 15 19 23 27

注：循环语句的自加顺序会影响语句的输出

break & continue

break

  1. 当遇见 break 关键字时，会结束当前语句(for do-while while switch)，把语句的控制权，交给该循环后面的语句

    for (let i = 1; i < 100; i+=2) {
  if (i % 3 === 0) {
    console.log(i);
    break;
  }
}
// 3

  2. 在 for 循环嵌套中，break 只能控制内层的 for 循环，不能结束外面的循环

    for (let i = 1; i < 5; i++) {
  for (let j = 1; j < 5; j++) {
    if (j == 2) {
      break;
      // 这个break只能管理j,不能管理i
    }
    console.log(i, j);
  }
}
// 1 1
// 2 1
// 3 1
// 4 1

continue

  1. 当满足条件时，有 continue 只能结束当前语句，不会结束循环

    for (let i = 1; i < 5; i++) {
  for (let j = 1; j < 5; j++) {
    if (j === 2 || i === 4) {
      continue;
      // 只能管理内层的for循环
    }
    console.log(i, j);
  }
}
// 1 1
// 1 3
// 1 4
// 2 1
// 2 3
// 2 4
// 3 1
// 3 3
// 3 4

  2. 当要控制外层循环，需要标签进行控制

注：break 和 continue 可以建华计算机的执行过程

原理：当一个数是和数时，对该数及性能开发后得到数i，在小于等于i中一定有一个数是该数的因数

// var num = parseInt(prompt("请输入一个正整数"));
var num = 17
// 只看这个数的开方之前是否除了1还有其他的约数
for (let i = 2; i < Math.sqrt(num); i++) {
  if (num % i === 0) {
    // 只要找到一个约数，就结束佛如循环
    break;
  }
  console.log(num + "是质数");
}

// 输出1-10(1000)之间的质数
out:for (let i = 2; i <= 10; i++) {
  for (let j = 2; j < Math.sqrt(i); j++) {
    if (i % j === 0) {
      continue out;
    }
  }
  console.log(i + "是质数");
}
// 2是质数
// 3是质数
// 4是质数
// 5是质数
// 7是质数
// 9是质数
avatar
文章
阅读
粉丝