javascript
JavaScript简明教程之快速入门
JavaScript代碼可以直接嵌入到網頁的任何地方，不過我們通常把它們放到head中
<html><head><script>alert('Hello World');</script></head><body>...</body> </html>由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行
第二種方法就是把JavaScript代碼放到一個單獨的.js文件里，然后在HTML中通過
<script src="..."></script>來引入這個文件
<html><head><script src="/static/js/abc.js"></script></head><body>...</body> </html>把JavaScript代碼放入一個單獨的.js文件中更利于維護代碼，并且多個頁面可以各自引用同一份.js文件
可以在同一頁面中引入多個.js文件，還可以在頁面中多次編寫<script>js代碼...</script>,瀏覽器按順序依次執行
有時你也會看到<script>標簽里還設置了一個type屬性
<script type="text/javascript"></script>
其實這是沒有必要的，因為默認的type就是Javascript，所以不必顯式的指定它
基本語法
JavaScript中的每個語句都以;結束，語句塊用{...}
完整的賦值語句：
var x = 1;下面的一行代碼是一個字符串，但也可以視為一個完整的語句
'Hello World!';語法
JavaScript語法與Java類似，每個語句以;結束，語句塊用{...}。
下面的語句是一個完整的賦值語句：
var x = 1;下面的代碼表示一個字符串，但也可以被視為一個完整的語句
'Hello, World!';注釋
以//開頭直到行末的字符被視為行注釋
// 這事一行注釋 alert('hello'); //這也是注釋另一種注釋是用/*...*/，它可以把多行字符包括起來
/* 從這里開始是塊注釋 仍然是注釋 仍然是注釋 注釋結束*/大小寫
JavaScript嚴格區分大小寫
數據類型
Number
JavaScript不區分整數和浮點數，統一使用Number表示
123; // 整數123 0.456; // 浮點數0.456 1.2345e3; // 科學計數法表示1.2345x1000，等同于1234.5 -99; // 負數 NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示 Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為InfinityNumber可以直接做四則運算，規則和數學一致
1 + 2; // 3 (1 + 2) * 5 / 2; // 7.5 2 / 0; // Infinity 0 / 0; // NaN 10 % 3; // 1，求余運算 10.5 % 3; // 1.5，求余運算字符串
字符串是以單引號'或雙引號"括起來的任意文本，比如'abc'，"xyz"
等等
布爾值
布爾值和布爾代數的表示完全一致，一個布爾值只有true、false
兩種值，要么是true，要么是false
&&運算是與運算，只有所有都為true，&&運算結果才是true：
true && true; // 這個&&語句計算結果為true true && false; // 這個&&語句計算結果為false false && true && false; // 這個&&語句計算結果為false||運算是或運算，只要其中有一個為true，||運算結果就是true：
false || false; // 這個||語句計算結果為false true || false; // 這個||語句計算結果為true false || true || false; // 這個||語句計算結果為true!運算是非運算，它是一個單目運算符，把true變成false,false變成true：
! true; // 結果為false ! false; // 結果為true ! (2 > 5); // 結果為true比較運算符
當我們對Number做比較時，可以通過比較運算符得到一個布爾值
實際上，JavaScript允許對任意數據類型做比較：
要特別注意相等運算符==，JavaScript在設計時，有兩種比較運算符：
第一種是==比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果；
第二種是===比較，它不會自動轉換數據類型，如果數據類型不一致，返回false，如果一致，再比較。
由于JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。
另一個例外是NaN,這個特殊的Number與所有其他值都不相等，包括它自己：
NaN === NaN; // false唯一能判斷NaN的方法是通過isNaN()函數：
isNaN(NaN); // truenull和undefined
null表示一個“空”的值，它和0以及空字符串''不同，0是一個數值，''表示長度為0的字符串，而null表示“空”。
在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。
數組
數組是一組按順序排列的集合，集合的每個值稱為元素。JavaScript的數組可以包括任意數據類型
[1, 2, 3.14, 'Hello', null, true];另一種創建數組的方法是通過Array()函數實現：
new Array(1, 2, 3); // 創建了數組[1, 2, 3]數組的元素可以通過索引來訪問。請注意，索引的起始值為0：
var arr = [1, 2, 3.14, 'Hello', null, true]; arr[0]; // 返回索引為0的元素，即1 arr[5]; // 返回索引為5的元素，即true arr[6]; // 索引超出了范圍，返回undefined對象
JavaScript的對象是一組由鍵-值組成的無序集合
var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', hasCar: true, zipcode: null };JavaScript對象的鍵都是字符串類型，值可以是任意數據類型
要獲取一個對象的屬性，我們用對象變量.屬性名的方式:
person.name; // 'Bob' person.zipcode; // null變量
變量在JavaScript中就是用一個變量名表示，變量名是大小寫英文、數字、$和_的組合，且不能用數字開頭。變量名也不能JavaScript的關鍵字，如if、while等。申明一個變量用var語句
var a; // 申明了變量a，此時a的值為undefined var $b = 1; // 申明了變量$b，同時給$b賦值，此時$b的值為1 var s_007 = '007'; // s_007是一個字符串 var Answer = true; // Answer是一個布爾值true var t = null; // t的值是null在JavaScript中，使用等號=對變量進行賦值?？梢园讶我鈹祿愋唾x值給變量，同一個變量可以反復賦值，而且可以是不同類型的變量，但是要注意只能用var申明一次
var a = 123; // a的值是整數123 a = 'ABC'; // a變為字符串strict模式
如果一個變量沒有通過var申明就被使用，那么該變量就自動被申明為全局變量
i = 10; // i現在是全局變量為了修補JavaScript這一嚴重設計缺陷，ECMA在后續規范中推出了strict模式，在strict模式下運行的JavaScript代碼，強制通過var申明變量，未使用var申明變量就使用的，將導致運行錯誤
啟用strict模式的方法是在JavaScript代碼的第一行寫上
;下面的代碼測試你的瀏覽器是否支持strict模式
; // 如果瀏覽器支持strict模式， // 下面的代碼將報ReferenceError錯誤:abc = 'Hello, world'; alert(abc);字符串
JavaScript的字符串就是用''或""括起來的字符表示。
如果字符串內部既包含'又包含",可以用轉義字符``來標識
多行字符串用\n來寫，但在ES6中增加了``的方式來定義多行字符串
`這是一個多行字符串 `常見的字符串操作如下：
- 獲取字符串長度
- 獲取字符串指定位置的字符，使用下標方式訪問，索引從0開始
需要特別注意的是，字符串是不可變的，如果對字符串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果
- toUpperCase()把一個字符串全部變為大寫
- toLowerCase()把一個字符串全部變為小寫
- indexOf()會搜索指定字符串出現的位置
- substring()返回指定索引區間的子串
數組
JavaScript的Array可以包含任意數據類型，并通過索引來訪問每個元素
要得到Array的長度，使用length屬性
var arr = [1, 2, 3.14, 'Hello', null, true]; arr.length; // 6如果直接給Array的length賦一個新值會導致Array大小發生變化
var arr = [1, 2, 3]; arr.length; // 3 arr.length = 6; arr; // arr變為[1, 2, 3, undefined, undefined, undefined] arr.length = 2; arr; // arr變為[1, 2]請注意，如果通過索引賦值時，索引超過了范圍，同樣會引起Array大小的變化：
var arr = [1, 2, 3]; arr[5] = 'x'; arr; // arr變為[1, 2, 3, undefined, undefined, 'x']indexOf
Array也可以通過indexOf()來搜索一個指定的元素的位置：
var arr = [10, 20, '30', 'xyz']; arr.indexOf(10); // 元素10的索引為0 arr.indexOf(20); // 元素20的索引為1 arr.indexOf(30); // 元素30沒有找到，返回-1 arr.indexOf('30'); // 元素'30'的索引為2slice
slice()就是對應String的substring()，它截取Array的部分元素，然后返回一個新的Array：
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C'] arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地復制一個Array：
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var aCopy = arr.slice(); aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G'] aCopy === arr; // falsepush和pop
push()向Array的末尾添加若干元素，pop()則把Array的最后一個元素刪除掉：
var arr = [1, 2]; arr.push('A', 'B'); // 返回Array新的長度: 4 arr; // [1, 2, 'A', 'B'] arr.pop(); // pop()返回'B' arr; // [1, 2, 'A'] arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次 arr; // [] arr.pop(); // 空數組繼續pop不會報錯，而是返回undefined arr; // []unshift和shift
如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：
var arr = [1, 2]; arr.unshift('A', 'B'); // 返回Array新的長度: 4 arr; // ['A', 'B', 1, 2] arr.shift(); // 'A' arr; // ['B', 1, 2] arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次 arr; // [] arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined arr; // []sort
sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序：
var arr = ['B', 'C', 'A']; arr.sort(); arr; // ['A', 'B', 'C']reverse
reverse()把整個Array的元素給掉個個，也就是反轉：
var arr = ['one', 'two', 'three']; arr.reverse(); arr; // ['three', 'two', 'one']splice
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
concat()方法把當前的Array和另一個Array連接起來，并返回一個新的Array：
var arr = ['A', 'B', 'C']; var added = arr.concat([1, 2, 3]); added; // ['A', 'B', 'C', 1, 2, 3] arr; // ['A', 'B', 'C']join
join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串：
var arr = ['A', 'B', 'C', 1, 2, 3]; arr.join('-'); // 'A-B-C-1-2-3'多維數組
如果數組的某個元素又是一個Array，則可以形成多維數組，例如：
var arr = [[1, 2, 3], [400, 500, 600], '-'];對象
JavaScript的對象是一種無序的集合數據類型，它由若干鍵值對組成
var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70, weight: 65, score: null };JavaScript用一個{...}表示一個對象，鍵值對以xxx: xxx形式申明，用,隔開
JavaScript規定，訪問不存在的屬性不報錯，而是返回undefined：
var xiaoming = {name: '小明' }; xiaoming.age; // undefined由于JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：
var xiaoming = {name: '小明' }; xiaoming.age; // undefined xiaoming.age = 18; // 新增一個age屬性 xiaoming.age; // 18 delete xiaoming.age; // 刪除age屬性 xiaoming.age; // undefined delete xiaoming['name']; // 刪除name屬性 xiaoming.name; // undefined delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：
var xiaoming = {name: '小明',birth: 1990,school: 'No.1 Middle School',height: 1.70,weight: 65,score: null }; 'name' in xiaoming; // true 'grade' in xiaoming; // false但in操作符并不準確，因為訪問的屬性可能是當前對象繼承而來的
要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：
var xiaoming = {name: '小明' }; xiaoming.hasOwnProperty('name'); // true xiaoming.hasOwnProperty('toString'); // false條件判斷
JavaScript使用if () { ... } else { ... }來進行條件判斷
var age = 20; if (age >= 18) { // 如果age >= 18為true，則執行if語句塊alert('adult'); } else { // 否則執行else語句塊alert('teenager'); }請永遠都是寫上{ }
多行條件判斷
如果還要更細致地判斷條件，可以使用多個if...else...的組合：
var age = 3; if (age >= 18) {alert('adult'); } else if (age >= 6) {alert('teenager'); } else {alert('kid'); }循環
JavaScript的循環有兩種，一種是for循環，通過初始條件、結束條件和遞增條件來循環執行語句塊：
var x = 0; var i; for (i=1; i<=10000; i++) {x = x + i; } x; // 50005000for循環最常用的地方是利用索引來遍歷數組：
var arr = ['Apple', 'Google', 'Microsoft']; var i, x; for (i=0; i<arr.length; i++) {x = arr[i];alert(x); }for...in
for循環的一個變體是for ... in循環，它可以把一個對象的所有屬性依次循環出來：
var o = {name: 'Jack',age: 20,city: 'Beijing' }; for (var key in o) {alert(key); // 'name', 'age', 'city' }要過濾掉對象繼承的屬性，用hasOwnProperty()來實現：
var o = {name: 'Jack',age: 20,city: 'Beijing' }; for (var key in o) {if (o.hasOwnProperty(key)) {alert(key); // 'name', 'age', 'city'} }由于Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，for ... in循環可以直接循環出Array的索引：
var a = ['A', 'B', 'C']; for (var i in a) {alert(i); // '0', '1', '2'alert(a[i]); // 'A', 'B', 'C' }while
while循環只有一個判斷條件，條件滿足，就不斷循環，條件不滿足時則退出循環
var x = 0; var n = 99; while (n > 0) {x = x + n;n = n - 2; } x; // 2500do ... while
do { ... } while()循環，它和while循環的唯一區別在于，不是在每次循環開始的時候判斷條件，而是在每次循環完成的時候判斷條件：
var n = 0; do {n = n + 1; } while (n < 100); n; // 100Map和Set
JavaScript的默認對象表示方式{}可以視為其他語言中的Map或Dictionary的數據結構，即一組鍵值對
但JavaScript的對象中的鍵必須是字符串，實際上它可以是Number或其他數據類型
為了解決這個問題，ES6引入了新的數據類型Map，下面的代碼可以測試瀏覽器是否支持
; var m = new Map(); var s = new Set(); alert('你的瀏覽器支持Map和Set');Map
Map是一組鍵值對的結構，具有極快額查找速度
在JavaScript中實現一個Map結構如下：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); //95初始化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只能對應一個value，所以，多次給一個key賦值，會把前面的覆蓋掉
var m = new Map(); m.set('Adam', 67); m.set('Adam', 88); m.get('Adam'); //88Set
Set和Map類似，也是一組key的集合，但不存儲value，它里面沒有重復的key
要創建一個Set，需要提供一個Array并輸入，或者可以直接定義一個空的Set
var s1 = new Set([1, 2, 3]); var s2 = new Set();重復的key會在Set中被自動過濾掉，使用add和delete方法來給Set添加和刪除元素
var s = new Set(); s.add(4); var s = new Set([1, 2, 3]); s; //Set {1, 2, 3} s.delete(3); s; //Set {1, 2}Iterable
ES6引入了新的iterable類型，Array,Map,Set都屬于iterable類型
具有iterable類型的集合可以通過新的for...of循環來遍歷，它是ES6引入的新語法
通過下面的代碼來測試你的瀏覽器是否支持
; var a = [1, 2, 3]; for(let x of a) {}alert('你的瀏覽器支持for...of語法');用for...of循環遍歷集合
var a = ['A', 'B', 'C']; var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); var s = new Set(['A', 'B', 'C']); for(let x of a) { //遍歷Arrayconsole.log(x); }for(let x of s) { //遍歷Setconsole.log(x); }for(let x of m) { //遍歷Mapconsole.log(x[0] + '=' + x[1]); }for...of和for...in有什么區別呢？
for...in循環由于歷史問題，實際上它遍歷的是對象的屬性名稱，那么Array也是一種對象，Array的每個元素的下標被視為屬性，當我們手動給Array添加了額外的元素后，for...in循環會出現額外的情況
var a = ['A', 'B', 'C']; a.name = 'Hello'; for(var x in a) {console.log(x); //0, 1, 2, name }而for...of循環解決了這個問題，它只遍歷集合本身的元素
var a = ['A', 'B', 'C']; a.name = 'Hello'; for(var x of a) {console.log(x); //'A','B','C' }在iterable中，還有一個內置方法forEach，它接收一個函數，每次迭代就自動回調該函數
var a = ['A', 'B', 'C']; a.forEach(function(element, index, array) {//element：指向當前元素的值//index: 指向當前索引//arrya: 指向Array對象本身console.log(element); });forEach方法是ES5.1標準引入的。
Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身
var s = new Set(['A', 'B', 'C']); s.forEach(function(element, sameElement, set) {console.log(element); });Map的回調參數依次為value、key和map本身
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function(value, key, map) {console.log(value); });forEach的回調函數中的參數不必全部寫完，如只需要Array的元素值
var a = ['A', 'B', 'C']; a.forEach(function(element) {console.log(element); }); from: http://www.jianshu.com/p/80b612534691總結
以上是生活随笔為你收集整理的JavaScript简明教程之快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IdeaVim插件使用技巧
- 下一篇： gradle idea java ssm