JavaScript學習筆記

註釋

  1. // This is an in-line comment.
  2. /* This is a
    multi-line comment */

七種data types(數據類型)

undefined(未定義),
null(空),
boolean(布爾型),
string(字符串),
number(數字),
object(對象),
symbol(符號)[ES6新增]。

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”

來自 https://www.cnblogs.com/jeacy/p/6475088.html

發佈了14 篇原創文章 · 獲贊 7 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章