JavaScript学习笔记（二）

时间：2024-10-01 07:26:25

核心内容

1、数据类型(简单数据类型)_2

1.1、数值类型(扩展)

1.1.1、目标

  • 了解JS中的两个特殊的数值

  • 了解NaN

  • 熟练使用isNaN判断一个合法的数值

  • 熟练使用length获取字符串的长度

  • 熟练使用字符串转义符

1.1.2、两个特殊的值

有言在前：

数值型数据，可以有无数个。JS创始人为了让JS处理现实问题更严谨，所以又设计了两个特殊的值来表示特殊的情况。

  • Infinity

    表示无穷大的情况，

    +Infinity 正无穷大

    -Infinity 负无穷大

    示例：

    console.log(1/0)		// Infinity

// Infinity既然是一个值也可以赋值给变量，但意义不大
let i = Infinity
    • 1
    • 2
    • 3
    • 4
    '
    运行

  • NaN(Not aNumber)

    非数字，主要用于表示在进行数学运算时无法得到正确数值的情况下(人般是由于程序员的错误)。

    示例：

    // 数学运算时无法得到正确的数值数据
let a = 10;
let b = '美女';
console.log(a * b)		// NaN

// NaN即是一个值，也可以尝试与其他数据进行运算，但结果都是NaN
console.log(NaN + 1)
console.log(NaN * 1)

// NaN与任何值进行比较都不相等(包含自己)
console.log(NaN == 0)		//false
console.log(NaN == 1)		//false
console.log(NaN == true)	//false
console.log(NaN == false)	//false
console.log(NaN == '')		//false
console.log(NaN == NaN)		//false
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    '
    运行

    送给迷茫的人：以上示例，没有任何实际意义，仅是告诉大家NaN的特点

1.1.3、JS中表示数值的能力

有言在前：

虽然现实中的我们可以写出天大的一个数字。
但是数据在内存中是占据存储存储空间的。JS为了能满足正常的编程需要，同时又不会过多的浪费内存，对数值的取值范围进行了合理的限制。
JS中所能表示的正数最大值为：1.7976931348623157e+308
负数最大值为：5e-324

对于这么多位数的数字，记忆很难，所以JS将这两个值保存到两个地方：
Number.MAX_VALUE 正数最大值
Number.MIN_VALUE 负数最大值
需要时，我们直接调用即可获得JS所能表示的最大值与最小值

示例：

console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
  • 1
  • 2
'
运行

送给迷茫的人：Infinity用于表示的是一个无法描述的无穷大的数,而Number.MAX_VALUE指的是JS在数值表现方面的能力

1.1.4、isNaN

判断一个字符串不由纯数字组成。

注意：

不是由纯数字组成就返回true，由纯数字组成返回false。

示例：

let a = 'zhangsan'
console.log(isNaN(a))	//true

let b = '20'
console.log(isNaN(b))	//false

let c = '20.5'
console.log(isNaN(c))	//false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
'
运行

1.2、字符串类型(扩展)

1.2.1、字符串的长度

​ 字符串是由多个字符组成的一个序列，字符串的长度就是字符串中字符的个数。

通过，字符串.length 语法可以获取字符串的长度

示例：

let uname = 'zhangsan'
console.log(uname.length)   //8

let cn = '我是张三'
console.log(cn.length)      //4
  • 1
  • 2
  • 3
  • 4
  • 5
'
运行

1.2.2、转义符( \ )

为什么要有转义符，看以下两个情况：

// 情况1:
// 字符串中即有单引号也有双引号
let str = '他让我告诉你，他说:"我喜欢你你你你...，我喜欢你离我远'一丁点'"'	//报错
  • 1
  • 2
  • 3
// 情况2:
// 我想输出abc
console.log('abc')	// 所以括号里面要写所要输出的内容。

/* 我想输出带格式的		a换行b换行c
*	a
*	b
*	c
*/
console.log('a
            bc')		// 报错(你想输出的换行会导致语法错误)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

转义符的作用

作用1：用于将被JS赋予给某些符号的特殊功能转义掉。
例如：
单引号、双引号 被js赋予了定义字符串的功能
’ 将当前单引号定义字符串的功能转义掉
" 将当前双引号定义字符串的功能转义掉

作用2：赋予某些字符特殊的功能
例如：
\t 赋予制表符(tab键)的功能
\n 赋予换行的功能
\r 赋予回车的功能
对于\n \r都可以实现换行，推荐使用\n，因为\n在所有操作系统都支持
\r只有window支持

示例：

去取特殊字符的功能

let str1 = 'I\'m zhangsan'
console.log(str1)                       // let str = '他让我告诉你，他说:"我喜欢你你你你...，我喜欢你离他远'一丁点'"'

let str2 = "他说：\"他曾经追了你好久\""
console.log(str2)                       // 他说："他曾经追了你好久"
  • 1
  • 2
  • 3
  • 4
  • 5
'
运行

为字符赋予特殊的功能

let str1 = 'hello \nworld'
console.log(str1)   
/*
hello 
world
*/

let str2 = 'hello \tworld'
console.log(str2)                   // hello    world

let str3 = 'my\\name\\is\\zhangsan'
console.log(str3)                   // my\name\is\zhangsan
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
'
运行

没有任何功能的字符配合转义符，只会单纯输出这个字符(了解)

// 有些字符就是一个普通的字符，js没有赋予任何功能，前面加了转义符\，也没有任何意义，只会单纯的输出这个字符。
// 例如 h i j就是一个普通字符
let str = '\h\i\j'
console.log(str)        // hij
  • 1
  • 2
  • 3
  • 4
'
运行

1.2.3、模板字符串

模板字符串是一种新的定义字符串的方式。

作用：

模板字符串的作用就是用于解决字符串与变量拼接的问题。

定义：

在低版本的js中字符串只能使用单引号或双引号定义，但是在高版本的js中可以使用反引号定义字符串(``)

let str = `hello world`
console.log(str)		// hello world
  • 1
  • 2
'
运行

反引号在定义模板字符串时，可以换行定义(单引号或双引号定义字符串时是不可以的)

let str = `hello
world`
console.log(str)		/* hello
						  world*/
  • 1
  • 2
  • 3
  • 4
'
运行

字符串内解析变量值的语法：

${变量名}

let age = 20		
let str = `我今天${age}岁了`		// 使用反引号定义模板字符串
console.log(str)
  • 1
  • 2
  • 3
'
运行

案例：

// 获取用户数据
let n1 = prompt('输入第1个数值')
let n2 = prompt('输入第2个数值')

// 对用户数据进行乘法运算，得到结果
let ret = n1 * n2

// 虽然得到了结果，但是最终显示的内容中不但有结果，还有其他内容(10 * 20 =)。这部分内容并不是完全由用户输入的
// 所以我们要拼接生成这部分内容，
let fina = `${n1} * ${n2} = ${ret}`
alert(fina)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

1.3、 应有所得

字符串长度 变量.length

转义符 \

​ 去除某个字符的功能 ’ " \\

​ 为某些字符添加功能 \n \t

模板字符串

​ 定义 反引号

​ 定义时可以换行

​ 可以解析变量的值 ${变量名}

2、数据类型(复杂数据类型)

有言在前：

复杂数据类型在此仅作了解，后面章节会详细讲解。

在JS中数据类型分为两大类：简单数据类型、与复杂数据类型。

  • 简单数据类型

    数值

    字符串

    布尔

    undefined

    null

    我们可以这么理解简单数据类型，之所以称之为简单是由于一个变量仅保存一个值(数据)。

  • 复杂数据类型

    array 数组

    object 对象

    function 函数

    复杂数据类型主要复杂在值的个数上。复杂数据类型一个变量可以保存多个值(函数除外)

复杂数据类型的创建

array(数组)的创建

let arr = [‘zhangsan’,25,‘male’,90]

object(对象)的创建

let obj = {name:‘zhangsan’,age:25,sex:‘male’,score:90}

function(函数)的创建

function fn(){

​ // 函数体

}

示例：

let arr = ['zhangsan',25,'male',90]
console.log(arr)		// ["zhangsan", 25, "male", 90]

let obj = {name:'zhangsan',age:25,sex:'male',score:90}
console.log(obj)		// {name: "zhangsan", age: 25, sex: "male", score: 90}

function fn(){
    console.log('runing...')	// runing...
}

fn()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
'
运行

3、数据类型转换

3.1、目标

  • 将其他数据转换为数值Number()
  • 将其他数据转换为字符串String()
  • 将其他数据转换为布尔Boolean()

3.2、什么是数据类型转换

​ 将一种数据类型转换为另外一种数据类型。

3.3、为什么要有数据类型转换

有言在前：

JS中只有相同数据类型才可以直接进行运算

示例：数据类型相同

let a = 10
let b = 20
let ret = a * b		// 相同数据类型可以直接进行运算
console.log(ret)	//200
  • 1
  • 2
  • 3
  • 4
'
运行

示例：数据类型不同

let x = 10
let y = '20'
let ret1 = a * b
console.log(ret)	//200
  • 1
  • 2
  • 3
  • 4

❓ 人类有了疑问：不同数据类型不什么也可以进行计算呢???

???? JS回答到：你以为我傻么~~~，我难道不会进行转换么。在进行运算时，如果遇到了不是同一种数据类型进行运算，我大名鼎鼎的JS会自作主张的将其转换为相同数据类型再进行运算。比如上面的运算，我会将字符串'20'转换为数值20再进行计算？

❓人类又有了疑问：上面的代码你JS计算的很好，正是我想要的结果。但是你为什么不将数值10转换为'20'呢？你转换的依据是什么呢

????JS回答到：你怎么这么傻，是你告诉的我要将两个数据进行 * 法运算呢~~~，*法运算是数值的运算,所以不是数值要转换为数值。

???? 人类说到：(人类为了挽回自己的面子，盛赞了JS一番),高呼：前端威武，JS威武，JS对人类的想法了如执掌

???? JS听到这里突然打断说到：先慢着，慢着...，别给我戴高帽，同时鄙视的看着人类，哼哼...。你们在为你的懒惰开脱么!!! 这都是你们写代码时偷懒才造就了我JS的伟大。你们在进行数据运算时，应用将数据强制转换为与运算符匹配的类型，这样运算才够准确。不过呢，如果每个数据都需要强制转换，也确实难为你们了。有我JS在就算你们不进行强制转换，绝大多数的时候我都可以理解你们的用意，帮你们转换了。但是呢，但可是呢，可但时呢，用你们人类的话讲：有一些锅不能推给我，有时必须由你们强制进行转换。你看下面的例子

// 业务场景：新商品入库
// 定义一个变量模拟商品原有的库存
let inventory = 100

// 新商品入库
let n = prompt('新购商品数量')  // 得到的是字符串 '10'

// 总数量
let sum = inventory + n;        // 100 + '10'
console.log(sum)                //结果： 10010
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

???? 当人类执行完代码看到结果后，大吃一惊，JS说到，这个示例中的代码我自作主张的转换就没有得到你们想要的结果。同时抚摸着人类的头说到：你应该了解一下隐式转换与强制转换了。

3.4、数据类型的转换

数据类型的转换分为两种：隐式转换 与 强制转换

  • 强制转换

    程序员在写代码时对数据进行的强制转换

  • 隐式转换

    在代码执行时，由JS自作主张的进行的转换。

3.4.1、其他类型转数值

强制转换

语法：

Number(非数值数据)

示例：

let a = '10'
let b = ''
let c = true
let d = false
let e = undefined
let f = null
let g = 'a'

console.log(Number(a))		// 10
console.log(Number(b))		// 0
console.log(Number(c))		// 1
console.log(Number(d))		// 0
console.log(Number(e))		// NaN
console.log(Number(f))		// 0
console.log(Number(g))		// NaN
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
'
运行

????能合理转换就进行转换，转换不了就转换为NaN(NaN设计的目标就是用于接收这种无法转换的情况)

隐式转换

  • 算术运算符会触发隐式转换(除+、=+外，因为+与+=优先进行字符串拼接)

示例：

let a = '10'
let b = ''
let c = true
let d = false
let e = undefined
let f = null
let g = 'a'

let ret_a = 100 * a // 变量a被隐式转换为 10     100 * 10 
console.log(ret_a)  // 1000

let ret_b = 100 * b // 变量b被隐式转换为 0      100 * 0 
console.log(ret_b)  // 0

let ret_c = 100 * c // 变量c被隐式转换为 1      100 * 1 
console.log(ret_c)  // 100

let ret_d = 100 * d // 变量d被隐式转换为 0      100 * 0 
console.log(ret_d)  // 0

let ret_e = 100 * e // 变量e被隐式转换为 NaN    100 * NaN 
console.log(ret_e)  // NaN

let ret_f = 100 * f // 变量f被隐式转换为 0      100 * 0 
console.log(ret_f)  // 0

let ret_g = 100 * g // 变量f被隐式转换为 NaN    100 * NaN 
console.log(ret_g)  // NaN
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
'
运行

3.4.2、其他类型转换字符串

强制转换

语法1：

String(非字符串数据)

示例：

let a = 0;
let b = NaN;
let c = undefined;
let d = null;
let e = true;
let f = false;
console.log(String(a))      // '0'
console.log(String(b))      // 'NaN'
console.log(String(c))      // 'undefined'
console.log(String(d))      // 'null'
console.log(String(e))      // 'true'
console.log(String(f))      // 'false'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
'
运行

语法2：

其他数据类型.toString()

示例：

let a = 0;
let b = NaN;
let c = true;
let d = false;
console.log(a.toString())      // '0'
console.log(b.toString())      // 'NaN'
console.log(c.toString())      // 'true'
console.log(d.toString())      // 'false'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
'
运行

???? toString()方法不通用，null、undefined类型数据不支持。

隐式转换

  • +、+=会触发字符串的隐式转换

示例：

let a = 0;
let b = NaN;
let c = undefined;
let d = null;
let e = true;
let f = false;
console.log(a + '10')      // '010'
console.log(b + '10')      // 'NaN10'
console.log(c + '10')      // 'undefined10'
console.log(d + '10')      // 'null10'
console.log(e + '10')      // 'true10'
console.log(f + '10')      // 'false10'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
'
运行

???? 参与+、+=运算的两个数据中，只要有一个是字符串，另外一个数据就被隐式转换为字符串

3.4.3、其他数据类型转换为布尔

强制转换

语法：

Boolean(其他数据类型)

示例：

let a = 0;
let b = 10;
let c = '';
let d = '0';
let e = NaN;
let f = null;
let g = undefined;

console.log(Boolean(a))     // false
console.log(Boolean(b))     // true
console.log(Boolean(c))     // false
console.log(Boolean(d))     // true
console.log(Boolean(e))     // false
console.log(Boolean(f))     // false
console.log(Boolean(g))     // false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
'
运行

???? 送给初学者：​只要不是真实存在的就转换为false

隐式转换

  • 当一个数据作为条件表达式时，会触发隐式转换

示例：

let a = 0;
let b = 10;
let c = '';
let d = '0';
let e = NaN;
let f = null;
let g = undefined;

if(a){      // false
    console.log('a')
}

if(b){       // true
    console.log('b')        // b
}

if(c){      // false
    console.log('c')
}

if(d){       // true
    console.log('d')        // d
}

if(e){      // false
    console.log('e')
}

if(f){      // false
    console.log('f')
}

if(g){      // false
    console.log('g')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
'
运行

3.4.4、提取数值

案例：

由用户输入商品单价，计算10个商品的总价钱

思路：

a.弹窗接收用户输入的单价

b.计算10个商品价格，并输出

设想代码：

let num = 10;						// 商品数量
let price = prompt('输入单价：');       // 当用户输入的单价具有单位时 例如：'10元'
let money = num * price;               // '10元'会被隐式转换为 NaN
alert(money)                            // 所以最终结果为 NaN
  • 1
  • 2
  • 3
  • 4

对于以上案例中的进行的数值转换时已无法满足需求，所以需要对字符串中的数值进行提取。从一个字符串中提取数值分两种：提取整数，提取小数

提取整数

语法：

parseInt(字符串)

说明：

在字符串中从左向右依次提取数字，直到遇到第1个非数字字符结束提取。

示例：

let a = '10yuan'
console.log(parseInt(a))        // 10
  • 1
  • 2
'
运行

实现需求：

let num = 10;
let price = prompt('输入单价：');
// 对字符串进行提取
price = parseInt(price)

let money = num * price;
alert(money)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

提取小数

语法：

parseFloat(字符串)

示例：

let a = '10.9yuan'
console.log(parseInt(a))        // 10
console.log(parseFloat(a))      // 10.9
  • 1
  • 2
  • 3
'
运行

实现需求：

let num = 10;
let price = prompt('输入单价：');   // 输入 '10.9元'
// 对字符串进行提取
price = parseFloat(price)           // 10.9

let money = num * price;        
alert(money)                        // 109
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

????注意：parseInt、parseFloat如果是第1个字符是非数字就结束提取，并返回NaN

let a = 'rmb:10.9'
console.log(parseInt(a))        // NaN
console.log(parseFloat(a))      // NaN
  • 1
  • 2
  • 3
'
运行

???? Number(字符串) 用于转换全是数字的字符串

???? parseInt(字符串)、parseFloat(字符串) 用于转换以数字开头的字符串

???? Number、parseInt、parseFloat在无法成功转换时会返回NaN

3.5、应有所得

4、运算符_2

4.1、自增、自减扩展

4.1.1、前自增 VS 后自增

  • 前自增 与 后自增 对于变量本身值的变量没区别(都会将变量的值加1)

示例：

let a = 10;
let b = 10;
++a;
b++;
console.log(a)      //  11
console.log(b)      //  11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
'
运行
  • 前自增 与 后自增 在参与其他运算时会让整个式子有不同的结果。

1.前自增 会先自增再参与其他运算

2.后自增 会先参与其他运算，再将变量的值自增

示例1：

let a = 10;
let b = 10;
// 整个式子的结果
let ret_a = ++a;
let ret_b = b++;
console.log(ret_a);   // 11
console.log(ret_b);   // 10

// 最终变量的结果
console.log(a)      // 11
console.log(b)      // 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
'
运行

示例2：

let x = 10;
let y = 10;

let ret_x = 100 + ++x;
let ret_y = 100 + y++;
// 整个式子的结果
console.log(ret_x)          // 111
console.log(ret_y)          // 110

// 最终变量的结果
console.log(x)              // 11
console.log(y)              // 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
'
运行

4.1.2、前自减 VS 后自减

  • 前自减 与 后自减 对于变量本身值的变量没区别(都会将变量的值减1)

示例：

let a = 10;
let b = 10;
--a;
b--;
console.log(a)      //  9
console.log(b)      //  9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
'
运行
  • 前自减 与 后自减 在参与其他运算时会让整个式子有不同的结果。

1.前自减 会先自减再参与其他运算

2.后自减 会先参与其他运算，再将变量的值自减

示例：

let a = 10;
let b = 10;
// 整个式子的结果
let ret_a = --a;
let ret_b = b--;
console.log(ret_a);   // 9
console.log(ret_b);   // 10
 
// 最终变量的结果
console.log(a)      // 9
console.log(b)      // 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
'
运行

示例2：

let x = 10;
let y = 10;

let ret_x = 100 + --x;
let ret_y = 100 + y--;
// 整个式子的结果
console.log(ret_x)          // 109
console.log(ret_y)          // 110

// 最终变量的结果
console.log(x)              // 9
console.log(y)              // 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
'
运行

????自增、自减运算符只能与变量配合不能与字面值配合

4.2、比较运算符

4.2.1、数学中学习过的比较运算符

  • >
  • <
  • >=
  • <=

???? 以上运算符的比较规则与数学中的完全相同

4.2.2、其他比较运算符

有言在前：

与数据相关的有两方面：其一是值，其二是类型，以下运算符的比较涉及到值与类型

  • ==

    比较规则：

    仅判断两个数据的值是否相同，相同则返回true，否则 返回false

    示例：

    var a = 10;
var b = '10';
var c = 20;

console.log(a == b)     // true
console.log(a == c)     // false
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    '
    运行

  • !=

    比较规则：

    仅判断两个数据的值是否不相同，不相同则返回true，否则返回false

    示例：

    let a = 10;
let b = '20';
let c = 10;
console.log(a != b)     // true
console.log(a != c)     // false
    • 1
    • 2
    • 3
    • 4
    • 5
    '
    运行

  • ===

    比较规则：

    同时判断两个数据的值与类型完全相同，完全相同则返回true，有一方面不相同则返回false

    示例：

    let a = 10;
let b = '10';
let c = 10;
console.log(a === b)     // false
console.log(a === c)     // true
    • 1
    • 2
    • 3
    • 4
    • 5
    '
    运行

  • !==

    比较规则：

    判断两个数据的值与类型至少有一者不相同，至少有一者不相同则返回true，完全相同则返回false

    示例：

    let a = 10;
let b = '10';
let c = 10;
console.log(a !== b)     // true
console.log(a !== c)     // false
    • 1
    • 2
    • 3
    • 4
    • 5
    '
    运行

特别注意：其他数据与布尔值的比较

  • true值比较
// 比较时会触发隐式转换
let a = 1;
let b = '1';
let c = 2;      // 非1数

console.log(true == a); // true
console.log(true == b); // true
console.log(true == c); // false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
'
运行

???? 人类有了疑问：布尔值与其他类型比较时，隐式转换是什么样的呢

???? JS回答到：所有的数据类型都要转换为数值再进行比较。如果是字符串与字符串的比较请移步至，扩展 字符串的比较 处，我们单独聊聊。

  • false值的比较
let a = '';
let b = '0';

console.log(false == a)		// true
console.log(false == b)		// true
  • 1
  • 2
  • 3
  • 4
  • 5
'
运行

???? 人类拍手叫绝：受教了

???? JS鄙夷的望着人为：你还没有得到我的全部真传。想得到全部真传，请移步至，扩展 特殊值的比较

???? 比较运算符的结果是一个布尔值

4.2.3、应有所得

4.3、逻辑运算符

????JS说：来来来，我们讨论一个你们人类的问题——找女朋友

条件1：是女的

条件2：大于等于18岁

这涉及两个条件，关系运算符一次只能表示1个条件，如果想对多个条件进行逻辑判断就需要使用逻辑运算符。所以逻辑运算符就是对多个条件进行逻辑运算的。主要用于表示多个条件的并且、或者、而且…之类的逻辑。

????JS又说：你们使用我JS来完成现实中这样的逻辑，那么我也要具有描述这样并且、或者… 逻辑的能力。为了表示这样的能力，我这里有几个逻辑运算符：&&、||、!

4.3.1、&&(逻辑与)

运算规则：

参与运算的两个操作数，只要有一个为false最终结果就为false。全部为true时，最终结果才为true

示例1：

console.log(true > false)       // true
console.log(true > true)        // false
console.log(false > true)       // false
console.log(false > false)      // false
  • 1
  • 2
  • 3
  • 4
'
运行

示例2：

let a = 20;
console.log( a > 18 && a < 25)      // true
/*
        20 > 18     20 < 25
        true    &&    true     
        		true
*/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
'
运行

???? 全部为true，最终才为true

示例3：

let sex = prompt('请输入性别：女 或 男')
let age = prompt('请输入年龄');
console.log(sex == '女' && age >= 18)   // 性别为女，并且年龄大于等于18
if(sex == '女' && age >= 18){
    alert('条件满足,可以交往')
}else{
    alert('条件不满足')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

4.3.2、||(逻辑或)

运算规则：

参与运算的两个操作数只要有一个为true，最终结果就为true

示例1：

console.log(true || false)      // true
console.log(true || true)       // true
console.log(false || true)      // true
console.log(false || false)     // false
  • 1
  • 2
  • 3
  • 4
'
运行

示例2：

let a = 20;
console.log( a <= 30 || a >= 45)      // true
/*
    20 > 18     20 < 25
    true    &&    false     
    true
*/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
'
运行

???? 只要有一个为true，最终结果就为true

示例3：

// 相亲：要么有房，要么有车
let house = confirm('你有房么?')
let car = confirm('你有车么?')
// (house || car)

if(house || car){
    alert('条件满足,可以交往')
}else{
    alert('我妈不同意')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

4.3.3、!(逻辑非)

运算规则：

只需要一个操作数，对操作数进行取反。

示例：

let a = true;
let b = false;

console.log(!a)     // false
console.log(!b)     // true
  • 1
  • 2
  • 3
  • 4
  • 5
'
运行

课堂提问：回答以下结果

let a = 5;
let str = 'hello world';
console.log(a > 7 && str.length >=10 )  // false
console.log(a < 7 && str.length >=10 )  // true
console.log(a > 7 && str.length <10 )   // false
console.log(a > 7 && str.length <10 )   // false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
'
运行

5、流程控制_2

5.1、switch分支

JS中又提供了switch分支结构，也是用于分支判断。

语法：

switch(变量){

​ case 值1:

​ // 代码块1

​ break;

​ case 值2:

​ // 代码块2:

​ break

​ default:

​ // 缺省代码块

}

说明：

根据switch后的变量与case后的值的匹配情况，将程序转向相应的代码块执行

case结构可以有多个、break关键字可以省略、default结构可以省略

当某个代码块执行完毕后

如果遇到了break，则立即结束整个switch结构

如果没有遇到break，case会被穿透(不会判断紧随其后的值，继续执行其代码块)

注意：

后的变量与case后的值的比较属于 === 比较

后是冒号不是分号

示例1：基本示例

let a = 1;
switch(a){
    case 1:
        console.log('一名大乔');
        break;
    case 2:
        console.log('二小乔');
        break;
    case 3:
        console.log('三雨金枝');
        break;
    case 4:
        console.log('四寸腰');
        break;
    case 5:
        console.log('买市五六七色粉');
        break;
    case 8:
        console.log('打扮八九十分娇');
        break;
    default:
        console.log('我不会了')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
'
运行

示例2：缺少break

let a = 5;
switch(a){
    case 1:
        console.log('一名大乔');
        break;
    case 2:
        console.log('二小乔');
        break;
    case 3:
        console.log('三雨金枝');
        break;
    case 4:
        console.log('四寸腰');
        break;
    case 5:
        console.log('买市五六七色粉');
        // break;		// 注释掉break
    case 8:
        console.log('打扮八九十分娇');
        break;
    default:
        console.log('我不会了')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
'
运行

5.2、合理的利用case穿透

当有多个值需要执行同一段代码时，多个case可以共用一个代码块。这种形式称之为case穿透

案例：用户输入一个数字，输出不同的季节

分析：

北半球的季节划分

3、4、5 春

6、7、8 夏

9、10、11 秋

12、1、2 冬

实现：

let month = Number(prompt('输入月份数'))

switch(month){
    case 3:
    case 4:
    case 5:
        console.log('春：春发')
        break;
    case 6:
    case 7:
    case 8:
        console.log('夏：夏长')
        break;
    case 9:
    case 10:
    case 11:
        console.log('秋：秋收')
        break;
    case 12:
    case 1:
    case 2:
        console.log('冬：冬藏')
        break;
    default:
        console.log('数据不合法')
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

扩展

全字符串的比较：

如果 两个数据都是字符串 那么在进行比较时，比较的是字符的unicode编码。

特殊值的比较

let a = NaN;
let b = undefined;

console.log(false == a)     // false转换为0     a转换为NaN
console.log(false == b)     // false转换为0     b转换为NaN

let c = null;
console.log(c > 0)          // false        null被转换为0   所以0 > 0 不成立
console.log(c >= 0)         // true         null被转换为0   所以0 >= 0 成立
console.log(c == 0)         // false        null与0的比较根本不会转换
console.log(c == false)     // false        null与false的比较根本不会转换
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
'
运行

???? JS说：我知道你们人类认为这个很难接受，但这个锅我不背。是JS设计者的错误，以下是我从网上截下的一段话

扩展

全字符串的比较：

如果 两个数据都是字符串 那么在进行比较时，比较的是字符的unicode编码。

特殊值的比较

let a = NaN;
let b = undefined;

console.log(false == a)     // false转换为0     a转换为NaN
console.log(false == b)     // false转换为0     b转换为NaN

let c = null;
console.log(c > 0)          // false        null被转换为0   所以0 > 0 不成立
console.log(c >= 0)         // true         null被转换为0   所以0 >= 0 成立
console.log(c == 0)         // false        null与0的比较根本不会转换
console.log(c == false)     // false        null与false的比较根本不会转换
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
'
运行

???? JS说：我知道你们人类认为这个很难接受，但这个锅我不背。是JS设计者的错误，以下是我从网上截下的一段话

相关文章