學(xué)習(xí)可以到大神的官網(wǎng)學(xué)習(xí),http://www.liaoxuefeng.com/ 這里是做的筆記
運(yùn)行和調(diào)試
a. 如何運(yùn)行javascript
要讓瀏覽器運(yùn)行JavaScript踩窖,必須先有一個HTML頁面蛮原,在HTML頁面中引入JavaScript携狭,然后它浅,讓瀏覽器加載該HTML頁面,就可以執(zhí)行JavaScript代碼范删。
你也許會想芬萍,直接在我的硬盤上創(chuàng)建好HTML和JavaScript文件买喧,然后用瀏覽器打開,不就可以看到效果了嗎憔杨?
這種方式運(yùn)行部分JavaScript代碼沒有問題馁启,但由于瀏覽器的安全限制,以'file://'開頭的地址無法執(zhí)行如聯(lián)網(wǎng)等JavaScript代碼芍秆,最終惯疙,你還是需要架設(shè)一個Web服務(wù)器,然后以'http://' 開頭的地址來正常執(zhí)行所有JavaScript代碼妖啥。
b. 調(diào)試:
使用Google Chrome瀏覽器霉颠,Chrome瀏覽器對開發(fā)者非常友好,可以讓你方便地調(diào)試JavaScript代碼
安裝后荆虱,隨便打開一個網(wǎng)頁蒿偎,然后點(diǎn)擊菜單“查看(View)”-“開發(fā)者(Developer)”-“開發(fā)者工具(Developer Tools)”,瀏覽器窗口就會一分為二怀读,下方就是開發(fā)者工具:
先點(diǎn)擊“控制臺(Console)“诉位,在這個面板里可以直接輸入JavaScript代碼,按回車后執(zhí)行菜枷。
要查看一個變量的內(nèi)容苍糠,在Console中輸入console.log(a);,回車后顯示的值就是變量的內(nèi)容啤誊。
如果你對自己還有更高的要求岳瞭,可以研究開發(fā)者工具的“源碼(Sources)”拥娄,掌握斷點(diǎn)、單步執(zhí)行等高級調(diào)試技巧瞳筏。
引入javaScript方法;
JavaScript代碼可以直接嵌在網(wǎng)頁的任何地方稚瘾,不過通常我們都把JavaScript代碼放到<head>中;
1.由<script>...</script>包含的代碼就是JavaScript代碼,它將直接被瀏覽器執(zhí)行姚炕。;
2.把JavaScript代碼放到一個單獨(dú)的.js文件摊欠,然后在HTML中通過<script src="..."></script>引入這個文件;
有些時候你會看到<script>標(biāo)簽還設(shè)置了一個type屬性:<script type="text/javascript">
但這是沒有必要的,因?yàn)槟J(rèn)的type就是JavaScript柱宦,所以不必顯式地把type指定為JavaScript凄硼。注釋
1.行注釋//...
2.塊注釋/..../-
數(shù)據(jù)類型和變量
1.注意兩個數(shù)據(jù);
NaN;//表示not a number 當(dāng)無法計(jì)算結(jié)果時用NAN表示
Infinity;//表示無限大,當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時,就表示為Infinity
2.注意相等運(yùn)算符==JavaScript在設(shè)計(jì)時捷沸,有兩種比較運(yùn)算符;
1.==//會自動轉(zhuǎn)換數(shù)據(jù)類型再進(jìn)行比較,很多時候會得到非常詭異的結(jié)果
2.===//不會自動轉(zhuǎn)換數(shù)據(jù)類型,如果數(shù)據(jù)類型不一致,返回false,如果一致,再比較.
由于JavaScript這個設(shè)計(jì)缺陷摊沉,不要使用==比較,始終堅(jiān)持使用===比較;
3.NaN 這個特殊的Number與其他所有的值都不相等包括他自己;NaN===NaN;//false
唯一能判斷NaN的方法是通過isNaN()
4.注意浮點(diǎn)數(shù)的比較:1 / 3 === (1 - 2 / 3); // false
這不是JavaScript的設(shè)計(jì)缺陷。浮點(diǎn)數(shù)在運(yùn)算過程中會產(chǎn)生誤差痒给,因?yàn)橛?jì)算機(jī)無法精確表示無限循環(huán)小數(shù)说墨。要比較兩個浮點(diǎn)數(shù)是否相等,只能計(jì)算它們之差的絕對值苍柏,看是否小于某個閾值:
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
5.null和undefined
null表示一個空的空,它和0和''不同,0 是一個數(shù)值,''表示長度為0的字符串.而null表示空
undefined表示未定義
JavaScript的設(shè)計(jì)者希望用null表示一個空的值尼斧,而undefined表示值未定義。事實(shí)證明试吁,這并沒有什么卵用棺棵,區(qū)分兩者的意義不大。大多數(shù)情況下熄捍,我們都應(yīng)該用null烛恤。undefined僅僅在判斷函數(shù)參數(shù)是否傳遞的情況下有用。- strict模式
JavaScript在設(shè)計(jì)之初余耽,為了方便初學(xué)者學(xué)習(xí)缚柏,并不強(qiáng)制要求用var申明變量。這個設(shè)計(jì)錯誤帶來了嚴(yán)重的后果:如果一個變量沒有通過var申明就被使用碟贾,那么該變量就自動被申明為全局變量:
币喧,ECMA在后續(xù)規(guī)范中推出了strict模式,在strict模式下運(yùn)行的JavaScript代碼袱耽,強(qiáng)制通過var申明變量杀餐,未使用var申明變量就使用的,將導(dǎo)致運(yùn)行錯誤朱巨。
啟用strict模式的方法是在JavaScript代碼的第一行寫上:'use strict'; - 字符串
單行字符串 '...' 或者 "..."
ES6新增:多行字符串...
字符串鏈接可以用+號
ES6新增模板字符串:表示方法和上面的多行字符串一樣史翘,但是它會自動替換字符串中的變量:這么讀取變量的值:$(變量名)
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
- 對象
JavaScript用一個{...}表示一個對象,鍵值對以xxx: xxx形式申明,用,隔開恶座。注意,最后一個鍵值對不需要在末尾加,沥阳,如果加了跨琳,有的瀏覽器(如低版本的IE)將報(bào)錯。
訪問屬性是通過.操作符完成的桐罕,但這要求屬性名必須是一個有效的變量名脉让。如果屬性名包含特殊字符,就必須用''括起來
var xiaohong = {
name: '小紅',
'middle-school': 'No.1 Middle School'
};
xiaohong的屬性名middle-school不是一個有效的變量功炮,就需要用''括起來溅潜。訪問這個屬性也無法使用.操作符,必須用['xxx']來訪問:
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'
判斷一個對象是否擁有某一個屬性,可以用in操作符 'name' in xiaohong; //true
in判斷一個屬性存在薪伏,這個屬性不一定是這個對象的,也可能是繼承來的.
要判斷一個屬性是不是對象自身擁有而不是從父類集成來的用用hasOwnProperty()方法xiaohong.hasOwnProperty('name')
6.條件判斷 如果if的判斷語句不是true或者false 怎么辦
var s = '123';
if (s.length) { // 條件計(jì)算結(jié)果為3
//
}
JavaScript把null滚澜、undefined、0嫁怀、NaN和空字符串''視為false设捐,其他值一概視為true,因此上述代碼條件判斷的結(jié)果是true塘淑。
7.數(shù)組:
1.訪問length屬性獲取數(shù)組長度
2.與string類似,數(shù)組也可以用indexOf()來搜索一個指定元素的位置.存在返回索引(下標(biāo)),不存在返回-1;
3.slice()切片 對應(yīng)于string的substring();截取數(shù)組的部分元素,返回一個新的數(shù)組,(包括開始索引不包括結(jié)束索引)
如果不給slice()傳遞任何參數(shù)萝招,它就會從頭到尾截取所有元素。利用這一點(diǎn)存捺,我們可以很容易地復(fù)制一個Array:
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始槐沼,到索引3結(jié)束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結(jié)束: ['D', 'E', 'F', 'G']
4.push和pop
push() 向數(shù)組末尾添加若干元素,pop()則把Array的最后一個元素刪除.
5.unshift和shift
unshift向頭部添加若干元素,shift刪掉第一個元素
6.sort對數(shù)組進(jìn)行排序
7.reverse對數(shù)據(jù)進(jìn)行翻轉(zhuǎn)
8.splice修改數(shù)組的萬能方法,可以從指定的索引開始刪除若干元素,然后再從該位置添加若干元素
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然后再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因?yàn)闆]有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
9.concat 把當(dāng)前數(shù)組和另一個數(shù)組鏈接,返回一個新的數(shù)組;
concat()方法并沒有修改當(dāng)前Array捌治,而是返回了一個新的Array岗钩。
實(shí)際上,concat()方法可以接收任意個元素和Array肖油,并且自動把Array拆開凹嘲,然后全部添加到新的Array里:
10.join()方法是一個非常實(shí)用的方法,它把當(dāng)前Array的每個元素都用指定的字符串連接起來构韵,然后返回連接后的字符串:
8.Map和Set
JavaScript的對象可以視為其他語言的Map或者Dictionary,JavaScript的對象鍵必須是字符串,但實(shí)際上Number或者其他數(shù)據(jù)類型作為鍵也是非常合理的周蹭。
為了解決這個問題,ES6規(guī)范,引入的新的數(shù)據(jù)類型Map
Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度疲恢。
初始化Map需要一個二維數(shù)組凶朗,var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
或者直接初始化一個空Map。Map具有以下方法:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
由于一個key只能對應(yīng)一個value显拳,所以棚愤,多次對一個key放入value,后面的值會把前面的值沖掉:
Set
Set和Map類似,也是一組key的集合宛畦,但不存儲value瘸洛。由于key不能重復(fù),所以次和,在Set中反肋,沒有重復(fù)的key。
要創(chuàng)建一個Set踏施,需要提供一個Array作為輸入石蔗,或者直接創(chuàng)建一個空Set:
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
通過add(key)方法可以添加元素到Set中,可以重復(fù)添加畅形,但不會有效果:
通過delete(key)方法可以刪除元素:
iterable
遍歷Array可以采用下標(biāo)循環(huán)养距,遍歷Map和Set就無法使用下標(biāo)。為了統(tǒng)一集合類型日熬,ES6標(biāo)準(zhǔn)引入了新的iterable類型棍厌,Array、Map和Set都屬于iterable類型竖席。
具有iterable類型的集合可以通過新的for ... of循環(huán)來遍歷定铜。
for ... of循環(huán),它只循環(huán)集合本身的元素:
更好的方式是直接使用iterable內(nèi)置的forEach方法怕敬,它接收一個函數(shù)揣炕,每次迭代就自動回調(diào)該函數(shù)。以Array為例:
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當(dāng)前元素的值
// index: 指向當(dāng)前索引
// array: 指向Array對象本身
alert(element);
});
forEach()方法是ES5.1標(biāo)準(zhǔn)引入的东跪,你需要測試瀏覽器是否支持畸陡。
Set與Array類似,但Set沒有索引虽填,因此回調(diào)函數(shù)的前兩個參數(shù)都是元素本身:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});
Map的回調(diào)函數(shù)參數(shù)依次為value丁恭、key和map本身:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
如果對某些參數(shù)不感興趣,由于JavaScript的函數(shù)調(diào)用不要求參數(shù)必須一致斋日,因此可以忽略它們牲览。例如,只需要獲得Array的element:
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
alert(element);
});
- strict模式