《JavaScript高级程序设计》Chapter03 JavaScript语言基础

Syntax
Variable
- var
- let
- const
Data Type
- Undefined
- Null
- Boolean
- Number
- String
- Symbol
- Object
Operator
Statement
- for-in
- for-of
- break,continue,label
- with
- switch

Syntax

类C
区分大小写，标识符可以字母、下划线_、美元符号$开头
语句以分号;结尾：虽然不加分号也是被允许的，但会导致性能的降低，也易出现问题
严格模式(strict mode)：对一些不规范写法进行处理，对不安全活动将抛出错误。
- 在脚本开头或函数体开头加上："use strict";
```
function do (){

    "use strict";

    // 函数体

}
```

Variable

var

var定义的变量会成为包含它的函数的局部变量，函数退出时即被销毁，即声明的范围为函数作用域
- 可以通过省略var来定义一个全局变量，但这样做是不被推荐的；严格模式下，这样做会抛出ReferenceError异常

var的声明提升(hoist)：使用var关键字声明的变量会自动提升到函数作用域的顶部【将所有变量声明拉到函数作用域顶部】

// 以下二者是等价的，均不会报错，输出undefined

function foo() {

    console.log(age); // undefined

    var age = 20;

}

function foo(){

    var age;

    console.log(age); // undefined

    age = 20;

}

使用var反复多次声明同一个变量是被允许的

function foo(){

    var age = 12;

    var age = 15;

    var age = 18;

    var age = 21;

    console.log(age); // 21

}

let

let与var作用类似，不同的是let声明的范围为块作用域

块作用域是函数作用域的子集，因此适用于var的作用域限制同样适用于let

if(true){

    var name = "Leo";

    console.log(name); // Leo

}

console.log(name); // Leo

-------------------------------

if(true){

    let name = "Leo";

    console.log(name); // Leo

}

console.log(name); // ReferenceError: name is not defined

在同一个块作用域中，let不允许进行冗余声明是（SyntaxError）

声明冗余报错不会因混用let和var受到影响：这两个关键字声明的不是不同类型的变量，只是指出变量在相关作用域如何存在

var num = 1;

console.log(num); // 1

{

    let num = 2;

    console.log(num); // 2

}

let num = 1;

console.log(num);

{

    var num = 2; // SyntaxError: Identifier 'num' has already been declared

    console.log(num);

}

暂时性死区：let声明的变量不会在作用域中被提升（hoist），必须先声明后引用
- let声明之前的执行瞬间称为“暂时性死区”，此阶段引用任何后面才声明的变量都会抛出ReferenceError
全局声明：let在全局作用域中声明的变量不会成为window对象的属性，而var声明的变量会

for循环中的let声明：

用var定义迭代变量会渗透到循环体外部，let定义迭代变量的作用域仅局限于for循环块内部

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

    // 循环逻辑

}

console.log(i); // 5

--------------------------

for(let i=0; i<5; i++){

    // 循环逻辑

}

console.log(i); // ReferenceError: i is not defined

使用let声明迭代变量，JavaScript引擎在后台为每个迭代循环都声明一个新的迭代变量。

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

    setTimeout(()=>console.log(i),0); // 5 5 5 5 5

}

---------------------------------------

for(let i=0;i<5;i++){

    setTimeout(()=>console.log(i),0); // 0 1 2 3 4

}

const

与let行为基本相同
- 不允许重复声明，块声明作用域
- 区别：声明的同时必须初始化，切不可修改const声明的变量的值(TypeError)
  - 此限制只适用于其指向的变量的引用（const变量引用的为一个对象时，修改const对象内部属性是被允许的）
  - 不能用const声明迭代变量

Data Type

Undefined

使用var或let声明变量但未初始化时，变量会被赋予初始值undefined
具有值undefined的变量与未定义的变量是有区别的
- 赋值为undefined的变量是存在的，只是值为undefined；未定义的变量不存在，但对其typeof仍会返回undefined。二者是存在根本差别的
```
let message;

// let age; //确保未被声明过

console.log(message); // undefined

console.log(age); // ReferenceError: age is not defined

console.log(typeof message); // undefined

console.log(typeof age); // undefined
```
undefined是假值

Null

null表示一个空对象指针，typeof null会返回object
undefined由null派生而来，ECMA-262将他们定义为表面上相等
- undefined永远不必显示设置；但当变量需要保存一个对象且此时没有对象可以保存，就应当以null对变量进行填充，保持null的空对象指针语义，从而与undefined区别开来
null是假值

Boolean

转型函数：Boolean(param);

数据类型转为true 转为false

Boolean true false

String 非空字符串空字符串

Number 非零数值 0，NaN

Object 任意对象 null

Undefined \ undefined

数据类型	转为true	转为false
Boolean	true	false
String	非空字符串	空字符串
Number	非零数值	0，NaN
Object	任意对象	null
Undefined	\	undefined

Number

八进制字面量：以0o开头，后续数字均为0~7
- 后续数字一旦有超过0~7的范围，数字序列就被当做十进制解释
- 严格模式下，八进制字面量是无效的
十六进制字面量：以0x开头，后续数字为0~9和 a~f，分别代表0~15
- a~f大小写均是被允许的
浮点值
- ECMAScript会想方设法将值转换为整数值：小数点后面没有数字或只有0时，会被转换为整数进行处理
- 浮点值精度可达17位小数，但算数计算并不精准（IEEE 754数值造成的错误）
```
console.log( 0.1+0.2 == 0.3 ); // false  0.1+0.2得到结果为0.30000000000000004，出现舍入错误
```
数值的范围
- Number.MIN_VALUE(5e-324) ~ Number.MAX_VALUE(1.797693134862315e+308)
- 任何超出可表示范围的正负数会被表示为 ±Infinity
  - 可以用函数 isFinite(param) 判断一个数是否在可表示范围内
NaN (Not a Number)：表示本来要返回数值的操作失败了
- 任何涉及NaN的操作均返回NaN，NaN不等于包括NaN在内的任何值
- 利用 isNaN(param) 函数可以判断一个数是否“不是数值”：此函数会先将不是数值的值尝试转换成数值，任何不能转换为数值的值都会使这个函数返回true
```
console.log(isNaN(NaN)) // true

console.log(isNaN(10)) // false

console.log(isNaN("10")) // false  可转为数值10

console.log(isNaN("blue")) // true  不可转为数值

console.log(isNaN(true)) // false  可转为数值1
```

数值转换函数

Number(param)：param可为任意数据类型

数据类型	转换规则
Boolean	true转为1，false转为0
Number	直接返回
Null	0
Undefined	NaN
String	只包含数值字符，会被直接转换为数值（包括数字、正负号、小数点）空字符串会转换为0 包含有效的十六进制格式(0x)，会被由十六进制串转换为相对应的十进制数值
Object	调用对象的valueOf( )方法，再按照上述规则转换返回值；若转换结果为NaN，则调用toString( )方法，按照转换字符串的规则转换

parseInt(param1,param2)：param1为字符串，param2为进制
- 直接忽略最前面的空格，从第一个非空格字符串开始转换
- 第一个非空格字符不是数值字符、正负号，会立即返回NaN（意味着空字符串会返回NaN）
- 转换直到字符串尾或最后一个非数值字符
```
console.log(parseInt("1234hello")); // 1234  hello被忽略

console.log(parseInt("12.34")) // 12  .不是有效的整数字符

console.log(parseInt("")); // NaN

console.log(parseInt("0xaf")); // 175  被解释为十六进制

console.log(parseInt("af",16)); // 175  被解释为十六进制
```

parseFloat(param)：与parseInt原理类似

console.log(parseFloat("1234hello")); // 1234  hello被忽略

console.log(parseFloat("12.34.56")); // 12.34

console.log(parseFloat("0123.45")); // 123.45

console.log(parseFloat("3.125e7")); // 31250000

String

表示零或多个16位Unicode字符序列，通过字符串的length属性可以获取其长度
ECMAScript中的字符串时不可变的，一旦修改某个变量中的字符串值，必须先销毁原字符串再将新的值存入该变量中
向字符串转换
- 几乎所有值都有方法 toString( )，返回当前值的字符串等价物
  - Number,Boolean,Object,String均有toString( )方法，null与undefined没有toString( )方法
  - 对Number调用toString( )方法时，可以传一个底数参数，表示以什么底数输出数值的字符串表示
- String(param)转型函数
  - param存在toString()方法则直接调用
  - 值为null则返回"null"，值为undefined则返回"undefined"
模板字面量：使用反引号，会保留字面量内的换行字符，以跨行定义字符串
字符串插值：模板字面量常用以支持字符串插值，即在一个连续定义中插入一个或多个值
- 字符串插值通过在 ${...} 中使用一个JavaScript表达式实现，插入的值会使用toString()强制转为字符串
```
let value = 19;

let str = `<div>

    <a href="#">

        <span>Leo is ${value} years old</span>

    </a>

</div>`;

console.log(str);
```
标签函数：自定义插值行为，前缀到模板字面量来应用自定义行为
- 第一个参数接收原始字符串被插值分割后形成的数组
- 由于插值表达式数量可变，应使用剩余操作符 ... 将它们收集到一个数组中

let value = 19;

let exp = 'second';

function tagFunc(strings, ...exp){

    console.log(strings);

    console.log(exp);

}

tagFunc`${value} to the ${exp} power is ${value*value}`;

// [ '', ' to the ', ' power is ', '' ]

// [ 19, 'second', 361 ]

Symbol

ECMAScript6新增数据类型，确保对象属性使用唯一标识符，不会发生属性冲突的危险

Symbol(string)：string为对符号的描述参数，与此符号的定义与标识完全无关

不能与new关键字一起作为构造函数使用，用以避免创建符号包装对象

let sym1 = Symbol('foo');

let sym2 = Symbol('foo');

console.log(sym1 == sym2); // false

全局符号注册表：运行时不同部分需要共享和重用符号实例时，以一个字符串作为键在全局符号注册表创建并重用符号
- Symbol.for(string)：使用某字符串调用时，检查全局运行时注册表，不存在相应符号则会创建一个新的符号实例，已存在则直接重用
- 即使采用相同的符号描述，全局注册表中定义的符号与Symbol()定义的符号也不等同
- 可以用Symbol.keyFor(param)查询全局注册表，param为符号实例，返回对应的描述字符串
```
let sym1 = Symbol.for('foo'); // 创建一个新的符号实例

let sym2 = Symbol.for('foo'); // 重用已有符号实例

console.log(sym1 === sym2); // true

let sym3 = Symbol('foo');

console.log(sym1 === sym3); // false

console.log(Symbol.keyFor(sym1)); // foo

console.log(Symbol.keyFor(sym3)); // undefined
```

符号添加为对象属性

let s1 = Symbol('foo'),

    s2 = Symbol('bar'),

    s3 = Symbol('baz'),

    s4 = Symbol('qux');

let obj = { [s1]:'foo val' }; // o[s1] = 'foo val';

Object.defineProperty(obj, s2,{ value: 'bar val', enumerable: true});

Object.defineProperties(obj, {

    [s3] : {value:'baz val', enumerable: true},

    [s4] : {value:'qux val', enumerable: true},

});

console.log(obj);

//{

//  [Symbol(foo)]: 'foo val',

//  [Symbol(bar)]: 'bar val',

//  [Symbol(baz)]: 'baz val',

//  [Symbol(qux)]: 'qux val'

//}

获取对象的符号属性

let s1 = Symbol('foo'),

    s2 = Symbol('bar');

let obj = {

    [s1]: 'foo val',

    [s2]: 'bar val',

    baz: 'baz val',

    qux: 'qux val'

};

console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(foo), Symbol(bar) ]

console.log(Object.getOwnPropertyNames(obj)); // [ 'baz', 'qux' ]

console.log(Object.getOwnPropertyDescriptors(obj));

//{

//  baz: { value: 'baz val', writable: true, enumerable: true, configurable: true },

//  qux: { value: 'qux val', writable: true, enumerable: true, configurable: true },

//  [Symbol(foo)]: { value: 'foo val', writable: true, enumerable: true, configurable: true },

//  [Symbol(bar)]: { value: 'bar val', writable: true, enumerable: true, configurable: true }

//}

console.log(Reflect.ownKeys(obj)); // [ 'baz', 'qux', Symbol(foo), Symbol(bar) ]

To be continued ......

Object

ECMAScript中的Object是所有对象的基类，任何对象都有这些属性与方法。每个Object实例都有如下属性与方法：

constructor：创建当前对象的函数
hasOwnProperty(propertyName)：判断当前对象是否含有给定属性(String)
propertyIsEnumerable(propertyName)：判断当前属性是否可用for-in语句枚举
toString()：返回对象的字符串表示
......

Operator

一元操作符

递增/递减：++/--

前缀时，先改变变量的值再对表达式求值；后缀时，先对表达式求值再改变变量的值

不限于整数，也可作用于以下类型的值

数值类型	规则
String	对有效数值形式则转为数值在改变，变量类型变为Number 对非有效数值形式，变量值变为NaN，变量类型变为Number
Boolean	将false转为0，将true转为1，再进行递增递减操作，变量类型变为Number
float	直接+1或-1（注意：浮点数的加减可能不精确，出现舍入错误）
Object	先调用对象的valueOf()方法，取到的值可操作则直接应用上述规则如果为NaN，则调用toString()并再次应用其他规则变量类型从Object变为Number

一元加减：+/-
- 主要用于基本的算数操作，但也可以用于数据类型转换
- 对于数值，+/- 仅做正负的改变；对于非数值，会执行与Number()函数相同的改变，再根据 +/- 改变正负

位操作符

按位与& 或| 非~ 异或^
左移<<：按指定位数将数字的所有位左移（右侧补0，左侧符号位保留）
右移
- 有符号右移>>：将所有的32位右移指定位，符号位保留（空位以符号位补充）
- 无符号右移>>>：将所有的32位右移指定位，空位以0补充（对于正数无差别，对于负数有很大差异）

布尔操作符

逻辑非!：现将操作数统一转为Boolean，再取反
- 可以用于将任意值转为Boolean型，与Boolean()转型函数等效：!!operand
逻辑与&&：短路操作符，当第一个操作数为false时就不会对第二个操作数求值
- 可用于任何类型操作数，不一定会返回Boolean值
  - 第一个操作数为Object，则返回第二个操作数；第二个操作数为Object，仅当第一个操作数求值为true才返回该Object
  - 两个操作数均为Object，则返回第二个操作数
  - 有一个操作数为NaN/undefined/null，直接返回NaN/undefined/null
逻辑或||：短路操作符，当第一个操作数为true时就不会对第二个操作数求值
- 可用于任何类型操作数，不一定会返回Boolean值
  - 第一个操作数为Object，则返回第一个操作数；第一个操作数求值为false，则返回第二个操作数
  - 两个操作数均为Object，则返回第一个操作数
  - 两个操作数均为NaN/undefined/null，则返回NaN/undefined/null
- 可以避免给变量赋值null或undefined
```
let obj = preferredObj || backupObj;
```
  - preferredObj为首选值，其不为null则会被赋给obj；backupObj为备用值，preferredObj为null时，其就会被赋给obj

乘性操作符

乘* 除/ 取模%
- 注意对0，Infinity，NaN的处理
- 运算时，会对非数值的操作数进行类型转换

指数操作符

Math.pow(base,power)：用于计算base的power次幂
- ECMAScript 7新增指数操作符 ** ，与Math.pow函数等效
- 指数操作符同样支持复合赋值操作：**=
```
console.log(Math.pow(11,2)); // 121

console.log(11**2); // 121

console.log(121**0.5); // 11
```

加性操作符

加+：计算数值时，需考虑Infinity，NaN，±0的情况
- 对两个字符串操作时，将第二个字符串拼到第一个后面；只有一个为字符串时，将另一个转为字符串后再拼在一起
- 任一操作数为Object时，会调用对象的valueOf()方法，由返回值参与加法运算；没有valueOf则先调用toString，得到的字符串再转为数值参与计算
```
let obj1 = {

    valueOf : function (){

        return -1;

    },

}, obj2 = {

    valueOf : function (){

        return "-2";

    }

}, obj3 = {

    valueOf : function (){

        return -2;

    }

};

console.log(obj1 + obj2); // -1-2

console.log(obj1 + obj3); // -3
```
减-：计算数值时，需考虑Infinity，NaN，±0的情况
- 对字符串、布尔值、null、undefined，会调用Number()转为数值再计算
- 其他情况规则与加法相同

关系操作符

包括：> < >= <=
- 操作数都是数值，执行数值比较
- 操作数都是字符串，则逐个比较字符串中对应字符的编码
- 有一个操作数是数值，则将另一个操作数转为数值，再做数值比较
- 任一操作数为Object，则调用其valueOf方法，对结果进行比较；若没有valueOf方法，则调用toString方法，对结果进行比较
- 对布尔值，将其转为数值再比较
- 涉及NaN的所有比较都会返回false

相等操作符

等于==和不等于!=：对比较的两操作数先进行强制类型转换，再比较是否相等
- 任一操作数为Boolean，将其转为数值再比较是否相等
- String与Number比较，尝试将String转为Number，再比较是否相等
- Object和非Object比较，调用对象的valueOf方法获取其原始值，再比较是否相等
- null == undefined，且它们不能转换为其他类型的值进行比较
- 只要涉及NaN，立即返回false（NaN == NaN也返回false）
- 两个Object比较，仅当两操作数指向同一对象时返回true
全等===和不全等!==：比较时不作任何强制类型转换
- null === undefined 返回false，因为他们是不同类型的值

条件操作符

variable = boolean_expression ? true_value : false_value ;

逗号操作符

用于在一条语句中执行多个操作
```
let num1 = 1, num2 = 2, num3 = 3;
```
赋值时用逗号操作符分隔值，最终会返回表达式中最后一个值
```
let num = (5,4,3,2,1,0); // num = 0
```

Statement

for-in

用于枚举对象中的非符号键属性
- 若迭代的变量是null或undefined，则不执行循环体
```
for (const propName in window){

    console.log(propName);

}
```

for-of

用于遍历可迭代对象的元素
- 会按照可迭代对象的next( )方法产生值的顺序迭代元素
- 尝试迭代的变量不支持迭代时，语句会抛出错误
```
let arr = [1,2,3,4];

for (const num of arr){

    console.log(num);

}
```

break,continue,label

break语句用于立即退出当前循环，强制执行当前循环后的下一条语句
continue语句也立即退出当前循环，但会再次从循环顶部开始执行

label语句用于给语句加标签，可以通过break和continue语句引用（常用于嵌套循环）：强制执行或强制退出标签所在循环

let num = 0;

outermost: for (let i=0; i<10; i++){

    for (let j=0; j<10; j++){

        if (i===5 && j===5){

            break outermost;

        }

        num ++;

    }

}

console.log(num); // 55

-------------------------------------

let num = 0;

outermost: for (let i=0; i<10; i++){

    for (let j=0; j<10; j++){

        if (i===5 && j===5){

            continue outermost;

        }

        num ++;

    }

}

console.log(num); // 95

with

用于将代码作用域设置为特定的对象，主要用于针对同一对象的反复操作

严格模式下，不允许with语句的使用

let obj = {

    value : 114514,

    str : 'fuck',

    name : 'obj'

};

with (obj) {

    console.log(value);

    console.log(str);

    console.log(name);

}

//114514

//fuck

//obj

switch

在每个case条件分支后，最好都加上break语句，否则代码会在匹配完当前条件后继续匹配下一条件

switch-case语句可以应用所有数据类型，条件的值也可以是变量或表达式

let str = 'hello world';

switch (str) {

    case 'hello'+' world':

        console.log('Greeting was found!'); //

        break;

    case 'goodbye':

        console.log('Closing was found');

        break;

    default:

        console.log('Unexpected message was found');

}

在比较每个条件分支的值时使用'==='，不会强制转换数据类型

巴特西