廖雪峰的JS教程學習
在Web世界里,只有JavaScript能跨平臺、跨瀏覽器驅動網頁,與用戶交互,新興的Node.js把JavaScript引入到了服務器端,JavaScript已經變成了全能型選手。前端后端都可以。
在上個世紀的1995年,當時的網景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯網公司。由于網景公司希望能在靜態HTML頁面上添加一些動態效果,于是叫Brendan Eich這哥們在兩周之內設計出了JavaScript語言。
因為網景開發了JavaScript,一年后微軟又模仿JavaScript開發了JScript,為了讓JavaScript成為全球標準,幾個公司聯合ECMA(European Computer Manufacturers Association)組織定制了JavaScript語言的標準,被稱為ECMAScript標準。所以簡單說來就是,ECMAScript是一種語言標準,而JavaScript是網景公司對ECMAScript標準的一種實現。那為什么不直接把JavaScript定為標準呢?因為JavaScript是網景的注冊商標。不過大多數時候,我們還是用JavaScript這個詞。如果你遇到ECMAScript這個詞,簡單把它替換為JavaScript就行了。
由于JavaScript的標準——ECMAScript在不斷發展,最新版ECMAScript 6標準(簡稱ES6)已經在2015年6月正式發布了,所以,講到JavaScript的版本,實際上就是說它實現了ECMAScript標準的哪個版本。由于瀏覽器在發布時就確定了JavaScript的版本,加上很多用戶還在使用IE6這種古老的瀏覽器,這就導致你在寫JavaScript的時候,要照顧一下老用戶,不能一上來就用最新的ES6標準寫,否則,老用戶的瀏覽器是無法運行新版本的JavaScript代碼的。
0.調試代碼
瀏覽器:
# Console:
var a = 6*6;
console.log(a);
# Sources:斷點、單步執行等高級技巧
1.數據類型
- 原始類型primitive type:Number String Boolean
- 對象類型object type
數字、字符串、布爾、null/undefines屬于不可變類型immutable,
對象和數組屬于可變類型。
1.1原始類型
## Number
NaN; // NaN表示Not a Number,當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大,當數值超過了JavaScript的Number所能表示的最大值時,就表示為Infinity
2 / 0; // Infinity
0 / 0; // NaN
## String
以單引號'或雙引號"括起來的任意文本
## Boolean
JavaScript在設計時,有兩種比較運算符:
第一種是==比較,它會自動轉換數據類型再比較,很多時候,會得到非常詭異的結果;
第二種是===比較,它不會自動轉換數據類型,如果數據類型不一致,返回false,如果一致,再比較。
1 == '1'
true
1 === '1'
false
## 兩個特殊的原始值:null和undefined
null表示一個“空”的值,它和0以及空字符串''不同,0是一個數值,''表示長度為0的字符串,而null表示“空”。
在其他語言中,也有類似JavaScript的null的表示,例如Java也用null,Swift用nil,Python用None表示。但是,在JavaScript中,還有一個和null類似的undefined,它表示“未定義”。
JavaScript的設計者希望用null表示一個空的值,而undefined表示值未定義。事實證明,這并沒有什么卵用,區分兩者的意義不大。大多數情況下,我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。
判斷null請使用myVar === null;
1.2 對象類型
1.2.0 對象
普通的JavaScript的對象是一組由鍵-值組成的無序集合。
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
console.log(person)
Object {name: "Bob", age: 20, tags: Array(3), city: "Beijing", hasCar: true,zipcode:null}
JavaScript對象的鍵都是字符串類型,值可以是任意數據類型。
上述person對象一共定義了6個鍵值對,其中每個鍵又稱為對象的屬性,例如,person的name屬性為'Bob'。要獲取一個對象的屬性,我們用對象變量.屬性名的方式:
person.name; // 'Bob'
person.zipcode; // null
訪問屬性是通過.操作符完成的,但這要求屬性名必須是一個有效的變量名。如果屬性名包含特殊字符,就必須用''括起來:
var xiaohong = {
name: '小紅',
'middle-school': 'No.1 Middle School'
};
xiaohong的屬性名middle-school不是一個有效的變量,就需要用''括起來。訪問這個屬性也無法使用.操作符,必須用['xxx']來訪問:
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'
也可以用xiaohong['name']來訪問xiaohong的name屬性,不過xiaohong.name的寫法更簡潔。我們在編寫JavaScript代碼的時候,屬性名盡量使用標準的變量名,這樣就可以直接通過object.prop的形式訪問一個屬性了。
注:變量的概念
var a = 123;
var申明變量,變量聲明時不指定變量類型,賦值時給變量的值決定變量類型,這種變量本身類型不固定的語言稱之為動態語言,與之對應的是靜態語言(比如Java,變量聲明同時必須指定類型)。
注:strict模式的概念
如果一個變量沒有通過var申明就被使用,那么該變量就自動被申明為全局變量:
i = 10;
判斷某個全局變量是否存在用typeof window.myVar === 'undefined';
函數內部判斷某個變量是否存在用typeof myVar === 'undefined'。
使用var申明的變量則不是全局變量,它的范圍被限制在該變量被申明的函數體內(函數的概念將稍后講解),同名變量在不同的函數體內互不沖突。
為了修補JavaScript這一嚴重設計缺陷,ECMA在后續規范中推出了strict模式,在strict模式下運行的JavaScript代碼,強制通過var申明變量,未使用var申明變量就使用的,將導致運行錯誤。
啟用strict模式的方法是在JavaScript代碼的第一行寫上:
'use strict';
1.2.1 數組Array
特殊的對象類型,因為是有編號值的有序集合。
[1, 2, 3.14, 'Hello', null, true];
[1, 2, 3.14, "Hello", null, true]
new Array(1, 2, 3);
[1, 2, 3]
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"]
多維數組
var arr = [[1, 2, 3], [400, 500, 600], '-'];
var x = arr[1][1]; //取到500
判斷Array要使用Array.isArray(arr);