當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
生活随笔
收集整理的這篇文章主要介紹了
【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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 聲明一個塊作用域的只讀命名的常量。
- 變量的名字又叫做“標識符”，必須以字母、下劃線（_）或者美元符號（$）開頭，并且區(qū)分大小寫。
- 若沒有為變量賦初始值，則值默認為undefined
- 若沒有聲明變量而直接使用，拋出ReferenceError錯誤
- 當變量值為undefined時，布爾值環(huán)境當做false
- 當變量值為null時，布爾值環(huán)境當做false
數(shù)據(jù)類型
- Boolean布爾值，true和false
- null對大小寫敏感
- undefined空類型，變量未定義時候的值
- Number數(shù)值類型
- String字符串類型
- Symbol（ES6新增）表示一種唯一且不可變的數(shù)據(jù)
字面量
- 字面量是用來表示如何表達這個值
- 變量賦值時右邊的都是字面量
- 數(shù)組字面量
- 布爾字面量
- 浮點數(shù)字面量
- 對象字面量
- 整數(shù)字面量
- 正則字面量
- 字符串字面量
全局變量
代碼：
// ES5var a = 'web';window.a; // 'web'// ES6let b = 'web';window.b; // undefined注釋
代碼：
// 單行注釋/*多行注釋*/變量作用域
- 全局變量：即聲明在函數(shù)之外，當前文檔所有地方都可以訪問
- 局部遍歷：即聲明在函數(shù)內部，僅在當前函數(shù)內可以訪問
代碼：
// 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函數(shù)聲明有兩種方式
代碼：
// 函數(shù)聲明f(); // 'web'function(){console.log('web');}; // 函數(shù)表達式g(); // Uncaught TypeError: g is not a functionvar g = function(){ // 換成 let 聲明也一樣console.log('web');}常量
- 使用const來聲明一個只讀的常量
- const聲明的變量不能直接修改值，但是對于對象和數(shù)組，卻是不受保護可以修改的
示例{}包含的內容表示一個代碼塊
代碼：
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()方法判斷參數(shù)值是否是有窮的。
示例：
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是一個數(shù)組類型');}else{console.log('a不是一個數(shù)組類型');} </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 |
示例：
賦值運算符的符號為=算數(shù)運算符：+，-，*，/，%比較運算符：>，>=，<，<=，!=，==，===，！==邏輯運算符： &&，邏輯與，表示表達式前后全為true才能返回true||，邏輯或，表示表達式前后只要有一個true就返回true!，邏輯取反，表示表達式后若為true，則返回false，否則反之。- 算數(shù)運算符
- 比較運算符
- 邏輯運算符
- 賦值運算符
分支循環(huán)
示例：
if(條件 1) {當條件1為true時執(zhí)行的代碼 }else if(條件 2){當條件2為true時執(zhí)行的代碼 }else{當條件1和條件2都不為true時執(zhí)行的代碼 }示例：
switch(n){case1:執(zhí)行代碼塊1break;case2:執(zhí)行代碼塊2break;default:... }示例：
for(語句1;語句2;語句3){被執(zhí)行的代碼塊 }遍歷
示例：
for(鍵 in 對象) {代碼塊 }示例：
while(表達式){代碼塊 }示例：
do {代碼 }while(表達式)數(shù)組
數(shù)組的屬性和方法：
| concat() | 連接兩個或者更多的數(shù)組，并返回結果 |
| join() | 把數(shù)組的所有元素放入一個字符串，元素通過指定的分隔符進行分隔 |
| pop() | 刪除并返回數(shù)組的最后一個元素 |
| push() | 向數(shù)組的末尾添加一個或者多個元素，并返回新的長度 |
| reverse() | 顛倒數(shù)組中元素的順序 |
| shift() | 刪除并返回數(shù)組的第一個元素 |
| slice() | 從某個已有的數(shù)組返回選定的元素 |
| sort() | 對數(shù)組的元素進行排序 |
| splice() | 刪除元素，并向數(shù)組添加新元素 |
| toSource() | 返回該對象的源代碼 |
| toString() | 將數(shù)組轉換為字符串，并返回結果 |
| toLocalString() | 將數(shù)組轉換為本地數(shù)組，并返回結果 |
| unshift() | 向數(shù)組的開頭添加一個或者更多元素，并返回新的長度 |
| valueOf() | 返回數(shù)組對象的原始值 |
| indexOf() | 在數(shù)組中搜索指定元素并返回第一個匹配的索引 |
| lastIndexOf() | 在數(shù)組中搜索指定元素并返回最后一個匹配的索引 |
concat()
連接兩個或更多的數(shù)組，并返回一個新數(shù)組。
語法:
arr.concat(a1, a2, ..., an)參數(shù):
join()
使用指定分隔符，連接兩個或多個數(shù)組的元素，返回一個字符串。
數(shù)組定義
數(shù)組操作
- pop方法，從尾部刪除，刪除后元素從數(shù)組上剝離并返回。
- shift方法，從頭部刪除元素，并返回。
- splice方法，從指定位置刪除指定的元素。
- unshift方法，從頭部插入。
- splice方法，從指定位置插入指定個數(shù)的元素。
- concat方法將多個數(shù)組連接成一個數(shù)組。
- join方法將數(shù)組中的元素合并成一個用指定分隔符合并起來的字符串。
- reverse方法可以將數(shù)組中的元素倒序排列，而且直接改變原來的數(shù)組，不會創(chuàng)建新的數(shù)組。
- sort方法可以將數(shù)組中的元素按照一定的規(guī)則自動排序（默認的是按照字符的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)測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。some()測試數(shù)組中的某些元素是否通過由提供的函數(shù)實現(xiàn)的測試。filter()
示例：
let a = [1, "", "aa", 2, 6]; let res = a.filter(function(val, index, arr){return typeof val == "number"; }) res;//[1, 2, 6]map()
對每個元素執(zhí)行此方法，并返回一個執(zhí)行后的數(shù)組。
示例：
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() 方法對數(shù)組中的每個元素執(zhí)行一個由您提供的reducer函數(shù)(升序執(zhí)行)，將其結果匯總為單個返回值。
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函數(shù)時的第一個參數(shù)的值。 如果沒有提供初始值，則將使用數(shù)組中的第一個元素。 在沒有初始值的空數(shù)組上調用 reduce 將報錯。字符串對象屬性
字符串對象屬性
| constructor | 對創(chuàng)建該對象的函數(shù)的引用 |
| length | 字符串的長度 |
| prototype | 允許向對象添加屬性和方法 |
字符串對象方法
字符串對象方法
| anchor() | 創(chuàng)建HTML錨 |
| big() | 用大號字體顯示字符串 |
| blink() | 顯示閃動字符串 |
| bold() | 使用粗體顯示字符串 |
| charAt() | 返回在指定位置的字符 |
| charCodeAt() | 返回在指定位置的字符的Unicode編碼 |
| concat() | 連接字符串 |
| fixed() | 以打字機文本顯示字符串 |
| fontcolor() | 使用指定的顏色顯示字符串 |
| fontsize() | 使用指定的尺寸顯示字符串 |
| fromCharCode() | 從字符編碼創(chuàng)建一個字符串 |
| indexOf() | 檢查字符串 |
| italics() | 使用斜體顯示字符串 |
| lastIndexOf() | 從后向前搜索字符串 |
| link() | 將字符串顯示為鏈接 |
| localeCompare() | 用本地特定的順序比較兩個字符串 |
| match() | 找到一個或者多個正則表達式的匹配 |
| replace() | 替換與正則表達式匹配的子串 |
| search() | 檢索與正則表達式匹配的值 |
| slice() | 提取字符串的片段，并在新的字符串中返回被提取的部分 |
| small() | 使用小字號顯示字符串 |
| split() | 將字符串分割為字符串數(shù)組 |
| strike() | 使用刪除線顯示字符串 |
| sub() | 將字符串顯示為下標 |
| substr() | 從起始索引號提取字符串中指定數(shù)目的字符 |
| substring() | 提取字符串中兩個指定的索引號之間的字符 |
| sup() | 將字符串顯示為上標 |
| toLocaleLowerCase() | 將字符串轉換為小寫 |
| toLocaleUpperCase() | 將字符串轉換為大寫 |
| toLowerCase() | 將字符串轉換為小寫 |
| toUpperCase() | 將字符串轉換為大寫 |
| toString() | 返回字符串 |
| valueOf() | 返回某個字符串對象的原始值 |
| toSource() | 代表對象的源代碼 |
字符串搜索
indexOf()，lastIndexOf()，search()和match()。
字符串截取
3種字符串截取方法：substring(),slice(),substr()
字符串替換
replace()，replace(正則表達式/要被替換的字符串，要替換成為的子字符串)。
字符串切割
split()用于將一個字符串分割成字符串數(shù)組，語法為字符串。split(用于分割的子字符串，返回數(shù)組的最大長度)，返回數(shù)組的最大長度一般情況下不設置。
JS事件三個階段
事件流：
事件的處理過程主要有三個階段：捕獲階段，目標階段，冒泡階段
事件流包含三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。
- 捕獲，事件由頁面元素接收，逐級向下，到具體的元素
- 目標，具體的元素本身
- 冒泡，元素本身，逐級向上，到頁面元素
事件冒泡和事件捕獲
事件觸發(fā)方式
代碼：
addEventListener("click","doSomething","true")第三個參數(shù)為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網(wǎng)頁，點擊跳轉：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點擊'); });添加一個事件處理函數(shù)，來做事件委托
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;} });鍵盤事件
鍵盤事件就是有關鍵盤操作所觸發(fā)的世界。
鍵盤事件：
| keydown | 當用戶按下鍵盤上的任意鍵時觸發(fā)。按住不放，會重復觸發(fā) |
| keypress | 當用戶按下鍵盤上的字符鍵時觸發(fā)。按住不放，會重復觸發(fā) |
| keyup | 當用戶釋放鍵盤上的鍵時觸發(fā) |
鼠標拖拽效果
鼠標綁定onmousedown()，onmousemove()，onmouseup()事件。
mouse網(wǎng)頁，點擊跳轉：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鍵觸發(fā) |
| dbclick | 用戶雙擊鼠標觸發(fā) |
| mousedown | 在用戶按下任意鼠標按鈕時觸發(fā) |
| mouseenter | 在鼠標光標從元素外部首次移動到元素范圍內時觸發(fā)，不冒泡 |
| mouseleave | 元素上方的光標移動到元素范圍之外時觸發(fā)，不冒泡 |
| mousemove | 光標在元素的內部不斷移動時觸發(fā) |
| mouseover | 用戶指針位于一個元素外部，然后用戶將首次移動到另一個元素邊界之內時觸發(fā) |
| mouseout | 用戶將光標從一個元素上方移動到另一個元素時觸發(fā) |
| mouseup | 在用戶釋放鼠標時觸發(fā) |
| mousewheel | 滾輪滾動時觸發(fā) |
示例：
function web(e) {mouseX = e.clientX;mouseY = e.clientY;console.log("x:"+mouseX + "," + "y:"+mouseY) }<body onclick="web(event)">窗口事件
窗口事件：
load事件，表示當頁面完全加載完之后，就會觸發(fā)window上面的load事件。包含所有的圖像，js文件，css文件等外部資源。
示例：
window.onload=function(){}當頁面完全加載完之后執(zhí)行其中的函數(shù)。
示例：
<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事件，文檔或者瀏覽器窗口被滾動時觸發(fā)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 | 在元素失去焦點時觸發(fā)，所有瀏覽器都支持 |
| focus | 在元素獲得焦點時觸發(fā)，所有瀏覽器都支持 |
示例：
<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 | 當加載文檔或圖像時發(fā)生某個錯誤 |
| onfocus | 元素獲得焦點 |
| onkeydown | 某個鍵盤的鍵被按下 |
| onkeypress | 某個鍵盤的鍵被按下或者按住 |
| onkeyup | 某個鍵盤的鍵被松開 |
| onload | 某個頁面或者圖像被完成加載 |
| onmousedown | 某個鼠標按鍵被按下 |
| onmousemove | 鼠標被移動 |
| onmouseout | 鼠標從某元素移開 |
| onmouseover | 鼠標被移到某元素之上 |
| onmouseup | 某個鼠標按鍵被松開 |
| onreset | 重置按鈕被單擊 |
| onresize | 窗口或者框架被調整尺寸 |
| onselect | 文本被選定 |
| onsubmit | 提交按鈕被單擊 |
| onunload | 用戶退出頁面 |
窗口事件
鼠標事件
鍵盤事件與事件冒泡，獲取
JavaScript內置對象
JavaScript的DOM操作，包含獲取節(jié)點，獲取，設置元素的屬性值，創(chuàng)建，添加節(jié)點，刪除節(jié)點，屬性操作。
DOM對象
DOM操作
獲取節(jié)點的方法：
獲取，設置元素的屬性值
示例：
<script> window.onload=function(){mytable = document.getElementById('mytable');// 獲取mytable中標簽名為tr的字節(jié)點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>創(chuàng)建，添加節(jié)點
代碼：
// 創(chuàng)建節(jié)點：document.createElement("h1"); document.createTextNode(String); document.createAttribute("class");代碼：
element.appendChild(Node);element.insertBefore(newNode, existingNode);代碼：
element.removeChild(Node)屬性操作：獲取當前元素的父節(jié)點，獲取當前元素的子節(jié)點，獲取當前元素的同級元素，獲取當前元素的文本，獲取當前節(jié)點的節(jié)點類型，設置樣式。
- 獲取當前元素的父節(jié)點
代碼：
element.parentNode- 獲取當前元素的子節(jié)點
代碼：
element.chlidren- 獲取當前元素的同級元素
代碼：
element.nextElementSiblingelement.previousElementSibling- 獲取當前元素的文本
代碼：
element.innerHTMLelement.innerText- 獲取當前節(jié)點的節(jié)點類型
代碼：
node.nodeTypeBOM對象
document對象
document屬性和方法：
| document.bgColor | 設置頁面背景顏色 |
| document.fgColor | 設置前景色 |
| document.linkColor | 未點擊過的鏈接顏色 |
| document.alinkCOlor | 激活鏈接的顏色 |
| document.vlinkColor | 已點擊過的鏈接顏色 |
| document.URL | 設置url屬性，從而在同一窗口打開另一網(wǎng)頁 |
| document.cookie | 設置或讀出cookie |
| document.write() | 動態(tài)地向頁面寫入內容 |
| document.createElement(Tag) | 創(chuàng)建一個HTML標簽對象 |
| document.getElementById(ID) | 獲得指定id值的對象 |
| document.getElementsByName(Name) | 獲得指定name值的對象 |
| document.body | 指定文檔主體的開始和結束 |
| document.location.href | 完整url |
| document.location.reload() | 刷新當前網(wǎng)頁 |
| document.location.reload(url) | 打開新的網(wǎng)頁 |
location對象
location屬性和方法：
| location.href | 顯示當前網(wǎng)頁的url鏈接 |
| location.port | 顯示當前網(wǎng)頁鏈接的端口 |
| location.reload() | 重新刷新當前頁面 |
navigator 對象
navigator對象包含有關瀏覽器的信息
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本信息 |
| cookieEnabled | 返回指明瀏覽器的是否啟用cookie的布爾值 |
| platform | 返回運行瀏覽器的操作系統(tǒng)平臺 |
screen對象
screen對象的屬性：
| availHeight | 返回顯示屏幕的高度 |
| availWidth | 返回顯示屏幕的寬度 |
| bufferDepth | 設置或者返回調色板的比特深度 |
| Height | 返回顯示器屏幕的高度 |
| Width | 返回顯示器屏幕的寬度 |
history對象
history對象的屬性：
| history.length | 返回瀏覽器歷史列表中的url數(shù)量 |
| history.back() | 加載history列表中的前一個url |
| history.forward() | 加載history列表中的下一個url |
| history.go() | 加載history列表中的某個具體頁面 |
內置函數(shù)
數(shù)學函數(shù)
| ceil | 大于或等于該數(shù)的最小整數(shù)，向上取整 |
| floor | 小于或等于該數(shù)的最大整數(shù)，向下取整 |
| min(參數(shù)1，參數(shù)2) | 返回最小值 |
| max(參數(shù)1，參數(shù)2) | 返回最大值 |
| pow(參數(shù)1,參數(shù)2) | 返回數(shù)值1的數(shù)值2次方 |
| random() | 返回隨機數(shù) |
| round(數(shù)值) | 四舍五入 |
| sqrt(數(shù)值) | 開平方根 |
日期函數(shù)
- set：用于設置Date對象的日期和時間的值。
- get：用去獲取Date對象的日期和時間的值。
- to：用于返回Date對象的字符串格式的值。
- parse和UTC：用于解析Date字符串。
| getFullYear() | 獲取完整的年份 |
| getMonth() | 獲取當前月份 |
| getDate() | 獲取當前日 |
| getDay() | 獲取當前星期幾 |
| getTime() | 獲取當前時間（從1970.1.1開始) |
| getHours() | 獲取當前小時數(shù) |
| getMinutes() | 獲取當前分數(shù) |
| getSeconds() | 獲取當前秒數(shù) |
| toLocalDateString() | 獲取當前日期 |
| toLocalTimeString() | 獲取當前時間 |
| toLocalString() | 獲取日期與時間 |
定時器函數(shù)
函數(shù)
代碼：
function 函數(shù)名(參數(shù)){函數(shù)體return 返回值 }代碼：
function web1 () {document.write("1"); } web1();var web2 = function(){document.write("2") } web2();// 無須調用，直接執(zhí)行，此方法不常用 var web3 = new function(document.write("3") );閉包函數(shù)
- 內部函數(shù)只能在外部函數(shù)中訪問
- 內部函數(shù)形成閉包
- 可以訪問外部函數(shù)的參數(shù)和變量
- 外部函數(shù)卻不能使用這個內部函數(shù)的參數(shù)和變量
- 閉包可以給內部函數(shù)的變量提供一定的安全保障
在js中一個函數(shù)在另一個函數(shù)中定義，就可以訪問到父函數(shù)的成員，內部的函數(shù)就稱為閉合函數(shù)。
閉合是詞法閉包的簡稱，是引用了自由變量的函數(shù)。
閉包函數(shù)的特點：
代碼：
function init() {var name = "web"; // name 是一個被 init 創(chuàng)建的局部變量function displayName() { // displayName() 是內部函數(shù)，一個閉包alert(name); // 使用了父函數(shù)中聲明的變量}displayName(); } init();init() 創(chuàng)建了一個局部變量 name 和一個名為 displayName() 的函數(shù)。
displayName() 是定義在 init() 里的內部函數(shù)，并且僅在 init() 函數(shù)體內可用。
displayName() 沒有自己的局部變量。然而，因為它可以訪問到外部函數(shù)的變量，所以 displayName() 可以使用父函數(shù) init() 中聲明的變量 name 。
displayName() 函數(shù)內的 alert() 語句成功顯示出了變量 name 的值（該變量在其父函數(shù)中聲明）。
這個詞法作用域的例子描述了分析器如何在函數(shù)嵌套的情況下解析變量名。
詞法指，詞法作用域根據(jù)源代碼中聲明變量的位置來確定該變量在何處可用。嵌套函數(shù)可訪問聲明于它們外部作用域的變量。
閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。
JavaScript中所有的function都是一個閉包。不過一般來說，嵌套的function所產(chǎn)生的閉包更為強大，也是大部分時候我們所謂的“閉包”。
閉包的作用
在a執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機制GC不會收回a所占用的資源，因為a的內部函數(shù)b的執(zhí)行需要依賴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"});正則表達式太難了
創(chuàng)建正則表達式
使用一個正則表達式字面量：
let reg = /ab+c/; let reg = /^[a-zA-z]/gi;字符串方法
| search() | 檢索與正則表達式相匹配的值 |
| match() | 找到一個或者多個正則表達式的匹配 |
| replace() | 替換與正則表達式的字符串 |
| split() | 把字符串分割為字符串數(shù)組 |
正則對象方法
RegExp對象方法
| test() | 用于檢測一個字符串是否匹配某個模式 |
| exec() | 該方法用于檢索字符串中的正則表達式的匹配,該函數(shù)返回一個數(shù)組 |
元字符是擁有特殊含義的字符：
. 查找單個字符，除了換行和行結束符。 \w 查找單詞字符。 \W 查找非單詞字符。 \d 查找數(shù)字。 \D 查找非數(shù)字字符。 \s 查找空白字符。 \S 查找非空白字符。 \0 查找 NUL 字符。 \n 查找換行符。 \f 查找換頁符。 \r 查找回車符。 \t 查找制表符。 \v 查找垂直制表符。 \xxx 查找以八進制數(shù) xxx 規(guī)定的字符。 \xdd 查找以十六進制數(shù) dd 規(guī)定的字符。 \uxxxx 查找以十六進制數(shù) xxxx 規(guī)定的 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個參數(shù)，str是一個字符串，指定正則表達式匹配規(guī)則，attr可選，表示匹配模式，值有g(全局匹配),i(區(qū)分大小寫的匹配)和m(多行匹配)。
表達式：g,i,mg 表示全局模式應用于所有字符串，而非在發(fā)現(xiàn)第一個匹配項就停止i 表示不區(qū)分大小寫模式m 表示多行模式繼續(xù)查找下一行中是否存在模式匹配的項| i | 執(zhí)行對大小寫不敏感的匹配。 |
| g | 執(zhí)行全局匹配。 |
| m | 執(zhí)行多行匹配。 |
arguments對象
函數(shù)的實際參數(shù)會被保存在一個類數(shù)組對象 arguments 對象中，通過索引訪問具體的參數(shù)：
var a = arguments[i]文本框失去焦點事件、獲得焦點事件
onBlur:當失去輸入焦點后產(chǎn)生該事件
onFocus:當輸入獲得焦點后，產(chǎn)生該文件
Onchange:當文字值改變時，產(chǎn)生該事件
Onselect:當文字加亮后，產(chǎn)生該文件
記憶力最好的三個時間段
??感謝大家
1.如果本文對你有幫助，就點個贊支持下吧，你的「贊」是我創(chuàng)作的動力。
2.添加微信【xiaoda0423】，拉你進技術交流群一起學習。
總結
以上是生活随笔為你收集整理的【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php orc 验证码,百度图片识别or
- 下一篇： Twitter群推王的推特自动发帖功能是