《JavaScript高級程序設計》（第3版）讀書筆記第3章

時間 2019-12-07

標籤 javascript 高級程序設計讀書筆記欄目 JavaScript 简体版

原文原文鏈接

函數名不能使用關鍵字（typeof不行但typeOf能夠，區分大小寫）
標識符就是指變量、函數、屬性的名字，或者函數的參數。javascript
1. 第一個字符必須是一個字母、下劃線（_）或者一個美圓符號（$）
2. 其餘字符能夠是字母、下劃線、美圓符號或者數字
嚴格模式在嚴格模式下ECMAScript3中的一些不肯定的行爲將獲得處理，並且某些不安全的操做也會拋出錯誤。

// 在整個腳本頂部添加
"use strict";

// 在函數內部上方使用
function deSmoething() {
    "use strict";
    // 函數體
}

關鍵字和保留字

break,do,instanceof,typeof,case,else,new,var,catch,finally,return,viod,continue,for,switch,while,debugger*,function,this,with,default,if,throw,delete,in,tryjava

在函數中不用var聲明變量會變成全局變量，有效但不推薦

function test() {
    message = 'hi'; //全局變量
}
test()
alert(message);     // 'hi'

數據類型 ECMAScript中有5種簡單數據類型（也稱爲基本數據類型）：Undefined,Null,Boolean,Number,String 還有1種複雜數據類型Object。本質上Object是由一組無序名值對組成的。
typeof返回值"undefined","boolean","string","number","object","function" (typeof null 返回結果是"object") (typeof 是操做符不是函數所以最好不要用括號）

Undefined

// 在使用bar聲明變量但未對其加以初始化，這個變量的值就是undefined
var message;
alert(message == undefined); // true
alert(message === undefined); // true

// 下面這個變量並無聲明
// var age
alert(age); // 報錯

// 對於還沒有聲明過的變量，只能執行一項操做，即便用typeof操做符檢測其數據類型
// 對未經聲明的變量使用delete不會致使錯誤，但這樣沒什麼意義，並且在嚴格模式下確實會致使錯誤
var message;
// var age
alert(typeof message);     // "undefined"
alert(typeof age);        // "undefined"

// 二者都返回了undefined這個結果有其邏輯上的合理性。
// 由於雖然這兩種變量從技術角度看有本質區別，但實際上不管對那種變量也不可能執行真正的操做

Null 只有一個值的數據類型（null）

// 從邏輯角度來看，null值表示一個空對象指針，而這也正是使用typeof 操做符檢測null值時會返回"object"的緣由
var car = null;
alert(typeof car);         //    "object"

//  若是定義變量準備在未來用於保存對象，那麼最好將該變量初始化爲null而不是其餘值
if (car != null) {
   ...
}

// 實際上 undefined值時派生自null值得，所以ECMA-262規定他們的相等性測試要返回true
alert(null == undefined)     // true

Boolean 類型

// 雖然Boolean類型的字面值只有2個，但ECMAScript中全部類型的值都有與這兩個Boolean值等價的值。
// 任何非零的數字值（包括無窮大）返回true   0 和 NaN 返回false
var message = "Hello world!";
Boolean(message);  // true
Boolean(0);        // false
Boolean(NaN);      // false
Boolean(Infinity)  // true
Boolean({})        // true
Boolean(null)      // false

Number 類型

// 八進制若是字面值中的數值超出了範圍，那麼前導零將被忽略，後面的數值將被當作十進制數值解析
var num1 = 070;         // 八進制的56
var num2 = 079;         // 無效的八進制數值 解析爲79
var num3 = 08;          // 無效的八進制數值 解析爲8

// 八進制字面量在嚴格模式下是無效的，會致使支持該模式的JavaScript引擎拋出錯誤

// 十六進制字面值的前兩位必須是0x 後跟任何十六進制數字 （0~9 和 A~F）其中字母不區分大小寫
// 在進行算術計算時，全部八進制和十六進制表示的數值最終都將被轉換成十進制數值

// 鑑於JavaScript中數值的保存方式，能夠保存正零和負零，二者被認爲相等
0 === -0  // true

浮點數。

因爲保存浮點數值須要的內存空間是保存證書值得兩倍，所以ECMAScript會不失時機的將浮點數值轉換爲整數值。
浮點數值的最高精度是17位小數，但在進行計算時其精度遠遠不如證書。例如 0.1 + 0.2 = 0.30000000000000004
這是使用基於IEEE754數值的浮點計算的通病，ECMASscript並不是獨此一家

數值範圍。

因爲內存限制，ECMAScript可以表示的最小值保存在Number.MIN_VALUE 在大多數瀏覽器中這個值時 5e-324
最大值在Number.MAX_VALUE中在大多數瀏覽器中，這個值是1.7976931348623157e+308;
若是計算中超過了範圍將會自動轉換成Infinity或-Infinity
Infinity沒法參加計算
想要肯定某個值是否是有窮的（在範圍內）使用isFinite()函數
訪問Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY 也能夠獲得負和正Infinity的值

Infinity + -Infinity // NaN

var res = Number.MAX_VALUE + Number.MAX_VALUE;
alert(isFinite(res));     //    false

NaN 即非數值(Not a Number)

是一個特殊的數值，這個數值用於表示一個原本要返回數值的操做數值未返回數值的狀況
任何涉及NaN的操做都會返回NaN
NaN與任何值都不相等，包括NaN自己
isNaN() 在接受到一個值以後，會嘗試將其轉換爲數值，而任何不能轉換爲數值的值都會致使整個函數返回true

isNaN(NaN);     // true
isNaN(10);     // false
isNaN('10');     // false
isNaN('blue'); // ture
isNaN(true);     // false 能夠被轉換成數值1

// isNaN()也適用於對象，在基於對象調用isNaN()函數時，會首先調用對象的valueOf()方法，而後肯定該方法返回的值是否能夠轉換爲數值
// 若是不能，則基於整個返回值再調用toString()方法，再測試返回值
// 整個過程也是ECMAScript中內置函數和操做符的通常執行流程
var o = {
    valueOf: function() {
        return '10';
    }
}
isNaN(o)    // false 先返回'10' 再轉換成數值10

var o2 = {
    valueOf: function() {
        return 'blue';
    }
}
isNaN(o2)    // ture 先返回'blue' 不能轉換成數值

數值轉換。Number() parseInt() parseFloat()

Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
Number('') // 0

// 若是字符串中包含有效的十六進制格式，例如"0xf" 則將其轉換爲相同大小的十進制數值
// Number()也適用於對象，在基於對象調用isNaN()函數時，會首先調用對象的valueOf()方法，而後肯定該方法返回的值是否能夠轉換爲數值
// 若是不能，則基於整個返回值再調用toString()方法，再測試返回值

// 因爲Number()函數在轉換字符串時比較複雜並且不夠合理，所以在處理整數和浮點數的時候更一般的作法是用parseInt() 和 parseFloat()函數
Number('    0.2') // 0.2
Number('   02blue') // NaN
parseInt('   02blue') // 2
Number('    0.2blue;') // NaN
parseFloat('    0.2blue;') // 0.2

// 在使用parseInt() 解析八進制字面量的字符串時 ECMAScript 3 和 5 存在分歧
// ECMAScript 3 認爲56（八進制）， ECMAScript 5 認爲是70（十進制）
var num = parseInt("070")
// ECMAScript 5 中 parseInt()已經不具備解析八進制值得能力 即便在非嚴格模式下也是如此
// 能夠爲這個函數提供第二個參數避免歧義
var num = parseInt("0xAF", 16);  // 175
// 實際上，若是有第二個參數，字符串能夠不帶「0x」
var num1 = parseInt("AF", 16);   // 175
var num2 = parseInt("AF");   // NaN

// parseFloat() 從第一個字符開始解析，直到末尾，除非解析到碰見一個無效的浮點數爲止
// 第一個小數點有效以後就無效
// parseFloat() 只能解析十進制值，所以它沒有用的哥參數指定基數的用法,非十進制數值都返回0
// 若是字符串包含的是一個可解析爲整數的數，會返回一個整數
parseFloat("1234blue"); // 1234
parseFloat("0xA"); // 0
parseFloat("22.24.5")  // 22.24
parseFloat("0980.5"); // 980.5
parseFloat("3.125e"); // 31250000

String 類型

單引號和雙引號均可以用，單首尾必須匹配

字符字面量

\n 換行
\t 製表
\b 退格
\r 回車
\f 進紙
\ 斜槓
\' 單引號
\" 雙引號
\xnn 以十六進制代碼nn表示的一個字符（其中n爲0~F）例如 \x41表示"A"
\unnnn 以十六進制代碼nnnn表示一個Unicode字符（其中n爲0~F）例如 \u03a3 表示希臘字符 sigma 字符串length爲1

字符串的特色

ECMAScript 中的字符串時不可變的，字符串一旦建立，它們的值就不能改變
要改變某個變量保存的字符串，首先要銷燬原來的字符串，而後再用另外一個包含新值得字符串填充該變量

var lang = "Java";
lang = lang + "Script";
/*
 * 實現這個操做的過程
 * 首先建立一個能容納10個字符的新字符串，而後再這個字符串中填充"Java" 和 "Script"
 * 最後銷燬原來的字符串"Java"和字符串"Script"，由於這個兩個字符串都沒用了
 * 這個過程是在後臺發生的，而這也是某些舊版本的瀏覽器 （1.0如下的Firefox IE6等）拼接字符串速度很慢的緣由所在
 */

轉換爲字符串

使用幾乎每一個值都有的toString()方法數值、布爾值、對象和字符串值（沒錯，字符串也有）
在不知道要轉換的值是否是null或undefined的狀況下，還可使用轉型函數String()

// toSring()能夠傳一個參數：輸出數值的基數 默認十進制
var num = 10;
num.toString();   // "10"
num.toString(2);  // "1010"
num.toString(8);  // "12"
num.toString(10); // "10"
num.toSring(16);  // "a" 

null.toString();  // 報錯
undefined.toString() // 報錯 

String(null); // "null"
String(undefined); // "undefined"

Object 類型

// 三種寫法等價 但不建議省略小括號
var o = {};
var o = new Object();
var o = new Object;
o.constructor // ƒ Object() { [native code] }  就是Object()

從技術角度講，ECMA-262中對象的行爲不必定適用於JavaScript中的其餘對象。瀏覽器環境中的對象，好比BOM DOM中的對象都屬於宿主中的對象

Object 的每一個實例都具備下列屬性和方法es6

constructor: 保存着用於建立當前對象的函數
hasOwnProperty(propertyName): 用於檢查給定的屬性在當前對象實例中（而不是在實例的原型中）是否存在。其中propertyName必須爲字符串
isPrototypeOf(object): 用於檢查傳入的對象是不是當前對象的原型
propertyIsEnumerable(propertyName): 用於檢查給定的屬性是否能使用for-in語句來枚舉
toLocaleString(): 返回對象的字符串表示，該字符串與執行環境的地區對應
toString(): 返回對象的字符串
valueOf(): 返回對象的字符串、數值或布爾值表示。一般與toString()方法的返回值相同

// Baz.prototype, Bar.prototype, Foo.prototype 和 Object.prototype 在 baz 對象的原型鏈上：
function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

操做符

包括算數操做符、位操做符、關係操做符和相等操做符

遞增和遞減操做符

前置型在賦值前改變
後置型在賦值後改變

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;         // 21
var num4 = num1 + num2;           // 21

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;         // 22
var num4 = num1 + num2;           // 21

在應用於一個包含有效數字字符串時，先將其轉換爲數值
在應用於一個包含有效數字的字符串時，將變量的值設置爲NaN，字符串變量變成數值變量
false，先將其轉換爲0
true，先將其轉換爲1
浮點數，正常加減1
對象，先調用vlueOf()方法，若是結果是NaN則調用toString()方法後再應用前述規則

var s1 = "2";
var s2 = "z";
var b = false;
bar f = 1.1;
var o = {
    varluOf: function() {
        return -1;
    }
};

s1++;        // 3
s2++;         // NaN
b++;        // 1
f--;         // 0.10000000000000009 浮點運算舍入錯誤致使
o--;        // -2

一元加減操做符

+號會對值自動轉換成數值
-號會變成負數

位操做符

ECMAscript中的全部數值都以IEEE-754 64位格式存儲，但位操做符並不直接操做64位值。而是先將64位的值轉成32位的整數，而後執行操做，最後再將結果轉回64位。
32位中的前31位表示整數的值，第32位表示數值的符號，0爲正數 1爲負數，即爲符號位
正數以純二進制格式存儲，沒有用到的位用0填充
負數一樣二進制，但使用的格式是二進制補碼express
- 求數值絕對值的二進制碼
- 求二進制反碼將0換成1 1換成0
- 獲得的二進制反碼加1
NaN 和 Infinity 應用位操做符時，會被當作0處理，因爲64位轉存32位致使
按位非（NOT） ~
按位與（AND） &
按位或（OR） |
按位異或（XOR） ^ 兩個數值對應位上只有一個1時才返回1，其餘狀況返回0
左移 << 右側以0填充
有符號的右移 >> 數值向右移動，保留符號位，左側以符號位數值填充
無符號的右移 >>> 數值向右移動，不保留符號位，左側以0來填充

var oldvalue = 64;
var newvalue = oldvalue >> 5;        // 二進制10

var oldvalue = 64;
var newvalue = oldvalue >>> 5;      // 二進制 10

var oldvalue = -64;
var newvalue = oldvalue >>> 5;         // 等於十進制的134217726

布爾操做符

邏輯非 !

!"blue"       // false
!0            // true
!NaN          // true
!null         // true
!undefined    // true
!""           // true
!12345        // false

邏輯與 && 邏輯與是短路操做，若是第一個操做數可以決定結果，就不會對第二個操做數求值數組
```
var found = true;
var result = (found && someUndefinedVariable);     // 拋出錯誤
alert(result);         //    這裏不會執行

var found = false;
var result = (found && someUndefindedVariable);     // 不會發生錯誤
alert(result);         // false
```
- 若是第一個操做數是對象，則返回第二個操做數
- 若是第二個操做數是對象，則只有在第一個求值結果爲true的時候纔會返回該對象
- 若是兩個都是對象，則返回第二個操做數
- 若是有一個操做數是null 則返回null
- 若是有一個操做數是NaN 則返回NaN
- 若是有一個操做數是undefined 則返回undefined
- 若是求值的操做數沒有聲明會拋出錯誤
邏輯或 || 短路操做瀏覽器
```
var found = true;
var result = (found || someUndefinedVariable);     // 不會拋出錯誤
alert(result);         // true   

var found = false;
var result = (found || someUndefindedVariable);     // 發生錯誤
alert(result);         // 這裏不會執行
```
- 若是第一個操做數是對象，則返回第一個操做數
- 若是第一個操做數求值爲false，則返回第二個
- 若是兩個都是對象，則返回第一個操做數
- 若是兩個操做數都是null 則返回null
- 若是兩個操做數都是NaN 則返回NaN
- 若是兩個操做數都是undefined 則返回undefined
- 若是求值的操做數沒有聲明會拋出錯誤

乘性操做符

若是參與計算的某個操做數不是數值，後臺會先試用Number()轉型函數
若是有一個操做數是NaN 則結果是NaN
若是Infinity 與 0 相乘則結果是NaN
若是Infinity 與非0相乘則結果是Infinity 或 -Infinity
Infinity * Infinity = Infinity
-Infinity * Infinity = -Infinity
Infinity / Infinity = NaN
0 / 0 = NaN
非0的有限數 / 0 = Infinity 或 - Infinity
0 / 非0的有限數 = Infinity 或 - Infinity
有限數值 % 0 = NaN
Infinity % Infinity = NaN
Infinity % 有限數值 = NaN
Infinity + -Infinity = NaN
+0 + -0 = +0
兩個操做數都是字符串結果是拼接字符串
若是隻有一個操做數是字符串，則將另外一個操做數轉換爲字符串
+0 - -0 = +0

var num1 = 5;
var num2 = 10;
var message = "the sum of 5 and 10 is " + num1 + num2;
alert(message);    // "the sum of 5 and 10 is 510"
var message = "the sum of 5 and 10 is " + (num1 + num2);
alert(message);    // "the sum of 5 and 10 is 15"

var res6 = 5 - null;  // 5 null轉爲0

關係操做符

若是兩個操做數都是字符串，則比較兩個字符串對應的字符編碼值
若是一個操做數是數值，則將另外一個操做數轉換爲一個數值進行比較
若是一個操做數是對象，調用valueOf()方法，若是沒有則調用toString()
若是一個操做數是布爾值，則先將其轉換爲數值
任何操做數與NaN進行關係比較，結果都是false

// 字母B的字符編碼爲66 而字母a的字符編碼是97
// 若是要真正按照字母順序比較字符串，就要相同大小
var result = "Brick" < "alphabet";         // true
var result = "Brick".toLowerCase() < "alphabet".toLowerCase();     // false

// "2" 字符編碼是50，而"3"的字符編碼是51
var result = "23" < "3";    // true
var result = "23" > 3;    // false

var result = "a" < 3;     // false 由於"a"被轉換成了NaN

var result = NaN < 3;    // false
var result = NaN >= 3;    // false

相等操做符

相等和不相等 == , !=安全
- 這兩個操做符都會先轉換操做數（一般稱爲強制轉型），而後再比較他們的相等性
- 若是有一個操做數是布爾值，先轉爲1或0再比較
- 若是一個是字符串另外一個是數值，則轉換爲數值比較
- 對象先調用valueOf()，用獲得的基本類型值按照前面規則進行比較
- null 和 undefined 相等
- 比較以前不能講null和undefined轉換成其餘任何值
- 若是有一個操做數是NaN，則相等操做符返回false， NaN也不等於NaN
- 若是兩個操做數都是對象，則比較他們是否是同一個對象，若是都指向同一個對象，則相等操做符返回true
全等和不全等 ===, !==函數
- 除了比較以前不轉換操做數類型，全等和不全等與相等和不相等操做符沒有掃碼區別。

null == undefined     // true
null === undefined    // false null 和 undefined是兩個基本類型

條件操做符（條件運算符、三元表達式）

variable = boolean_expression ? true_value : false_value;

賦值操做符

= 把右側的值賦給左側的變量
*= /= %= += -=
<<= 左移賦值
'>>=' 有符號右移賦值
'>>>=' 無符號右移賦值
主要目的就是簡化賦值操做，使用它們不能帶來任何性能的提高

逗號操做符

使用逗號操做符能夠在一條語句中執行多個操做
逗號操做符總會返回表達式中的最後一項

var num1=1, num2=2, num3=3;
var num = (5,3,2,4,0);     // num的值爲0

語句

if語句

推薦代碼塊寫法

do-while 語句

後測試循環語句，只有在循環體中的代碼執行以後，纔會測試出口條件

var i = 2;
do {
    i += 2;
    console.log(i);
} while (i < 2);

// 打印 4

while 語句

前測試循環語句，在循環體內的代碼被執行以前，就會對出口條件求值

var i = 2;
while (i < 2 ) {
    i += 2;
    console.log(i);
}
// 沒有打印

for 語句

前測試循環語句，在循環體內的代碼被執行以前，就會對出口條件求值
使用while循環作不到的，使用for循環一樣作不到，也就是說for循環只是把循環有關的代碼集中在了一個位置
因爲ECMAScript中不存在塊級做用域，所以在循環內部定義的變量也能夠在外部訪問到

// 無限循環
for (;;) {
    ...
}

for-in 語句

for-in語句是一種精準迭代語句，能夠用來枚舉對象的屬性
循環輸出的屬性名的順序是不可預測的，根據瀏覽器而異
迭代對象爲null或undefined會拋出錯誤， ECMAScript 5 更正了這一行爲，再也不拋出錯誤，而是不執行語句

label語句

加標籤的語句通常都要與for語句等循環語句配合使用

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i == 1 && j == 1) {
         continue loop1;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

var itemsPassed = 0;
var i, j;

top:
for (i = 0; i < items.length; i++){
  for (j = 0; j < tests.length; j++){
    if (!tests[j].pass(items[i])){
      continue top;
    }
  }

  itemsPassed++;
}

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i == 1 && j == 1) {
         break loop1;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
// Notice the difference with the previous continue example

break和continue語句

break會當即退出循環
continue雖然也會當即退出循環，但會從循環頂部繼續執行

with語句（不推薦使用）

嚴格模式下不能使用
定義with語句的目的主要是爲了簡化屢次編寫同一個對象的工做
大量使用with語句會致使性能降低，同時也會給調式代碼形成困難

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語句

經過爲每一個case後面都添加一個break語句，就能夠避免同時執行多個case
假如確實須要混合集中情形，不要忘了添加註釋，說明有意省略了break關鍵字
switch語句在比較值時使用的是全等操做，所以"10"不等於10

switch (i) {
    case 25:
        // 合併兩種狀況
    case 35:
        alert("25 or 35");
        break;
    case 45:
        alert("45");
        break;
    default:
        alert("Other");
}

函數

return語句能夠不帶任何返回值，函數在中止執行後返回undefined
推薦的作法是要麼讓函數始終都返回一個值要麼永遠都不要返回值，不然會給調試帶來麻煩
嚴格模式對函數有一些限制，不然會拋出錯誤oop
- 不能把函數命名爲eval或arguments
- 不能把參數命名爲eval或arguments
- 不能出現兩個命名參數同名的狀況

理解參數

ECMAScript函數不介意傳遞進來多少個參數，也不在意數據類型，即使定義接受兩個參數，調用時也未必要傳兩個
緣由是ECMAScript中的參數在內部是用一個數組來表示的，在函數體內能夠經過arguments對象來訪問這個參數數組
arguments對象只是與數組相似，它並非Array的實例，能夠用方括號語法訪問每一個元素，也有length屬性
函數體內部能夠arguments[0],arguments[1]...不顯式地使用參數，說明ECMAScript函數的一個重要特色：命名的參數只提供便利性，但不是必需的，解析器不會驗證參數名
函數體內能夠直接使用arguments[1] = 10 來給參數賦值，但嚴格模式下會報錯不能使用