《JavaScript高級程序設計》筆記：基本概念

時間 2019-11-09

標籤 javascript 高級程序設計筆記基本概念欄目 JavaScript 简体版

原文原文鏈接

1、寫在前面

最近重讀《JavaScript高級程序設計》，總結下來，查漏補缺。javascript

2、JS簡介

2.1 JS組成

ECMAscript：以ECMA-262爲基礎的語言，由瀏覽器支持
DOM：編程接口（API）, 將頁面映射成節點結構（文檔樹），提供操做方法
BOM：瀏覽器對象模型，處理瀏覽器窗口和框架交互（部分擴展）

2.2 <script>

實如今HTML中插入JS
內嵌，外聯（好處：可維護，可緩存，適應將來）
推薦放在body中、內容後，縮短內容呈現時間（瀏覽器遇到body呈現內容）

參數：html

async: 當即下載腳本（外部文件），異步執行java
- 不保證按出現順序執行
- 多個async時，保證互不依賴，建議無修改DOM操做
- 在頁面load前執行，不必定在DOMContentLoaded事件觸發前執行
charset: 指定代碼字符集（不多用，部分瀏覽器忽略該參數）
defer: 下載後延遲執行，文檔徹底解析顯示後執行編程
- 延遲腳本，延遲到</html>後執行，頁面load前執行
- 最好只有一個延遲腳本（HTML5要求按出現順序執行，但實際不必定按順序執行，也不必定會在DOMContentLoaded事件觸發前執行）
language: 標明編寫語言（廢棄）
src: 外部文件及地址連接segmentfault
- src、標籤間嵌入內容同時存在，src下載執行，嵌入內容不被解析
type: 標明內容類型（MIME類型），默認text/javascript瀏覽器
- 其餘application/x-javascript，application/javascript，application/ecmascript

2.3 文檔模式

混雜模式
標準模式

2.4 <noscript>

早期瀏覽器不支持腳本/腳本被禁用時顯示，使用noscript平穩退化緩存

<body>
    <noscript>您的瀏覽器不支持腳本/腳本被禁用</noscript>
</body>

2.5 PS：

1. async和defer區別？網絡

藍色線表明網絡讀取，紅色線表明執行時間，均針對腳本；綠色線表明 HTML 解析。app

默認，同步，順序解析，解析到當即加載，加載完當即執行。
defer，異步，同時加載，html解析完成後執行（多個，不必定按順序執行，適用外鏈腳本）（HTML5要求按出現順序執行，但實際不必定，不必定會在DOMContentLoaded事件觸發前執行）
async，異步，同時加載，加載完當即執行（多個，亂序執行）

2. XHTML和HTML主要不一樣？框架

元素必正確嵌套，防止<a><b></a></b>
單標籤< />、雙標籤<> </>閉合
標籤名、屬性大小寫敏感
必須有根元素

3、基本概念

3.1 ECMAScript語法

區分大小寫

標識符：
- 參數，變量，屬性，函數名
- 以字母、下劃線_、$開頭
- 慣例爲駝峯
- 名稱不能爲關鍵字
註釋：
- 單行註釋 / /
- 塊級註釋 /* */
嚴格模式：編譯指示" user strict "
語句：
- 推薦以分號；結尾
- if( ) 可省略代碼塊{ }直接書寫語句，但推薦不省略
關鍵字：
- break case catch continue debugger default delete
- do else finally for function if in
- instanceof new return switch this throw try
- typeof var void while with
保留字：
- abstract boolean byte char class const debugger double
- enum export extends final float goto implements import
- int interface long native package private protected public
- short static super synchronized throws transient volatile
- 外加let、yield、eval、arguments

3.2數據類型

變量：鬆散類型（可修改值的類型），var建立時有做用域

只定義未初始化，值爲undefined
不推薦在局部中定義全局變量

數據類型：

簡單（基本）數據類型：number，string，Boolean，undef，null
複雜數據類型：Object

typeof操做符:

值：number，string，boolean，undefined，null，object，function
特殊狀況： typeof null ---> object 被認爲是空對象指針

對象：

空對象，初始化時obj = null 經過 obj != null 來看是否保存對象引用
新建對象：new Object( ) 或 new Object

布爾：

true false 區分大小寫

數值：

八進制（嚴格模式下失效），0開頭，後續值超過7則 079無效，解析爲79
十六進制，不區分大小寫，0x開頭歐，後續0-九、A-F
科學計數法，123e7或123e-7，浮點數最大精度17位小數
浮點數進行計算，結果不許確
數值範圍Number.MIN_VALUE 5e-324 ~ Number.MAX_VALUE 1.7976931348623157e+308，超出對應±infinity
NaN，返回不爲數值，也爲數值類型，不影響代碼執行，操做NaN都返回NaN，與任何值都不相等

字符串：

0或多個16位unicode字符組成
單雙引號無區別
字符字面量：\n \t \b \r \f \\ \' \" \x \u 及6位unicode字符
一旦建立，值不可改變，只能---->新的建立，銷燬原來的(舊版瀏覽器執行速度慢)

3.3 方法

數值

isNaN( )隱式轉換數值
Number( )，null ----> 0，undefined ---> NaN，八進制前導0失效，十六進制轉換爲十進制整數
parseInt( )，直到不是數字，保留整數，識別八進制、十六進制，可指定第二個參數parseInt（a，8）指定八進制
parseFloat( )，不解析前導0，可用於：科學計數法轉徹底展現

字符串：

toString（a）參數可設置進制，數據轉換值，有些不能轉換（undefined，null）
String（）遵循先按toString執行，不成功再按String（）轉換（undefined----> undefined , null ----> null ）

對象：

constructor 建立實例的函數（構造函數）
hansOwnProperty 檢查當前對象中存在某屬性（不查原型）
isPrototypeOf 檢查是不是某對象的原型
propertyIsEnumerable 可否使用for-in枚舉
toLocaleString 返回對象字符串表示
toString( ) 對象的字符串表示
valueOf( ) 返回對象的字符串、數值或布爾值

3.3 操做符

算數、位、關係、相等操做符

一元操做符（隱式轉換）：

只能操做一個值
前置（副效應：語句被求值前值改變）
後置（語句被求值後值改變）
含對象，執行valueOf( ) 後獲得的值進行加減

位操做符：

轉換爲32位整數，31位二進制數+ 1位符號位（0正1負）
按位非 ~ 獲得值的負值 - 1（底層操做，比 - a - 1 快）
按位與 & 二進制每位相與得出二進制值
按位或 | 二進制每位相或得出二進制值
按位異或^ 兩位相異則爲1，不然爲0
左移 << 移動後補0，不影響符號位
右移 >> 保留符號位，移動後補0
無符號右移 >>> 不保留符號位，負數通常右移後很大

布爾操做符：

非！
與 && 短路操做（有 false 則不往下執行），null 返回null，NaN返回NaN ，undefined返回undefined
或 || 短路操做（有true 則不往下執行）

乘性操做符：

隱式轉換爲數值後計算，/ 除法，% 取餘

加性操做符：

+ 加法， - 減法

關係操做符：

< 、 >、 <=、 >=
都爲字符串時，比較字符串字符編碼值
有對象，轉valueOf( )，不成則toString（）
字符串比較，大寫小於小寫，如需比較可全轉小寫
都爲字符串的數字，則按編碼比
一個數字一個字符串，會轉爲數值
轉換出NaN，則結果false

相等操做符：

強制轉換規則：有布爾轉爲數值、有數有字符串轉爲數值
只有一個對象，按照valueOf（）轉換後比較
null == undefined，null !== undefined
兩個對象，比較是否指向同一對象

條件操做符：條件？‘真，取值’：‘假，取值’
賦值操做符：

=、 +=、 *=、 /=、 %=、 <<=、 >>=、 >>>=（簡化書寫，不影響性能）

逗號操做符：

分隔多個操做
a =（1,2,3,4）,a值爲最後一個4

3.4 PS:

1. valueOf與toString

推薦閱讀《javascript高級程序設計》筆記：valueOf() / toString() 對比

2. 負數的二進制表示：

絕對值的二進制碼，按位取反，加1，獲得

3. 按位非運算符 ~

function fast() {
    let s = 2222222222; 
    let start1 = Date.now();
    for (var i = 1; i<10000000000;i++) { s = ~ s }; 
    console.log('fast',Date.now() - start1); 
 }; 
 function slow() {
    let s = 2222222222; 
    let start2 = Date.now();
    for (var i = 1; i<10000000000;i++) { s = - (s + 1) }; 
    console.log('slow',Date.now() - start2); 
 };
 fast();
 slow();

相差4-5秒左右，底層運算更快

4. && || 操做
let d = { name: 'aa' } ,??表明某參數

d && ?? 返回??
?? && d ??爲true返回d，不然返回??
有null NaN undefined 返回對應null NaN undefined
d || ?? 返回 d
?? || d ??爲false返回d
d || e 返回 d
都是null NaN undefined 返回對應null NaN undefined

3.5 語句

if （條件） { 代碼塊 }
do-while 後測試循環語句，while中知足則執行
while 前測試循環語句
for ：while作不到，for也作不到、for( ; ; )三參數可選
for-in 循環對象屬性，順序不可預測
label 名字：語句，結合for循環，方便continue 名字執行該操做，break 名字中斷名字操做
break continue
with 將代碼做用域設置到特定對象中，影響性能，不建議使用

with（location） { 
    var t = search.name;
    var w = hostname;
}
// 等同於
var t = location.seatch.name;
var w = location.hostname;

switch 全等比較（不進行類型轉換），能夠合併狀況，case可爲變量、表達式，

switch (i) {
    case 25: 
        /* 合併兩種情形 */
    case 35: 
        alert("25 or 35");
        break;
    ...
}

3.6 函數

function （參數） {函數體}

定義的參數個數能夠≠傳入參數個數，適用傳參個數不定執行不一樣操做
可function acc（a）傳acc( ) 或function acc（）傳acc(1,2)
內部可用arguments來訪問參數，若是a對應arguments[0]，兩值內存空間獨立，但互相同步
沒有重載：函數沒有簽名，同名函數後定義的生效

讀取這兩個值會訪問相同的內存空間；它們的內存空間是獨立的，但它們的值會同步。但這種影響是單向的： 修改命名參數不會改變arguments中對應的值。另外還要記住，若是隻傳入了一個參數，那麼爲arguments[1]設置的值不會反應到命名參數中。這是由於arguments對象的長度是由傳入的參數個數決定的，不是由定義函數時的命名參數的個數決定的。

書中：修改命名參數不會改變arguments中對應的值。 實際改變arguments[0]會同步a ，改變a也會同步argumenets[0]