一巴席、簡介
參考JavaScript 教程和JavaScript 參考手冊矾湃，對里面內(nèi)容進(jìn)行了優(yōu)化與總結(jié)倍靡。
JS 代碼需要寫在<script></script>之中，<script></script>可放在<head></head>或<body></body>中秩贰，或同時存在這兩者中。當(dāng)存在于多處時柔吼，將按順序執(zhí)行JS代碼毒费。
可從外部引入 JS，如<script src="xxx.js"></script>愈魏，但 xxx.js 中不使用<script></script>標(biāo)簽觅玻，而是直接寫 JS 代碼。
JS 對大小寫是敏感的培漏。
二溪厘、調(diào)試
警告框 alert()
使用window.alert()彈出警告框，可簡寫成alert()牌柄，括號中為警告內(nèi)容畸悬，如window.alert("彈框測試")。寫入文檔 write()
使用document.write()將內(nèi)容寫入文檔中珊佣。內(nèi)容也可傳入 html 語句蹋宦，如document.write("<h1>1號標(biāo)題</h1>")披粟。可傳入多個參數(shù)冷冗，用逗號隔開守屉。
要注意的是，若在文檔加載完成后再使用該方法蒿辙，內(nèi)容會直接覆蓋整個文檔拇泛。-
輸出信息 log()
使用console.log()將內(nèi)容輸出在控制臺上，如console.log("打印在控制臺")思灌。
使用console.info()將內(nèi)容輸出在控制臺上俺叭。
使用console.warn()將警告輸出在控制臺上，警告前有個黃色三角习瑰。
使用console.error()將錯誤輸出在控制臺上绪颖，錯誤前有一個紅色的X。更多屬性和方法詳見 JavaScript 參考手冊 -- DOM Console 對象甜奄。
獲取元素 getElementById()
使用document.getElementById()通過傳入的元素id來獲取元素柠横。使用元素的innerHTML屬性來獲取元素的內(nèi)容，即<div>123</div>中的123课兄，也可修改內(nèi)容牍氛，如document.getElementById("id").innerHTML = "修改內(nèi)容"。
<body>
<div id="div1">div1</div>
<script>
window.alert("彈框測試")
document.write("<div>該div會插入到div1和div2之前烟阐，因為是按順序的</div>")
// 控制臺會打印日期
console.log(Date())
// 獲取id為div1的元素
var ele = document.getElementById("div1")
// 修改元素的內(nèi)容為h1標(biāo)題
ele.innerHTML = "<h1>標(biāo)題div1</h1>"
</script>
<div>div2</div>
</body>
斷點
在要添加斷點的代碼處輸入debugger搬俊。運行后，會在這個位置停止運行蜒茄。
在瀏覽器中按 F12 并選擇 Sources 可以看到斷點時的變量的值唉擂。異常處理
try放入可能有異常的代碼。
catch捕獲并處理異常檀葛。
finally無論有無異常都會執(zhí)行玩祟。
throw在try中使用，手動拋出異常屿聋，再由catch捕獲處理空扎。
try {
throw "test_error"
} catch(error) {
document.write(error, "<br>")
} finally {
document.write("try catch end")
}
若error為 Error 對象，則可使用name和message屬性润讥，表示錯誤名與錯誤信息转锈。
錯誤名有以下幾種：
RangeError 數(shù)值超出規(guī)定的范圍。
ReferenceError 非法引用楚殿，比如使用未定義的變量撮慨。
SyntaxError 語法錯誤。
TypeError 類型錯誤，比如number類型的變量使用string類型的方法甫煞。
URIError 執(zhí)行函數(shù)encodeURI()產(chǎn)生的錯誤菇曲。
三冠绢、變量與常量
- 字面量
在 JS 中，固定值一般稱為字面量，字面量用來賦值給變量或常量萝毛。
- 數(shù)字（Number）
可為整數(shù)1眉厨、小數(shù)1.1、科學(xué)計數(shù)1e2孵户。 - 字符串（String）
字符串可使用雙引號"string"或單引號'string'萧朝。
字符串里也可以有引號，但不能和外層引號相同夏哭。如"hello 'world'"或'hello "world"'检柬。
若需要里面引號與外層引號相同，要使用轉(zhuǎn)義符\竖配，如"hello \"world\""何址。
字符串可以用\換行，但代碼不美觀进胯，如
// 字符串換行
document.write("hello \
world")
此時相當(dāng)于document.write("hello world")用爪。
- 表達(dá)式字面量
如1 + 2"1" + "2"。 - 數(shù)組（Array）
用中括號包裹胁镐，里面可為數(shù)字偎血、字符串、數(shù)組盯漂、對象颇玷、函數(shù)。如[1, "string", {key: "value"}]就缆。 - 對象（Object）
用大括號包裹帖渠，為key-value對，key為字符串违崇，value可為數(shù)字阿弃、字符串、數(shù)組羞延、對象渣淳、函數(shù)。如{a: 1, b: "b", c: [1, 2]}伴箩。
若key中有空格入愧，需要使用引號，如{"aa bb": 20}。 - 函數(shù)（Function）
如function(a, b) { return a * b; }棺蛛。
- 類型判斷
- 使用
typeOf判斷類型怔蚌。
但不能判斷數(shù)組、正則和對象旁赊，返回的都是object桦踊。
可以寫成typeof(1)，也可以寫成typeof 1终畅。
document.write(typeof(1)) //number
document.write(typeof("1")) //string
document.write(typeof [1, 2]) //object
document.write(typeof {a: 1}) //object
document.write(typeof(function a() {}))//function
// 正則
document.write(typeof(/\d+/g)) //object
- 使用
isArray()判斷是否為數(shù)組
// 判斷是否支持isArray方法
if (Array.isArray) {
document.write(Array.isArray([1, 2]))//true
document.write(Array.isArray({a: 1}))//false
}
- 使用
Instanceof判斷類型
不能用于判斷對象籍胯，因為數(shù)組、正則和對象調(diào)用instanceof Object都會返回true离福。
document.write([1, 2] instanceof Array)//true
document.write({a: 1} instanceof Array)//false
document.write([1, 2] instanceof Object)//true
- 使用
constructor屬性判斷類型
該屬性會返回構(gòu)造函數(shù)杖狼。
function type(obj) {
return obj.constructor
}
document.write(type(1), "</br>")//function Number() { [native code] }
document.write(type("1"), "</br>")//function String() { [native code] }
document.write(type([1, 2]), "</br>")//function Array() { [native code] }
document.write(type({a: 1}), "</br>")//function Object() { [native code] }
document.write(type(function a() {}), "</br>")//function Function() { [native code] }
document.write(type(/\d+/g), "</br>")//function RegExp() { [native code] }
- 變量
變量命名可使用小駝峰firstName、大駝峰FirstName妖爷、下劃線法first_name蝶涩，建議使用小駝峰。
變量通常以字母開頭絮识，且對大小寫敏感绿聘。
var
聲明變量var a。
聲明多個變量var a, b笋除。
變量未賦值時默認(rèn)為undefined斜友。
聲明變量并賦值var a = 1。
聲明多個變量并賦值var a = 1, b = 2垃它。
變量是可變的鲜屏，可在聲明變量后改變變量的值。如var a = 1;a = 10;国拇。
重新聲明變量后洛史，變量值不會清空。如var a = 1;var a;酱吝，此時a還是為1也殖。
未聲明直接賦值時，如a = 1务热，相當(dāng)于var a;a = 1忆嗜。
注：語句后面可不加分號，但多條語句在同一行時崎岂，則必須添加分號捆毫。如如var a = 1;a = 10;。let
let也是一個變量冲甘，聲明方式與var一致绩卤，但let只在包含它的{ }里(當(dāng)前塊作用域)有效途样，而var在{ }外(上級塊作用域)也生效。for循環(huán)( )中聲明的let變量也只在循環(huán)體內(nèi)有效濒憋。
document.write(a, "<br>")//undefined
{
var a = 1
}
document.write(a, "<br>")//1
document.write(b, "<br>")//error b is not defined
{
let b = 2
}
document.write(b, "<br>")//error b is not defined
根據(jù)上面何暇，let只在{ }內(nèi)有效，所以不會影響括號外的同名變量凛驮。
var c = 3
document.write(c, "<br>")//3
{
let c = 4
document.write(c, "<br>")//4
}
document.write(c, "<br>")//3 若let改成var 這里輸出4
但實際上裆站，最好變量不要同名，就不會產(chǎn)生誤導(dǎo)辐烂。
- 全局變量
在<script></script>內(nèi)函數(shù)外直接聲明的叫全局變量遏插，可以在該腳本中任意地方使用。
在函數(shù)內(nèi)聲明的變量叫局部變量纠修，只在函數(shù)內(nèi)有效。局部變量中的let只在對應(yīng)的{ }中有效厂僧，而var在整個函數(shù)內(nèi)有效扣草。
使用var聲明的全局變量屬于 window 對象，可以調(diào)用window.name來獲取颜屠。而let聲明的全局變量則不屬于 window 對象辰妙。
var d = 4
let e = 5
document.write(d, e)// 4 5
document.write(window.d, window.e)//4 undefined
但全局變量與 window 對象的變量也有區(qū)別。
全局變量不能用delete刪除甫窟，而 window 對象的變量則可以密浑。
var d = 1
window.e = 2
delete d
delete e
document.write(d, "<br>")//1
document.write(window.e, "<br>")//undefined
- 變量重新聲明
在同一級作用域中，只能使用var來重新聲明同名var變量粗井。
let f = 6
let f = 66//error Identifier 'f' has already been declared
let g = 7
var g = 77//error Identifier 'g' has already been declared
var h = 9
let h = 99//error Identifier 'h' has already been declared
var i = 10
var i = 100//success
- 聲明提升
在 JS 中尔破，函數(shù)聲明和var變量聲明都將被提升到最頂部；若在函數(shù)內(nèi)浇衬，則提升到函數(shù)最頂部懒构。且函數(shù)比變量更優(yōu)先提升。
若變量聲明并賦值耘擂，如var a = 1胆剧，只會聲明提升，賦值還是在原來位置醉冤，即在賦值前使用變量秩霍，不會報錯，但會返回undefined蚁阳。
var聲明的變量會聲明提升铃绒，所以可以先使用再聲明；而let聲明的變量不能聲明提升韵吨，必須先聲明再使用匿垄。
m = 5;n = 6;
document.write(m, n)//5 6 聲明提升
var n;var m;
var o = 7
document.write(o, p)//7 undefined 若直接聲明并賦值移宅，聲明會提升，賦值還在原先位置椿疗。
var p = 8
q = 9
document.write(q)//UncaughtReferenceError: q is not defined let變量不能聲明提升
let q
若存在同名var變量和函數(shù)漏峰，函數(shù)會先提升，var變量再提升届榄，所以實際上var變量會覆蓋同名函數(shù)浅乔。
建議：
函數(shù)與變量不應(yīng)該同名，var變量铝条、let變量與常量也不應(yīng)該同名靖苇。
使用函數(shù)與變量時，都應(yīng)該先聲明再使用班缰，這樣不會產(chǎn)生隱性問題贤壁。聲明也應(yīng)該放在代碼最上面。
- 嚴(yán)格模式
可以在腳本的開頭添加"use strict"來使用嚴(yán)格模式埠忘。也可以在函數(shù)的開頭添加脾拆，使嚴(yán)格模式只有該函數(shù)內(nèi)生效。
嚴(yán)格模式下必須先聲明才能使用變量和函數(shù)莹妒，更多限制查看嚴(yán)格模式名船。
使用嚴(yán)格模式可以保證代碼運行的安全；提高編譯器效率旨怠，增加運行速度渠驼；
注："use strict"的上面不能有代碼（可以有注釋），否則嚴(yán)格模式無效鉴腻。
- const
const聲明一個或多個常量迷扇，聲明時必須進(jìn)行賦值，且值不可再修改和重新聲明拘哨。
但當(dāng)常量是一個數(shù)組或?qū)ο髸r谋梭，是可以修改里面元素的值的。
const l = { name: "zhangsan" }
l.name = "lisi"http://能修改不報錯
l = { name: "lisi" }//UncaughtTypeError: Assignment to constant variable.
可以使用Object.freeze()來凍結(jié)對象倦青，使之不能刪除瓮床、添加、修改對象的元素产镐。
四隘庄、數(shù)據(jù)類型
JS 是動態(tài)的數(shù)據(jù)類型，會根據(jù)后面值的類型判斷現(xiàn)在的變量類型癣亚。
var a//此時是Undefined
a = 1//Number
a = "2"http://String
a = [3]//Array
a = { key: 4 }//Object
數(shù)據(jù)類型可分為值類型與引用類型丑掺。
- 值類型
值類型分為字符串（String）、數(shù)字(Number)述雾、布爾(Boolean)街州、空（Null）兼丰、未定義（Undefined）、獨一無二的值（Symbol）唆缴。
值類型是存放在棧內(nèi)存（Stack）里的鳍征，兩變量相等時，修改一個變量的值不會影響另一個變量面徽。
var a = 5
var b = a
a = 6
document.write(a, b)//6 5
- 引用類型
引用類型分為對象(Object)艳丛、數(shù)組(Array)、函數(shù)(Function)趟紊。
引用類型的值保存在堆內(nèi)存（Heap）中的氮双，棧內(nèi)存中只存放值在堆內(nèi)存中的指針地址。
當(dāng)修改元素的值霎匈，修改的是堆內(nèi)存中的值戴差，所有指向該對象的變量的值都會改變。
為變量賦另一個值時唧躲，變量失去之前值的指針造挽，與之前值再無關(guān)系。
var c = { name: "zhangsan" }
var d = c
c.name = "lisi"http://修改c.name會影響d.name的值弄痹，因為指向同一個地址
c = {name: "wangwu"}//為c重新賦值，與之前的值再無關(guān)系
document.write(c.name, d.name)//wangwu lisi
- String 字符串
- 初始化
使用字面量：var a = "hello 'world'"嵌器。
使用構(gòu)造函數(shù)：var a = new String("hello 'world'")肛真。但此時typeof a == object。 - 訪問字符
使用[]來訪問每個字符爽航，如a[3]蚓让，表示獲取索引為3的字符，索引有效值為0到length-1讥珍。length表示字符串的長度历极。
或使用charAt()訪問每個字符，a[3]相當(dāng)于a.charAt(3)衷佃。 - 轉(zhuǎn)換成字符串
String(exp)將表達(dá)式轉(zhuǎn)換成字符串趟卸。表達(dá)式可以是一個變量或常量。
exp.toString()將表達(dá)式轉(zhuǎn)換成字符串氏义。
string.toUpperCase()將字符串轉(zhuǎn)換成大寫字符串锄列。
string.toLowerCase()將字符串轉(zhuǎn)換成小寫字符串。 - 運算字符串
使用+來拼接字符串惯悠，如"a" + "b" == "ab"邻邮，相當(dāng)于"a".concat("b")。
更多屬性和方法詳見 JavaScript 參考手冊 -- String 對象克婶。
- Number 數(shù)字
- 初始化
使用字面量：var a = 1.1筒严〉と可為整數(shù)1、小數(shù)1.1鸭蛙、科學(xué)計數(shù)1e2摹恨。
使用構(gòu)造函數(shù)：var a = new Number(123)，但此時typeof a == object规惰。
整數(shù)前加0睬塌，表示使用八進(jìn)制；前面加0x歇万，表示使用十六進(jìn)制揩晴。
使用toString()可進(jìn)制轉(zhuǎn)換，如(10).toString(2) == 1010贪磺，不加括號時會報錯硫兰，因為解析器會把10.看成10，但可以使用10..toString(2)寒锚。
注：在 JS 中劫映，整數(shù)實際上是浮點類型。 - 精度
整數(shù)最多為15位刹前。如2222222222222222(16個2)泳赋，打印出來是1000000000000000(15個0)。
小數(shù)的小數(shù)部分最多為17位喇喉。如0.1 + 0.2 == 0.30000000000000004(小數(shù)部分共17位)祖今，所以0.1 + 0.2 != 0.3。
可以通過(0.1*10 + 0.2*10)/10 == 0.3來比較拣技。只要整數(shù)部分不為0千诬，就能正常比較，如1.1 + 0.2 == 1.3膏斤。 - 特殊值
infinity無窮大徐绑，一個數(shù)字除以0結(jié)果為infinity。
infinity與任何值加減乘除都是infinity莫辨，即infinity + 1 == infinity傲茄。
正負(fù)無窮不相等，即infinity != -infinity衔掸。
NaN非數(shù)值（Not a Number）烫幕。一個表達(dá)式不能轉(zhuǎn)換成數(shù)字就會返回NaN，即Number("abc") == NaN敞映。
非數(shù)值與任何值都不相等较曼，包括本身，即NaN != NaN振愿。
使用Number.isNaN()用于判斷是否為NaN捷犹，如Number.isNaN(Number("a")) == true弛饭。 - 轉(zhuǎn)換成數(shù)字
Number(exp)將表達(dá)式轉(zhuǎn)換成數(shù)字。表達(dá)式可以是一個變量或常量萍歉。
+exp將表達(dá)式轉(zhuǎn)換成數(shù)字侣颂，如+"50" == 50。
parseFloat(exp)將表達(dá)式轉(zhuǎn)換成浮點枪孩。
parseInt(exp)將表達(dá)式轉(zhuǎn)換成整數(shù)憔晒。
注：若不能轉(zhuǎn)換成數(shù)字，則會返回NaN蔑舞。
更多屬性和方法詳見 JavaScript 參考手冊 -- Number 對象拒担。
- Boolean 布爾
- 初始化
使用字面量：var a = true。
使用構(gòu)造函數(shù)：var a = new Boolean(true)攻询，但此時typeof a == object从撼。
若無初始值或者其值為0、-0钧栖、null低零、""、false拯杠、undefined掏婶、NaN，布爾值為false潭陪。 - 轉(zhuǎn)換成布爾
Boolean(exp)將表達(dá)式轉(zhuǎn)換成布爾气堕。表達(dá)式可以是一個變量或常量。
!!exp將表達(dá)式轉(zhuǎn)換成布爾畔咧。
注：0、-0揖膜、null誓沸、""、false壹粟、undefined拜隧、NaN會轉(zhuǎn)換成false，其余全部都會轉(zhuǎn)換成true趁仙。
更多屬性和方法詳見 JavaScript 參考手冊 -- Boolean 對象洪添。
Null 空
空值，表示一個空對象引用雀费，數(shù)據(jù)類型為object干奢。
給一個變量賦值null將會清空變量，通常將數(shù)組或?qū)ο筚x值null以釋放內(nèi)存盏袄。Undefined 未定義
所有未賦值變量的默認(rèn)值忿峻，在變量聲明后變量的值就是undefined薄啥。
為一個變量賦值undefined后，數(shù)據(jù)類型為undefined逛尚。
注：null == undefinednull !== undefinedSymbol 獨一無二的值
- 初始化
語法：var a = Symbol()垄惧。
symbol是唯一的，即使里面的值相等symbol也不相等绰寞，如Symbol("123") != Symbol("123")到逊。
若想獲取同一個symbol代乃，可使用Symbol.for()谅辣，如Symbol.for("123") === Symbol.for("123")却妨。
若想獲取symbol的值窍霞，可使用Symbol.keyFor()闹获。
let sym = Symbol.for("b");
document.write(Symbol.keyFor(sym))//b
- 用法
symbol被用作對象的key肴敛。但symbol擁有隱藏性授账，所以不能通過for···in等常規(guī)遍歷方式獲取key倘是。
let sym = Symbol.for('b');
var a = {
[sym]: "1",
c: "2"
}
for (key in a) {
document.write(key, "<br>")//c
}
可以使用Object.getOwnPropertySymbols()獲取對象中Symbol類型的key（但實測返回[null]停团，不知為何）旷坦。
詳見Symbol。
- Object 對象
JS 中的所有事物都是對象佑稠，數(shù)字秒梅、日期、字符串舌胶、布爾等都是對象捆蜀。
對象是帶有屬性和方法的特殊數(shù)據(jù)類型，屬性通過objectName.propertyName來使用幔嫂，方法通過objectName.methodName()來使用辆它。如message.length、message.toUpperCase()履恩。
- 字面量初始化
var a = { a: 1, b: 2 }
鍵值對的鍵為字符串锰茉，使用時不必加引號，若字符串中有空格切心，則必須加引號飒筑，如var a = { "a b": 1 }。
鍵值對的值為包括null和undefined在內(nèi)的數(shù)據(jù)類型绽昏。
若鍵是一個變量协屡，需要在變量兩頭加上[]，如var a = "name"; var b = { [a]: "zhangsan" }全谤。
注：對象最后的元素后不能加逗號肤晓。 - 構(gòu)造函數(shù)初始化
var a = new Object({ a: 1, b: 2 })
另外，new Object(true)與new Boolean(true)完全相同，類型都為object材原。
通常使用var a = new Object();e.name = "zhangsan";這種方式來創(chuàng)建鍵值對的對象沸久。 - 函數(shù)初始化
function Person() {
this.name = arguments[0]
this.age = arguments[1]
this.adress = arguments[2]
}
var p = new Person("zhangsan", 20, "chengdu")
document.write(typeof p)//object
- 訪問元素
使用.來訪問元素，如e.name余蟹。
或使用[]來訪問元素卷胯，如e["name"]。當(dāng)鍵為帶空格的字符串時威酒，必須使用[]窑睁，如e["a b"]。
若元素值是一個函數(shù)葵孤，加()時執(zhí)行函數(shù)担钮，則返回函數(shù)的返回值；不加()則返回函數(shù)的代碼尤仍。
對象的函數(shù)中箫津，this指的是對象本身。
var e = { name: 'zhangsan' }//用字面量初始化并賦值
var e = new Object()//構(gòu)造函數(shù)初始化
e.name = "zhangsan"http://賦值
e.adress = "cd"
e.full = function() {
return e.name+"_"+this.adress//this表示對象本身
}
document.write(e.name)//zhangsan
//訪問元素 通過. 或 []
//元素值是一個函數(shù)時宰啦，需要加()執(zhí)行函數(shù)苏遥，并顯示返回值
//不加()，則會返回函數(shù)的代碼
document.write(e.full(), " ", e['full'])//zhangsan_cd function () { return e.name+"_"+this.adress }
var f = {"a b":"aa"}
document.write(f['a b'])//aa
- 原型對象
所有的 JS 對象都會從一個 prototype（原型對象）中繼承屬性和方法赡模。
Date 對象從Date.prototype繼承田炭，Array 對象從Array.prototype繼承，String 對象從String.prototype繼承漓柑，而它們都是Object教硫，所以它們都繼承于Object.prototype。
當(dāng)訪問一個對象的屬性或方法時辆布，它不僅僅在該對象上搜尋瞬矩，還會搜尋該對象的原型，以及該對象的原型的原型锋玲，依次層層向上搜索丧鸯，直到找到一個名字匹配的屬性或到達(dá)原型鏈的末尾（Object.prototype）。
可以通過原型對象prototype給對象添加新的屬性或方法嫩絮。
// 給Number添加新屬性newAttr，值為newAttrValue
Number.prototype.newAttr = 'newAttrValue'
// 給Number添加新方法
Number.prototype.newFunc = function() {
document.write("newFunc")
}
var a = 10
document.write(a)//10
document.write(a.newAttr)//newAttrValue
a.newFunc()//newFunc
- Array 數(shù)組
初始化
使用字面量：var a = [1, 2, 3]围肥，最后的元素后不能加逗號剿干。
使用構(gòu)造函數(shù)：var a = new Array(1, 2, 3)。訪問元素
使用[]訪問數(shù)組的元素穆刻，如a[1]置尔。 索引范圍為0到length-1，length為數(shù)組元素的數(shù)量氢伟。
也可以通過[]來修改元素的值榜轿，如a[1] = 11幽歼。數(shù)組運算
使用concat()拼接數(shù)組，如[1, 2, 3].concat([4, 5]) == [1, 2, 3, 4, 5]谬盐。
使用+甸私，但與concat()有差別，如[1, 2, 3] + [4, 5] == "1, 2, 34, 5"飞傀，最終變成了字符串皇型。數(shù)組修改
使用push()在末尾新增一個或多個元素，如[1, 2, 3].push(4)后原數(shù)組變?yōu)?[1, 2, 3, 4]砸烦。
使用pop()刪除末尾的元素弃鸦，如[1, 2, 3].pop()后原數(shù)組變?yōu)?[1, 2]。
使用unshift()在開頭新增一個或多個元素幢痘，如[1, 2, 3].unshift(4)后原數(shù)組變?yōu)?[4, 1, 2, 3]唬格。
使用shift()刪除開頭的元素，如[1, 2, 3].shift()后原數(shù)組變?yōu)?[2, 3]颜说。
使用splice()刪除并添加元素购岗，如[1, 2, 3, 4].splice(1, 2, 10, 11, 12)后原數(shù)組變?yōu)?[1, 10, 11, 12, 4]。前兩個參數(shù)表示在索引1處刪除2個元素脑沿，后面的參數(shù)表示在索引1處新增元素10藕畔、11、12庄拇。-
數(shù)組遍歷
使用for循環(huán)注服，詳見 八、條件語句 -- 3. for措近。
使用forEach(function(currentValue,index,arr), thisValue)溶弟。- 回調(diào)函數(shù)為必須值，每個元素都會調(diào)用該函數(shù)瞭郑。
-
currentValue元素值辜御，必須。 -
index元素的索引屈张。 -
arr遍歷的數(shù)組擒权。
-
-
thisValue函數(shù)中this的值。
- 回調(diào)函數(shù)為必須值，每個元素都會調(diào)用該函數(shù)瞭郑。
更多屬性和方法詳見 JavaScript 參考手冊 -- Array 對象阁谆。
- 函數(shù)(Function)
-
函數(shù)聲明
語法：function functionName(var1, var2) { return true }-
functionName函數(shù)名碳抄，可任意大小寫。 -
var1, var1參數(shù)场绿，可有0個或多個參數(shù)剖效，用逗號隔開。 -
return返回值，給執(zhí)行函數(shù)返回一個值璧尸，也可以不返回咒林。return后立即退出函數(shù)，后面的代碼無效爷光。
-
-
調(diào)用函數(shù)
語法：var result = functionName("value1", "value2")-
var result若函數(shù)有返回值垫竞，則獲取返回值。若函數(shù)無返回值瞎颗，var result可省略件甥。 -
functionName("value1", "value2")調(diào)用函數(shù)，若函數(shù)無參數(shù)哼拔，則使用functionName()引有。 -
"value1", "value2"函數(shù)傳入的參數(shù)。
在函數(shù)中倦逐，
this指向函數(shù)的所屬者譬正，即 window 對象。所以functionName()與window.functionName()相同檬姥。 -
-
使用call和apply調(diào)用函數(shù)
語法:functionName.apply(para1, para2)曾我、functionName.call(para1, para2, para3...)-
functionName聲明的函數(shù)名。 -
para1函數(shù)中this的值健民。若傳入null或undefined抒巢，this則會變?yōu)?window 對象。 -
para2在apply方法中是一個數(shù)組秉犹，數(shù)組的元素值為要調(diào)用函數(shù)的參數(shù)蛉谜。
在call方法中是要調(diào)用函數(shù)的第一個參數(shù)，para3則是第二個參數(shù)崇堵，以至類推型诚。
-
自調(diào)用函數(shù)
將一個函數(shù)前后加上()，再在后面添加()鸳劳，就可以函數(shù)自調(diào)用狰贯。
(function functionName(para) {
document.write(para, "<br>")
})("hello")//hello
上面函數(shù)會自調(diào)用，輸出hello赏廓。
但只能調(diào)用一次涵紊，不能通過functionName()再次調(diào)用。
所以函數(shù)名可以省略幔摸，即寫成(function(para) { document.write(para, "<br>") })("hello")栖袋。
箭頭函數(shù)自調(diào)用(() => {})()。
- 特殊函數(shù)聲明
匿名函數(shù)const functionName = function (var1, var2) { return true }
箭頭函數(shù)const functionName = (var1, var2) => { return true }
若只有一個參數(shù)抚太，可以省略()。若只有一句表達(dá)式，可以省略{}尿贫，如const functionName = var1 => return true电媳。
構(gòu)造函數(shù)const functionName = new Function("var1", "var2", "return true")，盡量少用庆亡。
這幾種函數(shù)的調(diào)用方式與普通的相同匾乓。 - 函數(shù)聲明提升
函數(shù)也能夠聲明提升，而且比變量優(yōu)先提升又谋，所以同名變量會覆蓋同名函數(shù)拼缝。
但上面三種特殊函數(shù)聲明就不能提升，因為它實際在是一個常量彰亥，當(dāng)然咧七，即使改成var也不能提升。
函數(shù)中的聲明的變量只作用于函數(shù)任斋，在函數(shù)執(zhí)行時創(chuàng)建继阻，并在函數(shù)結(jié)束后刪除。
若在函數(shù)內(nèi)使用未聲明的變量废酷，則函數(shù)會將該變量變?yōu)槿肿兞俊?/li>
function c () {
d = "hello"
}
document.write(d)//UncaughtReferenceError: d is not defined 因為c()前變量d還未創(chuàng)建
c()//執(zhí)行函數(shù)時會調(diào)用d = "hello"瘟檩，此時會發(fā)生變量提升，var d會自動放在腳本頂部澈蟆，成為一個全局變量墨辛。
document.write(d)//hello c()后d會變成一個全局變量
- 函數(shù)參數(shù)
若傳入的參數(shù)比需要的多，則忽略多余的入?yún)⑴糠蝗魝魅氲膮?shù)比需要的少睹簇，則未傳的會用undefined代替。
函數(shù)可以給入?yún)⒃O(shè)置默認(rèn)值哮幢，如function functionName(x, y = 1) { }带膀。
函數(shù)里可使用一個對象arguments，它是所有入?yún)⒅档臄?shù)組橙垢《膺叮可通過arguments[index]獲取入?yún)⒌闹怠?/li>
function functionName() {
for (let i = 0; i < arguments.length; i++) {
document.write(arguments[i])//123
}
}
funName(1, 2, 3)
- 閉包
函數(shù)內(nèi)的變量只能在函數(shù)中使用，而全局變量可以在函數(shù)中使用柜某，但腳本內(nèi)所有地方也都能使用嗽元。而使用閉包就可以在函數(shù)外使用函數(shù)內(nèi)的變量（意義上）。
function fun1() {
//聲明一個函數(shù)內(nèi)的變量
var x = 10
//返回一個函數(shù)
return function() {
return x += arguments[0]
}
}
var y = fun1()
document.write(y, "<br>")//function () { return x += arguments[0] }
document.write(typeof y, "<br>")//function y是一個函數(shù)
var outX = y(20)//這里就使用了函數(shù)里的變量與20相加 實現(xiàn)了在函數(shù)外使用函數(shù)內(nèi)的變量這個功能
document.write(outX, "<br>")//30
一般來說喂击，函數(shù)調(diào)用完成后剂癌，函數(shù)內(nèi)的變量就會被釋放。根據(jù)上面翰绊，變量x被返回的函數(shù)持有佩谷，而返回的子函數(shù)被變量y持有旁壮，相當(dāng)于y持有x，所以x不會被釋放谐檀。
所以閉包就是 使用了父函數(shù)的變量并且可以被外部調(diào)用的 子函數(shù)抡谐。
也可以使用自調(diào)用的方式實現(xiàn)閉包，更精簡桐猬。
//自調(diào)用
var y = (function() {
var x = 10
return function() { return x += arguments[0] }
})()
var outX = y(20)//30
- 全局函數(shù)與屬性
JS 已創(chuàng)建好的能直接使用的屬性與函數(shù)麦撵。
詳見全局屬性/函數(shù)。
五溃肪、其他數(shù)據(jù)類型
- 日期 Date
初始化
當(dāng)前日期：var a = new Date()免胃。
傳入時間戳：var a = new Date(1000*3600*24*365*10)。
傳入日期字符串：var a = new Date("2021-02-01 10:20:30")惫撰。
傳入年月日時分秒毫秒：var a = new Date(2021, 5, 1, 12, 13, 14, 0)羔沙，前兩個參數(shù)必傳，因為只傳一個參數(shù)的時候是時間戳润绎。修改日期
使用setHours()來修改小時數(shù)撬碟，如a.setHours(a.getHours() + 5)表示增加5小時。
同樣的莉撇，修改年setFullYear()呢蛤、月setMonth()、日setDate()棍郎、時setHours()其障、分setMinutes()、秒setSeconds()涂佃、毫秒setMilliseconds()励翼、時間戳setTime()。
使用setTime()時需要時間戳辜荠，可以通過Date.parse()獲取汽抚，如a.setTime(Date.parse(a.toString()) + 1000*3600*24*1)表示增加一天。比較日期
可通過>伯病、>=造烁、<、<=來比較日期午笛。
更多屬性和方法詳見 JavaScript 參考手冊 -- Date 對象惭蟋。
- Math 數(shù)學(xué)
Math主要是用于執(zhí)行科學(xué)計算。
- 算術(shù)值
Math.E自然對數(shù)的底數(shù)e（約為2.718）药磺。
LN1010的自然對數(shù)（約為2.302）告组。
Math.PI圓周率π（約為3.14）。
Math.SQRT22的平方根（約為1.414）癌佩。 - 算數(shù)方法
Math.sin()木缝、Math.cos()便锨、Math.tan()為正弦、余弦我碟、正切鸿秆，參數(shù)為弧度。
Math.abs()絕對值怎囚。
Math.ceil()、Math.floor()桥胞、Math.round()為上舍入恳守、下舍入、四舍五入贩虾，即ceil(1.3) == 2催烘、floor(1.6) == 1、round(1.5) == 2
Math.min(x, y...)缎罢、Math.max(x, y...)為最小值伊群、最大值。
Math.random()0~1之間的隨機(jī)數(shù)策精。使用Math.floor(Math.round()*100)獲取<100的隨機(jī)數(shù)舰始；使用Math.floor(Math.round()*(100-50))+50獲取>=50并且<100的隨機(jī)數(shù)。
更多屬性和方法詳見 JavaScript 參考手冊 -- Math 對象咽袜。
- RegExp 正則表達(dá)式
正則表達(dá)式（Regular Expression丸卷，簡寫為regex、regexp或RE）使用單個字符串來描述询刹、匹配一系列符合某個句法規(guī)則的字符串搜索模式谜嫉。正則表達(dá)式是匹配字符串的條件。
初始化
使用字面量：var a = /world/i凹联。
使用構(gòu)造函數(shù)：var a = new RegExp("world", "i")沐兰，
第一個參數(shù)是表達(dá)式的模式，若模式中要使用\字符蔽挠，則需要使用轉(zhuǎn)義符住闯，如var a = /w\\orld/i。
第二個參數(shù)為修飾符象泵。修飾符
修飾符是可選的寞秃，并且不區(qū)分大小寫。
修飾符有igm三種偶惠，并且可同時使用多種春寿，如/a/gi。
i大小寫不敏感忽孽。/A/i能匹配abcd中的a绑改。
g全局匹配谢床。/a/g匹配abacad時，能匹配到3個a厘线，默認(rèn)時只能匹配第一個a识腿。
m多行匹配。造壮？渡讼？？匹配
使用test()測試是否能匹配成功字符串耳璧，如/wor/i.test("hello world") == true成箫。
使用exec()獲取匹配成功的字符串，如/w[opq]r/i.exec("hello world") == "wor"旨枯。
當(dāng)存在g修飾符時蹬昌，可連續(xù)調(diào)用test()或exec()來進(jìn)行匹配，lastIndex屬性指示下次匹配的起始位置攀隔。
var b = /bc/g
var c = "abcdefgbcba"
document.write(b.test(c), b.lastIndex, "<br>")//true3
document.write(b.test(c), b.lastIndex, "<br>")//true9
document.write(b.test(c), b.lastIndex, "<br>")//false0 未匹配到時lastIndex會重置為0
- 表達(dá)式模式
條件：
[]匹配中括號中的任意字符皂贩，如"abdc".match(/[bc]/g) == ['b', 'c']。
[^]匹配不在中括號中的字符昆汹，如"abdc".match(/[^bc]/g) == ['a', 'd']明刷。
里面可以使用連接符，0-9表示任何0到9的數(shù)字筹煮，A-Z遮精、a-z、A-z表示任何大寫字母败潦、小寫字母本冲、字母。
(x|y|z)匹配|左邊條件或右邊條件劫扒，如"abcdefg".match(/(bc|ce|ef)/g) == ["bc", "ef"]檬洞。
字符：
.匹配所有字符（除了換行符與行結(jié)束符）。
\w匹配數(shù)字、字母、下劃線虎眨，相當(dāng)于[0-9A-z_]。
\W匹配非數(shù)字广料、字母、下劃線幼驶，相當(dāng)于[^0-9A-z_]艾杏。
\d匹配數(shù)字，相當(dāng)于[0-9]盅藻。
\D匹配非數(shù)字购桑，相當(dāng)于[^0-9]畅铭。
\s查找空白字符，相當(dāng)于[ ]勃蜘。
\b匹配單詞邊界硕噩，如"aabc abcd".search(/\babc/g) == 5，會匹配第二個abc缭贡。測試出只對單詞開頭有效炉擅，結(jié)尾無效。
\B匹配非單詞邊界阳惹。
量詞：
表示匹配多少個字符坑资。
n+至少有一個n，即數(shù)量>1穆端。
n*任意數(shù)量的n，即數(shù)量>=0仿便。
n?至多有一個n体啰，即數(shù)量<=1 。
n{3}有三個n嗽仪，即數(shù)量=3荒勇。
n{3,}有至少三個n，即數(shù)量>=3
n{1, 3}有一到三個n闻坚，即數(shù)量>=1并且<=3沽翔。
特殊：
^n以n開始。
n$以n結(jié)束窿凤。
?=n匹配后接n的字符串仅偎，如"aabcde".match(/ab(?=c)/g) == ["ab"]。
?!n匹配不后接n的字符串雳殊。
更多屬性和方法詳見 JavaScript 參考手冊 -- RegExp 對象橘沥。
六、事件觸發(fā)
事件可以是瀏覽器行為夯秃，如頁面加載完成座咆；也可以是用戶行為，如點擊標(biāo)簽仓洼。
- 標(biāo)簽中綁定事件
語法:<element-name event-name="表達(dá)式">-
element-name元素名介陶，如<div>、<a>色建。 -
event-name事件名稱哺呜。如onclick點擊標(biāo)簽、onload頁面加載完成镀岛。 -
"表達(dá)式"可以是單引號弦牡，也可以是雙引號友驮。當(dāng)為單引號時，里面可以用雙引號來使用字符串驾锰；為雙引號時用單引號來使用字符串卸留。
表達(dá)式可以是一個函數(shù)調(diào)用，如<div onclick="tapAction()">hello</div>椭豫。
可以是一句實現(xiàn)某功能的 JS 語句耻瑟，如<div onclick="this.innerHTML = 'hello world'">hello</div>。
表達(dá)式中使用this時赏酥，表示的是元素本身喳整。
-
關(guān)于this：
1、在對象函數(shù)(對象中某鍵的值為函數(shù))中裸扶， this指向?qū)ο蟊旧怼?br> 2框都、腳本中直接使用，this指向全局(Global)對象呵晨，即 window 對象魏保。
3、在函數(shù)中使用摸屠，this指向函數(shù)的所屬者谓罗，即 window 對象。
4季二、嚴(yán)格模式下函數(shù)沒有所屬者檩咱，所以this是undefined。
5胯舷、在HTML事件句柄中刻蚯，this指向接收事件的HTML元素，即上面的例子桑嘶。
6芦倒、apply()和call()允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），所以this可以指向任何對象不翩”铮可在 四、數(shù)據(jù)類型 -- 9. 函數(shù)(Function) -- 使用call和apply調(diào)用函數(shù) 中查看口蝠。
更多事件方法詳見 JavaScript 參考手冊 -- DOM 事件對象器钟。
- void
void是 JS 中非常重要的關(guān)鍵字，它表示 運行一個表達(dá)式但是不返回值妙蔗。
語法：void exp傲霸、javascript:void exp、void(exp)、javascript:void(exp)
exp一個表達(dá)式昙啄，可以是普通語句void(this.innerHTML = 'hello')或一個函數(shù)void(alert('warn!'))穆役。
使用javascript:void(0)不會產(chǎn)生任何變化，常用于死鏈接梳凛。
// 阻止鏈接跳轉(zhuǎn)耿币，URL不會有任何變化
<a href="javascript:void(0)" rel="nofollow ugc">點擊此處</a>
// 雖然阻止了鏈接跳轉(zhuǎn)，但URL尾部會多個#韧拒，改變了當(dāng)前URL淹接。（# 主要用于配合 location.hash）
<a href="#" rel="nofollow ugc">點擊此處</a>
// 同理，# 可以的話叛溢，? 也能達(dá)到阻止頁面跳轉(zhuǎn)的效果塑悼，但也相同的改變了URL。（? 主要用于配合 location.search）
<a href="?" rel="nofollow ugc">點擊此處</a>
DOM分配事件
除了像上面一樣在標(biāo)簽中綁定事件外楷掉，還可以使用 DOM 來給元素分配事件厢蒜。
語法:element.event-name = function。
function是一個函數(shù)烹植，如document.getElementById("id").onclick = function() { tapAction() };-
事件監(jiān)聽
語法:element.addEventListener(event, function, useCapture)
該方法可向DOM 對象添加事件句柄郭怪。DOM 對象有 HTML 元素（element）、HTML 文檔（document）刊橘、window 對象（window）。
可添加多個事件句柄颂鸿，如click促绵、mouseover、mouseout嘴纺。
可添加多個相同的事件句柄败晴，如兩個click。-
event事件名栽渴，不要使用on前綴尖坤。使用"click"而不是使用"onclick"。 -
function事件觸發(fā)后要調(diào)用的函數(shù)闲擦。 -
useCapture布爾值慢味，冒泡還是捕獲∈洌可選值纯路。
默認(rèn)值為false, 即冒泡，true則為捕獲寞忿。
-
事件傳遞定義了元素事件觸發(fā)的順序驰唬。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 click 事件先被觸發(fā)呢？
在冒泡中叫编，內(nèi)部元素的事件會先被觸發(fā)辖佣，然后再觸發(fā)外部元素，即： <p> 元素的點擊事件先觸發(fā)搓逾，然后會觸發(fā) <div> 元素的點擊事件卷谈。
在捕獲中則相反。
例：
document.getElementById("id").addEventListener("click", clickAction)恃逻，函數(shù)名后不用加()雏搂。
document.getElementById("id").addEventListener("click", function() { })。
若要傳遞參數(shù)寇损，可使用 document.getElementById("id").addEventListener("click", function() { clickAction(a, b, c) })凸郑。
- 移除監(jiān)聽
如果要移除事件句柄，執(zhí)行函數(shù)必須使用外部函數(shù)矛市，如上面的第一個例子芙沥。
匿名函數(shù)，類似document.getElementById("id").addEventListener("click", function() { })是無法移除的浊吏。
語法:element.removeEventListener(event, function, useCapture)
參數(shù)同addEventListener()而昨。
七、運算符
算術(shù)運算符
+加找田，除了數(shù)字相加外歌憨，
可以字符串相加，如"hello" + " " + "world" == "hello world"墩衙。
字符串與數(shù)字相加务嫡，則將數(shù)字當(dāng)成字符串使用，如"cc" + 5 + 6 == "cc56"
字符串與布爾值相加漆改，true和false都當(dāng)成字符串心铃。
數(shù)字與字符串相加，則先將字符串前面的數(shù)字先相加挫剑，和則當(dāng)成字符串去扣，如5 + 6 + "dd" + 5 + 6 == "11dd56"。
數(shù)字與布爾值相加樊破，true當(dāng)成1愉棱，false當(dāng)成0。
-減哲戚。
*乘羽氮。
/除。
%取模(余數(shù)) 惫恼，如13%5 == 3档押。
模的正負(fù)與被取模數(shù)的正負(fù)相同，如-13%5 = -3。
++自增令宿。
a=4叼耙，若b=a++，運算后b=4粒没，a=5筛婉；若b=++a，運算后b=5癞松，a=5爽撒。
--自減。
a=4响蓉，若b=a--硕勿，運算后b=4，a=3枫甲；若b=--a源武，運算后b=3，a=3想幻。賦值運算符
=賦值粱栖。
+=加等，a += b相當(dāng)于a = a + b脏毯。也可用于字符串闹究、數(shù)字相加。
-=減等食店，a -= b相當(dāng)于a = a - b渣淤。
*=乘等，a *= b相當(dāng)于a = a*b叛买。
/=除等，a /= b相當(dāng)于a = a/b蹋订。
%=取模等率挣，a %= b相當(dāng)于a = a%b。-
比較運算符
==值等于露戒。
!=值不等于椒功。
===絕對等于，值和類型都相等智什。
!==不絕對等于 动漾，值和類型至少有一個不相等。
<小于荠锭。
<=小于或等于
>大于旱眯。
>=大于或等于。- string、number 等基礎(chǔ)數(shù)據(jù)類型
不同類型間比較删豺，==先將其轉(zhuǎn)換成同一類型后再比較 值 是否相等共虑，===如果類型不同，結(jié)果就不相等呀页。
同類型比較妈拌，直接比較 值 是否相等，==和===無區(qū)別蓬蝶。 - Array尘分、Object 等引用類型
==和===則無區(qū)別，都是比較 指針地址 是否一致丸氛。
- string、number 等基礎(chǔ)數(shù)據(jù)類型
邏輯運算符
&&與培愁，左右條件都為true，該語句則為true雪位。
||或竭钝，左右條件有一個為true，該語句則為true雹洗。
!非香罐，右邊條件為flase，該語句則為true时肿。
注：0庇茫、-0、null螃成、""旦签、false、undefined寸宏、NaN為條件時會轉(zhuǎn)換為false宁炫，其他轉(zhuǎn)化為true。條件運算符
語法:(condition) ? value1 : value2
若condition為true氮凝，則返回value1;否則返回value2.位運算符
先將數(shù)字轉(zhuǎn)化為32位二進(jìn)制羔巢，再進(jìn)行運算。
&與罩阵，2&1相當(dāng)于10&01竿秆，結(jié)果為00。
|或稿壁，10|01結(jié)果為11幽钢。
~取反，~01結(jié)果為11..110傅是，總共有31個1匪燕。
^異或蕾羊，10^01結(jié)果為11
>>右移，10>>1結(jié)果為01谎懦。
<<左移肚豺，10<<1，結(jié)果為100界拦。
八吸申、條件語句
if else
語法：if (condition1) { code1 } else if (condition2) { code2 } else { code3 }
若條件condition1為true，執(zhí)行代碼code1享甸；否則若condition2為true截碴，執(zhí)行代碼code2；否則執(zhí)行代碼code3蛉威。
注：
if else都必須用小寫日丹，條件必須用小括號包裹（有些語言中小括號可省略）。
若code只有一句代碼蚯嫌，可以省略大括號哲虾，如if (a == 1) b = 2。switch
語法：
switch(value) {
case 1:
code1
break;
case 2:
case 3:
code3
break;
default:
code4
}
value是一個表達(dá)式（通常是一個變量）择示，將value的值與每個case后的值做比較束凑，若相等則執(zhí)行后面的代碼code。
若不加break栅盲，在前面的代碼code執(zhí)行后會繼續(xù)比較下一個case后的值汪诉。
若所有case值與表達(dá)式的值都不相等，則會執(zhí)行default后面的代碼code谈秫。
case 2后面沒有寫代碼扒寄，表示當(dāng)value=2或3時都會執(zhí)行code3。
注：switch是使用===作比較的拟烫，case后的值可以是String 该编、Number、Boolean硕淑、char课竣、null、undefined喜颁。
-
for
用來多次執(zhí)行重復(fù)的代碼稠氮。
語法：for (code1; code2; code3) { repeatCode }-
code1會在循環(huán)開始前執(zhí)行曹阔，常用來初始化一個變量半开。 -
code2定義循環(huán)的條件。 -
code3每循環(huán)一次后執(zhí)行赃份。
如
for (let i = 1; i < 10; i++) { }寂拆。
code1中的let奢米，表示變量只能在循環(huán)中使用。若改為var纠永，變量則能在循環(huán)外且函數(shù)內(nèi)使用鬓长。
code1可以省略，但code1后面的分號不能刪除尝江，如let i = 1;for (; i < 10; i++) { }涉波。
code1中也可以初始化多個變量，用逗號分隔炭序，如for (let i = 1, number = 10; i < number; i++) { }啤覆。
code2也可以省略，后面的分號不能刪除惭聂。但repeatCode里面必須要使用break以結(jié)束循環(huán)窗声。
code3也可能省略，但應(yīng)該在repeatCode中添加變量變化的語句辜纲。
3者都省略笨觅，如下 -
let i = 1
for (;;) {
if (i >= 10) {
break
}
i += 2
}
-
for in
用來遍歷數(shù)組或?qū)ο螅部梢员闅v字符串耕腾。
語法:for (index in data) { repeatCode }见剩。-
data數(shù)據(jù)∮牡耍可為數(shù)組炮温、對象、字符串牵舵。 -
index索引柒啤。
當(dāng)data為數(shù)組或字符串時，索引范圍從0到length-1畸颅，使用data[index]來獲取元素或字符担巩。
當(dāng)data為對象時，索引為對象的鍵key没炒，使用data[index]來獲取對應(yīng)的值value涛癌。
注：
for in的小括號不能刪除（有些語言不使用小括號）。
當(dāng)數(shù)組中有元素值為undefined時送火，for in循環(huán)會跳過這些元素拳话，而for循環(huán)則會全部元素依次遍歷。 -
for of
用來遍歷數(shù)組和字符串种吸。
語法:for (let ele of data) { repeatCode }
與for in用法類似吕喘，但ele返回的是數(shù)組的元素或字符串的字符吃型。
let表示變量ele只能在repeatCode中使用臭脓；使用var表示變量ele能用在循環(huán)外，且ele的值為最后一次遍歷時ele的值岸裙。
注：for of的小括號不能刪除。
- while
條件為真則一直循環(huán)代碼速缆。
語法:while (condition) { repeatCode }-
condition條件降允。可以設(shè)置為true艺糜，但repeatCode中必須要有break以結(jié)束循環(huán)剧董。 -
repeatCode循環(huán)代碼。需要在代碼中改變某值以使condition不能一直為true破停。
-
- do while
語法：do { repeatCode } while (condition)
與while用法大致相同送滞，不同之處是 會先執(zhí)行一次repeatCode 再判斷condition。
- 影響循環(huán)
- break
在switch中辱挥，表示結(jié)束switch的比較犁嗅。
在for、while循環(huán)中晤碘，表示結(jié)束循環(huán)褂微。 - continue
在for、while循環(huán)中园爷，表示直接結(jié)束這次遍歷宠蚂，開始下一次的遍歷。
這會使continue后面的代碼在這次遍歷中不會執(zhí)行童社，但前面的代碼不會受影響求厕。
九、JSON
JSON(JavaScript Object Notation)是存儲和傳輸數(shù)據(jù)的格式扰楼，通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù)呀癣。
JSON 的數(shù)據(jù)為鍵值對，數(shù)據(jù)之間通過逗號隔開弦赖，大括號保存對象项栏，中括號保存數(shù)組，數(shù)組中有多個對象蹬竖。
鍵值對的鍵是字符串沼沈，兩端必須加上引號；值可為字符串币厕、數(shù)字列另、布爾值、null旦装。
{
"key1":"value1",
"key2":[
{"key2_1": "value2_1"},
{"key2_2": "value2_2"}
],
"key3": {
"key3_1": "value3_1"
}
}
JSON與對象（Object）的結(jié)構(gòu)相同页衙，可以在JSON和Object之間相互轉(zhuǎn)換。
- 轉(zhuǎn)換成Object
使用JSON.parse(josn, transform)將JSON轉(zhuǎn)換成對象Object同辣。-
json要傳入的json字符串拷姿。 -
transform可選參數(shù)，它是一個函數(shù)旱函，會為對象的每個鍵值對調(diào)用此函數(shù)响巢。
該函數(shù)有兩個參數(shù)，分別為鍵值對的鍵與值棒妨，函數(shù)返回值會替換原鍵值對的值踪古。
-
var a = JSON.parse('{"p": {"q": 5}}', function(k, v) {
//v為對象時返回原值
if (typeof v == "object") return v;
return v * 2;
});
document.write(a.p.q, "<br>")//10
- 轉(zhuǎn)換成JSON
使用JSON.stringify(value, replacer, space)將對象轉(zhuǎn)換成JSON。-
value對象或數(shù)組券腔。 -
replacer可選參數(shù)伏穆。- 它可以是一個函數(shù)，會為對象的每個鍵值對調(diào)用此函數(shù)纷纫。該函數(shù)有兩個參數(shù)枕扫，分別為鍵值對的鍵與值，函數(shù)返回值會替換原鍵值對的值辱魁。若返回undefined烟瞧，則會排除該鍵值對。
- 也可以是一個數(shù)組染簇，僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員参滴。成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。
-
space可選參數(shù)锻弓，文本添加縮進(jìn)砾赔、空格和換行符。- 若是一個數(shù)字青灼，則返回值文本在每個級別縮進(jìn)指定數(shù)目的空格暴心；若大于 10，則文本縮進(jìn)10個空格杂拨。
- 也可以使用非數(shù)字酷勺，如
\t。
-
var b = {a: 1, b: 2, c: 3, d: 4}
var json = JSON.stringify(b)
document.write(json, "<br>")//{"a":1,"b":2,"c":3,"d":4}
var json = JSON.stringify(b, null, 1)
document.write(json, "<br>")//{ "a": 1, "b": 2, "c": 3, "d": 4 }
json = JSON.stringify(b, ["b", "c"])
document.write(json, "<br>")//{"b":2,"c":3}
json = JSON.stringify(b, function(k, v) {
if (typeof v == "object") return v
if (k == "b") return undefined//返回undefined時排除該鍵值對
return v*2
})
document.write(json, "<br>")//{"a":2,"c":6,"d":8}
十扳躬、異步執(zhí)行
-
延遲操作
延遲一段時間后執(zhí)行操作脆诉。
語法:window.setTimeout(code, milliseconds, param1, param2, ...)
使用時window可以省略。-
code必須值贷币，要調(diào)用的表達(dá)式击胜，如setTimeout("alert('hello')", 1000)。
可以是一個函數(shù)役纹，如setTimeout(timeAction, 1000)偶摔，函數(shù)名后不用加()。 -
milliseconds要延遲的時間促脉，單位為毫秒辰斋，默認(rèn)為0策州。 -
param1, param2要傳給code函數(shù)的參數(shù)。
返回值是一個ID(數(shù)字)宫仗，可使用
window.clearTimeout()取消延遲操作够挂。 -
var a = setTimeout(function(x, y) {
document.write(x, " ", y)//hello world
}, 1000, "hello", "world")
clearTimeout(a)//取消延遲操作
定時操作
每間隔一段時間執(zhí)行一次操作。
語法:window.setInterval(code, milliseconds, param1, param2, ...);
參數(shù)與setTimeout()相同藕夫。
返回值是一個ID(數(shù)字)孽糖，可以使用window.clearTimeout()或window.clearInterval取消定時操作。AJAX
AJAX(Asynchronous JavaScript and XML) 異步的 JavaScript 和 XML毅贮。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)办悟，通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新滩褥。
var http;
//創(chuàng)建請求對象
if (window.XMLHttpRequest) {
http = new XMLHttpRequest()
} else {
//適配IE5 6
http = new ActiveXObject("Microsoft.XMLHTTP")
}
//使用回調(diào)函數(shù)
http.onreadystatechange = function() {
if (http.readyState == 4&&http.status == 200) {
document.write(http.responseText)//使用String類型數(shù)據(jù)
// document.write(http.responseXML)//使用XML類型數(shù)據(jù)
}
}
//GET時配置請求參數(shù)
http.open("GET", "./response.php?name=zhangsan&age=18", true);
//發(fā)送請求
http.send();
// //Post時配置請求參數(shù)
// http.open("POST", "./response.php", true)
// //設(shè)置http頭
// http.setRequestHeader("Content-type","application/x-www-form-urlencoded")
// //發(fā)送請求
// http.send("name=zhangsan&age=18")
}
使用new XMLHttpRequest()創(chuàng)建請求對象病蛉。
使用open()配置請求的參數(shù)。
- 參數(shù)1表示請求類型瑰煎，常使用
GET铡恕、POST。 - 參數(shù)2表示請求的文件地址丢间，可以是本地的txt探熔、也可以是服務(wù)器上的php、asp等烘挫。
- 參數(shù)3表示異步還是同步诀艰，為true表示異步。
使用send()發(fā)送請求饮六。
- POST類型時需要傳入?yún)?shù)其垄，參數(shù)值為請求的參數(shù)，如
send("name=zhangsan&age=18")卤橄。 - GET類型時绿满，請求的參數(shù)拼接在
open()的參數(shù)2上，如open("GET", "./response.php?name=zhangsan&age=20", ture)窟扑。
使用setRequestHeader()傳入HTTP頭喇颁，POST類型時需要，如setRequestHeader("Content-type", "application/x-www-form-urlencoded")嚎货。
XMLHttpRequest 對象有三個重要的屬性橘霎。readyState表示 XMLHttpRequest 對象的狀態(tài)，status表示http請求的狀態(tài)殖属，onreadystatechange為readyState改變時的回調(diào)函數(shù)姐叁。
- readyState
0: 請求未初始化
1: 服務(wù)器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應(yīng)已就緒
當(dāng)new XMLHttpRequest()之后，readyState變?yōu)?外潜，open()后readyState變?yōu)?原环，send()后變?yōu)?。 - status
詳見HTTP狀態(tài)碼处窥，200表示成功嘱吗。 - onreadystatechange
通常在回調(diào)中通過readyState == 4&&status == 200判斷請求完成，此時使用responseText屬性獲取String類型的數(shù)據(jù)碧库，使用responseXML屬性獲取xml類型的數(shù)據(jù)。
- Promise
可讓異步操作以同步操作（鏈?zhǔn)剑┑牧鞒绦问奖憩F(xiàn)出來巧勤，使控制異步操作更加容易且更美觀嵌灰。
Promise有三種狀態(tài)：-
pending初始狀態(tài)，不是成功或失敗狀態(tài)颅悉。 -
fulfilled成功狀態(tài)沽瞭。該狀態(tài)下可以調(diào)用then()函數(shù)。 -
rejected失敗狀態(tài)剩瓶。該狀態(tài)下可以調(diào)用catch()函數(shù)驹溃。
-
var promise = new Promise(function(resolve, reject) {
//執(zhí)行異步操作
resolve()
})
promise.then(function(value) {
retrun ""
}).catch(function(error) {
}).finally(function() {
})
-
創(chuàng)建 Promise 對象
使用var promise = new Promise(function(resolve, reject) { })創(chuàng)建一個 Promise 對象。- 需要傳入一個函數(shù)延曙，該函數(shù)有兩個參數(shù)resolve豌鹤、reject，兩參數(shù)都是回調(diào)函數(shù)枝缔。
異步操作寫在該函數(shù)內(nèi)布疙，操作完成后，調(diào)用resolve()或reject()將 Promise 對象變?yōu)?code>fulfilled或rejected狀態(tài)愿卸。
Promise 對象默認(rèn)是
pending狀態(tài)灵临，若轉(zhuǎn)變?yōu)?code>fulfilled，對象就會繼續(xù)執(zhí)行then()方法趴荸；若轉(zhuǎn)變?yōu)?code>rejected儒溉，對象就會繼續(xù)執(zhí)行catch()方法。 - 需要傳入一個函數(shù)延曙，該函數(shù)有兩個參數(shù)resolve豌鹤、reject，兩參數(shù)都是回調(diào)函數(shù)枝缔。
-
then
只有fulfilled狀態(tài)的 Promise 對象才會執(zhí)行該方法发钝。- 需要傳入一個函數(shù)顿涣，函數(shù)有一個參數(shù)value，值與
resolve()傳入的參數(shù)相同酝豪。
value通常是請求網(wǎng)絡(luò)接口后返回的數(shù)據(jù)园骆，一般在函數(shù)里處理數(shù)據(jù)。 - 函數(shù)需要返回一個 Promise 對象寓调，若狀態(tài)為
fulfilled锌唾，就會繼續(xù)執(zhí)行下一個then()方法；若狀態(tài)為rejected，就會跳過后面的then()直接執(zhí)行catch()方法晌涕；若狀態(tài)為pending滋捶，就會一直等待 Promise 對象轉(zhuǎn)換狀態(tài)。 - 也可以返回一個基礎(chǔ)類型（String余黎、Array等）的值重窟。相當(dāng)于返回了一個 Promise 對象，該對象回調(diào)了
resolve()惧财，且傳入的參數(shù)為基礎(chǔ)類型的值巡扇。 - 也可以不返回，相當(dāng)于
resolve()傳入的參數(shù)是undefined垮衷。
- 需要傳入一個函數(shù)顿涣，函數(shù)有一個參數(shù)value，值與
-
catch
只有rejected狀態(tài)的 Promise 對象才會執(zhí)行該方法厅翔。- 需要傳入一個函數(shù)，函數(shù)有一個參數(shù)error搀突，值與
reject()傳入的參數(shù)相同刀闷。
通常是 Error 對象，詳見 二仰迁、調(diào)試 -- 6. 異常處理甸昏。
error通常是請求網(wǎng)絡(luò)接口后返回的錯誤信息，一般在函數(shù)里彈出提示信息徐许。
- 需要傳入一個函數(shù)，函數(shù)有一個參數(shù)error搀突，值與
-
finally
fulfilled和rejected狀態(tài)的Promise對象都能執(zhí)行該方法施蜜。- 需要傳入一個函數(shù)〈朴纾可以在函數(shù)里執(zhí)行一些公共操作花墩，如隱藏加載的菊花。
Q&A：
Q: then澄步、catch 和 finally 序列能否順序顛倒冰蘑？
A: 可以，效果完全一樣村缸。但不建議這樣做祠肥，最好按 then-catch-finally 的順序編寫程序。
Q: 除了 then 塊以外梯皿，其它兩種塊能否多次使用仇箱？
A: 可以，finally 與 then 一樣會按順序執(zhí)行东羹，但是 catch 塊只會執(zhí)行第一個剂桥，除非 catch 塊里有異常。所以最好只安排一個 catch 和 finally 塊属提。
Q: then 塊如何中斷权逗？
A: then 塊默認(rèn)會向下順序執(zhí)行美尸，return 是不能中斷的，可以通過 throw 來跳轉(zhuǎn)至 catch 實現(xiàn)中斷斟薇。
Q: 什么時候我們需要再寫一個 then 而不是在當(dāng)前的 then 接著編程师坎？
A: 當(dāng)你又需要調(diào)用一個異步任務(wù)的時候。
-
all
語法:var promise = Promise.all([promise1, promise2])- 需要傳入一個數(shù)組堪滨，數(shù)組元素是 Promise 對象胯陋。
- 會返回一個 Promise 對象。
- 若數(shù)組所有元素的狀態(tài)都是
fulfilled袱箱，返回的對象的狀態(tài)就是fulfilled遏乔，且回調(diào)值value是數(shù)組元素的回調(diào)值value組成的數(shù)組； - 若數(shù)組有一個元素的狀態(tài)為
rejected发笔，返回的對象的狀態(tài)就是rejected盟萨，且回調(diào)值error為該元素的回調(diào)值error。
- 若數(shù)組所有元素的狀態(tài)都是
通常用該方法來同時調(diào)用多個網(wǎng)絡(luò)接口筐咧，都成功后就顯示界面鸯旁，有一個失敗就顯示錯誤信息噪矛。
-
race
語法:var promise = Promise.race([promise1, promise2])- 需要傳入一個數(shù)組量蕊，數(shù)組元素是 Promise 對象。
- 會返回一個 Promise 對象艇挨，對象的狀態(tài)是數(shù)組中最先轉(zhuǎn)變狀態(tài)的 Promise 對象的狀態(tài)残炮。
-
resolve
語法:var promise = Promise.resolve()- 需要傳入基礎(chǔ)類型（String、Array等）的值缩滨，返回一個狀態(tài)為
fulfilled的 Promise 對象势就。
與var promise = new Promise(function(resolve, reject) { resolve() })作用相同。 - 也可以傳入 Promise 對象脉漏，該對象會原封不動的返回苞冯。
- 需要傳入基礎(chǔ)類型（String、Array等）的值缩滨，返回一個狀態(tài)為
-
reject
語法:var promise = Promise.reject()- 需要傳入基礎(chǔ)類型（String、Array等）的值或 Error 對象舅锄，返回一個狀態(tài)為
rejected的 Promise 對象。
與var promise = new Promise(function(resolve, reject) { reject() })作用相同司忱。
- 需要傳入基礎(chǔ)類型（String、Array等）的值或 Error 對象舅锄，返回一個狀態(tài)為
十一皇忿、DOM
DOM為Document Object Model（文檔對象模型），用于操作 HTML 元素坦仍。
文檔是一個文檔節(jié)點鳍烁，所有的 HTML 元素都是元素節(jié)點，所有 HTML 屬性都是屬性節(jié)點繁扎，文本插入到 HTML 元素是文本節(jié)點幔荒，注釋是注釋節(jié)點。
Document 對象是 HTML 文檔的根節(jié)點。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問铺峭。
Document 對象是 Window 對象的一部分墓怀，可通過
window.document屬性對其進(jìn)行訪問，window可省略卫键。元素對象代表著一個 HTML 元素傀履。
元素對象的子節(jié)點可以是元素節(jié)點、文本節(jié)點莉炉、注釋節(jié)點钓账。
元素對象有屬性，屬性屬于屬性節(jié)點絮宁。
節(jié)點樹中的節(jié)點彼此擁有層級關(guān)系梆暮。
我們常用父（parent）、子（child）和同胞（sibling）等術(shù)語來描述這些關(guān)系绍昂。父節(jié)點擁有子節(jié)點啦粹。同級的子節(jié)點被稱為同胞（兄弟或姐妹），同胞是擁有相同父節(jié)點的節(jié)點窘游。
在節(jié)點樹中唠椭，頂端節(jié)點被稱為根（root）。
每個節(jié)點都有父節(jié)點忍饰、除了根（它沒有父節(jié)點）贪嫂。
一個節(jié)點可擁有任意數(shù)量的子節(jié)點。
DOM全部屬性和方法詳見DOM Document 對象艾蓝。
- 查找元素element
-
通過id
語法：document.getElementById()- 需要傳入一個參數(shù)力崇，即
<div id=""></div>中id的值。 - 返回元素對象赢织，若沒有找到亮靴，則返回null。
元素對象的屬性和方法詳見 JavaScript 參考手冊 -- DOM 元素對象于置。
- 需要傳入一個參數(shù)力崇，即
-
通過標(biāo)簽名
語法：document.getElementsByTagName()茧吊、element.getElementsByTagName()- 需要傳入一個參數(shù)，即
<div></div>中的div俱两。 - 返回 HTMLCollection 對象饱狂，相當(dāng)于數(shù)組。
- 需要傳入一個參數(shù)，即
-
通過類名
語法：document.getElementsByClassName()宪彩、element.getElementsByClassName()- 需要傳入一個參數(shù)休讳，即
<div class=""></div>中class的值。
多個類名使用空格分隔尿孔，如document.getElementsByClassName("test1 test2")俊柔。 - 返回 HTMLCollection 對象筹麸，相當(dāng)于數(shù)組。
- 需要傳入一個參數(shù)休讳，即
-
通過名稱
語法：document.getElementsByName()- 需要傳入一個參數(shù)雏婶，即
<div name=""></div>中name的值物赶。 - 返回 NodeList 對象，相當(dāng)于數(shù)組留晚。
- 需要傳入一個參數(shù)雏婶，即
-
通過CSS選擇器
語法：document.querySelectorAll()酵紫、element.querySelectorAll()- 需要傳入一個參數(shù)，為CSS選擇器错维。即
<p id="id" class="class">中的p奖地、#id、.class赋焕，多個選擇器用逗號隔開参歹。 - 返回 NodeList 對象，相當(dāng)于數(shù)組隆判。
document.querySelector()與querySelectorAll()用法相同犬庇，但只返回 NodeList 對象的第一個元素。 - 需要傳入一個參數(shù)，為CSS選擇器错维。即
-
HTMLCollection 對象
HTMLCollection是 HTML 元素的集合侨嘀，是一個偽數(shù)組臭挽，不能使用數(shù)組的某些方法。
可以使用Array.prototype.slice.call(col)飒炎、Array.prototype.slice.apply(col)埋哟、Array.prototype.slice.bind(col)()將 HTMLCollection 對象轉(zhuǎn)換成一個數(shù)組笆豁，參數(shù)col為 HTMLCollection 對象郎汪。- 使用
length獲取元素的數(shù)量。 - 使用
item(index)或[index]獲取對應(yīng)索引index的元素闯狱。 - 使用
namedItem(name)或[name]獲取對應(yīng)name或id的元素煞赢。參數(shù)name即為<div id="" name=""></div>中的id或name的值，有一個相同即可哄孤。
- 使用
-
NodeList對象
NodeList 是一個文檔節(jié)點的集合照筑，包含屬性節(jié)點和文本節(jié)點，是一個偽數(shù)組瘦陈，不能使用數(shù)組的某些方法凝危。
和 HTMLCollection 對象一樣，可以使用call晨逝、apply蛾默、bind轉(zhuǎn)換成數(shù)組。- 使用
length獲取元素的數(shù)量捉貌。 - 使用
item(index)或[index]獲取對應(yīng)索引index的元素支鸡。
- 使用
與 HTMLCollection 對象的不同點
當(dāng)removeChild()刪除一個節(jié)點后冬念，之前 NodeList 對象的元素數(shù)量不會變化，而之前 HTMLCollection 對象的元素數(shù)量會減少牧挣。
即 HtmlCollection 是動態(tài)綁定的急前，對節(jié)點的增刪是敏感的。
- 修改元素
修改內(nèi)容
語法：element.innerHTML = 新內(nèi)容
innerHTML是元素的一個屬性瀑构，即<div id="id"><p>hello</p></div>中的<p>hello</p>裆针。
可修改該屬性來改變 HTML 元素的內(nèi)容，如document.getElementById("id").innerHTML = "hello"寺晌。修改元素屬性值
語法：element.attributeName = 新屬性值
attributeName是標(biāo)簽的各種屬性名据块，如<img id="" src="" class="">中的id、src折剃、class另假。
通過該方法可改變元素的各種標(biāo)簽屬性值，如document.getElementById("id").src= "./demo.png"怕犁。-
修改樣式
語法:element.style.CSSName=" "
CSSName是CSS的屬性名边篮，如backgroundColor、font奏甫。
通過該方法可改變元素的CSS樣式戈轿，如document.getElementById("id").style.color= "red"。style屬于樣式聲明對象(CSSStyleDeclaration)阵子，屬性和方法詳見 JavaScript 參考手冊 -- CSSStyleDeclaration 對象思杯。
- 操作元素
創(chuàng)建元素節(jié)點
HTML 元素通常是由元素節(jié)點和文本節(jié)點組成。
語法：document.createElement(nodename)
nodename節(jié)點名稱挠进，如div色乾、p等。創(chuàng)建文本節(jié)點
語法：document.createTextNode(text)創(chuàng)建注釋節(jié)點
因為注釋是不可見的领突，所有頁面上無變化暖璧。
語法：document.createComment(text)-
添加子節(jié)點。
可為元素添加子節(jié)點君旦，子節(jié)點可為元素節(jié)點陕贮、文本節(jié)點棋弥、注釋節(jié)點。
語法：element.appendChild(node)
若 document 中已存在該元素節(jié)點，會先將節(jié)點從文檔中刪除搜囱，再插入到元素的子節(jié)點列表末尾篮绰。
若 document 中不存在該元素節(jié)點晾蜘，則會直接插入到元素的子節(jié)點列表末尾樊诺。- 可使用
element.childNodes獲取元素的子節(jié)點列表，包含元素節(jié)點谱俭、文本節(jié)點奉件、注釋節(jié)點宵蛀。 - 可使用
element.children獲取元素的子元素節(jié)點列表。 - 可使用
element.removeChild(node)刪除子節(jié)點县貌。
若想將自己從父元素中刪除术陶，可使用element.parentNode.removeChild(element)。
- 可使用
-
插入子節(jié)點
將子節(jié)點插入到另一個子節(jié)點前面煤痕。
語法：element.insertBefore(newnode, existingnode)-
newnode要插入的元素節(jié)點梧宫。 -
existingnode已存在的子節(jié)點
與
appendChild()類似，若元素節(jié)點已存在于 document 中摆碉，會先刪除原節(jié)點再插入塘匣。 -
-
替換子節(jié)點
語法：element.replaceChild(newnode,oldnode)-
newnode元素節(jié)點 -
oldnode被替換的元素節(jié)點
-
-
創(chuàng)建屬性節(jié)點
語法：document.createAttribute(attributename)
attributename屬性名，如class巷帝、style忌卤、onclick等。- 創(chuàng)建成功后楞泼，可使用屬性
name獲取屬性節(jié)點的名稱驰徊，使用屬性value來設(shè)置或獲取屬性節(jié)點的值。 - 可使用
element.attributes獲取元素的所有屬性節(jié)點堕阔。
屬性節(jié)點的更多屬性和方法詳見 JavaScript 參考手冊 -- DOM 屬性對象棍厂。
- 創(chuàng)建成功后楞泼，可使用屬性
設(shè)置屬性節(jié)點
為元素設(shè)置一個屬性節(jié)點。
語法：element.setAttributeNode(attributenode)
使用element.setAttribute(attributename,attributevalue)直接為元素設(shè)置屬性并指定值超陆。獲取屬性節(jié)點
語法：element.getAttributeNode(attributename)
使用element.getAttribute(attributename)直接獲取元素的屬性值牺弹。刪除屬性節(jié)點
語法：element.removeAttributeNode(attributenode)
使用element.removeAttribute(attributename)直接為元素刪除指定的屬性。
var ele = document.createElement("div")//創(chuàng)建元素節(jié)點
var text = document.createTextNode("hello")//創(chuàng)建文本節(jié)點
ele.appendChild(text)//ele將文本節(jié)點添加為子節(jié)點
var att = document.createAttribute("style")//創(chuàng)建屬性節(jié)點
att.value = "color: red;"http://設(shè)置屬性節(jié)點的值
ele.setAttributeNode(att)//ele添加屬性節(jié)點att
var com = document.createComment("comments");//創(chuàng)建注釋節(jié)點
ele.appendChild(com);//ele添加注釋節(jié)點 但注釋不可見
document.body.appendChild(ele)//body上添加子節(jié)點ele
十二时呀、BOM
BOM 是瀏覽器對象模型（Browser Object Model）张漂，即 window。
window 表示瀏覽器窗口退唠。全局變量是 window 對象的屬性鹃锈，全局函數(shù)是 window 對象的方法荤胁。
DOM 中的 document 也是 window 對象的屬性瞧预，document 詳見 十一、DOM 仅政。
使用 window 對象的屬性或方法時垢油，可以省略window，即window.innerHeight可省略成innerHeigh圆丹。
全部屬性與方法詳見Window 對象滩愁。
screen
window.screen對象包含有關(guān)用戶屏幕的信息，有屏幕寬辫封、高硝枉、色彩等屬性廉丽。
屬性和方法詳見 JavaScript 參考手冊 -- Screen 對象。location
window.location對象包含當(dāng)前頁面的 URL 信息妻味，可使用location.assign()加載新頁面正压。
屬性和方法詳見 JavaScript 參考手冊 -- Location 對象。history
window.history對象包含瀏覽器的歷史記錄责球，可使用history.back()后退到上一個頁面焦履，history.forward()前進(jìn)到下一個頁面。
屬性和方法詳見 JavaScript 參考手冊 -- History 對象雏逾。navigator
window.navigator對象包含有關(guān)當(dāng)前瀏覽器的信息嘉裤。
屬性和方法詳見 JavaScript 參考手冊 -- Navigator 對象。
注：
來自 navigator 對象的信息具有誤導(dǎo)性栖博，不應(yīng)該被用于檢測瀏覽器版本屑宠，這是因為：
navigator 數(shù)據(jù)可被瀏覽器使用者更改。
一些瀏覽器對測試站點會識別錯誤仇让。
瀏覽器無法報告晚于瀏覽器發(fā)布的新操作系統(tǒng)侨把。彈框
JS 中有三種消息框：警告框、確認(rèn)框妹孙、提示框秋柄。
彈框會阻止代碼執(zhí)行，只有點擊了確定或取消后才會繼續(xù)執(zhí)行代碼蠢正。
window.alert()警告框骇笔，只有消息和確定。
window.confirm()確認(rèn)框嚣崭，有消息笨触、取消和確定。返回一個布爾雹舀，為true表示點擊了確定芦劣。
window.prompt()輸入框，有消息说榆、輸入框虚吟、取消和確定。點確定后會返回輸入的值签财。cookie
window.document.cookie用于存儲頁面的用戶信息串慰，是存在于本地的數(shù)據(jù)。
cookie是通過鍵值對保存的唱蒸，鍵值用=連接邦鲫，如key=value。
有些key有默認(rèn)的作用神汹，expires表示過期時間庆捺，path表示cookie的路徑古今。
注：若不設(shè)置過期時間，那么cookie的有效時間為當(dāng)前窗口關(guān)閉之時滔以，并且是存儲在內(nèi)存中沧卢。
- 新增
document.cookie = "username=zhangsan; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"
表示創(chuàng)建一個cookie，內(nèi)容為username=zhangsan醉者，過期時間為2043年但狭，路徑為當(dāng)前頁面。 - 刪除
只需將過期時間設(shè)為以前的時間撬即。如document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
- storage
storage分為window.sessionStorage（會話存儲）和window.localStorage（本地存儲）立磁，它們都可以對網(wǎng)頁的數(shù)據(jù)進(jìn)行增刪查改，保存的數(shù)據(jù)是鍵值對剥槐，它們都是只讀的唱歧。
localStorage用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間粒竖，直到手動去除颅崩。
sessionStorage用于臨時保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)蕊苗。
- localStorage
localStorage.setItem("key", "value")新增(修改)數(shù)據(jù)沿后，key和value都是字符串，其他類型需要先進(jìn)行轉(zhuǎn)換朽砰。
var lastname = localStorage.getItem("key")查詢數(shù)據(jù)尖滚。
localStorage.removeItem("key")刪除數(shù)據(jù)。
localStorage.clear()刪除所有數(shù)據(jù)瞧柔。
localStorage.length返回共有多少條數(shù)據(jù)漆弄。
localStorage.key(index)返回對應(yīng)索引的key。
localStorage 拓展了 cookie 的 4K 限制造锅。
localStorage在瀏覽器的隱私模式下面是不可讀取的撼唾。
localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間哥蔚，會導(dǎo)致頁面變卡倒谷。
每個頁面都有自己的localStorage，不同頁面之間不能訪問對方的localStorage肺素。
而當(dāng)前頁面能訪問其他頁面的cookie恨锚，但設(shè)置 阻止第三方cookie 后，也不能訪問其他頁面cookie了倍靡。
- sessionStorage
與localStorage使用方式完全相同。
- 其他
- 屬性
window.opener返回創(chuàng)建此窗口的窗口课舍。誰open我塌西。
window.parent返回父窗口他挎。若自己是一個iframe或frame，誰持有我捡需。
window.top返回最頂層窗口办桨。相當(dāng)于最頂層的父窗口。
window.self返回自身站辉。即window.self == self == self.window == self.self - 方法
window.blur()窗口失去焦點呢撞。
window.focus()窗口獲取焦點。
window.open()打開或查找窗口饰剥。
window.close()關(guān)閉窗口殊霞。
window.matchMedia()響應(yīng)式設(shè)計，與CSS中@media作用相同汰蓉。
window.getComputedStyle()獲取樣式绷蹲。- 與
document.getElementById("").style的異同
style獲取的是內(nèi)聯(lián)樣式，而getComputedStyle()是內(nèi)聯(lián)顾孽、嵌入和外部樣式混合后的最終樣式祝钢。
style可讀寫，而getComputedStyle()只讀若厚。通常是先使用getComputedStyle()獲取樣式拦英，再使用style修改樣式。
它們都返回 樣式聲明對象(CSSStyleDeclaration)测秸，屬性和方法詳見 JavaScript 參考手冊 -- CSSStyleDeclaration 對象龄章。
注：因為 CSS 屬性中float在 JS 中是關(guān)鍵字，所以要用cssFloat替換乞封，如document.getElementById("").style.cssFloat = "left"
- 與
