七天學會JavaScript~Day1
前言
一年一度的國慶長假終于來了,但是對于一名菜鳥來說,是絕對不能放過這么好的一個學習機會的,所以我打算花七天的時間把JavaScript的大體內容簡單的過一遍，前端這一塊呢,我幾乎是一個小白，過去也只是寫寫Ajax,或者整幾個XX事件,接收接收資料而已，所以這個國慶我是計劃用七天的時間把JavaScript語言從頭到尾,簡單的過一遍，畢竟本人是后端開發的程式員,前端也不需要太過深入,換句話說是暫時不用太過深入，于是,前天下班的時候我就找領導借了本七百多頁【JavaScript高級程式設計】的書,那么這七天的博客就是我七天的筆記，我會盡量把書中的精華總結出來，
一般情況下呢,一個后端程式員在他入職之前肯定是經歷了一個學習階段，而學習階段肯定是學過Servlet,JSP的,不然后面的SSM什么的都沒法學，而學JSP的前提也是要首先會一點HTML,CSS,JavaScript或者Jquery，所以說像這種速成的學法比較適合有一定基礎的人而不是零基礎，零基礎如果要專門學前端的話不建議速成，
第一天的學習內容
JavaScript基本語法
垃圾收集機制
參考資料型別
Array型別
順序堆疊資料結構
順序佇列資料結構
RegExp
JavaScript簡介
JavaScript是誕生于1995年,很多沒接觸過JavaScript的人可能會認為這個語言一定和Java有關系,然而事實并不是這樣，
JavaScript剛誕生的時候,主要目的還是為了處理以前由服務器端語言比如說Perl負責的一些輸入驗證操作，再此之前,必須把表單資料發送到服務器端才能確定用戶是否沒有填寫某個必填域,學過JavaWeb的人一定是很容易理解這個概念的，如果說表單的每次請求都要發給后端才能驗證判斷是否遺漏哪些必填項的話,回應的速度肯定是會慢很多的，所以現在JavaScript也逐漸成為市面上常見瀏覽器的必備功能，
現如今呢,JavaScript已經變成了一個功能非常全面的編程語言,它從一個簡單的輸入驗證器發展到現在確實非常出乎人的意料，你可以說它是一個非常簡單的編程語言,也可以說它是一個非常難學的編程語言，說它簡單,是因為它可以很快學會使用,但是如果要深入掌握,那就需要很多年的時間了，而我呢,是打算七天學完,所以說,我這七天也僅僅只是學會它的使用而已，如果要再深入研究底層的話應該是需要很長時間，
JavaScript基本語法
JavaScript的語法很多都借鑒了C語言或者類C語言，在JavaScript中是區分大小寫的,第一個字符必須是一個字母、下劃線(_)或者美元符號($)符號，注視這一塊也是C語言風格的注釋，可以是//也可以是/**/，
typeof 運算子可以讓用戶知道變數是什么資料型別，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網頁標題</title>
<script type="text/javascript">
var flag = true;
alert(typeof flag);
//回傳結果是 boolean
</script>
</head>
<body>
</body>
</html>
NAN
NAN是英文Not a Number的縮寫，從英文意思就知道是非數值，這個數值主要表示本來要回傳一個數值的運算元未回傳數值的情況，(這樣就不會拋錯誤了)，就舉個例子,當 9 / "hello" 的時候,回傳的則是NAN，因為9是數值但是"hello"不是數值而是字串，isNAN()函式就是用來判斷一個值到底是不是數值
alert(isNaN(NaN)); //true
alert(isNaN(666)); //false
數值轉換
在JavaScript里面有三個函式可以把非數值轉換成數值: Number()、parseInt()、parseFloat()，第一個函式Number可以用于任何資料型別、另外兩個函式就是專門給字串用的,在Java語言里面也見過這樣的方法，
使用Number轉化成數值的時候,字串必須完全是數字,否則回傳NAN，使用parseInt的時候,如果第一個字符是數值那么它會判斷第二個字符是不是數值，直到遇見非數值的時候,后面的就不會再判斷直接回傳前面的內容了，就比如num3只回傳了15一個道理，
var num1 = Number("helloworld"); //NAN
var num2 = parseInt("hello"); //NAN
var num3 = parseInt("15asf96"); //15
var num4 = parseInt("4546465"); //4546465
var num5 = Number("asf45448f4sa86"); //NAN
var num6 = Number("15464"); //15464
var num7 = Number("15asfasf"); //NAN
alert(num1 + " " + num2 + " " + num3 + " " + num4 + " " + num5 + " " + num6 + " " + num7);
字串面量
| \n | 換行 |
| \t | 制表 tab |
| \b | 退格 |
| \r | 回車 |
| \\ | 斜杠 |
| \' | 單引號 |
| \"" | 雙引號 |
| \xnn | 以十六進制代碼 nn 表示一個字符 |
| \unnn | 以十六進制代碼表示一個uniCode字符 |
for-in 陳述句
有點像for each
for(var propName in window){
document.write(propName);
}
with陳述句
with陳述句的作用是把代碼的作用域全都設定到一個特定的物件中，下面兩段代碼的作用是相同的，
var str = "today is great day";
var a = str.substring(2);
var b = str.charAt(3);
alert("a = " + a + " b = " + b);
var str = "today is great day";
with(str){
var a = substring(2);
var b = charAt(3);
alert("a = " + a + " b = " + b);
}
函式
在JavaScript中函式都是統一使用function來宣告，如果需要回傳直接return就好了，
function my(num1,num2){
return num1 + num2;
}
var result = my(9,9);
alert("result = " + result);
沒有多載
在JavaScript中,函式沒有多載，假如程式員定義了兩個名字相同的函式,呼叫的時候則會呼叫下面的那個，
= = 和 = = = 有什么區別?
“= = =”首先計算其運算元的值，然后比較這兩個值，比較程序沒有任何型別轉換，相等運算子“= =”如果兩個運算元不是同一型別，那么相等運算子會嘗試一些型別轉換，然后進行比較
var a = 1;
var b = '1';
alert(a == b); //true
alert(a === b); //false
垃圾收集
JavaScript具有自動垃圾收集機制,也就是說執行環境會負責管理代碼執行程序中使用的記憶體，而在C和C++之類的語言中,開發人員的基本任務就是手工跟蹤記憶體的使用情況,這樣很容易造成許多問題，這個垃圾收集器的作業原理也很簡單，其實就是找到那些不用的變數,然后釋放掉它的記憶體，不需要像C++一樣還要去delete，
當我們在一個函式中定義了一個區域變數,那么這個區域變數會在該函式執行的程序中存在，而這個程序中會為該區域變數在堆疊(或者堆)的記憶體上分配相應的空間以便存盤他們的值，直到函式要執行結束了,這個時候區域變數就沒有存在的必要,然后就會釋放他們供記憶體使用，
標記清除
JavaScript中最常見的垃圾清理方式是標記清除，當變數進入環境的時候會將這個變數標記為進入環境,當變數要離開的時候會被標記成離開環境，垃圾收集器會在運行的時候給存盤在記憶體中的所有變數都加上標記,然后它會去掉環境中的變數以及被環境中的變數參考的變數標記，而在此之后再被加上標記的變數就會被視為準備洗掉的變數,原因是環境中的變數已經無法訪問這些變數了，最后垃圾收集器完成記憶體清除的作業，銷毀那些帶標記的值并識訓他們所占用的記憶體空間，
管理記憶體
雖然JavaScript已經具有了垃圾收集機制,但是在記憶體管理和垃圾收集面臨的問題還是有點與眾不同，最常見的問題就是分配給Web瀏覽器的可用記憶體數量通常要比分給桌面的要少，這樣做的目的主要是為了防止運行JavaScript的網頁耗盡全部系統記憶體而導致系統崩潰，記憶體限制問題不僅會影響給變數分配記憶體,同時還會影響呼叫堆疊以及在一個執行緒中能夠同時執行的陳述句數量，所以說我們要確保占用最少的記憶體給瀏覽器最好的性能，
如果說一個資料已經不再有用了,則可以把他置為Null來釋放這個參考，通常稱之為解除參考，
function fun(name){
var obj = new Object();
obj.name = name;
return obj;
}
var local = fun("hello world");
alert(local);
//手工解除參考
local = null;
不過,這種做法并不意味著自動回收該值所占用的記憶體，解除參考的真正作用是讓值脫離執行環境,方便垃圾收集器下次執行的時候將其回收，
參考資料型別
Object型別
JavaScript中物件其實就是一組資料和功能的集合，物件可以通過執行new運算子跟要創建的物件型別的名稱來創建，而創建Object型別的實體并為其添加屬性或者方法就可以創建自定義物件，下面三段代碼作為操作的案例，
使用建構式的方法創建
function fun(){
var obj = new Object();
obj.name = "alvin";
obj.age = 12;
obj.score = 98;
alert("姓名: " + obj.name + " 年齡: " + obj.age + " 成績: " + obj.score);
}
使用物件字面量的方法創建
var person = {
name : "bob",
age : 18,
score : 98
};
alert("姓名: " + person.name + " 年齡: " + person.age + " 成績: " + person.score);
還可以直接 = {},此類操作和 new Object() 是相同的
var person = {};
person.name = "alvin";
person.age = 18;
person.score = 78;
alert("姓名: " + person.name + " 年齡: " + person.age + " 成績: " + person.score);
Array型別
作為一名后端程式員來說,一看名字就知道這是陣列,但是JavaScript的陣列和Java或者C語言的陣列不太一樣，JavaScript的陣列使用起來更加有點像是Python語言里面的串列，在C語言里面,陣列的大小和型別都是固定的，也就是說,一旦定義了陣列的大小和型別就不再可以改變，而JavaScript的陣列大小可以動態調整,并且存盤的型別可以是任何型別，下面一段代碼舉個例子，
var arr = new Array();
arr[0] = "hello";
arr[1] = 123;
arr[2] = 9.9;
arr[3] = true;
alert(arr);
陣列的創建方法還有一種,就是前面說過的字面量表示法
var arr = [1,2,3,4,5,6,7];
alert(arr);
檢測陣列
在JavaScript里,如果要確定一個物件是不是陣列就可以使用 instanceof 運算子得到滿意的結果，
var arr = [1,2,3,4,5];
if(arr instanceof Array){
alert("是陣列");
}else{
alert("不是陣列");
}
但是這么做的話又會有一個問題,那就是它假定只有一個全域執行環境，如果網頁中包含多個框架,那實際上就存在兩個完全不同的全域執行環境,從而存在兩個以上不同版本的Array建構式，如果說我要從一個框架向另一個框架傳入陣列，那么傳入的陣列和第二個框架中原生創建的陣列分別具有各自不同的建構式，于是乎后面就出現了Array.isArray()方法，
var arr = [1,2,3,4,5];
if(Array.isArray(arr)){
alert("是陣列");
}else{
alert("不是陣列");
}
轉換方法
在JavaScript中所有物件都具有toLocaleString()、toString()和valueOf()方法，其中呢,valueOf 回傳的還是陣列本身,而呼叫toString就會回傳陣列的字串，而每個元素之間都會有一個逗號,學過Java語言的話一定深有體會，
toLocaleString() 和 toString咋一看顯示的內容好像差不多啊，但實際上還是有一定區別的，toLocaleString()是為了取得每一項的值,呼叫的是每一項的toLocaleString()方法,而不是toString()方法，
堆疊和佇列
堆疊和佇列都是屬于資料結構一類,本人過去曾寫過這類的博客，
堆疊和佇列的基本概念
順序堆疊和鏈堆疊
順序堆疊和鏈堆疊的應用
順序隊和鏈隊
使用自定義的堆疊來優化二叉樹的遍歷
在JavaScript中也提供了一種讓陣列的行為類似于其他資料結構的方法，就比如說,陣列可以表現得像堆疊，堆疊是一種可以限制插入和洗掉的資料結構,其本質更像是一種受限制的線性表，堆疊既可以用陣串列示也可以用鏈表表示,而在這里自然是陣串列示的順序堆疊，
push()方法可以接收任意數量的引數,把它們逐個添加到陣列末尾,并且回傳修改陣列的長度，而pop()方法則是從陣列末尾移除最后一項,減少length值，然后回傳移除的項，
//創建一個陣列
var arr = new Array();
//推入兩項
var count = arr.push("alvin","bob");
alert(count); //2
//再推入一個
count = arr.push("finally");
alert(count);
//取得最后一項
var item = arr.pop();
alert(item); //這里回傳的是 finally， 也就是最后一項
//結果
alert(arr);
接著我們說說佇列，佇列和堆疊一樣都是受限制的線性表，然后佇列和堆疊是相反的資料結構,可以參考博客堆疊和佇列的基本概念，堆疊是先進后出,而佇列則是先進先出，由于push()是向陣列末尾添加項的方法,所以模擬佇列就需要一個從陣列前端取的項的方法，而實作這個操作的方法則是shift()，它能夠移除陣列的第一項并且回傳該項,然后陣列長度-1，shift和push結合可以讓陣列用起來像是佇列，
//創建一個陣列
var arr = new Array();
//推入兩項
var count = arr.push("alvin","bob");
alert(count); //2
//再推入一個
count = arr.push("finally");
alert(count);
//取得最后一項
var item = arr.shift();
alert(item); //這里回傳的是 finally， 也就是最后一項
//結果
alert(arr);
我們發現代碼其實沒什么改變,只是把pop換成了shift而已~
排序方法
在陣列中提供了兩個用來排序的方法，它們分別是sort和reverse，sort是順序,reverse是逆序,也就是翻轉，
迭代方法
在JavaScript中為陣列定義了五個迭代方法，每個方法接收兩個引數，要在每一項上運行的函式作為該函式作用域物件，影響this本身，傳入這些方法中的函式會接收三個引數:陣列項的值、該項在陣列中的位置和陣列物件本身，根據使用的方法不同,這個函式執行后的回傳值可能會也可能不會影響方法的回傳值，這里分別介紹一下
| every() | 對陣列中的每一項給定運行函式,如果該函式對每一項都回傳true,那么就回傳true |
| filter() | 對陣列中的每一項給定運行函式,回傳該函式會回傳true的項組成陣列， |
| forEach() | 對陣列中的每一項給定運行函式,這個方法沒有回傳值/ |
| map() | 對陣列中的每一項給定運行函式,回傳每次呼叫的結果組成的陣列 |
| some() | 對陣列中的每一項給定運行函式,如果該函式對任一項回傳true那么就回傳true， |
語法示例
var numbers = [1,2,3,4,5,6,7];
var result = numbers.some(function(item,index,array){
return (item > 2);
});
alert(result);
歸并方法
在JavaScript中還為陣列提供了兩個歸并陣列的方法，他們都會迭代陣列的所有項然后構建一個最侄訓傳的值，reduce()是從第一個開始，而reduceRight()則是從最后一個開始，
//求陣列中所有值之和
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev,cur,index,array){
return prev + cur;
});
alert(sum);
Date型別
JavaScript中的Data型別是在早期Java語言中util包中的Date基礎上構建的，方法比較多,使用的時候可以看手冊或者API，
//獲得當前的時間
var now = new Date();
alert(now);
//設定時間
now = new Date("2018-9-12");
alert(now);
| toDateString() | 以特定的格式顯示年,月,日,周 |
| toTimeString() | 以特定的格式顯示時,分,秒,地區 |
| toLocaleDateString() | 以特定地區的格式顯示年,月,日,周 |
| toLocaleTimeString() | 以特定地區的格式顯示年,月,日,周 |
| toUTCString() | 以特定的格式完整的UTC日期 |
RegExp
JavaScript通過RegEXp型別來支持正則運算式
var patt=/pattern/modifiers;
pattern（模式） 描述了運算式的模式
modifiers(修飾符) 用于指定全域匹配、區分大小寫的匹配和多行匹配
當使用建構式創造正則物件時，需要常規的字符轉義規則（在前面加反斜杠 \），比如，以下是等價的：
var re = new RegExp("\\w+");
var re = /\w+/;
每個正則運算式都可帶有一或多個標志(flags),用來表明正則運算式的行為，正則運算式的匹配模式支持三種標志，
g : 表示全域模式，這個模式將被應用于所有字串,而不是在發現第一個匹配項的時候就立即停止，
i : 表示不區分大小寫模式，也就是確定匹配項時忽略模式和字串的大小寫，
m :表示多行模式,就是在到達一行文本末尾時還會繼續查找下一行中是否與模式匹配的項，
所以說一個正則運算式就是一個模式和三個標志的組合體，不同的組合產生不同的效果，
//匹配字串中所有good 實體
var pattern = /good/g;
//匹配第一個bat或cat 不區分大小寫
var pattern2 = /[bc]at/i;
//匹配所有以at結尾的三個字符的組合,不區分大小寫
var pattern3 = / .at/gi;
| 字面量模式 | 等價的字串 |
| /\[bc\]at/ | "\ \[bc\\]at" |
| /\.at/ | "\\.at" |
| /name\/age/ | "name\\/age" |
| /\d. \d{1,2}/ | "\\d. \\d{1,2}" |
| /\w\\hello\\123/ | "\\w\\\\hello\\\\123" |
使用正則運算式字面量和使用RegExp建構式創建的正則運算式不太一樣，在JavaScript中正則運算式字面量始侄訓共享同一個RegExp實體,而使用建構式創建的每一個RegExp實體都是一個新的實體，
RegExp實體屬性
| global | 布林值,表示是否設定了g的標志 |
| ignoreCase | 布林值,表示是否設定了i的標志 |
| lastIndex | 整數,表示開始搜索下一個匹配項的字符位置,從0算起， |
| multiline | 布林值,表示是否設定了m的標志 |
| source | 正則運算式的字串表示,按照字面量形式而非傳入建構式中的字串模式回傳， |
通過這些屬性可以獲知一個正則運算式的各方面資訊
var pattern = /\[bc\]at/i;
//false
alert(pattern.global);
//true
alert(pattern.ignoreCase);
//false
alert(pattern.multiline);
//0
alert(pattern.lastIndex);
//\[bc\]at
alert(pattern.source);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/154081.html
標籤：其他