【JavaScript入门笔记02 基本知识Ⅲ】

笔记参考javascript.info中文站

浏览器环境下的交互

1. alert

前面的笔记中已经出现过这个函数，它会显示一条信息，并等待用户按下 “确认”，弹出的这个带有信息的小窗口被称为 ”模态窗“ ，在用户处理完这个 “modal” 前，他们无法与其他部分交互，举个例子：

alert("Hello"); // 不回应别人打招呼是很不礼貌的行为

2. prompt

prompt 函数接收两个参数：prompt(title, [default])，其中带中括号的default参数可选， prompt 函数可以显示一个 input 框，让用户输入数据，随后将输入的内容赋值给对应变量。

title 是显示给用户看的文本
default 是指定 input 框的初始值。

举个例子：

 let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!

当用户取消输入，或者按ESC取消输入时，返回 null 值

当我们没有设置第二个参数 default 时，现代浏览器会默认赋值 undefined ，但是在使用IE时请注意，IE没有这个功能

3. confirm

正如其名：确认
confirm 函数有一个参数（字符串形式），调用函数时会在模态窗中显示该参数的内容，用户点击 “确认” 对应变量则赋值 true ，选择 “取消” 则赋值 false 。

举个例子：

let isBoss = confirm("Are you the boss?");
alert( isBoss ); // 如果“确定”按钮被按下，则显示 true

confirm 函数的参数一般是一个 Question，让用户去 confirm

类型转换

大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，例如 alert 函数会将参数转化成字符串类型。

但有些情况下我们需要手动显式转换类型：

1. 字符串转换

let value = true;// 声明一个布尔变量，赋值为真
alert(typeof value); // boolean

value = String(value); // 现在，值是一个字符串形式的 "true"
alert(typeof value); // string

2. 数字型转换

let str0 = "123";// 声明一个字符串，赋值为“123”
let str1 = "balabala"// 声明一个字符串，赋值为"balabala"
alert(typeof str0); // string
alert(typeof str1); // string

let num0 = Number(str0); // 变成 number 类型 值为123
alert(typeof num0); // number
alert(num0);// 123

let num1 = Number(str1);// 变成 number 类型 值为NaN
alert(typeof num1); // number
alert(age); // NaN，字符串无法变成确切的数字

Number类型转换的值存在下述规则：

值	转换为
undfined	NaN
null	0
true	1
false	0
string	纯数字则转成对应数字（去空格），非纯数字则NaN，空字符串则 0

3. 布尔型转换

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false

空则0，非空则1
null、undefined、空字符等 即空
数字、非空字符串等 即非空

只含有一个空格的字符串也非空

基础运算符

1. 术语

• 运算元：运算符应用的对象
• 一元运算符：只拥有一个运算元的运算符
• 二元运算符：拥有两个运算元的运算符

2. 数学运算

• 加法 +
• 减法 -
• 乘法 *
• 除法 /
• 取余 %
• 求幂 **

3. + 运算符

+运算符有三种意义

1. 数学加法，二元运算符
2. 字符串连接，二元运算符

let s = "my" + "string";
alert(s); // mystring

两个运算符中有一个是字符串则另一个运算符自动转成字符串

alert( '1' + 2 ); // "12"

注意：运算符是按顺序工作

// 先加法，再连接
alert(2 + 2 + '1' ); // "41"，不是 "221"

// 先连接，再连接（第一次连接后又成了新字符串“12”）
alert('1' + 2 + 2); // "122"，不是 "14"

3. 数字转化，一元运算符
   加号 + 应用于单个值，对数字没有任何作用。但是如果运算元不是数字，加号 + 则会将其转化为数字，举个例子：

// 对数字无效
let x = 1;
alert( +x ); // 1

// 转化非数字
alert( +true ); // 1
alert( +"" );   // 0

let apples = "2";
let oranges = "3";
// 在二元运算符加号起作用之前，所有的值都被转化为了数字
alert( +apples + +oranges ); // 5

// 与Number()，显式类型转换函数效果相同，但更简洁
alert( Number(apples) + Number(oranges) ); // 5

4. 优先级

我们只需要知道基础优先级和 “一元运算优先级高于二元运算” 即可，其余优先级可参考优先级表或自行百度。

5. 赋值运算符

赋值符号 = 也是一个运算符，从优先级表中可以看到它的优先级非常低，几乎所有运算都完成后才会赋值。

在 JavaScript 中，所有运算符都会返回一个值，= 也是一样，语句 x = value 将值 value 写入 x 然后返回 value，因此只要出现了 = ，一定有对应的被赋值的变量：

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3，3也被返回了，尽管a只是一个中间值
alert( c ); // 0

我们也可以进行链式赋值，同时给多个变量赋同一个值

let a, b, c;
a = b = c = 2 + 2;// 注意，这些运算符都是按顺序和优先级运算的，优先级高的先运算，靠右的先运算

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

6. 原地修改

我们经常需要对一个变量做运算，并将新的结果存储在同一个变量中，如 n = n + 5
因此Javascript设计了缩写，可以使用运算符 += 和 *= 来缩写这种表示

let n = 2;
n += 5; // 现在 n = 7（等同于 n = n + 5）
n *= 2; // 现在 n = 14（等同于 n = n * 2）
n *= 3 + 2; // 现在n = 70（右边部分先被计算，等同于 n *= 8）
alert(n); // 70

7. 自增/自减

分别对应 ++ 运算符和 - - 运算符

let counter = 2;
counter++;      // 和 counter = counter + 1 效果一样，但是更简洁
alert( counter ); // 3

counter--;      // 和 counter = counter - 1 效果一样，但是更简洁
alert( counter ); // 2

自增/自减只能应用于变量，比如 5++ 则会报错。

注意，还可以这样写：++counter，--counter，分别被称为 “前置形式” 和 “后置形式”
它们的区别是，前置形式返回一个新的值，但后置返回原来的值，举个例子

let counter = 1;
let a = ++counter; // 返回 ++ 后的结果

alert(a); // 2

let counter = 1;
let a = counter++; // 返回 ++ 前的结果

alert(a); // 1

8. 位运算符和逗号运算符

• 位运算符
  位运算符把运算元当做 32 位整数，并在它们的二进制表现形式上操作，如按位与 ( & )、按位或 ( | )等，不常用。

• 逗号运算符
  逗号运算符能让我们处理多个语句，使用 “,” 将它们分开，举个例子

// 一行上有三个运算符
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

写起来方便，读起来难，也不常用

值的比较

1. 比较的结果

比较大小的运算符包括 >、<、≥、≤、==、!=
比较的结果只可能是正确 true，或错误 false，也就是布尔类型

let result = 5 > 4; // 把比较的结果赋值给 result
alert( result ); // true

2. 字符串比较

字符串比较采用Unicode 编码顺序，从头开始按字母顺序，一位位比，相等则比下一位，直至结尾都相等则相等，一方没有字符了则判定为 “小”。

注意，同位小写字母比大写字母大，“a” > “A”

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

3. 不同类型的比较

当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小。

alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1
alert( true == 1 ); // true

4. 严格相等

有的时候，不同类型比较自动转成Number比较这一点并不方便，比如无法区分空字符串和 false

alert( "" == false ); // true

这时候就需要用到另一种比较概念：严格相等 / 严格不相等，符号是 === / !==
首先判定是否同类型，不同直接返回 false，不转化成Number

这样做可以增加可读性，避免奇怪的错误

5. null 和 undefined 的比较

null 和 undefined 不同类型，因此严格比较不相等

但有趣的是，二者非严格比较相等，我们知道，null 的 Number转化是 0，而 undefined 转化后是 NaN ，二者并不相等，但是 Javascript 对此做出了特殊规定：

// 二者不会进行类型转换，直接判定
alert( null == undefined ); // true

在此规则下，null，undefined，0 三者之间的比较变得格外热闹

alert( null > 0 );  // (1) false，null转化成数字0
alert( null == 0 ); // (2) false，null在==比较下不转化成数字，null 和 undefined有自己独立的比较规则，所以除了它们之间互等外，不会等于任何其他的值
alert( null >= 0 ); // (3) true，null转化成数字0

alert( undefined > 0 ); // false，undefined 转换成 Number 类型 NaN
alert( undefined < 0 ); // false，undefined 转换成 Number 类型 NaN
alert( undefined == 0 ); // false，undefined 在 == 比较下不转化成数字，null 和 undefined有自己独立的比较规则，所以除了它们之间互等外，不会等于任何其他的值

这些规则有些古怪，即使经常和 Javascript 打交道的程序员可能会渐渐习惯熟悉这些规则，但是我们依然建议尽量避免null，undefined，0 三者之间的比较，尤其是大于小于的比较