JS基本語法匯總
原文鏈接(http://www.cnblogs.com/wzhiq896/p/6783296.html )
作者：wangwen896
另外推薦一個學習教程：https://zh.javascript.info/
1、分類
ECMAScript js基本語法與標准
DOM Document Object Model文檔對象模型 BOM Browser Object Model瀏覽器對象模型 tips：DOM和BOM都是一套API（Application programing interface） 2、注釋方式
style /* */ body <!-- --!> script // /* */ /** * js說明文檔注釋 */ 3、簡單指令
alert(""); 提示框； confirm(""); 確認框，點擊后會響應返回true或false； prompt(); 彈出一個輸入框； document.write(""); console.log(""); 在控制台打印相應的信息； console.dir(""); 在控制台打印出該對象的所有信息； 4、變量命名
數字（0-9）、字母（a-z，A-Z）、下划線（_）； tips:應避免保留字和關鍵字； 5、NaN和isNaN
isNaN(number),如果number不是數字，則為true； Number(number),在轉換為數字類型時，若number不是數字，則返回NaN； 6、轉義字符
\
\r 回車
\n 空格
\t 縮進
\\ 反斜杠
7、邏輯短路、邏輯中斷
true || 6; 邏輯或短路，左邊為ture返回右值； 6 && true; 邏輯與短路，左邊false返回右值； 8、優先級
* / % + - && || ? tips：自上而下優先級越來越高 9、類型轉換（type）
parseInt("12a3"); 轉為數字，嘗試強轉； parseFloat("123.123"); data.toString(); String(data); tips:變量聲明未賦值，其值為undefined； 對象為空，其值為null； 10、三元表達式
eg : a>b?a=1:a=2; 格式: 判斷條件？true的時候執行的操作：false的時候執行的操作； 11、數組Array
（1）、定義法 構造函數： var arr = new Array("123","abc","xxx"); 字面量： var arr = ["123","646","abc"]; 數組長度： var arr = new Array(6);(數組長度為6)； （2）、賦值 arr[0]=1; 12、形參和實參
定義函數時，function funcA(a,b,c){}，其中的a、b、c即為形參； 調用函數時，funcA(1,2,3);其中的1、2、3即為實參； tips：function里面有一個arguments對象，里面存有所有傳進函數的實參； 13、函數function
（1）、函數命名 1、 可以使用字符、數字、下划線、$； 2、 不能以數字開頭； 3、 不能使用關鍵字和保留字； 4、 區分大小寫； 5、 建議要有意義 -- 動詞+名字結構； 6、 駝峰命名法； 7、 函數名不能重名，后面寫的重名函數會把前面寫的函數給覆蓋掉； （2）、函數的返回值 返回值： 當函數執行完畢之后，所得到的結果就是一個函數返回值 任意函數都有返回值 1、 在函數內部沒有顯示的寫有return的時候，函數的返回值是undefined； 2、 當函數內部有return，但是return后面沒有跟着任何內容或者數據的時候， 函數的返回值是undefined，並且return后面的代碼不會執行； 3、 當return后面跟着內容或者數據的時候，函數的返回值就是這個跟着的內容或者數據； （3）、函數的四種形式： 1、沒有參數，沒有return； 通常在於封裝一段過程； 2、沒有參數，有return； 通常用於內部封裝引用其他函數（閉包，回調）； 3、有參數，沒有return； 通常用於執行操作的封裝； 4、有參數，有return； 常見形式； （4）、匿名函數 匿名函數的name屬性值為anonymous； 函數僅用一次的情況，即用即廢； eg: setTimeout(function(){ console.log(this.name); },1000); tips:在1秒后在控制台打印出本函數的名稱； （5）、回調函數 在一個函數當中，另一個函數作為參數傳入該函數中，另一個的這個函數即為回調函數； eg: function atack(callback){ return callback; } tips:在調用該函數時，指定callback是哪個函數； atack（func）； （6）、短路運算 作用：防止傳入函數的數據不足，造成無法運行； eg： function getResult(a,b,fn) { fn && fn(); }（通常使用邏輯與的短路來決定是否執行回調函數；） function getResult_2(a,b){ a || 0; }（通常用邏輯或的短路來防止實參不足的情況，強行賦值；） （7）、自執行函數 （function func2(){ }）() tips:在函數定義的結束最后寫入一個（），該函數定義完成后直接被調用執行； （8）、遞歸 在函數執行的最后再一次的調用自身； tips:遞歸是一種非常耗資源的做法，通常為了簡化運算，還會結合緩存進行； 並且注意，遞歸必須要有結束判斷條件（if），否則該函數被調用后就是死循環； 14、數據類型
（1）、簡單數據類型 string、number、boolean （2）、復雜數據類型 String、Number、Boolean、Array、Math、Date、Obeject、function、RegExp(正則表達式) （3）、空數據類型 * Null ---→Null的數據類型會返回一個Object * undifined tips：用typeof可以進行判斷數據類型； tips：定義的簡單數據類型變量，其數據保存在變量中； 而復雜數據類型，其變量保存的是數據所在的內存地址；15、內置對象
Array、Date、Math、String； 16、（Math）數學對象
向上取整 Math.ceil(number); 向下取整 Math.floor(number); 四舍五入 Math.round(number); 求多個數字之間的最大值 Math.max(); 求多個數字之間的最小值 Math.min(); 求x的y次冪 Math.pow(x,y); 求正弦值 Math.sin(x); example: 求一個角度的正弦值，要求x必須是一個額弧度值 角度和弧度的轉換公式： 弧度 = 角度 * 2 * Math.PI / 360; Math.sin(30*2*Math.PI/360) Math.abs(x); 得到一個數字的絕對值 17、（Array）數組對象
（1）、arr1.concat(arr2); 數組拼接，結果為將arr2拼接到arr1的最后； （2）、arr.join()； 數組字符串輸出，括號內可以指定元素連接的符號； eg: arr=["a","b","c","d"]; console.log(arr.join("|")); (結果為"a|b|c|d") （3）、arr.pop(); 切除數組的最后一個元素，返回值為該元素； （4）、arr.slice(start,end) 獲取，獲取數組的指定片段，start必須有，如果參數為負數則從末尾開始選取； 返回值為該片段組成的，一個新的數組； （5）、arr.push 添加，用於向數組的末尾添加新的元素，參數可以是多個； 返回值為數組的新長度； （6）、arr.splice 1、用於向數組中指定的索引添加元素； arr.splice(2, 0, "William","asdfasdf"); 在第2個元素開始，刪除的元素個數（可以為0，為0到結尾）， 加入元素為"William"、"asdfasdf"； 2、用於替換數組中的元素； arr.splice(2,1,"William")； 3、用於刪除數組中的元素； arr.splice(2,2); （7）、arr.indexOf(element); 查找，在數組中查找element，返回值為索引，如果沒有該元素返回-1； （8）、arr.sort(function); 排序，function為一個函數； eg: function sortNumber(a,b){ return a-b; } arr.sort(sortNumber);(從小到大排序) tips：如果a-b改成b-a，那么執行的操作為從大到小； tips:字符串對象（String）的方法與Array的方法類似； 18、（Date）日期對象
date.getTime() date.getMilliseconds() date.getSeconds() date.getMinutes() date.getHours() date.getDay() date.getDate() date.getMonth() date.getFullYear() tips:很多，查文檔 19、（String）對象
charAt(index)
str[index] 獲取字符串指定位置的字符
concat() 拼接字符串
--------------------------- slice(start,end)/ substring(start,end) 截取從start開始，end結束的字符， 返回一個新的字符串，若start為負數，那么從最后一個字符開始； substr(start,length) 截取從start開始，length長度的字符，得到一個新的的字符串 --------------------------- indexOf(char) 獲取指定字符第一次在字符串中的位置 lastIndexOf(char) 獲取指定字符最后一次出現在字符串中的位置 trim() 去除字符串前后的空白 --------------------------- toUpperCase() toLocaleUpperCase() 轉換為大寫 toLowerCase() toLocaleLowerCawse() 轉換為小寫 --------------------------- replace() 替換字符 split() 分割字符串為數組 20、自定義對象
對象：無序屬性的集合；
特征：屬性（key）；
行為：方法（value）； js是基於對象的弱類型語言； 繼承：基於類，子類可以從父類得到的特征； 工廠模式：定義一個function構造函數，作為對象，要創建對象直接調用該構造函數，加new關鍵字； 構造函數：定義對象的函數，里面存有該對象擁有的基本屬性和方法； 命名首字母大寫，this會自動指代當前對象； 訪問對象屬性： obj[key]; obj.key; 遍歷對象： for(key in obj){ key 為屬性名； obj[key] 為屬性值（value）； } 21、JSON
{
"name" : "李狗蛋", "age" : 18, "color" : "yellow" } 1、 所有的屬性名，必須使用雙引號包起來； 2、 字面量側重的描述對象，JSON側重於數據傳輸； 3、 JSON不支持undefined； 4、 JSON不是對象，從服務器發來的json一般是字符串， 通過JSON.parse(jsonDate.json)可以將其轉換成js對象； 22、JS解析
（1）、作用域 全局作用域：整個代碼所有地方都可以調用； 局部作用域：在函數內部聲明的變量，只可以在函數內部使用； （2）、變量提升和函數提升 預解析：在解析的時候，var和function都會被提升到代碼的最頂端； 但是賦值操作不會被提升，定義和函數才會被提升； if里面的變量定義也會被提升，但是賦值操作不會； 23、其他細節（tips）
(1)、元素由對象組成的數組進行排序 eg： var data = [ {title: "老司機", count: 20}, {title: "詩人", count: 5}, {title: "歌手", count: 10}, {title: "隔壁老王", count: 30}, {title: "水手", count: 7}, {title: "葫蘆娃", count: 6}, ]; //該數組的元素都為對象。我們需求為根據count的值給數組重新排序。 //解決方案：使用sort方法，對傳入的函數做手腳。 function sortArr(a,b){ return a.count > b.count; } data.sort(sortArr); //原本的a和b的比較方法變成a.count和b.count； //原本的比較方法可以參見17，數組對象 //至此，data將以count值從小到大排列。 tips:Array對象的sort方法傳入的為比較函數，比較函數里return排序比較的方法； 原始的sort方法傳入的函數內部return的值為a>b， 通過修改sort傳入的函數，可以實現對元素為對象的數組的排序！
JS基礎知識點總結
何在一個網站或者一個頁面，去書寫你的js代碼:
1.js的分層(功能):jquery(tool) 組件(ui) 應用(app),mvc(backboneJs)
2.js的規划():避免全局變量和方法(命名空間,閉包,面向對象),模塊化(seaJs,requireJs)
常用內部類:Data Array Math String
HTML屬性，CSS屬性
HTML：屬性.HTML屬性="值"；
CSS：對象.style.CSS屬性="值";
class和float
1.class:className
2.float:cssFloat
獲取對象
id:document.getElementById("id 名")
事件:用戶的動作
鼠標事件：
onclick：點擊
onmouseover: 鼠標放上
onmouseout:鼠標離開
ondbclick:雙擊事件
onmousedown:鼠標按下
onmouseup:鼠標抬起
onmousemove鼠標移動
表單事件：
onfocus:獲取焦點
onblur:失去焦點
onsubmit:提交事件
onchange:當發生改變的時候
onreset:重置事件
鍵盤事件:
onkeyup:鍵盤抬起
onkeydown:鍵盤按下
onkeypress:鍵盤按鍵一次
窗口時間:onload事件
頁面加載完成之后立刻執行的事件
兩種方式:
1.<script>window.onload=init/*函數名，不能加括號*/;</script>
2.<body onload="init()"></body>
event:保存事件發生時的相關的信息
當事件發生的時候,event
event.clientX:事件發生時的X的坐標
event.clientY:事件發生時的Y的坐標
event.target:事件源
event:必須通過實際參數的形式傳遞給函數才可以用
<input type = "button" value = "點擊" onclick = "fn(event)" >
修改p中的內容
innerHTML:對象中所有的內容（文本內容和標簽內容），一般指的是雙標簽或者容器標簽
innerText:對象中所有的文本內容
document.createElement("標簽名");
document.body.appendChild(對象);
removeChild(對象)
document.body是body標簽對象
document.documentElement是html標簽對象
ECMAscript,BOM,DOM
1.window:對象最高級
2.BOM:瀏覽器對象: brower object model
3.DOM:文檔對象模型:document object model
4.BOM:網頁一打開就會存在
5.DOM:去操作的代碼
6.document是鏈接DOM和BOM
document有下級，其他的都沒有下級【多窗口】
window.open("鏈接","name","設置");
1.width:設置窗口寬度
2.height:設置窗口高度
3.left:新窗口到左端距離
4.top:新窗口到頂部的距離
5.srollbars:滾動條【yes,no,1,0】
6.toolbar:工具類【yes,no,0】
7.location:地址欄
window.close: 關閉窗口
window.close()
創建定時器:
一次性計時器:window.setTimeout("函數()"，時間t)
執行:是在時間t之后執行js代碼【只會執行一次】
時間:以毫秒為單位
反復性計時器:window.setInterval("函數()"，時間t)
時間:以毫秒為單位
執行:是每過時間t就會執行一次js代碼【n次】
清楚定時器:
清除一次性定時器:window.clearTimeout(定時器名)
清除反復性定時器:window.clearInterval(定時器名)
注意:要想清除定時器，必須給定時器名字，匿名定時器無法清除
找對象的方法:
di:document.getElementById("id名");
標簽:document.getElementsByTagName("標簽名")//獲取的是對象的集合(數組)
對象.getElementByTagName(標簽名)
name:document.getElementByName("name名");//form集合(數組)
className:document.getElementByClassName("class名");//集合(數組)【firefox】
document.images;//獲取img對象(數組)
document.links;//獲取鏈接對象(數組)
document.forms;//獲取表單對象(數組)
document.body;//body標簽對象
document.documentElement;//HTML對象
event:事件信息對象
this:當前對象
location對象
location.href:返回url信息【可以獲取url信息，也可以給其賦值，實現跳轉頁面】
location.assign():加載新的文檔【跳轉頁面】
location.reload():重新加載當前的文檔【刷新頁面】
location.replace():用新的文檔替代當前的文檔【跳轉頁面】
location.assign和location.replace的區別:
location.assign:會產生歷史記錄
location.replace:不會產生歷史記錄
history對象:
history.length:瀏覽過的url數量
history.back():返回歷史記錄的前一個頁面
history.forward():加載歷史記錄中的下一個頁面
history.go(n):跳轉到歷史記錄中指定的頁面，如果是-1實際上就是history.back()的功能
screen對象
screen.height:獲取屏幕的高度
screen.width:獲取屏幕的寬度
screen.availHeight:獲取除去任務欄的高度
screen.availWidth:獲取除去任務欄的寬度
navigator對象
navigator.appName:瀏覽器名
navigator.appCodeName:瀏覽器代碼名
navigator.appVersion:瀏覽器的版本號和平台信息
navigator.userAgent:瀏覽器信息
DOM:描述網頁各個組成部分的關系
var obj = document.getElementById("id名")
火狐瀏覽器中空白處也算一個節點
parentNode:父節點
childNodes:子節點
firstChild:第一個子節點
lastChild:最后一個子節點
nextSibling:下一個兄弟節點【注意:必須是同父級關系】
previousSiblind:前一個兄弟節點【注意:必須是同父級關系】
登錄驗證：
onsubmit:表單提交事件
onsubmit="return 函數()"