JavaScript學習記錄

時間 2019-11-20

原文原文鏈接

js整理筆記

一、數據類型
二、基本語法
三、js運算符
四、條件語句
五、類型轉換
六、函數
七、預編譯
八、做用域
九、閉包
十、對象建立方法
十一、this
十二、dom操做
1三、事件
1四、正則表達式javascript

JS代碼原則：高內聚，弱耦合php

ecmascript是一種語言標準，初版標準發佈於1997年，javascript是網景公司對ecmascript標準的一種實現。
js不區分整數和浮點數，統一用number表示，nan表示 not a number,沒法計算結果的時候用nan表示。
字符串string,是以單引號或者雙引號括起來的任意文本，好比'abc',"abc".
布爾值boolean,布爾值只有兩種值，true或者false。
&&與，||或，！非。
編程形式的區別：面向對象、面向過程
typeof:六種數據類型：number string boolean undefined object function
typeof返回的是對象的兩個object：null和{}css
瀏覽器組成
shell部分
內核部分
渲染引擎（html和css基礎語法識別、語法規則和渲染）
js引擎
其餘模塊
2008年穀歌發佈最新瀏覽器chrome，能把js代碼直接轉化成機械碼來執行。
js特色html

js是解釋性語言（瀏覽器讀一行翻譯一行，php/python也是解釋性語言）
優勢：跨平臺、單線程（異步傳輸數據：）
不足：速度較慢前端
js標準html5

標準是由ecma制定的因此有時候也叫ecmascript
延申兩個部分dom bom
js三大部分：ecmascript、dom、bom
js執行隊列：單線程，解釋性語言，異步傳輸java
主流瀏覽器的內核及私有前綴node

ie 內核：trident 私有前綴：-ms-
chrome webkit/blink -webkit-
firefox gecko -moz-
opera presto -o-
safari webkit -webkit-python
前端開發要求：結構（html）、行爲(js)、樣式(css)相分離
js變量（聲明變量的只有var，浮點型）
變量命名規則：必須以英文字母、下劃線和$開頭；變量名能夠包含英文字母、下劃線、$和數字；不能夠用特殊語法（關鍵字）和保留字做爲變量名；
js基本語法web

數據類型：

常見的數據類型：number string Boolean undefined object function
引用值(引用數據類型)和原始值(基本數據類型)惟一的不一樣是賦值形式不一樣
原始值：number boolean（true是1，false是0） string(字符串) undefined（變量沒有賦值） null（表示佔位，值爲空）屬於object類型
存放地方不同
原始值是存放在棧（stack）裏面的 「先進後出」
引用值和原始值惟一的根本區別是賦值形式不一樣。
原始值是不可改變的，一個房間已經寫了一個值，不能夠改變。
刪除數據的時候並不會刪除數據在內存中的位置，只是讓數據包的編號名字與該數據不對應，無從查找，可是依舊存在在內存中。只能二次覆蓋。
棧內存之間的賦值是拷貝，互相不影響，定義的進去的值不可改變

var z = 10;
var x = z;
z = 20;
document.write(x);
//輸出的x值是10；
引用值：array object function data regexp
引用值是存放在堆（heap）裏面的
引用值拷貝引用值拷貝過去的是地址
var arr = [1,2];
var arr1 = arr;
arr.push(5);
document.write(arr1);
//輸出值爲 1 2 5

基本語法

一行結束必須添加分號；程序讀取代碼一行是識別分號，（函數function for循環 if以後不須要加；（分號） function for循環 if判斷語句）

任何符號的兩側必需要有一個空格

錯誤分爲兩種

低級錯誤：

不能夠寫中文字符，語法解析錯誤

控制檯會顯示以下：

uncaught syntaxerror：
invalid or unexpected token：

js運算符

0/0 = NaN，0%0 = NaN

1%0 = NaN,-1%0 = NaN

1/0 = infinity infinity是數字類型的 number

-1/0 = -infinity
+：數字運算、字符串鏈接（隱式轉換兩邊都是字符串）；

任何數據類型加字符串都等於字符串（隱式轉換 + ）

%：取餘

var rr = 3;
rr %= 4;
document.write(rr);
//輸出的值是3

// 調換aa bb的值
var aa = 123;
var bb = 234;
var temp = aa;
aa = bb;
bb = temp;
document.write(aa);
document.write("<br>");
document.write(bb);

Boolean：false和true
字符串比較的是asc碼的順序

邏輯運算符

&&（與）：(與是碰到假就返回當前的值)
先看第一個表達式轉換成布爾值結果，若是結果爲真，那麼它會看第二個表達式轉換爲布爾值的結果，而後若是隻有兩個表達式的話，那麼看到第二個表達式，就能夠返回該（第二個）表達式的值了。
var a = 1 && 2 + 2;返回的值爲4，由於第一個先看var a = 1的值是否爲真，在該例子中爲真，則返回&&後面的（最後一個值）計算結果4；
返回結果爲false的：undfined，null，NaN，「」，0，false。
var a = 0 && 2 + 2;返回的值爲0，由於第一個是假，直接返回第一個值。
var a = undefined && 2 + 2；返回值爲undefined。
&&升級：中斷做用，短路語句：檢查該語句是否存在錯誤或者可否執行。
data && function（data）；若是data返回false則表示data數據不存在或者錯誤。
||（或）：（碰到真就返回當前的值）
||或運算符常常用於實現解決瀏覽器的兼容問題
！（非）：

for循環的執行順序：

for (var i = 0; i < 10; i ++)
1.  var i = 0;
2.  if(i < 10){}  條件判斷
3.  i ++
4.  if (i < 10){}
5.  i ++
6.  if(i < 10){}

條件語句

if和else直接的語句必須是互斥的，知足條件1 必定不知足其他條件。

i++先使用i，再進行計算i = i + 1;

小練習：

計算2的n次冪，n可輸入，n爲天然數：

var n = parseint(window.prompt(「input number」));
//先定義一個mul的初始值
var mul = 1;
for(i = 1;i <= n; i++);{
//2的n次冪
//2的一次冪表明1乘以一個2
//2的二次冪表明1乘以2的值再乘以一個2
mul *= 2;
}
document.write(mul);

計算n的階乘，n可輸入

var n = parseint(window.prompt(「input a number」));
var jiemul = 1;
for(var i = 1;i <= n; i ++)
{
jiemul *= i;
}
document.write(jiemul);  
輸入a,b,c,三個數字，打印出最大的
//由於要輸入三個數，因此要寫三個parseint
var a = parseint(window.prompt(「input a」);
var b = parseint(window.prompt(「input b」);
var c = parseint(window.prompt(「input c」);
if(a > b){
if(a > c){
document.write(a);
}
else{
document.write(c);
}
}
else{
if(b > c){
document.write(b);
}
else{
document.write(c);
}}

輸入星期時，顯示工做或者休息

var date = window.prompt('input');
switch (date) {
    case "monday":
    case "tuesday":
    case "wednesday":
    case "thursday":
    case "friday":
        console.log('working');
        break;
    case "saturday":
    case "sunday":
        console.log('relaxing');
        break;
}

typeof操做符：

能夠返回6個值：number string Boolean object undefined function

類型轉換

顯示類型轉化和隱式類型轉換

number：將變量值轉化成數字，null能夠轉換成0，true是1，false是0，可是一個是特殊的，undefined被轉換成數字類型，會輸出：nan.看起來不是數字的也是輸出nan,若是是「123abc」也是被轉換成NaN,不能轉換成具體的數字。
parseint：把內容轉換成整型的數，就是整數，輸入123.98，會直接捨去，輸出123，輸入「123abc」輸出「123」，parseint有個獨特的功能，從數字位開始日後看，一直看到非數字位截止，把以前的數字返回。
parsefloat：更parseint很類似，不一樣的是，float是浮點數就是小數，若是輸入內容是：「123.45abc「，會輸出123.45，它也是從數字位開始看，一直看到除了.以外的非數字位截止，後面的作截斷，返回前面的值。
string：把內容轉換成字符串，
boolean：把內容轉換成布爾值，輸入0 -0 null undefined nan false以及空字符串」」會輸出false,其他的均輸出true。
tostring：想把誰轉換成字符串就用誰.tostring,有兩個特殊的，undefined和null不能使用tostring這個方法。

隱式類型轉換：

isNaN()-->（調用的是Number）:把變量拿出來，先放到number裏面去，轉換的結果再與nan 比對，若是是NaN則打印出true，若是不是則輸出false.這個數必須是NaN的時候才返回true，例如isNaN(‘100’),顯然100不是NaN,則返回false
++/--、+（正） -（負）(調用的是number)
-（減號）*/% --》number（調用的也是number）
+(加號)（調用的是string）：有一個特殊的語法，當加號兩側有一個是string（字符串），就會調用string將兩個所有轉換成字符串。例如：var num = (1 + '2');輸出的是12，由於+加號已經將1轉換成字符串「1」,因此結果是12.
< > <= >=（轉換成boolean）：var num = 1 > "2";打印出false。
== ！=（調用的也是boolean）： undefined == null;打印true，undefine和null同樣，> = < 0都會輸出false。
不發生類型轉換（左右兩側長得如出一轍（類型和數字）纔會絕對等於，除了NaN）
===：絕對等於
！==：絕對不等於

注意：typeof（a）返回的是字符串」undefined」,因此typeof打印出的結果類型是string

小練習：

此處注意：NaN不等於NaN,可是undefined == null；
顯示類型轉換：

Number：將輸入的內容轉化成數字

String：將輸入的內容轉化成字符串：

var demo ="123.3";
var num = String(demo);
console.log(typeof(num) + ":" + num);

隱式類型轉換：

逗號操做符：英文的，

例如：1,2的返回結果就是逗號後面的值爲2，始終返回最後一個逗號後面的值
```js

console.log(isNaN("abc"));
//輸出true：隱式轉化
console.log(isNaN(null));
//輸出false
//false是0，true是1
```

函數：

定義：function 函數名（）{}函數名和變量名格式差很少，
可是命名必須符合小駝峯原則：單詞首字母小寫，後面單詞的首字母必須大寫。
函數組成形式：
函數名稱、參數（形參、實參arguments）、返回值。不定參數、
函數的做用域：（函數裏面的參數，就至關於函數內部已經定義好了的變量）

Js（單線程、解釋性語言）運行三部曲:

語法分析、預編譯、解釋執行

arguments.length 表示實參的個數，函數名.lenth表示形參的個數。

預編譯：

函數聲明總體提高

變量只聲明提高（注意只是聲明提高，並非賦值提高）

imply global：暗示全局變量，

全局對象：window

window就是全局的域：

var a = 123；

等於先聲明var a;再a = 123；

console.log(a);

window至關於倉庫，是一個對象和GO（global object）同樣的功能。

任何全局變量都是window的屬性

預編譯：一切聲明的全局變量（注意不包括局部變量），全是window的屬性。

window 就是全局，

預編譯發生在函數執行的前一刻：

預編譯的步驟：

第一步：建立AO （activation object）對象。執行期上下文，就是理解的做用域
第二步：找函數的形參和變量聲明，將變量聲明的名和形參做爲AO對象數屬性名，值爲undefined
第三步：將實參值和形參值統一
第四步：在函數體裏面找函數聲明（定義一個變量等於函數不算函數聲明(var a = function(){})，函數聲明必須有函數名才能夠），值賦予函數體
預編譯聲明的變量或者函數輸出的時候，若是有本身的AO值，就打印輸出本身擁有的AO的值，就近原則，而沒必要要打印輸出GO就是window的值。

做用域:

[[scope]];存儲了運行期上下文的集合

做用域鏈：scope所存儲的執行期上下文對象的集合

查找變量：從做用域鏈的頂端依次向下查找。

補充一點:在哪一個函數裏面查找變量，就取函數的做用域鏈的頂端依次向下查找。

閉包：

若是內部的函數被保存到外部，它必定生成閉包。

缺點：閉包會致使原有做用域鏈不釋放，形成內存泄漏

內存泄漏：內存佔用多了，可利用的內存就少了。

閉包的做用

實現公有變量：函數累加器

能夠作緩存：存儲結構

能夠實現封裝，屬性私有化

模塊化開發，防止污染全局變量

閉包：內部函數在外部被調用的時候產生閉包，只有閉包才能夠實如今外部調用和改變內部函數的屬性

對象：
增刪改查

對象建立方法：

一、var obj = {} plainObject    //對象直接量
二、構造函數建立方法
1）系統自帶的構造函數new Object（） Array() Number()
2）自定義 構造函數命名的時候首字母都要大寫
構造函數的內部原理（三段式）
一、  在函數體最前面隱式的加上this = {}
二、  執行 this.xxx = xxx;
三、  隱式的返回this
只有對象纔有屬性和方法，對象包括函數、數組和對象本身。

var str = new String (‘ass’)

在函數前面加了一個new，就是一個構造函數

undefined和null不能夠設置屬性

原始值數字不能夠有屬性和方法，可是對象能夠有屬性和方法。

原始值不能調用屬性和方法

原型：function對象的一個屬性，定義了構造函數製造出的對象的公共祖先，經過該構造函數產生的對象，能夠繼承該原型的屬性和方法，原型也是對象。

構造函數名字.prototype.屬性 = 值。

提取公有的部分寫到原型內，減小代碼的冗餘，

object.prototype是原型鏈的終端。

原型鏈的原理和原型差很少，增刪改查也差很少

修改：若是屬性有引用值的時候，就能夠修改

Object.create也能夠建立對象

絕大多數對象最終都會繼承自Object.prototype，並非全部的對象繼承最終都會來自這個。

原型是系統自定義的內部屬性，不能夠本身添加。

只有undefined和null沒有toString和原型

toString:變成字符串形式，自己沒有方法，要包裝類

Math：ceil：向上取整：

Math：floor：向下取整：

math：random（）；產生0到1的開區間隨機數（0，1）

toFixed（n）：保存n位有效數字,是保留小數點以後的有效位數爲n，若是是個整數的話，則小數點以後是兩個0

若是保留兩位有效數字的時候，小數點以後的第三位數字大於等於5的時候就要進1.

注意：call/apply：改變this指向

在企業上的實際運用就是借用別人的函數實現本身功能

call和apply的區別：apply只能傳入一個實參，且必須是數組

call和apply的目的是改變this的指向

二者的區別是傳參列表不一樣。（call 須要把實參按照形參的個數傳進去（就是實參個數==形參個數），apply 須要傳一個arguments 實參列表）

繼承發展史.

原型鏈
借用構造函數
共享原型
聖盃模式

this：

函數預編譯過程當中，this指向—> window，預編譯的時候arguments是放在AO的，且還有一個this：window，var this = Object.create(funxtion.prototype);
全局做用域裏面：this -- > window,就是GO裏面也有一個this：window。
call/apply能夠改變函數運行時this指向，二者的區別是傳參列表不一樣。
obj.func();func()裏面的this指向obj(誰調用的這個方法，這個方法裏面的this就指向誰)
命名空間
管理變量，防止污染全局，適用於模板化開發
類數組：
組成部分：屬性要爲索引（數字）屬性，必須有length屬性，最好加上push方法，
屬性一旦經歷了var的操做，所得出的屬性，這種屬性叫作不可配置的屬性。
經過var增長的屬性，叫不可配置的，不能刪除
一、預編譯 this --> window
二、誰調用的this指向誰
三、call apply
四、全局 this --> window
try catch
在try裏面發生錯誤，不會執行try裏面的後續代碼，而後執行外面的
try裏面的代碼有錯的時候，後續的代碼仍是能夠執行的
錯誤信息

evalError：eval()的使用與定義不一致

rangeError:數值越界

常見的：

referenceError：（未經聲明（變量、函數）就使用 is not defined）

syntaxError：語法解析錯誤（代碼中出現中文字符）

瀏覽器是基於es3 + es5新增的方法

「use strict」，在代碼最頂端加上就變成了es5

和es3產生衝突的解決方案，均使用es5的

es5的嚴格模式不能用with

with會把裏面的對象看成with要執行的代碼體的做用域鏈的最頂端

with能夠改變做用域鏈，with裏面的對象是AO

with能夠簡化代碼

es5規定變量賦值前必須聲明

局部的this必須被賦值，賦值是什麼就是什麼

局部的this預編譯的時候是空值，不賦值會是undefined

es5不能夠重複屬性和參數，可是不報錯

eval裏面可以將字符串看成代碼執行

dom操做

document object model（操做html）

對html的標準編程接口

dom的基本操做：

獲取鍵盤碼：

document.onkeydown = function(e) {console.log(e.which)};

選中頁面的一個元素，按鍵盤上面的鍵

鍵盤的操做：上38，右39，下40，左37，enter：13，空格：32，刪除：8

當即執行函數：

for循環裏包含有不知道何時執行的函數，而且這個函數訪問了for的循環變量，就要使用當即執行函數函數解決 i 被改變成最終值的問題
sublime 按照插件：

emmet教程

首先安裝package control

再preferences ----> packsge control安裝，安裝完了以後打開輸入install package ----> 輸入emmet安裝 ---》輸入jsprettify安裝。

dom基礎操做

document表明整個文檔

查看元素的節點：

document.getElementById

document.getElementsByTagName（比較經常使用）

document.getElementsByClassName

document.getElementByName 只有部分標籤name才能夠生效（表單、img、iframe）基本不用

querySelector：基本不用，選出來的元素不是實時的，

遍歷樹節點

parentNode -> 父節點（最頂端的parentNode是#document）
childNodes -> 子節點們
firstChild -> 第一個子節點
lastChild -> 最後一個子節點
nextSibling –> 後一個兄弟節點
previousSibling -> 前一個兄弟節點

節點的類型：

元素節點(1)、屬性節點(2)、文本節點(3)、註釋節點(8)、

基於遍歷元素節點樹的遍歷

parentElement -> 返回當前元素的父元素節點（ie不兼容）
children -> 只返回當前元素的元素子節點（經常使用）
node.childElementCount === node.children.length當前元素節點的字節點
firstElementChild ->返回第一個元素節點（ie不兼容）
lastElementChild ->返回最後一個元素節點
前一個兄弟元素節點：
nextElementSibling:
最後一個兄弟元素節點
lastElementSibling

節點的四個屬性：

nodeName：元素的標籤名，以大寫的形式表示只讀

nodeValue：文本或者註釋comment節點的屬性，能夠讀寫

nodeType：只讀，不可寫入（任何元素都有這樣一個屬性）

attributes：element節點的屬性節點的結合（可以賦值和修改）
節點的一個方法：Node.hasChildNodes（）有沒有子節點，表明一個函數方法，因此必需要加括號

類數組加一個splice：Array.prototype.splice以後就是一個數組
Document能夠理解成構造函數,document表明整個文檔

二者之間是逐步繼承的關係

document –- > HTMLDocument -- >Document.prototype

HTMLDocument.prototype  {proto:Document}

document上面有兩個直接的屬性，一個是body一個是head

document.documentElement --- >指的就是html
JS三個組成部分

ecmascript dom bom

基於元素節點樹的遍歷，除了children以外，兼容性比較差

構造函數都有一個原型

dom結構樹，一系列的繼承關係

就近繼承

date對象

var date = new Date()

date.getTime(),距1970年1月1日的毫秒

setInterval是很是不許的，定時器，是window上面的一個方法

setTimeout只執行一次

查看元素的位置

dom.offsetLeft, dom.offsetTop

對於無定位父級的元素，返回相對文檔的座標。對於有定位父級的元素，返回相對於最近的有定位的父級的座標。(不管是 left 仍是margin-left等都是距離。 )

position的默認值：static

dom.offsetParent

返回最近的有定位的父級，如無，返回body, body.offsetParent 返回null
emmet：
ul>li{$}*5

____滾動條在y軸上滾動的距離 + 瀏覽器的視窗高度 = 文檔的總高度
當：滾動條在y軸上滾動的距離 + 瀏覽器的視窗高度 = 文檔的總高度
說明：已經滾動到底部 ____

查看視口的尺寸

window.innerWidth/innerHeight （加上滾動條寬度 / 高度）
IE8及IE8如下不兼容
document.documentElement.clientWidth/clientHeight
標準模式下，任意瀏覽器都兼容
document.body.clientWidth/clientHeight
適用於怪異模式下的瀏覽器
封裝兼容性方法，返回瀏覽器視口尺寸getViewportOffset()
腳本化css

特殊的：eg:float — > cssFloat

複合屬性必須拆解

查詢計算樣式
js window.getComputesStyle(elem, null); var style = window.getComputedStyle(div, null); //第二個參數是null // 選擇僞元素 // null能夠獲取僞元素
選擇after的僞元素

改變僞元素

var after = window.getComputedStyle(div, 'after');

定位的left和top默認值爲auto

事件：

事件觸發的過程和函數

如何綁定事件處理函數

ele.onxxx = function (event) {}
兼容性很好，可是一個元素只能綁定一個處理程序，屬性賦值會被覆蓋
基本等同於寫在HTML行間上，

ele.addEventListener(type事件類型, fn處理函數, false);
IE9如下不兼容，能夠爲一個事件綁定多個處理程序

ele.attachEvent(‘on’ + type, fn);
IE獨有，一個事件一樣能夠綁定多個處理程序

一但事件出現了循環，就要考慮是否出現閉包，就要使用當即執行函數

事件處理程序的運行環境問題

ele.onxxx = function (event) {}
程序this指向是dom元素自己
obj.addEventListener(type, fn, false);
程序this指向是dom元素自己
obj.attachEvent(‘on’ + type, fn);
程序this指向window
封裝兼容性的 addEvent(elem, type, handle);方法

解除事件處理程序

ele.onclick = false/‘’/null;
ele.removeEventListener(type, fn, false);
ele.detachEvent(‘on’ + type, fn);

注:若綁定匿名函數，則沒法解除

事件冒泡：

結構上（非視覺上）嵌套關係的元素，會存在事件冒泡的功能，急同一個事件，自子元素冒泡向父元素（自底向上）

事件捕獲：

結構上（非視覺上）嵌套關係的元素，會存在事件捕獲的功能，急同一個事件，自子元素捕獲至子元素（自底向下）

若是同時存在冒泡和捕獲的時候：
觸發順序，先捕獲，後冒泡

focus（聚焦事件），blur，change，submit，reset，select等事件不冒泡

取消冒泡：

W3C標準 event.stopPropagation();但不支持ie9如下版本
IE獨有 event.cancelBubble = true;
封裝取消冒泡的函數 stopBubble(event)

阻止默認事件:

默認事件 — 表單提交，a標籤跳轉，右鍵菜單等
1.return false; 以對象屬性的方式註冊的事件才生效（兼容性很好）
2.event.preventDefault(); W3C標註，IE9如下不兼容
3.event.returnValue = false; 兼容IE
封裝阻止默認事件的函數 cancelHandler(event);

事件源對象：

var target = event.target || event.srcElement

做用：不須要循環全部的元素一個個綁定事件，當有新的子元素的時候，不須要從新綁定全部的事件

鼠標事件：click、mousedown、mousemove（鼠標移動事件）、mouseup、contextmenu（右鍵取消菜單）、mouseover、mouseout、 mouseenter、mouseleave（效果是同樣的）html5裏面是寫的enter和leave

用button來區分鼠標的按鍵，0/1/2

onclick = onmousedown + onmouseup

順序：down、up、click

用button判斷當前點擊的是鼠標左鍵仍是右鍵

button == 0表示鼠標左鍵

button == 2表示鼠標右鍵

dom3標準規定，click只能監聽左鍵，不能監聽右鍵，能監聽的只有onmousedown和onmouseup。

js加載時間線：

執行順序

一、建立Document對象，開始解析web頁面。解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中。這個階段document.readyState = 'loading'。
二、遇到link外部css，建立線程加載，並繼續解析文檔。
三、遇到script外部js，而且沒有設置async、defer，瀏覽器加載，並阻塞，等待js加載完成並執行該腳本，而後繼續解析文檔。
四、遇到script外部js，而且設置有async、defer，瀏覽器建立線程加載，並繼續解析文檔。
對於async屬性的腳本，腳本加載完成後當即執行。（異步禁止使用document.write()）
五、遇到img等，先正常解析dom結構，而後瀏覽器異步加載src，並繼續解析文檔。
六、當文檔解析完成，document.readyState = 'interactive'。
七、文檔解析完成後，全部設置有defer的腳本會按照順序執行。（注意與async的不一樣,但一樣禁止使用document.write()，有消除文檔流的功能）;
八、document對象觸發DOMContentLoaded事件，這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段。
九、當全部async的腳本加載完成並執行後、img等加載完成後，document.readyState = 'complete'，window對象觸發load事件。
十、今後，以異步響應方式處理用戶輸入、網絡事件等。