JavaScript基礎_2

數組對象

• 創建數組

  創建方式1:
  var arrname = [元素0,元素1,….];          // var arr=[1,2,3];
  
  創建方式2:
  var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
  

數組方法

var arr = ["A","B","C","D"];
// 內置屬性
console.log( arr.length );
// 獲取指定下標的成員
// console.log( arr[3] ); // D
console.log( arr[arr.length-1] ); // 最後一個成員

• pop方法：刪除最後一個成員，並作為返回值返回

  var arr = [1,2,3,4,5];
  var ret = arr.pop();
  console.log(arr); // [1, 2, 3, 4]
  console.log(ret); // 5
  

• push方法：在數組最後末尾追加一個成員

  var arr = [1,2,3,4,5];
  arr.push("a");
  

• shift方法：直接刪除最後一個成員

  var arr = [1,2,3,4,5];
  arr.shift()
  

• unshift方法：將value值插入到數組的開始

  var arr = [1,2,3,4,5];
  arr.unshift("yuan")
  

• reverse方法：將數組反序

• slice方法：slice(開始下標,結束下標) 切片,開區間

  var arr = [1,2,3,4,5]
  var res = arr.slice(1,3)
  

• sort方法：排序[這是字元的排序,不是數值的排序]

  var arr = [3,4,1,2,5,10];
  console.log( arr ); 
  

• 升降序：

  // 數值升序
  var arr = [3,4,1,2,5,10];
  arr.sort(function(a,b){
      return a-b;
  });
  // 數值降序
  var arr = [3,4,1,2,5,10];
  arr.sort(function(a,b){
      return b-a;
  });
  

• splice方法：splice(操作位置的下標,刪除操作的成員長度,"替換或者添加的成員1","替換或者添加的成員2") 添加/刪除指定的成員 "萬能函數"

  var arr1 = [1,2,3];
  arr1.splice(1,1);
  console.log(arr1); // 刪除指定的1個成員  [1, 3]
  
  var arr2 = ["a","b","c","d"];
  arr2.splice(2,0,"w","x","w"); // 添加
  console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]
  
  var arr3 = ["a","b","c"];
  arr3.splice(1,1,"w");
  console.log(arr3); // ["a", "w", "c"]
  

• concat方法：把多個數組合併

  var arr1 = [1,2,3];
  var arr2 = [4,5,7];
  var ret = arr1.concat(arr2);
  

• join方法：把數組的每一個成員按照指定的符號進行拼接成字元串

  var str = "廣東-深圳-南山";
  var arr = str.split("-");
  var arr1 = ["廣東", "深圳", "南山"];
  var str1 = arr1.join("-");
  

• find方法：高階函數, 返回符合條件的第一個成員

  var arr = [4,6,5,7];
  var func = (num)=>{
      if(num%2===0){
          return num;
      }
  };
  var ret = arr.find(func);
  

• filter方法：對數組的每一個成員進行過濾,返回符合條件的結果

  var arr = [4,6,5,7];
  function func(num){  // 也可以使用匿名函數或者箭頭函數
      if(num%2===0){
          return num;
      }
  }
  var ret = arr.filter(func);  // 所有的函數名都可以作為參數傳遞到另一個函數中被執行
  

• map方法：對數組的每一個成員進行處理,返回處理後的每一個成員

  var arr = [1,2,3,4,5];
  var ret = arr.map((num)=>{
      return num**3;
  });
  

• 其他方法

  / (14) 其它方法
  includes   查詢指定數據是否在數組中存在!
  indexOf()  查詢指定數據在數組中第一次出現的位置
  isArray()  判斷變數的值是否是數組
  

  

object對象

object基本操作

Object 的實例不具備多少功能，但對於在應用程式中存儲和傳輸數據而言，它們確實是非常理想的選擇。 創建 Object 實例的方式有兩種。

var person = new Object();
person.name = "ivan";
person.age = 18;

另一種方式是使用對象字面量表示法。對象字面量是對象定義的一種簡寫形式，目的在於簡化創建包含大量屬性的對象的過程。下麵這個例子就使用了對象字面量語法定義了與前面那個例子中相同的person 對象：

var person = {
                name : "ivan",
                age : 18
             }; 

• object可以通過. 和 []來訪問。

  console.log(person["age"]);
  console.log(person.age)
  

• object可以通過for迴圈遍歷

  for (var attr in person){
             console.log(attr,person[attr]);
        }
  

序列化和反序列化

json[JavaScript Object Notation]:對象表示法，是一種輕量級的數據交換格式。[本質上它是一種字元串]

# json是一種數據格式, 語法一般是{}或者[]包含起來
# 內部成員以英文逗號隔開,最後一個成員不能使用逗號!
# 可以是鍵值對,也可以是列表成員
# json中的成員如果是鍵值對,則鍵名必須是字元串.而json中的字元串必須使用雙引號圈起來
# json數據也可以保存到文件中,一般以".json"結尾.
# 前端項目中,一般使用json作為配置文件.

{
   "name": "xiaoming",
	 "age":12
}

[1,2,3,4]

{
   "name": "xiaoming",
	 "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["籃球","唱","跳"]
}

在python中，可以通過json.dumps和json,loads函數進行字典和json格式的轉換

import json

dic = {
    "name":"ivanlee",
    "Age":18
}
----------------------------------------------------
| dic_to_json = json.dumps(dic)                     |
| print(dic_to_json,type(dic_to_json))              |
| >>> {"name": "ivanlee", "Age": 18} <class 'str'>  |
----------------------------------------------------
| json_to_dic = json.loads(dic_to_json)             |
| print(json_to_dic,type(json_to_dic))              |
| >>> {'name': 'ivanlee', 'Age': 18} <class 'dict'> |
----------------------------------------------------

js中也支持序列化和反序列化的方法：JSON.stringify和JSON.parse

// 把json對象轉換成json字元串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"ivanlee","age":22}

    // 把json字元串轉換成json對象
    var str = `{"name":"ivanlee","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);

Date對象

創建Date對象

//方法1：不指定參數
var nowd1=new Date();
console.log(nowd1.toLocaleString( ));
//方法2：參數為日期字元串
var d2=new Date("2004/3/20 11:12");
console.log(d2.toLocaleString( ));
var d3=new Date("04/03/20 11:12");
console.log(d3.toLocaleString( ));
//方法3：參數為毫秒數
var d4=new Date(5000);
console.log(d4.toLocaleString( ));
console.log(d4.toUTCString());
//方法4：參數為年月日小時分鐘秒毫秒
var d5=new Date(2004,2,20,11,12,0,300);
console.log(d5.toLocaleString( ));//毫秒並不直接顯示

獲取當前時間信息

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

日期和時間轉換

日期和時間的轉換:
// 返回國際標準時間字元串
toUTCString()
// 返回本地格式時間字元串
toLocalString()
// 返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.parse(x)
// 返回累計毫秒數(從1970/1/1午夜到國際時間)
Date.UTC(x)

練習：以2021年03月2日 14:1:43 星期二格式化輸出當前時間

function getCurrentDate(){
    //1. 創建Date對象
    var date = new Date(); //沒有填入任何參數那麼就是當前時間
    //2. 獲得當前年份
    var year = date.getFullYear();
    //3. 獲得當前月份 js中月份是從0到11.
    var month = date.getMonth()+1;
    //4. 獲得當前日
    var day = date.getDate();
    //5. 獲得當前小時
    var hour = date.getHours();
    //6. 獲得當前分鐘
    var min = date.getMinutes();
    //7. 獲得當前秒
    var sec = date.getSeconds();
    //8. 獲得當前星期
    var week = date.getDay(); //沒有getWeek
    return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }
}
//將數字 0~6 轉換成 星期日到星期六
function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

Math對象

練習：獲取1-100的隨機整數，包括1和100

var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num)

Function對象

函數在程式中代表的就是一段具有功能性的代碼，可以讓我們的程式編程更加具有結構性和提升程式的復用性,也能讓代碼變得更加靈活強大

聲明函數

/ 函數的定義方式1
function 函數名 (參數){
    函數體;
    return 返回值;
}
功能說明：
    可以使用變數、常量或表達式作為函數調用的參數
    函數由關鍵字function定義
    函數名的定義規則與標識符一致，大小寫是敏感的
    返回值必須使用return
    
//  函數的定義方式2
    
用 Function 類直接創建函數的語法如下：
var 函數名 = new Function("參數1","參數n","function_body");

雖然由於字元串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行為與用 Function 類明確創建的函數行為是相同的。    
   

函數的調用

//f(); --->OK
    function f(){
        console.log("hello")

    }
    f() //----->OK

不同於python，js代碼在運行時，會分為兩大部分———預編譯 和 執行階段。

• 預編譯：會先檢測代碼的語法錯誤，進行變數、函數的聲明。
• 執行階段：變數的賦值、函數的調用等，都屬於執行階段。

函數參數

• 參數的基本使用

  // 位置參數
  function add(a,b){
      console.log(a);
      console.log(b);
  }
  add(1,2)
  add(1,2,3)
  add(1)
  
  // 預設參數
  function stu_info(name,gender="male"){
      console.log("姓名："+name+" 性別："+gender)
  }
  
  stu_info("ivan")
  

  

  • 函數中的arguments對象

    function add(a,b){
    
            console.log(a+b);//3
            console.log(arguments.length);//2
            console.log(arguments);//[1,2]
    
        }
    add(1,2)
    
    // arguments的應用1 
    function add2(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        console.log(result)
    
    }
    
    add2(1,2,3,4,5)
    
    // arguments的應用2
    
    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }
    
    f(1,2,3,4,5)
    

    arguments 是一個對應於傳遞給函數的參數的類數組對象，arguments 是一個對象，不是一個 Array 。它類似於Array ，但除了length屬性和索引元素之外沒有任何Array 屬性。例如，它沒有 pop 方法。但是它可以被轉換為一個真正的Array

    

• 函數返回值

  在函數體內，使用 return 語句可以設置函數的返回值。一旦執行 return 語句，將停止函數的運行，並運算和返回 return 後面的表達式的值。如果函數不包含 return 語句，則執行完函數體內每條語句後，返回 undefined 值。

  function add(x,y) {
            return x+y
        }
  var ret = add(2,5);
  console.log(ret)
  

  1、在函數體內可以包含多條 return 語句，但是僅能執行一條 return 語句

  2、函數的參數沒有限制，但是返回值只能是一個；如果要輸出多個值，可以通過數組或對象進行設計。

• 匿名函數

  匿名函數，即沒有變數名的函數。在實際開發中使用的頻率非常高！也是學好JS的重點。

        // 匿名函數賦值變數
         var foo = function () {
             console.log("這是一個匿名函數！")
         };
  
        // 匿名函數的自執行
        (function (x,y) {
             console.log(x+y);
         })(2,3)
  
       // 匿名函數作為一個高階函數使用
       function bar() {
          return function () {
              console.log("inner函數！")
          }
      }
  
      bar()()    
  

  使用匿名函數表達式時，函數的調用語句，必須放在函數聲明語句之後！

  

• 函數作用域

  作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。

  任何程式設計語言都有作用域的概念，簡單的說，作用域就是變數可訪問範圍，即作用域控制著變數與函數的可見性和生命周期。在JavaScript中，變數的作用域有全局作用域和局部作用域兩種。

  // 局部變數,是在函數內部聲明,它的生命周期在當前函數被調用的時候, 當函數調用完畢以後,則記憶體中自動銷毀當前變數
  // 全局變數,是在函數外部聲明,它的生命周期在當前文件中被聲明以後就保存在記憶體中,直到當前文件執行完畢以後,才會被記憶體銷毀掉
  

  首先熟悉下var

      var name = "yuan"; // 聲明一個全局變數 name並賦值”yuan“
      name = "張三";  // 對已經存在的變數name重新賦值 ”張三“
      console.log(name);
  
      age = 18   // 之前不存在age變數，這裡等同於var age = 19 即聲明全局變數age並賦值為18
  
      var  gender = "male"
      var  gender = "female" // 原記憶體釋放與新記憶體開闢，指針指向新開闢的記憶體
      console.log(gender)
  

  作用域案例：

   var num = 10; // 在函數外部聲明的變數, 全局變數
      function func(){
          num = 20; // 函數內部直接使用變數,則預設調用了全局的變數,
          var num = 20; // 函數內部使用var 或者 let聲明的變數則是局部變數
                    // 函數內部直接使用變數,則預設調用了全局的變數,
                    // 使用變數的時候,解釋器會在當前花括弧範圍值搜索是否有關鍵字var 或者 let 聲明瞭變數,如果沒有,則一層一層往外查找最近的聲明
                    // 如果最終查找不到,則直接報錯! 變數名 is not define!
          console.log("函數內部num：",num)
      }
  func();
  console.log("全局num：",num);
  

  

  

預編譯