技術標籤：前端學習JavaScript

我的Javascript基礎學習

互動程式設計的三個基本要素：

1.使用者輸入
2.程式內部處理
3.輸出結果

基礎知識點：

1.資料型別: 字串型。數字型，bool型，undefined型，null型,infinity(無窮大),-infinity(負無窮大),NaN(Not a number)
2. 自增： n++ 或者 ++n
3. 自減： n-- 或者 --n
4. 一個等號為賦值，兩個等號為判斷，三個等號為全等
5. && 邏輯與 ，|| 邏輯或 ，! 邏輯非
6. if 語句格式 ：if(條件表示式 ) { xxx }

7. 三元表示式： 由三元運算子組成的式子成為三元表示式，語法結構：條件表示式? 表示式1:表示式2 ， 執行思路，如果條件表示式結果為真，則返回 表示式1 的值，否則返回 表示式2 的值
8. switch語句： 語法結構： switch(表示式) { case value: xxx default:xxx},其中default是前面的 case的情況都不滿足再執行
9. while語句： while(表示式) { xxx},先判斷條件是否滿足，如果表示式為真，再執行迴圈體內部的結構，
10. 10.do while語句： do { xxx } while(條件表示式)，執行思路：跟while不同的地方在於 do while 先執行一次迴圈體，再判斷條件，所以至少執行一次
11. 宣告函式之後再呼叫函式，函式不呼叫，函式本身就不會執行，只有在呼叫的時候函式體內部的程式碼才會執行和發揮作用
12. 函式的封裝：把一個或多功能通過函式的方式封裝起來，對外只提供一個介面，簡單理解（封裝類似將電腦配件整合到機箱中，類似於快讀打包）
13. 當一個函式不知道會有幾個引數傳進來的時候，就可以使用arguments，函式內部使用 arguments[n]的形式可以呼叫傳進來的引數，它是一個偽陣列（並不是真正意義上的陣列） 1st：具有陣列的length屬性 ，2nd：按照索引的方式進行儲存，3rd：他沒有真正陣列的一些方法如 pop(), push()等
14. 函式之間可以相互呼叫和巢狀使用
15. 呼叫函式需要新增小括號
16. 兩種函式的宣告：1st利用函式關鍵字定義函式(命名函式)：function fn() {}，2nd：函式表示式（匿名函式）： var fun =function() {};,呼叫 fun()，fun是變數名不是函式名， 3rd：函式表示式宣告方式和宣告變數差不多，只不過變數裡面存的是值， 而函式表示式裡面存的是 函式
17. 作用域：就是程式碼（變數）在某個範圍內起作用和效果，目的是為了提高程式的可靠性更重要的是減少命名衝突
18. 區域性作用域： 在函式內部就是區域性作用域，這個程式碼的變數只在函式內部起效果
19. 從執行效率來看，全域性變數只有當瀏覽器關閉的時候才會銷燬，比較佔記憶體資源，區域性變數 當程式執行完就會銷燬，比較節約記憶體資源
20. 內部函式可以訪問外部函式的變數，例如：如果外部第一層函式 fn()沒有num，則會在script的子級程式碼中尋找num
21. 預解析：JavaScript程式碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器再執行JavaScript程式碼的時候分為兩步：預解析 和 程式碼執行
22. 在JavaScript 中，物件是一組無序的相關屬性和方法的集合，所以的事物都是物件，例如字串，數值，陣列，函式等
23. 將某人的資訊儲存在陣列內： var arr =[‘name’,‘sex’,age,‘weight’]，這樣就建立了一個數組類的物件
24. 如何呼叫物件屬性：呼叫物件的屬性 我們採取這種方法 物件名 . 屬性 . 我們理解為 的 ，呼叫 屬性還有一種方法 物件名[屬性名]
25. 利用new Object 建立物件： new後面的 首字母必須大寫， 例如

        var obj = new Object(); //建立了一個空物件
        obj.uname='張三瘋';
        obj.age=18;
        obj.sex='男';
        obj.sayHi=function() {
            console.log('你好呀');
        }

,我們利用 等號 “=” 賦值的方法，新增物件的屬性和方法，每個屬性和方法之間用 分號結束
26.建構函式建立物件：function xxx(x1,x2,x3) {},記得用 this.xxx=x1來給每一個屬性賦值
27.遍歷物件： 用 for in遍歷我們的物件:for( 變數 in 物件):

        for (var k in obj) {
            console.log(k); //k 變數 輸出 得到的是屬性名
            console.log(obj[k]); // obj[k] 得到的是屬性值
            // console.log(obj.k); 此方法不行
        }
        // 我們使用 for in 裡面的變數 我們喜歡寫 k 或者 key

28.Math物件： Math.max():求全部數中的最大值， Math.abs():求某一個數的絕對值,若括號內是 ‘pink’，則返回 NaN
29.Math三個取整方法： 1st: Math.floor()：往小了取整，如1.9變為1 ，2nd: Math.ceil()：往大了取整，如1.1變為2， 3rd：Math.round(): 四捨五入，其他數字都是四捨五入，但是 .5特殊 ，它往大了取， -1.5會變成 -1（因為-1大於-2）。
30.Math的隨機數方法：random() ,返回的是在0<=x<1之間的小數，這個方法裡面不跟引數，我們想要得到兩個數之間的隨機整數，並且包含這兩個數：
用 Math.floor(Math.random()*(max-min+1)+min),例如

        function getRandom(min,max) {
            return Math.floor(Math.random()*(max-min+1)) + min;
        }
        // 5.隨機點名
        var arr=['張三','李四','王麻子','特朗普','奧巴馬','許嵩','周杰倫','維斯布魯克']
        console.log(arr[getRandom(0,arr.length-1)]);

31：Date日期物件： Date()日期物件 ，是一個建構函式， 必須使用 new 來呼叫 ，建立我們的日期物件，例如： var arr = new Date()， 1st:使用Date，如果沒有引數，則返回系統當前的時間
32：Date引數的常用寫法： 1st：數字型： 2019,10,01 ，當使用數字型的寫法，會自動給月份多加一個月，上述會打印出11月份，2nd：字串型：‘2019-10-1 8:8:8’
33. var date =new Date()之後，使用：1st： date.getFullYear()：返回當前日期的年，2nd： date.getMonth()+1 ：返回月份，不過要比當前小一個月，所以+1，3rd：date.getDate()：返回是幾號，4th：date.getDay(), 返回的星期幾，但是週日返回的是 0 例子：

var year =date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var day =date.getDay();
        var arr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

        console.log('今天是'+year + '年'+month+'月' +dates +'日' +arr[day]);

34.還是如上初始化 date, 1st：date.getHours()：獲取小時，2nd：date.getMinutes()：獲取分鐘，3rd：date.getSeconds()：獲取秒數
35.時間戳： 獲得Date總的毫秒數，不是當前時間段毫秒數，而是距離1970年1月1日過了多少毫秒數，為什麼是1970年的這個時候呢？自行去百度把哈哈哈。
36.三種獲得時間戳的方法： 1st：通過 valueOf 和 getTime() 獲取：date.getTime() , date.valueOf()， 2nd：簡單寫法(最常用的寫法)： var date1=+new Date() ，3rd：更簡單的寫法 H5新增的：Date.now() ，新方法注意相容性
37.陣列的兩種建立方式： 1st：利用陣列字面量：var arr = [1,2,3]，2nd：利用new Array(), var arr1 = new Array(2)：這個2表示 陣列的長度為2，裡面有兩個空(empty)的陣列元素，var arr2 =new Array(2,3)：等價於 [2,3]，這樣寫表示有兩個陣列元素 分別是 2 和 3
38.檢測是否為陣列方法：1st：利用 instanceOf 例如：

        console.log(arr instanceof Array);

如果是陣列 則返回 True，否則返回 false，2nd：Arrary.isArray(xxx)， 例如：

        console.log(Array.isArray(arr));

值得注意的是：Array.isArray(引數)； 是H5新增的方法 ，ie9 以上的版本才支援。
39.新增陣列元素： 1st：在陣列末尾新增元素： arr.push(引數) ，2nd： 在陣列的開頭新增陣列：arr.unshift(引數)，值得注意的是： push或unshift完畢之後，返回的結果是 新陣列的長度 , 原陣列也會發生變化，若原先數只有3個元素，經過以下程式碼變換之後，陣列長度就變為5，且4，pink被加入到原陣列

        console.log(arr.push(4, 'pink')); // 返回值 5

40.刪除陣列元素： 1st：arr.pop() ，它是刪除陣列的最後一個元素，一次只能刪除一個元素，他返回的值是刪除的那個元素，原陣列也會發生變化。 2nd：shift(), 它是刪除陣列的第一個元素，shift沒有引數，它返回的值也是被刪除的那一個數組元素，原陣列也會發生變化

41.陣列的排序：使用 arr.sort() , 但是如果需要排序成功 ，需要加如下程式碼：

        //需要進行一下操作才可以正確的排序成功
        arr.sort(function(a,b){
            // return a-b;  //升序的順序排列
            return b-a; // 降序的順序排列
        });

42.陣列的索引： 返回陣列元素索引號的方法,1st： indexOf(陣列元素) ,此方法預設是從前慢開始找 ，它只返回第一個滿足條件的索引，後面有滿足的將不會再執行，當在陣列中找不到元素的時候 ，他將返回值 1， 2nd： lastindexOf(陣列元素), 此方法是從後往前查詢的，但是索引號不變

43.陣列轉化為字串： 使用 arr.toString() 的方法使得陣列轉化為字串，和數字等轉化為字串類似.

---

---

---

容易搞混和遺忘的型別：

1. bool型別的 true 和 false 參與加減法等數學運算分別看做 1 和 0
2. 一個變數聲明瞭 但是未賦值 就是 undefined 型別的資料型別
3. str.length 會求出一個字串的長度
4. undefined 型別 和 數字相加 最後結果是 NaN（不是一個數字 代表不確定）
5. undefined型別和字串相加例如： ‘caigou’ + undefined 等價於 ： caigouundefined
6. 判斷bool型別的值的 程式碼： Boolean(xxxx)
7. 獲取某一個數據是什麼型別的方式： typeof(xxx)
8. 把資料轉換為字串型別： 1st：變數.toString ，2nd：String(變數)，3rd：利用字串拼接的方法例如： num+ ’ '（整型加一個空字元）
9. 把資料型別轉換為數字型： 1st：parseInt(變數)，此方法得到的只能是整數（會捨棄小數點後的部分）， 2nd：parseFloat(變數)，此方法將保留小數點後的部分， 3rd：Number(變數) ，進行強制型別轉換， 4th：利用算術運算 * - / （不包括 + 號運算）進行強制轉換例如： ‘66’ - 0 結果為整型的 66
10. 我們不能直接拿著浮點數進行比較 是否相等 例如： var num= 0.1 +0.2，但是 num == 0.3 返回的 是 false ， 0,1+ 0.2 = 0.30000000000000004
11. === 三個等號是判斷資料型別和值是否都相等（全等），不相等為false
12. 邏輯與短路運算：如果表示式1 結果為真，則返回表示式2 ，如果表示式1為假，則返回表示式表示式1
13. 邏輯或的短路運算：如果表示式1結果為真，則返回表示式1，如果表示式1結果為假，則返回表示式2
14. 表示式是有返回值的
15. switch語句如果有一個條件滿足了但是並未給此 case 加 break;，則後面的情況不論是否滿足都會輸出結果
16. do while語句至少都會執行一次內部樣式
17. 對於函式的形參和實參匹配問題：1st：如果形參個數少於實參：只會取到形參的個數，多的實參不會呼叫，2nd：如果形參個數多於實參，形參可以看做是不用宣告的變數，沒有接收引數的形參看做是一個undefined
18. 函式的形參也可以看做是一個區域性變數
19. js中目前沒有塊級作用域，js在es6的時候新增的塊級作用域，塊級作用域：if {xxx},for {xxx},外部的是不能呼叫if和num裡面宣告的變數的
20. 作用域鏈： 內部函式訪問外部函式的變數，才去的是鏈式查詢的方式來取決那個值 這種結構我們稱作作用域鏈 就近原則
21. 預解析：會把函式的宣告(function)和變數(var)的宣告提到整個程式碼的最前面,程式碼的執行會按照程式碼的書寫順序 從上往下執行，預解析分為：變數預解析(變數提升：提升到當前作用域的最前面，但是不提升賦值操作)，函式預解析(函式提升，提升到當前作用域的最前面，但是不呼叫函式) 例子：

function fun() {
            console.log(num); //undefined 
            var num = 20;
        }
        var num = 10;
        fun();

        //相當於執行了以下操作
        var num;
        function fun() {
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun()

22. var a=b=c: 相當於：var a=9 ; b = 9, c = 9, b和c沒有var定義，直接賦值，如果在函式內部這樣做 ，則把 b 和 c 當全域性變數看
23. 變數和屬性的區別： 變數： 單獨宣告並賦值，使用的時候 直接寫變數名，單獨存在， 屬性： 在物件內部，不需要宣告，使用的時候必須是 物件 . 物件
24. 因為我們一次建立物件 裡面有很多屬性和方法是大量相同的 我們只能複製
    因此 我們可以利用函式的方法 重複這些相同的程式碼 我們就把這個函式 稱為 建構函式
    又因為 這個函式不一樣，裡面封裝的不是普通的程式碼，而是 物件
    建構函式 就是把我們物件裡面一些相同的屬性 和方法 抽象出來封裝到函式裡面
    25.建構函式首字母要大寫，建構函式不需要寫 return 就可以返回結果，我們呼叫建構函式，必須使用 new ，只要new 建構函式名 ()，就建立了一個物件xxx{}

        function Star(uname,age,sex,song) {
            this.name=uname;
            this.age=age;
            this.sex=sex;
            this.sing =function( song) {
                console.log(song);
            }
        }
        var ldh =  new Star('須知毫',18,'男',);
        ldh.sing('hahahahaaaaa')

26.內建物件： JavaScript中的物件分為三種： 自定義物件，內建物件，瀏覽器物件
前兩種物件是js的基礎內容，屬於ECMAScript；第三個瀏覽器物件屬於我們js獨有，稱為 JS API
內建物件就是指 JS語言自帶的一些物件，這些物件供開發者使用，並提供了一些常用的或者是最基本而必要的功能(屬性和方法)
27.console.log(Math.max(1,23.32,3223,23,‘sad’)); // 結果是NaN，因為其中混入了一個 ‘sad’，不是數字型別
28.console.log(Math.abs(’-1’)); // 隱式轉換 會把字串型的 -1 轉換為數字型
29.Math.random() 不能提供像密碼一樣安全的隨機數，不能用他們來處理有關安全的事情
30.Date()中的 月份和 星期日的表示和中國有些不同，星期日用0表示，月份都要比我們的表示小一個月
31.倒計時案例 獲取天數，小時，分鐘，秒數的 演算法： 在取得剩餘時間的總毫秒數之後：
times=times/1000:(獲取秒數，parseInt(1s=1000ms))
1st： 天數 ： var days =parseInt( times/60/60/24;)
2nd：小時： var hours = parseInt(times/60/60%24;)
3rd： 分鐘：var minutes = parseInt(times/60%60;)
4th：秒數： var seconds = parseInt(times%60)
32.instanceOf 不僅可以拿來判斷是否是陣列，也可以拿來驗證是否是其他東西， 使用 aaa instanceOf bbb， 譯為： aaa 是 bbb嗎？

console.log(obj instanceof Object);

上例為判斷是否為 一個 物件(Object)