數(shù)據(jù)類型:
一,原始類型: Number String Boolean null undefined
二,引用類型
轉(zhuǎn)字符串:
x.toString() 如果x為undefined 和 null 報錯
String(x) 萬能
快速轉(zhuǎn)換 x+""
轉(zhuǎn)數(shù)字
Number(x)
parseInt(str)
parseFloat(str)
"6"-0=6
轉(zhuǎn)布爾
true
false "" null 0 undefined NaN
!x
!!x
邏輯運算&& ||
&&：兩個條件必須都為true，才返回true,只要有一個為false，則返回false
||：兩個條件只要有一個為true，就返回true,除非所有條件都為false，才返回false
短路邏輯:
- 1件事，滿足條件就做，不滿足條件，就不做！
條件&&(操作);
何時使用：如果操作僅有一兩句話時 - 如果前一個值有效，就用前一個，否則就用后一個
值1| |值2
三目運算(如果操作語句簡單就用三目吧)
條件1?(值1或操作1):
條件2?(值2或操作2):
默認(rèn)值或操作;
編碼
url中不允許出現(xiàn)多字節(jié)字符
encodeURI()將多字節(jié)字符編碼為utf-8格式的單字節(jié)字符(中文轉(zhuǎn)) encodeURI("百")=>"%E7%99%BE"
decodeURI()將受到編碼后的單字節(jié)字符解碼為多字節(jié)字符原文 decodeURI("%E7%99%BE")=>"百"
url中不允許出現(xiàn)保留字 比如:/
encodeURIComponent()編碼
decodeURIComponent()解碼
eval()執(zhí)行字符串格式的語句或表達(dá)式
js中分母是0，不報錯！返回：Infinity
isFinite(n) 判斷是否有效數(shù)字范圍內(nèi)
分支結(jié)構(gòu)
if(){}else{}...
switch..case結(jié)構(gòu) 當(dāng)條件為"全等"比較時
switch(表達(dá)式){
case x1: 代碼段;
break;
case x2: 代碼段;
break;
....
default;
}
循環(huán)結(jié)構(gòu)
var 循環(huán)變量=初始值;
while(循環(huán)條件){
循環(huán)體;
迭代修改循環(huán)變量;
}
var 循環(huán)變量=初始值;
do{
循環(huán)體;
迭代修改循環(huán)變量;
}while(循環(huán)條件)
for(var 循環(huán)變量=初始值;循環(huán)條件;迭代修改循環(huán)變量){循環(huán)體;}
數(shù)組
創(chuàng)建數(shù)組的集中方法:
var arr=[];
var arr=new Array();
var arr=[1,2,3...]
var arr=new Array(n)
var arr=new Array(1,2,3...)
案例:找最大值
function getMax(arr){
var max=arr[0];
for(var i=1;i<arr.length;i++){
arr[i]>max&&(max=arr[i]);
}
return max;
}
console.log(getMax([3,7,8,9,6,2,5,3]))
案例:冒泡排序
function bSort(arr) {
for(var r=1;r<arr.length;r++){
for (var i = 0; i < arr.length-r; i++) {
if(arr[i]>arr[i+1]){
arr[i]+=arr[i+1];
arr[i+1]=arr[i]-arr[i+1];
arr[i]-=arr[i+1]
}
}
}
return arr;
}
bSort([6,5,3,8,96,9,0]);
console.log( bSort([6,5,3,8,96,9,0]))
關(guān)聯(lián)數(shù)組(hash數(shù)組)
遍歷:
for(var key in arr){
arr[key]
}
案例:利用關(guān)聯(lián)數(shù)組統(tǒng)計個數(shù)或去重
var arr=[5,3,6,9,8,2,6,5,9];
var hash=[];
for(var i=0;i<arr.length;i++){
if(hash[arr[i]]!=undefined){
hash[arr[i]]++;
}else{
hash[arr[i]]=1;
}
}
console.log(hash)//[2: 1, 3: 1, 5: 2, 6: 2, 8: 1, 9: 2] hash[key]出個數(shù)了
arr=[];
for(var key in hash){
arr[arr.length]=(key-0)
}
數(shù)組API
數(shù)組排序sort方法:
升序:function compare(a,b){return a-b;}
降序:function compare(a,b){return b-a;}
arr.sort(compare);
arr.toString()
arr.join() //頻繁字符串拼接，推薦使用數(shù)組的join方法作為替代
arr.concat()
arr.slice()
arr.splice()
arr.reverse()
arr.sort() //只能將所有元素轉(zhuǎn)化為字符串再排序 無法對數(shù)字類型排序
arr.push() //末尾入棧
arr.pop() //末尾出棧
arr.unshift() //開頭入棧
arr.shift() //開頭入棧
二維數(shù)組:arr[r][l]
遍歷二維數(shù)組：固定套路：外層循環(huán)遍歷行，內(nèi)層循環(huán)遍歷列
for(var r=0;r<arr.length;i++){
for(var l=0;l<arr[r].length;l++){
arr[r][l]
}
}
內(nèi)置對象:ES標(biāo)準(zhǔn)中規(guī)定,瀏覽器廠商已經(jīng)實現(xiàn)的對象 11
String Number Boolean Array RegExp Math Date Error Function Object Global(全局對象window)
String API
str[i]
str.length
str.slice()
str.substring() //正牌截取字符串的api
str.substr() //叢幾開始 獲取幾個only
str.split() //切割完了之后是數(shù)組
str.concat()
str.toUpperCase()
str.toLowerCase()
str.charAt(i) //=str[i]
str.charCodeAt(i) //指定下標(biāo)的unicode號
str.indexOf() //返回的關(guān)鍵詞第一個字符的下標(biāo)的位置
str.lastIndexOf()
正則表達(dá)式 查找 驗證 替換 切割
預(yù)定義字符集:
一個數(shù)字==>\d [0-9]
一個數(shù)字/字母/下劃線 ==>\w [0-9a-zA-Z_]
一個空白字符 ==> \s [\n\r\t\v\f]
除了回車和換行的任意單個字符==> . [^\n\r]
數(shù)量
至少m個,最多n個 ==> {m,n}
m個以上 ==> {m,}
必須m個 ==> {m}
可有可無,多了不限==> *
可有可無,最多一個==> ?
1個以上 ==> +
選擇和分組 ==> | ( )
匹配開頭和結(jié)尾^正則$
正則API
var i=str.search(reg) //只適合判斷有沒有 如果沒有返回-1
var kwords=str.match(reg)//i區(qū)分大小寫 g全局 如果不加g只匹配第一個 返回的是一個數(shù)組 如果沒找到返回null 用之前最好先判斷
str.replace(reg,"替換值") 注:reg后一般都要加g
查找:==>
var arr=reg.exec(str)
返回數(shù)組
arr[0]獲取內(nèi)容
arr.index關(guān)鍵詞首字母位置
驗證==>幾乎都要加^ $
var bool=reg.test(str)
數(shù)學(xué)方法
Math.ceil(n) 上取整
Math.floor(n) 下取整
Math.round(n) 四舍五入取整
n.toFixed(d) 按任意小數(shù)位數(shù) 返回String
ParseInt(Math.random()*(max-min+1)+min) --->隨機(jī)數(shù)
日期對象
var now=new Date()
var date=new Date("2017/06/30 10:04:00")
var date=new Date(2017,06,30,10,05,00)
getTime() //獲取的是毫秒數(shù)
分量值(get或set) 星期沒有set方法 Month需要+1
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
錯誤處理
try{
可能發(fā)生錯誤的代碼
}catch(err){ //err中發(fā)生錯誤時會自動收到創(chuàng)建的error對象
err.message: 保存了錯誤的詳細(xì)原因
err.name: 保存了錯誤對象的名稱
如果發(fā)生錯誤，才執(zhí)行的錯誤處理代碼
}[finally{ //無論是否發(fā)生錯誤，都執(zhí)行的代碼 *一定會在退出*之前*執(zhí)行*
一般釋放用過的對象資源：xxx=null
}]
js的語法不支持重載--->可使用arguments實現(xiàn)重載效果。
arguments.length ------------->參數(shù)值的個數(shù)
arguments[i] ------------------->獲得下標(biāo)為i位置的參數(shù)值
創(chuàng)建函數(shù)的三種方式
function 函數(shù)名(參數(shù)列表){函數(shù)體;return 值}
var 函數(shù)名=function(參數(shù)列表){函數(shù)體;return 值}
var 函數(shù)名=new Function("參數(shù)1","參數(shù)2",...,"函數(shù)體");
匿名函數(shù)
(function(參數(shù)列表){
函數(shù)體;
return 值
})(參數(shù)值列表);
閉包
函數(shù)嵌套！內(nèi)層函數(shù)使用外層函數(shù)的局部變量,內(nèi)層函數(shù)被返回到外部，在外部調(diào)用。
面向?qū)ο?-->將多個相關(guān)的屬性和函數(shù)集中定義在一個對象中
創(chuàng)建對象的三種方法: 直接量 new創(chuàng)建 利用構(gòu)造函數(shù)反復(fù)創(chuàng)建多個相同結(jié)構(gòu)的對象
var obj{屬性名:屬性值,方法名:function(){} }
var obj=new Object(); obj.屬性名=值; obj.方法名=function(){}
function fun(a,b){
this.a=a;
this.b=b;
this.intrSelf=function(){xxx}
}
var obj=new fun("lili",20)
obj.a-->lili
obj.b-->20
原型和原型鏈
判斷對象的屬性是自有，還是共有：3種情況
自有屬性：保存在對象本地的屬性
共有屬性：保存在公共原型對象中的屬性
如何判斷一個屬性是否可用 2種
1.in關(guān)鍵字："屬性名" in 對象
如果"屬性名"在當(dāng)前對象的原型鏈中，返回true 如果在整條原型鏈上都沒找到，返回false
eg:console.log("intrSelf" in hmm)
2.使用===undefined：說明不包含！ 簡寫為(!對象.成員名)
專門判斷是否自有屬性：obj.hasOwnProperty("成員");
如果obj本地有指定"成員"，則返回true,沒有返回false
判斷共有屬性：不是自有的，還要存在于原型鏈上
if(!obj.hasOwnProperty("成員")&&"成員" in obj)獲得任意對象的proto屬性：獲得父級對象
var 父對象=Object.getPrototypeOf(對象);判斷父對象是否處在子對象原型鏈的上級：
父對象.isPrototypeOf(子對象)
只要父對象在子對象的原型鏈上，就返回true 否則返回false
DOM
核心DOM適合操作節(jié)點，如創(chuàng)建，刪除，查找等 HTML DOM適合操作屬性，如讀取或修改屬性的值
查找元素
var elem=document.getElementById("id值"); ----->按id查找
var elems=node.getElementsByTagName("tagName") ----->按標(biāo)簽名查找
var elems=node.getElementsByClassName("類名")； ----->按className查找
var elems=document.getElementsByName("name屬性的值") ----->按name名 查找
var form=document.forms["form的id值"]； ----->按id查找form
var input=form["name屬性值"]; ----->獲取form下指定name元素
var elem=node.querySelector("任意選擇器"); ----->查找一個符合條件的元素
var elems=node.querySelectorAll("任意選擇器"); ----->查找全部符合條件的元素
讀取修改元素的屬性
var str=elem.getAttribute("屬性名"); ----->獲取元素的屬性名
elem.setAttribute("屬性名","屬性值"); ----->設(shè)置元素的屬性為XX
var str=elem.屬性名 ----->獲取元素的屬性 HTML DOM
elem.屬性名="值"; ----->設(shè)置元素的屬性為XX HTML DOM
elem.removeAttribute("屬性名"); ----->移除屬性
elem.屬性名=""; ----->移除屬性 HTML DOM
elem.attributes:返回屬性數(shù)組 ----->獲取元素所有屬性
elem.hasAttribute("屬性名") ----->判斷是否包含某個屬性
創(chuàng)建節(jié)點
var newNode=document.createElement("標(biāo)簽名") ---->創(chuàng)建一個空標(biāo)簽名
newNode.屬性名="值" ---->給標(biāo)簽添加設(shè)置屬性
parent.appendChild(newNode); ---->追加到指定父元素后邊
parent.insertBefore(newNode,oldNode); ----> 插入到指定父元素前邊
增加文檔片段
var frag=document.createDocumentFragment(); ----> 創(chuàng)建文檔片段
frag.appendChild(新節(jié)點); ---->將子元素追加到片段中
parent.appendChild(frag); ---->將片段追加到指定父元素中
刪除節(jié)點
var deleted=parent.removeChild(childNode); ---->刪除節(jié)點
var deleted=parent.replaceChild(newChild,oldChild); ---->替換節(jié)點
對話框
alert("提示信息");---只有確定按鈕
var str=prompt("提示信息");
var bool=confirm("提示信息");--確定和取消
css樣式設(shè)置
var str=elem.style.css屬性
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
elem.style.css屬性名="屬性值"
Table
var tr=table.insertRow(i); ---->增加行 省略i，表示在末尾追加一行
table.deleteRow(i); ---->刪除行，必須知道要刪除行的下標(biāo)
tBodies ---->多個tbody元素對象的集合 必須用[i]獲取每個tbody
table.rows; ---->所有行的數(shù)組
table.rows[table.rows.length-1] ---->最后一行
var newTd=row.insertCell(i); ---->最后一個單元格
tr.deleteCell(i); ---->刪除單元格
tr.cells; ---->一行中所有格的數(shù)組
tr.cells[row.cells.length-1]; ---->一行中最后一單元格
tr.rowIndex;---專用于刪除行 ---->行下標(biāo)
cell.cellIndex ---->當(dāng)前單元格的下標(biāo)
Form
var form=document.forms[下標(biāo)/"name"/"id"]
var elem=form.elements[i];
var elem/elems=form.name屬性值/form["name屬性值"]
select
var option=new Option(innerHTML,value);select.add(option); --->增加option
Option:select.remove(option.index); --->刪除option
封裝了所有option對象
select.remove(select.options.length-1); ---->刪除最后一個選項
cookie
cookie:document.cookie="key=value;expires="+date --->創(chuàng)建
cookie:document.cookie --->讀取
節(jié)點樹 和 元素樹
parentNode parentElement
childNodes children
lastChild lastElementChild
firstChild firstElementChild
previousSibling previousElementSibling
nextSibling nextElementSibling
javascript思維導(dǎo)圖
1.javascript變量
2.javascript運算符
3.javascript數(shù)組
4.javascript流程語句
5.javascript字符串函數(shù)
6.javascript函數(shù)基礎(chǔ)
7.javascript DOM操作
8.javascript正則表達(dá)式
注:以上思維導(dǎo)圖均摘自其他網(wǎng)站,用來共享學(xué)習(xí)
