註釋 1. // This is an in-line comment. 2. /* This is a multi-line comment */ 七種data types(數據類型) undefined(未定義), null(空), boolean(布爾型), string(字元串), symb ...
註釋
1. // This is an in-line comment.
2. /*
This is a
multi-line comment */
七種data types(數據類型)
undefined(未定義),
null(空),
boolean(布爾型),
string(字元串),
symbol(符號),
number(數字),
object(對象)。
Variables(變數)
允許電腦以一種動態的形式來存儲和操作數據,通過操作指向數據的指針而不是數據本身來避免了記憶體泄露。
Variable (變數)的名字可以由數字、字母、$ 或者 _組成,但是不能包含空格或者以數字為首。
當 JavaScript 中的變數被聲明的時候,程式內部會給它一個初始值 undefined。
當你對一個值為 undefined 的變數進行運算操作的時候,算出來的結果將會是 NaN,NaN的意思是 "Not a Number"。
當你用一個沒有 定義 的變數來做字元串連接操作的時候,它會如實的輸出"undefined"。
用 駝峰命名法 來書寫一個 Javascript 變數
在 駝峰命名法 中,變數名的第一個單詞的首寫字母小寫,後面的單詞的第一個字母大寫。
舉個慄子:
var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong;
i++;
等效於
i = i + 1;
i--;
等效於
i = i - 1;
用%運算符來取餘
5 % 2 = 1
myVar += 5;
myVar -= 5;
myVar *= 5;
myVar /= 5;
用 反斜杠 (\) 來轉義引號
var sampleStr = "Alan said, \"Peter is learning JavaScript\".";
轉義序列列表
Code |
Output |
\' |
單引號 |
\" |
雙引號 |
\\ |
反斜杠符 |
\n |
換行符 |
\r |
回車符 |
\t |
製表符 |
\b |
退格符 |
\f |
換頁符 |
字元串
通過在字元串變數或字元串後面寫上 .length 來獲得字元串變數 字元串 值的長度。
"Alan Peter".length; // 10
JavaScript中只有字元串類型,沒有字元類型。通過[索引] 來獲得對應的字元
var firstName = "Charles" 中,你可以使用firstName[0] 來獲得第一個位置上的字元。
字元串 的值是 不可變的,這意味著一旦字元串被創建就不能被改變
並不 意味著 myStr 永遠不能被改變,只是字元串字面量 string literal 的各個字元不能被改變。
改變 myStr 中的唯一方法是重新給它賦一個值,就像這樣:
var myStr = "Bob";
myStr = "Job";
var firstName = "Charles" 中,你可以這樣操作firstName[firstName.length - 1] 來得到字元串的最後的一個字元。
firstName[firstName.length - 3] 操作來獲得 var firstName = "Charles" 字元串中的倒數第三個字元。
數組
可以在一個地方存儲多個數據
var sandwich = ["peanut butter", "jelly", "bread"]。
在數組中包含其他數組,就像這樣: [["Bulls", 23], ["White Sox", 45]]。這被稱為一個 多維數組。
像操作字元串一樣通過數組索引[index]來訪問數組中的數據。
數組索引的使用與字元串索引一樣,
不同的是,通過字元串的索引得到的是一個字元,通過數組索引得到的是一個條目。
與字元串類似,數組也是 基於零 的索引,因此數組的第一個元素的索引是 0。
var array = [1,2,3];
array[0]; // 等於 1
var data = array[1]; // 等於 2
與字元串的數據不可變不同,數組的數據是可變的,並且可以自由地改變。
var ourArray = [3,2,1];
ourArray[0] = 1; // ourArray等於 [1,2,1]
把多維數組看作成是一個 數組中的數組。
當使用[]去訪問數組的時候,第一個[index]訪問的是第N個子數組,第二個[index]訪問的是第N個子數組的第N個元素
var arr = [
[1,2,3],
[4,5,6],
[7,8,9],
[[10,11,12], 13, 14]
];
arr[0]; // 等於 [1,2,3]
arr[1][2]; // 等於 6
arr[3][0][1]; // 等於 11
.push() 接受一個或多個參數,並把它“推”入到數組的末尾。
var arr = [1,2,3];
arr.push(4); // 現在arr的值為 [1,2,3,4]
.pop() 函數用來“拋出”一個數組末尾的值。我們可以把這個“拋出”的值賦給一個變數存儲起來。
var oneDown = [1, 4, 6].pop(); //現在 oneDown 的值為 6 ,數組變成了 [1, 4]。
.shift() 它的工作原理就像 .pop(),但它移除的是第一個元素
unshift(移入)一個元素到數組的頭部
用起來就像 .push() 函數一樣, 但不是在數組的末尾添加元素,而是在數組的頭部添加元素。
var myArray = [["John", 23], ["dog", 3]];
myArray.unshift(["Paul", 35]);
函數(function)
我們可以把代碼的重覆部分抽取出來,放到一個函數(functions)中。
function functionName() {
console.log("Hello World");
}
通過函數名稱functionName加上後面的小括弧來調用這個函數(function),就像這樣:
functionName();
帶有兩個參數的函數, param1 和 param2:
function testFun(param1, param2) {
console.log(param1, param2);
}
接著我們調用 testFun:
testFun("Hello", "World");
作用域 涉及到變數的作用範圍。在函數外定義的變數具有 全局 作用域。這意味著,具有全局作用域的變數可以在代碼的任何地方被調用。
函數內聲明的變數,以及該函數的參數都是局部變數,意味著它們只在該函數內可見。
一個程式中有可能具有相同名稱的 局部 變數 和 全局 變數。在這種情況下,局部 變數將會優先於 全局 變數。
下麵為例:
var someVar = "Hat";
function myFun() {
var someVar = "Head";
return someVar;
}
函數 myFun 將會返回 "Head",因為 局部變數 優先順序更高。
用 return 語句把數據從一個函數中傳出來,
代碼執行到return語句時,函數返回一個結果就結束運行了,return後面的語句不會執行。
function plusThree(num) {
return num + 3;
}
var answer = plusThree(5); // 8
隊列(queue)是一個抽象的數據結構,隊列中的條目都是有秩序的。新的條目會被加到 隊列 的末尾,舊的條目會從 隊列 的頭部被移出。
寫一個函數 queue ,用一個數組arr和一個數字item作為參數。數字item添加到數組的結尾,然後移出數組的第一個元素,最後隊列函數應該返回被刪除的元素。
function queue(arr, item) {
arr.push(item);
var del=arr.shift();
return del;
}
布爾(Boolean)。布爾 值要麼是true 要麼是false。
If 語句
function test (myCondition) {
if (myCondition) {
return "It was true";
}
return "It was false";
}
test(true); // returns "It was true"
test(false); // returns "It was
false"
相互比較的操作
相等運算符:==
相等運算符比較兩個值,如果它們是同等,返回 true,如果它們不等,返回false。
1 == 1 // true
1 == 2 // false
1 == '1' // true
"3" == 3 // true
全等(===)是相對於相等操作符(==)的一種操作符。與相等操作符不同的是全等比較嚴格,它會同時比較元素的值和 數據類型。
3 === 3 // true
3 === '3' // false
不相等運算符(!=)與相等運算符是相反的。
不相等運算符中,如果“不為真”並且返回 false 的地方,在相等運算符中會返回true,反之亦然。
與相等運算符類似,不相等運算符在比較的時候也會轉換值的數據類型。
1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false
不全等運算符(!==)與全等運算符是相反的。
這意味著“不全等”並返回 false 的地方,用全等運算會返回true,反之亦然。
全等運算符不會轉換值的數據類型。
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
大於運算符(>)
5 > 3 // true
7 > '3' // true
2 > 3 // false
'1' > 9 // false
大於等於 運算符(>=)
6 >= 6 // true
7 >= '3' // true
2 >= 3 // false
'7' >= 9 // false
小於 運算符(<)比較兩個數字的大小
2 < 5 // true
'3' < 7 // true
5 < 5 // false
3 < 2 // false
'8' < 4 // false
小於等於 運算符(<=)
4 <= 5 // true
'7' <= 7 // true
5 <= 5 // true
3 <= 2 // false
'8' <= 4 // false
邏輯與 運算符(&&)
需要在一次判斷中做多個操作。當且僅當運算符的左邊和右邊都是 true
if (num > 5 && num < 10) {
return "Yes";
}
return "No";
邏輯或 運算符 (||)
如果任何一個操作數是true,邏輯或 運算符 (||) 返回true。反之,返回 false。
if (num > 10 || num < 5) {
return "No";
}
return "Yes";
if/else語句
if (num > 10) {
return "Bigger than 10";
} else {
return "10 or Less";
}
if (num > 15) {
return "Bigger than 15";
} else if (num < 5) {
return "Smaller than 5";
} else {
return "Between 5 and 15";
}
switch語句
function myTest(val) {
var answer = "";
switch(val){
case 1:
answer = "alpha";
break;
case 2:
answer = "beta";
break;
case 3:
answer = "gamma";
break;
default:
answer = "stuff";
}
return answer;
}
myTest(1); //返回“alpha”
如果你有多個輸入值和輸出值一樣,可以試試下麵的switch語句
switch(val) {
case 1:
case 2:
case 3:
result = "1, 2, or 3";
break;
case 4:
result = "4 alone";
}
所有的比較操作符返回的都是一個boolean值,要麼是 true 要麼是false 。
使用 if/else語句來做比較然後返回true或false已經成為大家的共識:
function isEqual(a,b) {
if (a === b) {
return true;
} else {
return false;
}
}
因為=== 總是返回 true 或 false,所以我們可以直接返回比較的結果:
function isEqual(a,b) {
return a === b;
}
對象 object
對象和數組很相似,數組是通過索引來訪問和修改數據,對象是通過屬性來訪問和修改數據的。
對象適合用來存儲結構化數據,就和真實世界的對象一模一樣,比如一隻貓。
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water",
"Dogs"],
"More Space": "Spock"
};
訪問對象屬性,一個是點操作符(.),一個是中括弧操作符([])。
var prop1val = myObj.prop1; // val1
如果你想訪問的屬性的名稱有一個空格,這時你只能使用中括弧操作符([])。
提示:屬性名稱中如果有空格,必須把屬性名稱用單引號或雙引號包裹起來。
myObj['More Space']; // Spock
使用變數來訪問屬性
var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value
像更改屬性一樣給對象添加屬性。
看看我們是如何給ourDog添加 "bark"屬性:
ourDog.bark = "bow-wow"; 或者 ourDog["bark"] = "bow-wow";
刪除對象的屬性
delete ourDog.bark;
用.hasOwnProperty(propname)方法來檢查對象是否有該屬性。如果有返回true,反之返回 false。
var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false
JavaScript Object Notation 簡稱 JSON
它使用JavaScript對象的格式來存儲數據。JSON是靈活的,因為它允許 數據結構 是 字元串,數字,布爾值,字元串,和 對象 的任意組合。
這裡是一個JSON對象的示例 這是一個對象數組:
var ourMusic = [
{
"artist": "Daft
Punk",
"title":
"Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
}
];
通過串聯起來的點操作符或中括弧操作符來訪問JSON對象的嵌套屬性。
JSON對象可以嵌套對象和數組。
下麵是一個嵌套的JSON對象:
var
myStorage = {
"car": {
"inside": {
"glove box": "maps",
"passenger seat": "crumbs"
},
"outside": {
"trunk": "jack"
}
}
};
var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line
下麵是如何訪問嵌套數組:
var
ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1];
// "Fluffy"
ourPets.dogs[0];
// "Spot"
for迴圈
for ([初始化]; [條件判斷]; [計數器])
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
最終 ourArray 的值為 [0,1,2,3,4].
while迴圈
var ourArray = [];
var i = 0;
while(i < 5) {
ourArray.push(i);
i++;
}
Math.random()用來生成一個在0(包括0)到1(不包括1)之間的隨機小數,因此Math.random()可能返回0但絕不會返回1。
Math.floor() 向下取整 獲得它最近的整數。
隨機數是在兩個指定的數之間: Math.floor(Math.random() * (max - min + 1)) + min
Regular expressions 正則表達式
被用來根據某種匹配模式來尋找strings中的某些單詞。
var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
var expression = /and/gi;
var andCount = testString.match(expression).length; //2
/ 是這個正則表達式的頭部 and 是想要匹配的模式 / 是這個正則表達式的尾部
g 代表著 global(全局),意味著返回所有的匹配而不僅僅是第一個。
i 代表著忽略大小寫,意思是當我們尋找匹配的字元串的時候忽略掉字母的大小寫。
特殊選擇器中的一種就是數字選擇器\d,意思是被用來獲取一個字元串的數字。
在JavaScript中, 數字選擇器類似於: /\d/g
在選擇器後面添加一個加號標記(+),例如:/\d+/g,它允許這個正則表達式匹配一個或更多數字。
var testString = "There are 3 cats but 4 dogs.";
var expression = /\d+/g;
var digitCount = testString.match(expression); //["3", "4"]
\s 來選擇一個字元串中的空白。
空白字元有 " " (空格符)、\r (回車符)、\n (換行符)、\t (製表符) 和 \f (換頁符)。
空白正則表達式類似於:/\s+/g
var testString = "How many spaces are there in this sentence?";
var expression = /\s+/g;
var spaceCount = testString.match(expression).length; //7
你可以用正則表達式選擇器的大寫版本 來轉化任何匹配。
舉個例子:\s 匹配任何空白字元,\S 匹配任何非空白字元。
var testString = "How many non-space characters are there in this sentence?";
var expression = /\S/g;
var nonSpaceCount = testString.match(expression).length; //49
面向對象
使用構造函數來創建對象。
構造函數 通常使用大寫字母開頭,以便把自己和其他普通函數區別開。
var Car = function() {
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
在 構造函數 中, this 指向被此 構造函數 創建出來的 對象 。
使用 new 關鍵字 來對它進行調用,如下:
var myCar = new Car();
記住:要使用 new 關鍵字 去調用構造函數。因為只有這樣,Javascript才知道這是要去構造一個新 對象 ,並且把構造函數中的 this 指向這個新對象。
向 構造函數 中添加 參數
var
Car = function(wheels, seats, engines) {
this.wheels
= wheels;
this.seats
= seats;
this.engines
= engines;
};
var myCar = new Car(6, 3, 1);
對象擁有自己的特征,稱為 屬性,對象還有自己的函數,稱為 方法 。
使用了 this 指向當前(將要被創建的)對象中的 公有屬性 。
我們也可以創建 私有屬性 和 私有方法 ,它們兩個在對象外部是不可訪問的。
使用我們熟悉的var 關鍵字去創建變數,來替代我們使用 this 創建 屬性。
var Bike = function() {
var gear; //私有屬性
this.getGear = function(){
return gear;
};
this.setGear = function(change){
gear=change;
};
};
數組 & 字元串 操作
map 方法可以方便的迭代數組
map 方法會迭代數組中的每一個元素,並根據回調函數來處理每一個元素,最後返回一個新數組。註意,這個方法不會改變原始數組。
回調函數只有一個參數,即數組中元素的值 (val 參數) ,但其實,你的回調函數也可以支持多個參數,譬如:元素的索引index、原始數組arr。
//使用 map 方法來為 oldArray 中的每一項增加3,並且在newArray 中保存它們。 oldArray 不應該被改變。
var oldArray = [1,2,3,4,5];
var newArray = oldArray.map(function(val){
return val+=3;
}); //[4,5,6,7,8]
reduce 用來迭代一個數組,並且把它累積到一個值中。
使用 reduce 方法時,你要傳入一個回調函數,這個回調函數的參數是一個 累加器 (比如例子中的 previousVal) 和當前值 (currentVal)。
reduce 方法有一個可選的第二參數,它可以被用來設置累加器的初始值。如果沒有在這定義初始值,那麼初始值將變成數組中的第一項,而 currentVal將從數組的第二項開始。
//使用了 reduce 來讓數組中的所有值相加:
var
array = [4,5,6,7,8];
var
singleVal = 0;
singleVal = array.reduce(function(previousVal, currentVal){
return
previousVal + currentVal;
},0); //30
filter 方法用來迭代一個數組,並且按給出的條件過濾出符合的元素。
filter 方法傳入一個回調函數,這個回調函數會攜帶一個參數,參數為當前迭代的項(我們叫它 val )。
回調函數返回 true 的項會保留在數組中,返回 false 的項會被過濾出數組。
//使用 filter 來創建一個新數組,新數組的值是 oldArray中值小於6的元素。不許改變原數組 oldArray 。
var oldArray = [1,2,3,4,5,6,7,8,9,10];
var newArray = oldArray.filter(function(val){
return val<6;
});
sort 方法,按字母順序或數字順序對數組中的元素進行排序。
sort方法將改變原數組,返回被排序後的數組。
sort 可以把比較函數作為參數傳入。比較函數有返回值,當 a 小於 b,返回一個負數;當 a 大於 b ,返回一個正數;相等時返回0。
如果沒有傳入比較函數,它將把值全部轉成字元串,並按照字母順序進行排序。
//使用 sort 按照從大到小的順序排序 array 。
var array = [1, 12, 21, 2];
array.sort(function(a,b){
return b-a;
}); //[21,12,2,1]
reverse 方法來翻轉數組。
var myArray = [1, 2, 3];
myArray.reverse();
結果myArray 變成了 [3, 2, 1]
concat 方法可以用來把兩個數組的內容合併到一個數組中。
//將 concatMe 拼接到 oldArray 後面,並且賦值給 newArray。
var
oldArray = [1,2,3];
var newArray
= [];
var concatMe = [4,5,6];
newArray = oldArray.concat(concatMe);
split 方法按指定分隔符將字元串分割為數組。
給 split 方法傳遞一個參數,這個參數將會作為一個分隔符。
var
string = "Split me into an array";
var array =
[];
array = string.split(" "); //["Split", "me", "into", "an", "array"]
join 方法把數組轉換成字元串
裡面的每一個元素可以用你指定的連接符來連接起來,這個連接符就是你要傳入的參數。
參數可選。指定要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。
arrayObject.join(separator) separator 可選。指定要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。
var joinMe = ["Split","me","into","an","array"];
var joinedString = '';
joinedString = joinMe.join(" "); //"Split me into an array"