1. 本文是在學習廖雪峰先生的JavaScrip教程 后的歸納
2. 本文是第一次采用markdown進行書寫
- JavaScript簡介
- 網(wǎng)景公司 Brendan Eich 10天內(nèi)設計出了JavaSrcipt
- JavaScript 和 Java沒有任何關系缠犀，當時数苫，借Java名聲而已
- ECMAScript是一個語言標準
- 最新版ECMAScript 6標準發(fā)布于2015年6月
- 核心語法為沒有多大變化，ES6增加部分新特性
- JavaScript的引用和調(diào)試
- 引用
- 常嵌入<head>里,在Html文件中直接寫
<script>...</script> - JavaScript放入一個單獨的
.js文件,然后在HTML中通過<script src="..."></script>
- 常嵌入<head>里,在Html文件中直接寫
- 調(diào)試
- Chrome F12 Chrome自帶調(diào)試工具辨液，不錯的調(diào)試工具
- FireBug FireFox 強大的調(diào)試插件虐急，有點卡
- 開發(fā)工具
- 文本工具: Sublime Text, NotePad++,Vim等
- IDE: WebStorm,Eclipse
- 引用
- 基本語法
- 每個語句以
;結(jié)尾，語句塊以{..}滔迈，另;可以省略但不建議省略 -
"Hello World!"這樣寫仍然可以視為一個完整語句 -
var x=1; var y=2; -
{...}可以嵌套,大括號內(nèi)語句具有縮進,通常為4個空格止吁，有助于理解代碼層次 - 單號注釋
//塊注釋/**/ - JavaScript 嚴格區(qū)分大小寫
- 每個語句以
- 數(shù)據(jù)類型、運算符燎悍、變量
- Number類型
- JavaScript不區(qū)分整數(shù)和浮點數(shù)
123; 整數(shù)0.456;小數(shù)1.234e3;科學計數(shù)法-99; 負數(shù)NaN; 不是NumberInfinity; 無限大 - 運算符: +敬惦、-、*谈山、/俄删、% (求余)
- JavaScript不區(qū)分整數(shù)和浮點數(shù)
- 字符串
-
''或""表示字符串
-
- 布爾值
-
truefalse - 用表達式表示布爾值,如
1>2 -
&&||!
-
- 比較運算符
- 常見運算符:
>、>=奏路、==畴椰、<= - JavaScript 允許對任意數(shù)據(jù)類型進行比較
- 兩種相等運算符:
使用==時，會自動轉(zhuǎn)換數(shù)據(jù)類型再比較
使用===時鸽粉，它不會自動轉(zhuǎn)換數(shù)據(jù)類型斜脂，如果數(shù)據(jù)類型不一致，返回false潜叛，如果一致秽褒，再比較。 - 由于JavaScript這設計形式,建議使用===比較
- 特例：
NaN與所有其他值都不相等威兜，包括他自己:即NaN===NaN;(false) - 唯一判斷NaN的方法是通過
isNaN()函數(shù)isNaN(NaN) - 浮點數(shù)比較,由于浮點數(shù)在運算過程中會產(chǎn)生誤差,計算機無法精確表示無限循環(huán)小數(shù),要比較兩個浮點數(shù)是否相等,只能計算它們之差的絕對值销斟，看是否小于某個閾值，如
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
- 常見運算符:
- null 和 undefined
- null 表示一個
空的值,它和0以及空字符串''不同椒舵，0是一個數(shù)值蚂踊，''表示長度為0的字符串，而null表示“空”笔宿。與Java等語言的null值類似 - JavaScript的設計者希望用null表示一個空的值犁钟，而undefined表示值未定義棱诱。大多數(shù)情況下，應該使用null
- 詳細區(qū)別可以參照：阮一峰 undefined與null的區(qū)別
- null 表示一個
- 數(shù)組
- 對象
- JavaScript的對象是一組由key-value組成的無序集合,例如:
var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', zipcode: null }; - JavaScript對象的鍵都是字符串類型米愿，值可以是任意數(shù)據(jù)類型厦凤。
- 通過
對象變量.屬性名獲取對象的值
- JavaScript的對象是一組由key-value組成的無序集合,例如:
- 變量
- 變量名： a-z,A-Z,0-9,$,_來組成，且數(shù)字不能開頭
- 變量名：不能是JavaScript的關鍵字
- 變量名可以是中文育苟，但盡量不要這樣做
- = 為變量賦值
- 可以把任意數(shù)據(jù)類型賦值給變量较鼓，同一個變量可以反復賦值，而且可以是不同類型的變量违柏，但是要注意只能用var申明一次
- 變量本身類型不固定的語言稱之為動態(tài)語言博烂，與之對應的是靜態(tài)語言。靜態(tài)語言在定義變量時必須指定變量類型勇垛，如果賦值的時候類型不匹配脖母，就會報錯士鸥。Java即為靜態(tài)語言闲孤。動態(tài)語言更靈活即基于此
- 把賦值語句的等號等同于數(shù)學的等號
- strict模式
- 引入strict 模式的原因： 如果一個變量沒有通過var申明就被使用，那么該變量就自動被申明為全局變量
- 使用var聲明的變量烤礁，則被限制在聲明變量的函數(shù)體內(nèi)
- 后續(xù)的ECMAScript標準推出了strict模式讼积，即強制通過var聲明變量，為聲明則報錯
- 啟用strict模式脚仔，在javascript的第一行加入'use strict';
- 建議采用strict模式
- Number類型
- 字符串
- 字符串表示形式
- 采用
''或""表示字符串 - 轉(zhuǎn)義字符:
\例如:'I\'m OK!',\n,\t,\\ - ASCII字符可以用
\x##形式表示,如\x41 //等同于'A' -
\u####表示一個Unicode字符 - 多行字符串用
...表示,如
`這是一個
多行字
符串`
- 采用
- 常用字符串操作
var s ="Hello, World!"; s.length;//13- length 獲取字符串的長度
- 字符串可以通過指定的下標來獲取相關的字符值,如s[n] 例如:s[0];//'H'
- 字符串是固定的勤众，不可通過某個索引賦值,雖不會有錯，但不會改變值
- JavaScript為字符串提供了很多方法,調(diào)用這些方法不會改變原有的字符串的值鲤脏，而是生成一個新字符串
- toUpperCase() 字符串變成大寫
- toLowerCase() 字符串變成小寫
- indexOf() 返回第一個指定字符串的所在的索引值,沒有返回-1
- substring() 返回指定的索引區(qū)間的子串
- 字符串方法匯總
- 字符串表示形式
| 方法 | 說明 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的Unicode值 |
| concat() | 連接兩個或多個字符串们颜，返回連接后的字符串 |
| fromCharCode() | 將字符轉(zhuǎn)換為Unicode值 |
| indexOf() | 返回字符串中檢索指定字符第一次出現(xiàn)的位置 |
| lastIndexOf() | 返回字符串中檢索指定字符最后一次出現(xiàn)的位置 |
| localeCompare() | 用本地特定的順序來比較兩個字符串 |
| match() | 找到一個或多個正則表達式的匹配 |
| replace() | 替換與正則表達式匹配的子串 |
| search() | 檢索與正則表達式相匹配的值 |
| slice() | 提取字符串的片斷，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割為子字符串數(shù)組 例如["hello".split("")可以直接將字符串轉(zhuǎn)變成Char數(shù)組] |
| substr() | 從起始索引號提取字符串中指定數(shù)目的字符 |
| substring() | 提取字符串中兩個指定的索引號之間的字符 |
| toLocaleLowerCase() | 根據(jù)主機的語言環(huán)境把字符串轉(zhuǎn)換為小寫猎醇，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLocaleUpperCase() | 根據(jù)主機的語言環(huán)境把字符串轉(zhuǎn)換為大寫窥突，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLowerCase() | 把字符串轉(zhuǎn)換為小寫 |
| toString() | 返回字符串對象值 |
| toUpperCase() | 把字符串轉(zhuǎn)換為大寫 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某個字符串對象的原始值 |
- 數(shù)組
- Array 簡介
- JavaScript的Array可以包含任意數(shù)據(jù)類型,并通過索引來訪問每個元素
- Array 通過屬性length獲取Array的長度,直接給Array的length賦值會導致Array大小的變化
- Array 可以通過索引把對應的元素修改為新值,如果通過索引賦值超過了范圍,同樣會引起Array大小的變化
var arr=[1,2,3]; arr[5]='x'; arr;//arr變成[1,2,3,undefined,undefined,'x'] - 大多數(shù)的編程語言不允許直接改變數(shù)組的大小,越界會報錯,而JavaScript的Array卻不會報錯,但不建議直接修改Array的大小,訪問索引時,要確保索引不越界
- Array的常用方法
- indexOf Array也可以通過indexOf()來搜索一個指定元素的位置
- slice() 對應字符串的substring()版本,截取Array的部分元素,然后返回一個新的Array,例:arr.slice(0,3) 從索引0到2,不包括索引3,arr.slice(3),從索引3到結(jié)束
- slice()的起止參數(shù)包括索引,不包括結(jié)束索引,無參數(shù)時,從頭截到尾,利用此點可以復制一個Array
- push()向Array的末尾添加若干元素
- pop() 則把Array的最后一元素刪除掉,并返回移除的元素,空數(shù)組pop后,返回undefined
- unshift()向頭部添加若干元素,shift()方法則把Array的第一個元素刪除掉，返回Array的長度,空數(shù)組shift(),則返回undefined
- sort() 對Array排序,直接修改當前Array的元素位置,直接調(diào)用時,按照默認順序排序
- reverse() 把整個Array元素反轉(zhuǎn)
- splice() 修改Array的萬能方法
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'); // 返回[],因為沒有刪除任何元素 arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'] - concat() 方法把當前的Array和另一個Array連接到一起,并返回一個新的Array,concat方法可以接受任意個元素和Array,并自動Array拆開,然后全部添加到新的Array里,如:arr.concat(1,2,[3,4])
- join方法是一個非常實用的方法,它把當前的Array的每個元素都用指定的字符串連接起來,然后返回連接后的字符串,若Array元素不是字符串,也將自動轉(zhuǎn)換為字符串后再連接
var arr=['A','B','C',1]; arr.join('~');//'A~B~C~1' - 多維數(shù)組
var arr=[[1,2,3],[400,500,600],'-'];
- Array 簡介
- 對象
- 對象的定義及屬性訪問
- 對象定義:JavaScript的對象是一種無序的集合數(shù)據(jù)類型,它由若干鍵值組成,例如:
var xiaoming={ name:'test', birth:1980 } - JavaScript用一個
{...}表示一個對象,鍵值對以xxx:xxx形式聲明,用,隔開,最后一個鍵值對末尾不需要, - 屬性訪問: a) 通過
.操作符來訪問,但要求屬性名必須是一個有效的變量名 b) 通過xiaoming['xx']來得到變量 c)特殊的形式: 如果含有特殊字符,定義時必須'middle-school':'No.1 Middle Schoole',訪問時,只能通過['xx']來訪問 d) 屬性名盡量使用標準的變量名,這樣可以直接通過object.prop的形式訪問一個屬性 - JavaScript對象的所有屬性都是字符串,不過屬性對應的值可以是任意數(shù)據(jù)類型
- JavaScript規(guī)定:訪問不存在的屬性不報錯,而是返回undefined
- 對象定義:JavaScript的對象是一種無序的集合數(shù)據(jù)類型,它由若干鍵值組成,例如:
- 屬性的各種操作
- JavaScript的對象是動態(tài)類型,你可以自由地給一個對象添加或刪除順序:
xiaoming.age=18;//新增一個屬性 delete xiaoming.age;//刪除一個屬性 - 檢測是否擁有某一屬性,可以用
in操作符
in 判斷一個屬性存在,這個屬性不一定是xiaoming的,可能是它繼承得到的
'name' in xiaoming;//true 'toString' in xiaoming;//true - 要判斷一屬性是否xiaoming自身擁有的,而不是繼承的,可以用hasOwnProperty()方法
- JavaScript的對象是動態(tài)類型,你可以自由地給一個對象添加或刪除順序:
- 對象的定義及屬性訪問
- 條件判斷
if() {...} else{...}-
else是可選的 - 僅包含一條語句時,可以省略
{},但不建議省略 - 多重判斷
if(){...} else if {...} else{..} - 判斷條件不是true或false時,JavaScript把
null,undefined,0,NaN和空字符串視為fasle,其他的一律視為true
- 循環(huán)
- JavaScript的循環(huán)有兩種,一種for循環(huán),通過初始條件硫嘶、結(jié)束條件和遞增條件來循環(huán)執(zhí)行語句塊
- for 循環(huán)最常用的地方是利用索引來遍歷數(shù)組
- for循環(huán)的3個條件都可以省略,當沒有退出循環(huán)的判讀條件,必須使用break退出阻问，否則死循環(huán)
- for...in 可以將一個對象的所有屬性依次循環(huán)出來,需過濾對象繼承的屬性，則需要要用hasOwnProperty()實現(xiàn)
- 由于Array也是對象,每個元素的索引都被視為對象的屬性,因此,for...in循環(huán)可以直接循環(huán)出Array的索引
- for...in對Array的循環(huán)得到的是String而不是Number
- while循環(huán),for循環(huán)在已知循環(huán)的初始和結(jié)束條件時很有用,而while循環(huán)更適合只有一個判斷條件的情況
- do...while 與while循環(huán)的唯一區(qū)別在于,不是在開始判斷條件,而是在結(jié)束時判斷條件
- do...while 循環(huán)至少循環(huán)一次,而for和while可能一次也不執(zhí)行
- 編寫循環(huán)代碼時,要注意初始條件和判斷條件,尤其邊界值,避免陷入死循環(huán)
- Map和Set
- 類似Java中的Map,即一組鍵值對
- ES6引入Map的目的為了解決對象的鍵只能為字符串沦疾，不能為Number等類型的問題
- Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度
var m = new Map(['Micha',94],['Box',12],['Nu',23]); m.get('Micha'); - 初始化Map需要一個二維數(shù)組,或者直接初始化一個空的Map称近。
- Map常見方法:
var m=new Map(); m.set('Adam',3); m.set('Bob',4); m.has('Adam');//true m.get('Adam');//取得Value m.delete('Adam');//刪除 - 一個Key對應一個Value,所有,多次對一個key放入value,后面的值會沖掉前面的
- Set和Map類似,是一組key的集合,不存儲value,沒有重復的key
- 創(chuàng)建Set需要提供一個Array作為輸入,或者直接創(chuàng)建一個空Set
var a1 = new Set(); var a2 = new Set([1,2,3]); - 重復元素在Set中自動過濾
- 添加和刪除方法
a1.add(1); a1.delete(1);
- iterable
為了遍歷Map和Set,ES6引入
iterable類型Array,Map,Set都屬于iterable類型具有iterable類型的集合可以通過新的
for...of循環(huán)遍歷for...in和for...of區(qū)別:for...in是變量對象的屬性名稱,一個Array數(shù)組實際上也是一個對象,它的每個元素的索引被視為一個屬性,當手動添加額外屬性后第队，for...in循環(huán)將帶來一些意外效果
var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x in a) { alert(x); // '0', '1', '2', 'name',卻沒有'length' }
for...of則修復了上述問題,其僅循環(huán)集合本身的元素-
更好的方式是直接使用iterable內(nèi)置對象
forEach方法,它接受一個函數(shù),每次迭代就自動回調(diào)該函數(shù)
Array
var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向當前元素的值 // index: 指向當前索引 // array: 指向Array對象本身 alert(element); });Map
var a =new Map([[1,'A'], [2,'B'], [3,'C']]); a.forEach(function (value, key, map) { // value: 指向當前元素的值 // key: 指向當前key // map: 指向Array對象本身 alert(value); });Set
var a = new Set(['A', 'B', 'C']); a.forEach(function (element,set) { // element: 指向當前元素的值 // set: 指向set對象本身 alert(element); }); JavaScript函數(shù)不要求參數(shù)必須一致,參數(shù)可以沒有,也可以多(多出的參數(shù)會變成
undefined),對應順序必須一致,其余可以忽略
注釋:
1. 本文摘自廖雪峰JavaScript教程 廖雪峰網(wǎng)站地址:http://www.liaoxuefeng.com
2. 此筆記僅做個人日后查找使用,如有錯誤,煩請指正！
3. 歡迎轉(zhuǎn)載哦O(∩_∩)O
