《JavaScript高级教程》学习笔记一、变量和数据类型

2023-08-08 16:56:10

JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的。

一、变量和数据类型

1. 变量

JavaSript是弱类型语言，可以通过var定义任何类型变量，同时同一变量可以被赋值成不同类型。

JavaScript可以在语句结尾省略分号，JS会自动添加分号，但是最好加分号：1.减少错误 2.方便压缩 3.提高性能

var msg = 'mdzz';   // String

msg = 1024;         // Number

var 声明变量，函数作用域

2. 数据类型

JavaScript一共有5中基本数据类型，通过typeof可以查看变量的数据类型。 typeof(变量/数值字面量) 返回对应数据类型字符串

1. Undefined

只有一个值，undefined，声明又没有初始化的变量，默认值为undefined。也可以显示给变量赋值undefined。

var msg; // x相当于 var msg = undefined

typeof(msg)

>> "undefined"

typeof(未声明变量) 也会返回"undefined"

2. Null

同样只有一个值，为null，typeof(null)返回'object'。

3. Boolean

两个值，true和false。所有其他类型的值，都可以通过 Boolean(variable) 转换成true或者false。转换规则：

数据类型	`true`	`false`
`String`	非空字符串	空字符串（`''`）
`Number`	非零数值	`0`和`NaN`
`Object`	任何对象	`null`
`Undefined`		`undefined`

某些时候变量会自动转换成Boolean，如 if(variable) 相当于 if( Boolean(variable) )

4. Number

可以表示整数或浮点数。0开头表示八进制，0x开头表示十六进制。

特殊值：

Number.MIN_VALUE（最小值
Number.MAX_VALUE（最大值
Infinity（无穷大，超过JS数据范围，可以通过Number.POSITIVE_INFINITY得到
-Infinity （负无穷，Number.NEGATIVE_INFINITY
Number.MAX_SAFE_INTEGER（最大整数
Number.MIN_SAFE_INTEGER（最小整数
NaN

任何涉及NaN的操作都返回NaN，如Nan / 10

NaN不等于任何值，包括它本身，NaN == NaN // false

isNaN()用来判断一个变量是否是数值

isNaN(NaN)      // true

isNaN('10')     // false 可以转化为数数值

isNaN(true)     // false

isNaN('true')   // true

数值转换：

Number()，parseInt()， parseFloat()。

Number() 转换规则：

true和false会转换为1和0
null返回0
undefined返回NaN
字符串忽略前导0，十六进制可以转换，空字符串为0，其他的不合法字符串转换为NaN。
对象，调用valueOf()方法，为undefined则调用toString()再转换字符串。

parseInt()转换规则：

忽略前面的空白碰到不合法字符转换结束

parseInt('123blue');    //

parseInt('');           // NaN

parseInt('0xA');        // 10(十六进制)

parseInt('   22.5');    //

parseInt(22.5);         //

parseInt('zzz');        // NaN

八进制（0开头数字）有的时候转换规则不统一。
parseInt(number, radix)转换为指定进制。

parseFloat()只转换十进制。

5. String

单引号(')或双引号(")包裹。两种方式没有区别。

转义字符：

\n 换行
\t 制表
\b 空格
\r 回车
\\ 斜杠
\' 单引号
\" 双引号

str.length 获取字符串长度

ECMAScript中字符串是不可变的。字符串拼接将产生新的字符串。

toString()方法：除了null和undefined值，其他数据都有toString()方法。字符串会返回一个副本。

> 0x23.toString()

< "35"

> '0x23'.toString()

< "0x23"

6. Object

JS可以通过var o = new Object()来创建对象。

Object的每个实例都具有以下属性和方法：

constructor()：构造函数
hasOwnProperty(propertyName)：用于检查当前对象是否存在某个属性。其中propertyName为字符串。
isPrototypeOf(Object)：用于检查传入的对象是否是另一个对象的原型。
propertyIsEnumerable(propertyName)：用于检查给定属性是否可以用for-in来枚举。其中propertyName为字符串。
toString()：返回对象的字符串。
valueOf()：返回对象的字符串，数值或布尔值表示。

二、操作符

1. 一元运算符

递增递减操作符 ++，--，对于整数，使用方法和C语言，Java等相同。但是JS中不仅可以对整数使用，对浮点数也同样适用。同时对于其他类型的变量，会转变成Number然后进行运算，不合法将返回NaN。
```
var o = {

    valueOf: function() {

        return -1;

    }

}

var i = o--;    // i is equal to -1, o change to -2
```
一元加和减操作符对于数字，+，-和普通的运算符号一样，同时，对于其他类型，可以快速转换成Number类型。
```
var o = {

    valueOf: function() {

         return -1;

    }

}

var i = -o;    // i is equal to 1, o don't change
```

2. 位操作符

按位非（~）：操作数的负值减一。
按位与（&）
按位或（|）
按位异或（^）
左移（<<）
算术右移（>>）: 最左端补符号位
逻辑右移（>>>）：最左端补0。

3. 布尔操作符

逻辑非（!）：返回布尔值取反。通过两个取反（!!）可以达到Boolean()的效果。
逻辑与（&&）：短路操作。如果第一个操作数的布尔值为false，则返回第一个操作数，注意：是返回操作数本身，而不是对应的布尔值！如果第一个操作数对应的布尔值为true，则返回第二个操作数。
```
if (obj != null) {

    obj.doSomething();

}

// 上面的代码可以简化成下面的代码

obj && obj.doSomething();
```

逻辑或（||）：和逻辑与一样，短路操作。

var obj;

if (oldObj != null) {

    obj = oldObj;

} else {

    obj = new Object();

}

// 上面的代码可以简化成下面的代码

obj = oldObj || new Object();

4. 乘性操作符

如果对非数值操作数进行乘性运算，将会自动转换成数值。

乘法（*）

超过数据范围返回Infinity或-Infinity；

有一个操作数是NaN返回NaN；

Infinity和0相乘，返回NaN;

Infinity和非零数值，Infinity相乘，返回Infinity;

除法（/）

　　x/NaN，NaN/x，Infinity/Infinity，x/0返回NaN。

求模（%）

x/Infinity，x/0 => NaN

x(有限数值)/Infinity => x

5. 加性操作符

加法

可以进行数值运算或者字符串运算。

如果有一个操作数是字符串，另外一个操作数将转换成字符串然后连接。

减法

非数值性操作数将转换成对应数值。

6. 关系操作符

小于（<），大于（>），小于等于（<=），大于等于（>=）
和数值的比较，非数值操作数将转换为数值。
字符串之间按字典序比较。

7. 相等操作符

相等（==）和不相等（!=）
两个操作数会先做强制类型转换，然后再比较他们的相等性。不同数据类型转换规则：

1. Boolean -> 0 or 1
2. String 比较 Number：String -> Number
3. Object 比较其他类型，对象会取valueOf()方法返回的值
4. null == undefined // true
5. null == anything // false
6. null != anything // true
7. 如果两个操作数都是对象，则当他们指向同一个对象时相等。

全等（===）和不全等（!==）

1. 如果两个操作数数据类型不相等返回false而不会进行类型转换。

8. 条件操作符（`? :`）

9. 赋值操作符（`=`）

10. 逗号操作符（`,`）：返回最后一项

三、语句

就算只有一行代码，最好也用{ }括起来。

if语句
do-while()语句
while语句
for语句

在for语句中定义的变量，就算在语句结束后也仍然生效，因为var定义变量是函数作用域。
```
var count = 10;

for (var i = 0; i < count; i++) {

    // do something...

}

alert(i);   //
```
for-in语句

输出顺序不定。循环之前应该先确认对象的值是不是null或undefined。
```
for (property in expression) {

    statement

}
```
label语句

label: statement

指定break或continue的位置。（和Java中相同。
break和continue语句

with语句

with语句的作用是将代码的作用域设置到一个特定的对象中。严格模式下不允许使用。

语法：with(expression) statement;

var qs = location.search.substring(1);

var hostName = location.hostName;

var url = location.href;

// 简化成以下代码

with(location) {

    var qs = search.substring(1);

    var hostName = hostName;

    var url = href;

}

switch语句

switch(expression) {

    case value1: statement

        break;

    case value2: statement

        break;

    case value3: statement

        break;

    ... // other case

    default: statement

}

其中expression可以为任何数据类型。这里需要判断expression === value。

四、函数

函数的基本语法：

function functionName(arg0, arg1, ..., argN) {

    // 函数声明

    statements

}

functionName(); // 函数调用

ECMAScript中调用函数时的参数可以和函数声明时参数个数不同。ECMAScript中的参数在内部使用一个数组来表示的，在函数体内可以通过arguments对象来访问这个参数数组。

arguments并不是Array的实例，但是可以通过arguments[index]获取任意一个元素。通过arguments.length可以获得参数个数。

我们可以通过参数个数的判断实现重载。但是JavaScript中本身是没有函数重载的，如果定义了名字相同的多个函数，那么将只有最后的函数生效。

function doAdd(num1, num2) {

    if (arguments.length == 1) {

        alert(num1 + 10);

    } else if (arguments.length == 2) {

        alert(arguments[0] + num2); // arguments[0] is equals to num1

    }

}

arguments和命名参数是同步的，但是未传递的参数不可以通过改变arguments改变。谨记arguments不是数组。

function doAdd(num1, num2, num3) {

    console.log(arguments.length); //

    console.log(num1, num2, num3, arguments[0], arguments[1], arguments[2]); // 1 2 undefined 1 2 undefined

    num1 = 3; arguments[1] = 4; arguments[2] = 5;

    console.log(arguments.length); //

    console.log(num1, num2, num3, arguments[0], arguments[1], arguments[2]); // 3 4 undefined 3 4 5

}

doAdd(1, 2);

码农公寓