當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
生活随笔
收集整理的這篇文章主要介紹了
【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript基礎語法
var a = [1, 2, 5]; for(var k in a){console.log(k); // k 為當前元素的下標 } for(var m of a){console.log(m); // m 為當前元素的值 } VM215:3 0 VM215:3 1 VM215:3 2 VM215:6 1 VM215:6 2 VM215:6 5變量聲明
- var 聲明一個變量，可賦一個初始值。
- let 聲明一個塊作用域的局部變量，可賦一個初始值。
- const 聲明一個塊作用域的只讀命名的常量。
- 變量的名字又叫做“標識符”，必須以字母、下劃線（_）或者美元符號（$）開頭，并且區分大小寫。
- 若沒有為變量賦初始值，則值默認為undefined
- 若沒有聲明變量而直接使用，拋出ReferenceError錯誤
- 當變量值為undefined時，布爾值環境當做false
- 當變量值為null時，布爾值環境當做false
數據類型
- Boolean布爾值，true和false
- null對大小寫敏感
- undefined空類型，變量未定義時候的值
- Number數值類型
- String字符串類型
- Symbol（ES6新增）表示一種唯一且不可變的數據
字面量
- 字面量是用來表示如何表達這個值
- 變量賦值時右邊的都是字面量
- 數組字面量
- 布爾字面量
- 浮點數字面量
- 對象字面量
- 整數字面量
- 正則字面量
- 字符串字面量
全局變量
代碼：
// ES5var a = 'web';window.a; // 'web'// ES6let b = 'web';window.b; // undefined注釋
代碼：
// 單行注釋/*多行注釋*/變量作用域
- 全局變量：即聲明在函數之外，當前文檔所有地方都可以訪問
- 局部遍歷：即聲明在函數內部，僅在當前函數內可以訪問
代碼：
// ES5及之前console.log(a); // undefinedvar a = 1;console.log(a); // 1// ES6開始console.log(b); // Uncaught ReferenceError: b1 is not definedlet b = 2;console.log(b); // 2函數聲明有兩種方式
代碼：
// 函數聲明f(); // 'web'function(){console.log('web');}; // 函數表達式g(); // Uncaught TypeError: g is not a functionvar g = function(){ // 換成 let 聲明也一樣console.log('web');}常量
- 使用const來聲明一個只讀的常量
- const聲明的變量不能直接修改值，但是對于對象和數組，卻是不受保護可以修改的
示例{}包含的內容表示一個代碼塊
代碼：
if(test1=="red") {test1 = "blue";alert(test1); }JavaScript關鍵字：
break,else,new,var case,finally,return,void catch,for,switch,while continue,function,this,with default,if,throw delete,in,try do,instanceof,typeofJavaScript的變量
在javascript中，變量是存儲信息的容器，變量存在兩種類型的值，即為原始值和引用值。
代碼：
console.log( null == undefined); // true使用isFinite()方法判斷參數值是否是有窮的。
示例：
console.log(NaN == NaN) // false console.log(isNaN("66")); // false類型判斷
返回值：
undefined，變量是Undefined類型 boolean，變量是Boolean類型的 number，變量是Number類型的 string，變量是String類型的 object，變量是一種引用類型或者Null類型示例：
console.log(typeof 12); // numbertypeof運算符對null的值返回Object。
示例：
<script>var a = new Array();if(a instanceof Array) {console.log('a是一個數組類型');}else{console.log('a不是一個數組類型');} </script>類型轉換
運算符
| 賦值 | x = y | x = y |
| 加法賦值 | x += y | x = x + y |
| 減法賦值 | x -= y | x = x - y |
| 乘法賦值 | x *= y | x = x * y |
| 除法賦值 | x /= y | x = x / y |
| 求余賦值 | x %= y | x = x % y |
| 求冪賦值 | x **= y | x = x ** y |
| 左移位賦值 | x <<= y | x = x << y |
| 右移位賦值 | x >>= y | x = x >> y |
| 無符號右移位賦值 | x >>>= y | x = x >>> y |
| 按位與賦值 | x &= y | x = x & y |
| 按位異或賦值 | x ^= y | x = x ^ y |
示例：
賦值運算符的符號為=算數運算符：+，-，*，/，%比較運算符：>，>=，<，<=，!=，==，===，！==邏輯運算符： &&，邏輯與，表示表達式前后全為true才能返回true||，邏輯或，表示表達式前后只要有一個true就返回true!，邏輯取反，表示表達式后若為true，則返回false，否則反之。- 算數運算符
- 比較運算符
- 邏輯運算符
- 賦值運算符
分支循環
示例：
if(條件 1) {當條件1為true時執行的代碼 }else if(條件 2){當條件2為true時執行的代碼 }else{當條件1和條件2都不為true時執行的代碼 }示例：
switch(n){case1:執行代碼塊1break;case2:執行代碼塊2break;default:... }示例：
for(語句1;語句2;語句3){被執行的代碼塊 }遍歷
示例：
for(鍵 in 對象) {代碼塊 }示例：
while(表達式){代碼塊 }示例：
do {代碼 }while(表達式)數組
數組的屬性和方法：
| concat() | 連接兩個或者更多的數組，并返回結果 |
| join() | 把數組的所有元素放入一個字符串，元素通過指定的分隔符進行分隔 |
| pop() | 刪除并返回數組的最后一個元素 |
| push() | 向數組的末尾添加一個或者多個元素，并返回新的長度 |
| reverse() | 顛倒數組中元素的順序 |
| shift() | 刪除并返回數組的第一個元素 |
| slice() | 從某個已有的數組返回選定的元素 |
| sort() | 對數組的元素進行排序 |
| splice() | 刪除元素，并向數組添加新元素 |
| toSource() | 返回該對象的源代碼 |
| toString() | 將數組轉換為字符串，并返回結果 |
| toLocalString() | 將數組轉換為本地數組，并返回結果 |
| unshift() | 向數組的開頭添加一個或者更多元素，并返回新的長度 |
| valueOf() | 返回數組對象的原始值 |
| indexOf() | 在數組中搜索指定元素并返回第一個匹配的索引 |
| lastIndexOf() | 在數組中搜索指定元素并返回最后一個匹配的索引 |
concat()
連接兩個或更多的數組，并返回一個新數組。
語法:
arr.concat(a1, a2, ..., an)參數:
join()
使用指定分隔符，連接兩個或多個數組的元素，返回一個字符串。
數組定義
數組操作
- pop方法，從尾部刪除，刪除后元素從數組上剝離并返回。
- shift方法，從頭部刪除元素，并返回。
- splice方法，從指定位置刪除指定的元素。
- unshift方法，從頭部插入。
- splice方法，從指定位置插入指定個數的元素。
- concat方法將多個數組連接成一個數組。
- join方法將數組中的元素合并成一個用指定分隔符合并起來的字符串。
- reverse方法可以將數組中的元素倒序排列，而且直接改變原來的數組，不會創建新的數組。
- sort方法可以將數組中的元素按照一定的規則自動排序（默認的是按照字符的ASCII碼順序排序）。
pop()和push()
shift()和unshift()
示例：
let arr = [1, 2, 3, 5, 6]; let a1 = arr.slice(2); // [3, 5, 6] let a2 = arr.slice(2,3); // [3]let arr = [1, 2, 3, 4]; let a = arr.splice(1, 2, "web", "a"); // a => [2, 3] // arr => [1, "web", "a", 4]forEach()
代碼：
let a = [1,3,5,7]; a.forEach(function(val, index, arr){arr[index] = val * 2 }) a ; // [2, 6, 10, 14]代碼：
arr.every(callback)測試數組的所有元素是否都通過了指定函數的測試。some()測試數組中的某些元素是否通過由提供的函數實現的測試。filter()
示例：
let a = [1, "", "aa", 2, 6]; let res = a.filter(function(val, index, arr){return typeof val == "number"; }) res;//[1, 2, 6]map()
對每個元素執行此方法，并返回一個執行后的數組。
示例：
let a = [1, 3, 5]; let b = a.map(function(val, index, arr){return val + 1; }) b; //[2, 4, 6]拓展運算符
拓展運算符使用(...)
示例：
console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2,3], 4); // 1 2 3 4 // 通常情況 淺拷貝 let a1 = [1, 2]; let a2 = a1; a2[0] = 3; console.log(a1,a2); // [3,2] [3,2]// 拓展運算符 深拷貝 let a1 = [1, 2]; let a2 = [...a1]; // let [...a2] = a1; // 作用相同 a2[0] = 3; console.log(a1,a2); // [1,2] [3,2] let [a, ...b] = [1, 2, 3, 4]; // a => 1 b => [2,3,4]let [a, ...b] = []; // a => undefined b => []let [a, ...b] = ["abc"]; // a => "abc" b => []fill()
entries(),keys(),values()
includes()
代碼：
[1,2,3].includes(3,3); // false [1,2,3].includes(3,4); // false [1,2,3].includes(3,-1); // true [1,2,3].includes(3,-4); // trueflat(),flatMap()
示例：
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4]var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]]var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]語法
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {// return element for new_array }[, thisArg]) var arr1 = [1, 2, 3, 4];arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]// only one level is flattened arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]] let arr1 = ["it's Sunny in", "", "California"];arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]]arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]Array.prototype.reduce()
reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {return accumulator + currentValue; }, 0); // 和為 6var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => acc + cur,0 );語法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])initialValue可選作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。字符串對象屬性
字符串對象屬性
| constructor | 對創建該對象的函數的引用 |
| length | 字符串的長度 |
| prototype | 允許向對象添加屬性和方法 |
字符串對象方法
字符串對象方法
| anchor() | 創建HTML錨 |
| big() | 用大號字體顯示字符串 |
| blink() | 顯示閃動字符串 |
| bold() | 使用粗體顯示字符串 |
| charAt() | 返回在指定位置的字符 |
| charCodeAt() | 返回在指定位置的字符的Unicode編碼 |
| concat() | 連接字符串 |
| fixed() | 以打字機文本顯示字符串 |
| fontcolor() | 使用指定的顏色顯示字符串 |
| fontsize() | 使用指定的尺寸顯示字符串 |
| fromCharCode() | 從字符編碼創建一個字符串 |
| indexOf() | 檢查字符串 |
| italics() | 使用斜體顯示字符串 |
| lastIndexOf() | 從后向前搜索字符串 |
| link() | 將字符串顯示為鏈接 |
| localeCompare() | 用本地特定的順序比較兩個字符串 |
| match() | 找到一個或者多個正則表達式的匹配 |
| replace() | 替換與正則表達式匹配的子串 |
| search() | 檢索與正則表達式匹配的值 |
| slice() | 提取字符串的片段，并在新的字符串中返回被提取的部分 |
| small() | 使用小字號顯示字符串 |
| split() | 將字符串分割為字符串數組 |
| strike() | 使用刪除線顯示字符串 |
| sub() | 將字符串顯示為下標 |
| substr() | 從起始索引號提取字符串中指定數目的字符 |
| substring() | 提取字符串中兩個指定的索引號之間的字符 |
| sup() | 將字符串顯示為上標 |
| toLocaleLowerCase() | 將字符串轉換為小寫 |
| toLocaleUpperCase() | 將字符串轉換為大寫 |
| toLowerCase() | 將字符串轉換為小寫 |
| toUpperCase() | 將字符串轉換為大寫 |
| toString() | 返回字符串 |
| valueOf() | 返回某個字符串對象的原始值 |
| toSource() | 代表對象的源代碼 |
字符串搜索
indexOf()，lastIndexOf()，search()和match()。
字符串截取
3種字符串截取方法：substring(),slice(),substr()
字符串替換
replace()，replace(正則表達式/要被替換的字符串，要替換成為的子字符串)。
字符串切割
split()用于將一個字符串分割成字符串數組，語法為字符串。split(用于分割的子字符串，返回數組的最大長度)，返回數組的最大長度一般情況下不設置。
JS事件三個階段
事件流：
事件的處理過程主要有三個階段：捕獲階段，目標階段，冒泡階段
事件流包含三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。
- 捕獲，事件由頁面元素接收，逐級向下，到具體的元素
- 目標，具體的元素本身
- 冒泡，元素本身，逐級向上，到頁面元素
事件冒泡和事件捕獲
事件觸發方式
代碼：
addEventListener("click","doSomething","true")第三個參數為true，表示采用事件捕獲，若false，表示采用事件冒泡。
<!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{width:100%;height:100%; } </style> <script>window.onload=function(){d1 = document.getElementById("d1");d2 = document.getElementById("d2");d3 = document.getElementById("d3");// true 表示在捕獲階段響應// false 表示在冒泡階段響應d1.addEventListener("click",function(event){console.log("d1")},"true");d2.addEventListener("click",function(event){console.log("d2")},"true")d3.addEventListener("click",function(event){console.log("d3")},"true")} </script> </head> <body> <div id="d1" style="background: #0000ff; width: 500px; height: 500px"> <div id="d2" style="background: #00ff00; width: 400px; height: 400px"> <div id="d3" style="background: #ff0000; width: 200px; height: 200px"> </div> </div> </div> </body> </html>addEventListener網頁，點擊跳轉：addEventListener.html
事件委托
一個響應事件委托到另一個元素。
<ul id="btn"><li id="btn1">按鈕1</li><li id="btn2">按鈕2</li><li id="btn3">按鈕3</li> </ul>var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3');webbtn.myAddFun(btn1, 'click', function(event){alert('1點擊'); });webbtn.myAddFun(btn2, 'click', function(event){alert('2點擊'); });webbtn.myAddFun(btn3, 'click', function(event){alert('3點擊'); });添加一個事件處理函數，來做事件委托
var btn = document.getElementById('btn'); webbtn.myAddFun(btn, 'click', function(event){event = webbtn.getMyEvent(event);var target = webbtn.getMyTarget(event);switch(target.id){case "btn1":alert('1點擊');break;case "btn2":alert('2點擊');break;case "btn3":alert('3點擊');break;} });鍵盤事件
鍵盤事件就是有關鍵盤操作所觸發的世界。
鍵盤事件：
| keydown | 當用戶按下鍵盤上的任意鍵時觸發。按住不放，會重復觸發 |
| keypress | 當用戶按下鍵盤上的字符鍵時觸發。按住不放，會重復觸發 |
| keyup | 當用戶釋放鍵盤上的鍵時觸發 |
鼠標拖拽效果
鼠標綁定onmousedown()，onmousemove()，onmouseup()事件。
mouse網頁，點擊跳轉：mouse.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>mouse</title><style>html,body{width: 100%;height: 100%;}#dd {width: 120px;height: 120px;background: #00ff00;position: absolute;}</style><script>var dd;var mflag = false;function ondown() {dd = document.getElementById('dd');mflag = true;}function onmove(e){if(mflag) {dd.style.left = e.clientX - 60 + "px";dd.style.top = e.clientY - 60 + "px";}}function onup() {mflag = false;}</script></head><body onmousemove="onmove(event)"><div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"</body> </html>鼠標事件
鼠標事件：
| click | 用戶單擊鼠標左鍵或者按下Enter鍵觸發 |
| dbclick | 用戶雙擊鼠標觸發 |
| mousedown | 在用戶按下任意鼠標按鈕時觸發 |
| mouseenter | 在鼠標光標從元素外部首次移動到元素范圍內時觸發，不冒泡 |
| mouseleave | 元素上方的光標移動到元素范圍之外時觸發，不冒泡 |
| mousemove | 光標在元素的內部不斷移動時觸發 |
| mouseover | 用戶指針位于一個元素外部，然后用戶將首次移動到另一個元素邊界之內時觸發 |
| mouseout | 用戶將光標從一個元素上方移動到另一個元素時觸發 |
| mouseup | 在用戶釋放鼠標時觸發 |
| mousewheel | 滾輪滾動時觸發 |
示例：
function web(e) {mouseX = e.clientX;mouseY = e.clientY;console.log("x:"+mouseX + "," + "y:"+mouseY) }<body onclick="web(event)">窗口事件
窗口事件：
load事件，表示當頁面完全加載完之后，就會觸發window上面的load事件。包含所有的圖像，js文件，css文件等外部資源。
示例：
window.onload=function(){}當頁面完全加載完之后執行其中的函數。
示例：
<script>window.onload = function() {var mydiv = document.getElementById("mydiv");console.log(mydiv.innerText);} </script><body><div id="mydiv"></div> </body>示例：
function imgLoad() {myimg = document.getElementById("myimg");// 圖片加載完成后，給圖片加載框myimg.style.border = "9px solid $00ff00"; }<img id="myimg src="" onload="imgLoad()">resize事件
示例：
document.body.clientWidth和document.body.clientHeight獲得窗口的寬和高。
html,body {width: 100%;height: 100%; }<script>function winChange() {winWidth = document.body.clientWidth;winHeight = document.body.clientHeight;} </script><body onresize="winChange()"> </body>scrol事件，文檔或者瀏覽器窗口被滾動時觸發scroll事件
示例：
<script>function scrollChange() {srpos = document.getElementById("srpos");srpos.innerText = document.documentElement.scrollTop;srpos.style.top = docuemnt.documentElement.scrollTop+"px";} </script><body onscroll="scrollChange()"><div style="height:300%;"><br/><font id="srpos" style="position: relative;top: 0px">滾動條滾動到0px</font></div> </body>焦點事件
| blur | 在元素失去焦點時觸發，所有瀏覽器都支持 |
| focus | 在元素獲得焦點時觸發，所有瀏覽器都支持 |
示例：
<script> var note; function myfocus(fname,notename) {note = document.getElementById(notename);note.innerText = fname+'獲得焦點'; }function myblur(fname,notename) {note = document.getElementById(notename);note.innerText = fname + '失去焦點'; } </script><body><form name="myform"><input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font><br/><input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font></form></body>事件介紹
事件方法
| onabort | 圖像加載被中斷 |
| onblur | 元素失去焦點 |
| onchange | 用戶改變域的內容 |
| onclick | 鼠標單擊某個對象 |
| ondblclick | 鼠標雙擊某個對象 |
| onerror | 當加載文檔或圖像時發生某個錯誤 |
| onfocus | 元素獲得焦點 |
| onkeydown | 某個鍵盤的鍵被按下 |
| onkeypress | 某個鍵盤的鍵被按下或者按住 |
| onkeyup | 某個鍵盤的鍵被松開 |
| onload | 某個頁面或者圖像被完成加載 |
| onmousedown | 某個鼠標按鍵被按下 |
| onmousemove | 鼠標被移動 |
| onmouseout | 鼠標從某元素移開 |
| onmouseover | 鼠標被移到某元素之上 |
| onmouseup | 某個鼠標按鍵被松開 |
| onreset | 重置按鈕被單擊 |
| onresize | 窗口或者框架被調整尺寸 |
| onselect | 文本被選定 |
| onsubmit | 提交按鈕被單擊 |
| onunload | 用戶退出頁面 |
窗口事件
鼠標事件
鍵盤事件與事件冒泡，獲取
JavaScript內置對象
JavaScript的DOM操作，包含獲取節點，獲取，設置元素的屬性值，創建，添加節點，刪除節點，屬性操作。
DOM對象
DOM操作
獲取節點的方法：
獲取，設置元素的屬性值
示例：
<script> window.onload=function(){mytable = document.getElementById('mytable');// 獲取mytable中標簽名為tr的字節點trs = mytable.getElementsByTagName("tr");len = trs.length;flag = true;for(i=0;i<len;i++){if(flag){trs[i].setAttribute('bgcolor','#cccccc');flag = false;}else{flag = true;}}ww = mytable.getAttribute('width'); } </script><body> <table id="mytable' align='center' width="80%" border="1"> <tr bgcolor = "#cccccc"><td>aaa</td><td>bbb</td><td>ccc</td> </tr> </table> </body>創建，添加節點
代碼：
// 創建節點：document.createElement("h1"); document.createTextNode(String); document.createAttribute("class");代碼：
element.appendChild(Node);element.insertBefore(newNode, existingNode);代碼：
element.removeChild(Node)屬性操作：獲取當前元素的父節點，獲取當前元素的子節點，獲取當前元素的同級元素，獲取當前元素的文本，獲取當前節點的節點類型，設置樣式。
- 獲取當前元素的父節點
代碼：
element.parentNode- 獲取當前元素的子節點
代碼：
element.chlidren- 獲取當前元素的同級元素
代碼：
element.nextElementSiblingelement.previousElementSibling- 獲取當前元素的文本
代碼：
element.innerHTMLelement.innerText- 獲取當前節點的節點類型
代碼：
node.nodeTypeBOM對象
document對象
document屬性和方法：
| document.bgColor | 設置頁面背景顏色 |
| document.fgColor | 設置前景色 |
| document.linkColor | 未點擊過的鏈接顏色 |
| document.alinkCOlor | 激活鏈接的顏色 |
| document.vlinkColor | 已點擊過的鏈接顏色 |
| document.URL | 設置url屬性，從而在同一窗口打開另一網頁 |
| document.cookie | 設置或讀出cookie |
| document.write() | 動態地向頁面寫入內容 |
| document.createElement(Tag) | 創建一個HTML標簽對象 |
| document.getElementById(ID) | 獲得指定id值的對象 |
| document.getElementsByName(Name) | 獲得指定name值的對象 |
| document.body | 指定文檔主體的開始和結束 |
| document.location.href | 完整url |
| document.location.reload() | 刷新當前網頁 |
| document.location.reload(url) | 打開新的網頁 |
location對象
location屬性和方法：
| location.href | 顯示當前網頁的url鏈接 |
| location.port | 顯示當前網頁鏈接的端口 |
| location.reload() | 重新刷新當前頁面 |
navigator 對象
navigator對象包含有關瀏覽器的信息
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本信息 |
| cookieEnabled | 返回指明瀏覽器的是否啟用cookie的布爾值 |
| platform | 返回運行瀏覽器的操作系統平臺 |
screen對象
screen對象的屬性：
| availHeight | 返回顯示屏幕的高度 |
| availWidth | 返回顯示屏幕的寬度 |
| bufferDepth | 設置或者返回調色板的比特深度 |
| Height | 返回顯示器屏幕的高度 |
| Width | 返回顯示器屏幕的寬度 |
history對象
history對象的屬性：
| history.length | 返回瀏覽器歷史列表中的url數量 |
| history.back() | 加載history列表中的前一個url |
| history.forward() | 加載history列表中的下一個url |
| history.go() | 加載history列表中的某個具體頁面 |
內置函數
數學函數
| ceil | 大于或等于該數的最小整數，向上取整 |
| floor | 小于或等于該數的最大整數，向下取整 |
| min(參數1，參數2) | 返回最小值 |
| max(參數1，參數2) | 返回最大值 |
| pow(參數1,參數2) | 返回數值1的數值2次方 |
| random() | 返回隨機數 |
| round(數值) | 四舍五入 |
| sqrt(數值) | 開平方根 |
日期函數
- set：用于設置Date對象的日期和時間的值。
- get：用去獲取Date對象的日期和時間的值。
- to：用于返回Date對象的字符串格式的值。
- parse和UTC：用于解析Date字符串。
| getFullYear() | 獲取完整的年份 |
| getMonth() | 獲取當前月份 |
| getDate() | 獲取當前日 |
| getDay() | 獲取當前星期幾 |
| getTime() | 獲取當前時間（從1970.1.1開始) |
| getHours() | 獲取當前小時數 |
| getMinutes() | 獲取當前分數 |
| getSeconds() | 獲取當前秒數 |
| toLocalDateString() | 獲取當前日期 |
| toLocalTimeString() | 獲取當前時間 |
| toLocalString() | 獲取日期與時間 |
定時器函數
函數
代碼：
function 函數名(參數){函數體return 返回值 }代碼：
function web1 () {document.write("1"); } web1();var web2 = function(){document.write("2") } web2();// 無須調用，直接執行，此方法不常用 var web3 = new function(document.write("3") );閉包函數
- 內部函數只能在外部函數中訪問
- 內部函數形成閉包
- 可以訪問外部函數的參數和變量
- 外部函數卻不能使用這個內部函數的參數和變量
- 閉包可以給內部函數的變量提供一定的安全保障
在js中一個函數在另一個函數中定義，就可以訪問到父函數的成員，內部的函數就稱為閉合函數。
閉合是詞法閉包的簡稱，是引用了自由變量的函數。
閉包函數的特點：
代碼：
function init() {var name = "web"; // name 是一個被 init 創建的局部變量function displayName() { // displayName() 是內部函數，一個閉包alert(name); // 使用了父函數中聲明的變量}displayName(); } init();init() 創建了一個局部變量 name 和一個名為 displayName() 的函數。
displayName() 是定義在 init() 里的內部函數，并且僅在 init() 函數體內可用。
displayName() 沒有自己的局部變量。然而，因為它可以訪問到外部函數的變量，所以 displayName() 可以使用父函數 init() 中聲明的變量 name 。
displayName() 函數內的 alert() 語句成功顯示出了變量 name 的值（該變量在其父函數中聲明）。
這個詞法作用域的例子描述了分析器如何在函數嵌套的情況下解析變量名。
詞法指，詞法作用域根據源代碼中聲明變量的位置來確定該變量在何處可用。嵌套函數可訪問聲明于它們外部作用域的變量。
閉包是一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。
JavaScript中所有的function都是一個閉包。不過一般來說，嵌套的function所產生的閉包更為強大，也是大部分時候我們所謂的“閉包”。
閉包的作用
在a執行完并返回后，閉包使得Javascript的垃圾回收機制GC不會收回a所占用的資源，因為a的內部函數b的執行需要依賴a中的變量。
定時器和閉包
代碼如下：
for(var i = 0 ; i<10; i++){setTimeout(function(){console.log(i);},100); }返回的是10個10。
解決：
ES6之前，使用var聲明變量會變量提升問題：
for(var i = 0 ; i<10; i++) {console.log(i) };console.log(i); // 變量提升 返回10對象
示例：
// 1 var Person = function(id,name){this.id = di;this.name = name; } var user1 = new Person(1,"web");// 2 var web1 = {id:1,name:"web"}; var web2 = Object.create({id:2,name:"web"});正則表達式太難了
創建正則表達式
使用一個正則表達式字面量：
let reg = /ab+c/; let reg = /^[a-zA-z]/gi;字符串方法
| search() | 檢索與正則表達式相匹配的值 |
| match() | 找到一個或者多個正則表達式的匹配 |
| replace() | 替換與正則表達式的字符串 |
| split() | 把字符串分割為字符串數組 |
正則對象方法
RegExp對象方法
| test() | 用于檢測一個字符串是否匹配某個模式 |
| exec() | 該方法用于檢索字符串中的正則表達式的匹配,該函數返回一個數組 |
元字符是擁有特殊含義的字符：
. 查找單個字符，除了換行和行結束符。 \w 查找單詞字符。 \W 查找非單詞字符。 \d 查找數字。 \D 查找非數字字符。 \s 查找空白字符。 \S 查找非空白字符。 \0 查找 NUL 字符。 \n 查找換行符。 \f 查找換頁符。 \r 查找回車符。 \t 查找制表符。 \v 查找垂直制表符。 \xxx 查找以八進制數 xxx 規定的字符。 \xdd 查找以十六進制數 dd 規定的字符。 \uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。量詞
量詞描述
| n+ | 至少一個 n 的字符串。 |
| n* | 零個或多個 n 的字符串。 |
| n? | 零個或一個 n 的字符串。 |
| n{X} | X 個 n 的序列的字符串。 |
| n{X,Y} | X 至 Y 個 n 的序列的字符串。 |
| n{X,} | 至少 X 個 n 的序列的字符串。 |
| n$ | 匹配任何結尾為 n 的字符串。 |
| ^n | 匹配任何開頭為 n 的字符串。 |
| ?=n | 匹配任何其后緊接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后沒有緊接指定字符串 n 的字符串。 |
new RegExp(str[, attr])接收2個參數，str是一個字符串，指定正則表達式匹配規則，attr可選，表示匹配模式，值有g(全局匹配),i(區分大小寫的匹配)和m(多行匹配)。
表達式：g,i,mg 表示全局模式應用于所有字符串，而非在發現第一個匹配項就停止i 表示不區分大小寫模式m 表示多行模式繼續查找下一行中是否存在模式匹配的項| i | 執行對大小寫不敏感的匹配。 |
| g | 執行全局匹配。 |
| m | 執行多行匹配。 |
arguments對象
函數的實際參數會被保存在一個類數組對象 arguments 對象中，通過索引訪問具體的參數：
var a = arguments[i]文本框失去焦點事件、獲得焦點事件
onBlur:當失去輸入焦點后產生該事件
onFocus:當輸入獲得焦點后，產生該文件
Onchange:當文字值改變時，產生該事件
Onselect:當文字加亮后，產生該文件
記憶力最好的三個時間段
??感謝大家
1.如果本文對你有幫助，就點個贊支持下吧，你的「贊」是我創作的動力。
2.添加微信【xiaoda0423】，拉你進技術交流群一起學習。
總結
以上是生活随笔為你收集整理的【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php orc 验证码,百度图片识别or
- 下一篇： 理解Spring 容器设计理念