day 45 JavaScript

day 45 JavaScript

01.JavaScript

1. 是前端的一門編程語言（也是有邏輯的）與java沒有關係
2. JavaScript是Netscape（網景）公司開發
3. Node.js 支持前段js代碼 跑在後端服務器上
4. ECMAScript 與 javascript 指相同的
5. 當前使用較多的版本ECMAScript 5.1 / 6

02.js語法

1. 註釋

   /單行註釋/
   /*
   多行註釋
   多行註釋
   */

2. 引入方式

   1.在標籤內直接書寫
   <script>
    js代碼
   </script>    
   2.經過標籤src書寫 引入外部js文件
   <script src="js.js"></script>

3. Js裏面的變量

   1. 在Js中聲明變量須要使用關鍵字

      var 聲明的是全局有效
      let 能夠只在局部有效（ES6新語法）
      
      var name = 'jason'
      let name = 'oscar'

   2. js中變量的命名規範

      1. 數字 字母 下劃線 $

      2. 不能使用關鍵字做爲變量名

      3. 推薦使用駝峯體命名

         python推薦使用下劃線（c++）
         user_name
         js推薦使用駝峯體（前端）
         UserName

   3. js代碼默認以分號做爲結束符

      confirm('are you sure?')
      不寫分號一般狀況下沒有問題

   4. 常量const

      const pi = 3.1415; pi的值不能改變，試圖更改會報錯

      python中沒有真正的常量，全大寫的變量名只是約定俗成的不改變

   console.log() 做用與 python中的print做用相同

03.js中的數據類型

1. 數值類型 Number（包含python中的 int float）

   var x; //此時x是undefined
   var x=1;//此時是數字
   var x=12.34;//此時類型也是數字
   NaN 表示非數字類型，用於判斷變量是否爲數字

2. 字符串類型 string

   var a = 'hello';
   var b = 'world';
   var c = a + b;
   console.log(c) // 'helloword'

   字符串的經常使用內置方法

   var name = '   Jason   '

   1. length 返回長度

      console.log(name.length) == print(len(name))

   2. trim() 移出空白

      name.trim() == name.strip()
      區別 trim() 沒法傳參 只能去空格
      trimLeft() 去左側字符
      trimRight() 去右側字符

   3. charAt(n) 返回第n個字符

      name.charAt(0)

   4. concat(value,......) 拼接

      name.concat('字符串') 會將括號內的字符串和name拼接到一塊兒產生一個新的變量

   5. indexOf 獲取元素索引位置

      name.indexOf('a') == name.index('a')

   6. substring(from,to) 根據索引獲取子序列

      name.substring(1,5) == name[1:5]
      substring() 括號內不能輸入負值，會返回''
      substirng()的特色：
      若是 start > stop ，start和stop將被交換
      若是參數是負數或者不是數字，將會被0替換

   7. slice(start,end) 切片

      name.slice(0.-2) == name[0:-2]
      name.slice(2) == name[2:] 2前面的都不要
      若是 start > stop 不會交換二者
      若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
      若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

   8. toLowerCase 變爲全小寫

      name.toLowerCase() == name.lower()

   9. toUpperCase 變爲全大寫

      name.toUpperCase() == name.upper()

   10. split(delimiter,limit) 分割

   11. ES6中引入了模板字符串。

       var name = 'jason' , age = 18;
       var res = 'my name is ${name} my age is ${age}' //找不到會報錯
       ==
       res = f'my name is {name} my age is {age}'

3. 布爾值 boolean

   1. 在js中布爾值所有是小寫
   2. true
   3. false ''(空字符串)、0、null、undefined、NaN

   null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
   undefined 表示當聲明瞭一個變量但未初始化時，改變量的默認值是undefined ，還有就是當函數沒法明確的返回值時，返回的也是undefined

4. 對象 object

   JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript容許自定義對象。
   javascript 提供多個內建對象 如 string、date、Array 等等
   對象只是帶有屬性和方法的特殊數據類型

5. 數組 （python中的list）

   數組對象的做用是，使單獨的變量名來儲存一系列的值。

   var a = [123,"abc"];
   console.log(a[1]);  // 輸出結果爲"abc"
   l = [1, 2, 3, 4, 5, 6, 7, 8, 9]

   1. length 獲取數組的長度

      l.length == len(l)

   2. push(ele) 尾部追加元素

      l.push(10) == l.append(10)

   3. pop() 獲取尾部元素

      l.pop() == l[-1] //不一樣點爲pop會將元素從數組中刪除

   4. unshift(ele) 頭部插入元素

      l.unshift(666) == l.insert(0,666)

   5. shift() 頭部移除元素

      l.shift() == l[0] //不一樣點爲shift會將元素從數組中刪除

   6. slice(start,end) 切片

      l.slice(2,6) == l[2:6]

   7. reverse() 反轉

      l.reverse() == l = l[::-1] //reverse() 會將反轉的結果保存

   8. join(seq) 將數組拼接成字符串

      l.join('$') == '$'.join(l)

   9. concat(value,....) 鏈接數組

      l2 = [11, 22, 33, 44, 55, 66]
      l.concal(l2) == l.extend(l2)

   10. sort() 排序

       l.sort() == l.sort() //二者徹底相同，會將排序後的結果保存

   11. forEach() 將數組的每一個元素傳遞給回調函數

       l.forEach(function(obj){console.log(obj)}) 
       會將l裏的每個元素提取出來放到函數中
       l.forEach(function(obj,index){console.log(obj,index)}) 
       若是傳入兩個參數的話，第二個值爲元素對應索引

       forEach(function(currentValue, index, arr), thisValue)

       參數	描述
       function(currentValue, index, arr)	必需。 數組中每一個元素須要調用的函數。 函數參數:參數描述currentValue必需。當前元素index可選。當前元素的索引值。arr可選。當前元素所屬的數組對象。
       thisValue	可選。傳遞給函數的值通常用 "this" 值。 若是這個參數爲空， "undefined" 會傳遞給 "this" 值

   12. splice() 刪除元素，並向數組添加新元素

       l.splice(1,2,888,[123,131],999) 
       //第一個參數爲起始索引，第二個爲要刪除的個數，後面的參數爲插入到改位置的元素

       splice(index,howmany,item1,.....,itemX)

       參數	描述
       index	必需。規定從何處添加/刪除元素。 該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
       howmany	必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。 若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
       item1, ..., itemX	可選。要添加到數組的新元素

   13. map() 返回一個數組元素調用函數處理後的值的新數組

       map(function(currentValue,index,arr), thisValue)
       currentValue 必須。當前元素的值
       index                    可選。當期元素的索引值
       arr                      可選。當期元素屬於的數組對象

       參數	描述
       function(currentValue, index,arr)	必須。函數，數組中的每一個元素都會執行這個函數 函數參數: 參數描述currentValue必須。當前元素的值index可選。當期元素的索引值arr可選。當期元素屬於的數組對象
       thisValue	可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值爲 "undefined"

6. 運算符

   1. 算數運算符

      + *- * / % ++ --
      var x=10;
      x++; // 此時打印結果爲10，會先將x賦值給x，+1的值沒有被賦給x
      x; // 此時這兩行的效果與 python 中的 x+=1 相同
      ++x; == x+=1

   2. 比較運算符

      > >= < <= != == === !==
      // 須要注意的是 == 和 != 會將比較的雙方轉化成相同的數據類型再比較
      === !== // 這二者何python中的 == != 效果相同

   3. 邏輯運算符

      js中       ==      python中
      &&                        and
      ||                        or
      !                         not

   4. 賦值運算符

      = += -= *= /= 
      與python中的效果相同

04.流程控制

1. if-else

   var x=10;
   if (x>5){
     console.log('yes')
   }else{
     console.log('no')
   }
   // js中沒有elif ，else if 來達到elif相同的效果
   var a = 10;
   if (a > 5){
     console.log("a > 5");
   }else if (a < 5) {
     console.log("a < 5");
   }else {
     console.log("a = 5");
   }

2. switch

   var day = new Date().getDay();
   switch (day){
       case 0;
       console.log('Sunday')
       break;
       case 1;
       console.log('Monday')
       break;
   }
   // case 後面若是沒有加break 程序會將符合條件的case後面的全部case默認成立執行下去

3. for

   for (var i=0;i<10;i++) {
     console.log(i);
   }
   // 小括號內放第一個元素爲定義變量，第二個爲終止條件，第三個爲變化條件
   // 大括號內放python中for循環縮進內的代碼塊

4. while

   var i = 0;
   while (i < 10) {
     console.log(i);
     i++;
   }

5. 三元運算

   var a = 1;
   var b = 2;
   var c = a > b ? a : b
   // 這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;
   
   // 三元運算能夠嵌套使用；
   var a=10,b=20;
   var x=a>b ?a:(b=="20")?a:b;
   // x = 10
   
   // python中的三元表達式
   a = 10
   b = 20
   a if a>b else b

04.函數

1. 無參函數

   function f1(){
     console.log("Hello Word");
   }

2. 帶參函數

   function f2(a,b){
     console.log(arguments);
     console.log(arguments.length);
     console.log(a,b);
   }

3. 帶返回值的函數

   function f3(a,b){
     retun a+b ;
   }

4. 匿名函數

   var sum = function(a,b){
     return a+b;
   }
   sum(1,2)

5. 當即執行函數

   (function(a,b){return a+b})(1,2)

6. ES6中支持使用箭頭=>來定義匿名函數

   var f = v => v;
   // 等同於
   var f = function(v){
     return v;
   }
   var f = () => 15;
   // 等同於
   var f = function(){
     return 15;
   }
   var f = (a,b) => a+b;
   // 等同於
   var f = function(a,b){
     return a+b;
   }
   // js 中的return只能返回一個值，若是須要返回多個值要手動將其包成一個數組或對象

7. 函數中的arguments參數

   function add(a,b){
     console.log(a+b);
     console.log(arguments);
   }
   arguments 至關於將傳如的參數包成一個數組接收

8. 局部變量和全局變量

   1. 局部變量

      在js函數內部聲明的變量（使用var）是局部變量，只能在函數內部訪問到（改變量的做用域是函數內部）。只要函數運行完畢就會將其刪除

   2. 全局變量

      在函數外部聲明的變量。頁面上全部的腳本和函數都能訪問它。

   3. 變量生存週期

      javascript變量的生存週期從被聲明開始

      局部變量在函數運行結束後被刪除

      全局變量在頁面關閉後被刪除+

   4. 閉包函數

      var city = "beijing";
      function f(){
        var city = "shanghai";
        function inner(){
          console.log(city);
        }
        return inner;
      }
      var ret = f();
      ret();
      // 結果爲 shanghai

05.詞法分析

06.內置對象和方法

1. JavaScript中一切皆對象，字符串、數字、數組、日期等。對象就是擁有屬性和方法的數據
   

2. 自定義對象

   JavaScript中的對象（Object）本質上是鍵值對的集合（Hash結構）。只能使用字符串爲鍵。

   var a = {"name":"jason","age":18};
   console.log(a.name);
   console.log(a.age);
   // for 循環對象中的值
   for (var i in a){
     console.log(i,a[i])
   }
   // 建立一個對象
   var person = new Object();
   person.name = 'jason'; // 爲對象添加屬性
   person.age = 18;

3. 建立Date對象

   // 方法1；不指定參數
   var d1 = new Date();
   console.log(d1.toLocaleString());
   // 2019/11/17 下午12:56:25
   
   //方法2：參數爲日期字符串
   var d2 = new Date("2004/3/20 11:12");
   console.log(d2.toLocaleString());
   // 2004/3/20 上午11:12:00
   var d3 = new Date("04/03/20 11:12");
   console.log(d3.toLocaleString());
   // 2004/3/20 上午11:12:00
   
   //方法3：參數爲毫秒數
   var d3 = new Date(5000);
   console.log(d3.toLocaleString());
   // 1970/1/1 上午8:00:05
   console.log(d3.toUTCString());
   // Thu, 01 Jan 1970 00:00:05 GMT
   
   //方法4：參數爲年月日小時分鐘秒毫秒
   var d4 = new Date(2004,2,20,11,12,0,300);
   console.log(d4.toLocaleString());  //毫秒並不直接顯示
   // 2004/3/20 上午11:12:00

   // Date 對象的方法
   var d = new Date(); 
   //getDate()                 獲取日
   //getDay ()                 獲取星期
   //getMonth ()               獲取月（0-11）
   //getFullYear ()            獲取完全年份
   //getYear ()                獲取年
   //getHours ()               獲取小時
   //getMinutes ()             獲取分鐘
   //getSeconds ()             獲取秒
   //getMilliseconds ()        獲取毫秒
   //getTime ()                返回累計毫秒數(從1970/1/1午夜)

4. Json 對象

   var str1 = '{"name":"jason","age":18}'
   var obj = {"name":"jason","age":18}
   // json 將字符串轉換成對象
   var obj = JSON.parse(str1);
   // json 將對象轉化成JSON字符串
   var obj = JSON.stringify(obj);

5. RegExp 對象

   //定義正則表達式的兩種方式
   var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
   
   // 正則校驗數據
   reg1.test('jason666')
   reg2.test('jason666')
   
   /*第一個注意事項，正則表達式中不能有空格*/ 
   
   // 全局匹配
   var s1 = 'egondsb dsb dsb';
   s1.match(/s/g) // 統計字符串中出現的個數
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
   reg2.test('egondsb');
   reg2.test('egondsb');
   reg2.lastIndex;
   /*第二個注意事項，全局匹配時有一個lastIndex屬性*/
   // lastIndex 是當前光標所在位置，匹配成功後，光標會停在結束的位置，再次匹配時會繼續從該位置開始匹配
   
   // 校驗時不傳參數
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
   reg2.test(); // 不傳參默認傳undefined
   reg2.test(undefined); 
   
   var reg3 = /undefined/;
   reg3.test();