夯實 JS 基礎

函式相關

預編譯/作用域/閉包

原型/原型鏈/繼承

陣列/物件的操作方法

DOM物件相關

oninput的使用

	//一個能監測元素是否處在輸入狀態的屬性	
	<input type="text" oninput="function">//不僅僅是只能使用在有輸入的HTML元素上
	object.oninput=function(myScript)//在js中也是能對物件使用的（能用在哪些物件上待測驗）

能對陣列進行操作的函式方法

1. concat: ? concat()

2. constructor: ? Array()

3. copyWithin: ? copyWithin()

4. entries: ? entries()

5. every: ? every()

6. fill: ? fill()

7. filter: ? filter()

   2020.9.2

   最近有使用，使用它對陣列物件的內容進行了過濾

   	let arrObj=[
   	{id:'第一個',number:1},
   	{id:'第二個',number:2},
   	{id:'第三個',number:3}
   	]
   	arrObj.filter(item=>{
   	return item.number>2
   	})
   	/*這里用一個判斷條件，滿足則回傳該item,
   	fliter是對陣列中的每一個元素做一次判斷,
   	并且最后的回傳值是過濾后的arrObj陣列*/
   	console.log(arrObj)//結果：[{id:'第三個',number:3}]
   

8. find: ? find()

9. findIndex: ? findIndex()

10. flat: ? flat()

11. flatMap: ? flatMap()

12. flatten: ? flatten(/* depthArg = 1 */)

13. forEach: ? forEach()

14. includes: ? includes()

15. indexOf: ? indexOf()

16. join: ? join()

17. keys: ? keys()

18. lastIndexOf: ? lastIndexOf()

19. length: 0

    2020.9.2

    /*let arr = new Array()
    let arr = new Array(4)
    let arr = new Array('a','b','c')
    let arr = []
    let arr = [4]*/
    let arr = ['a','b','c']
    console.log(arr.length)//結果3
    arr.length=6
    console.log(arr.length)//結果6
    

20. map: ? map()

    2020.9.11

    超詳細的Map說明

    JS 資料結構-Map:映射 創建Map 常用Map方法<<=(點擊跳轉原博客)

    Map

    　　JavaScript 中的物件（Object），本質上是鍵值對的集合，但是只能用字串來做鍵名，這給它的使用帶來了很大的限制，

    　　為了解決這個問題，ES6 提供了Map資料結構，它類似于物件，也是鍵值對的集合，但是“鍵”的范圍不限于字串，各種型別的值（包括物件）都可以當作鍵，

    　　 也就是說，Object 結構提供了“字串 - 值”的對應，Map 結構提供了“值 - 值”的對應，是一種更完善的 JSON 資料結構的實作，

    　　如果你需要更“寬松”的“鍵值對”資料結構，Map 比 Object 更合適，

    　　特性：鍵值對=>任意型別=>更好的處理有映射需求的問題，

    創建 Map

    　　Map 本身是一個建構式，在使用建構式時，通過傳入引數進行資料初始化，

    let m = new Map();
    

    　　Map 函式也可以接受一個陣列（或類似陣列的物件）作為引數，用來進行初始化，但是跟 Set 不同的是，Map 中該陣列中的成員是一對對表示鍵值對的陣列，

    let m = new Map([["name", "zhangsan"], ["age", 20]]);
    

    Map的屬性

    　　常用的屬性就一個：size 　　回傳 Map 實體的成員總數，

    　　

    let m = new Map([["name", "zhangsan"], ["age", 20]]);
    console.log( m.size );//2
    

    Map的方法

    　　Map 實體的方法分為了兩大類：操作用法（用于資料操作）和遍歷方法（用于遍歷資料），

    操作方法:

    set(key, value)　　 添加或修改資料，設定 key 所對應的鍵值，并回傳 Map 結構本身

    ---

    get(key)　　　　　 獲取資料，讀取 key 對應的鍵值，如果找不到 key，回傳 undefined

    ---

    has(key)　　　　　查看是否存在某個資料，回傳一個布林值，

    ---

    delete(key)　　　　洗掉資料，洗掉成功回傳 true

    ---

    clear()　　　　　　清除所有資料，沒有回傳值

    ---

    let map = new Map([["name", "zhangsan"], ["age", 20]]);
    // 設定 name 的值為 lisa
    map.set("name", "lisa");
    console.log( map ); // Map(2) {"name" => "lisa", "age" => 20}
    // 獲取 name 對應的值
    let getMap = map.get("name");
    console.log( getMap ); // lisa
    // 查看是否存在 age
    let hasMap = map.has("age");
    console.log( hasMap ); // true
    // 洗掉 age 鍵值對
    let delMap = map.delete("age");
    console.log( delMap ); // true
    // 清空所有資料
    map.clear();
    console.log(map); // Map(0) {}
    

    　　

    遍歷方法：

    　　　　　　Map 提供了三個遍歷器生成函式和一個遍歷方法:

    　　　　　　keys()　　　　 回傳一個鍵名的遍歷器

    　　　　　　values()　　　 回傳一個鍵值的遍歷器

    　　　　　　entries()　　　 回傳一個鍵值對的遍歷器

    　　　　　　forEach()　　 使用回呼函式遍歷每個成員

    let num = new Map([["one", 1], ["two", 2], ["three", 3]]);
    for(let key of num.keys()){
    console.log(key);
    }
    // one
    // two
    // three
    for(let value of num.values()){
    console.log(value);
    }
    // 1
    // 2
    // 3
    for(let item of num.entries()){
      console.log(item[0], item[1]);
    }
    // one 1
    // two 2
    // three 3
    // 將上面代碼通過解構優化
    for(let [key, value] of num.entries()){
      console.log(key, value);
    }
    // one 1
    // two 2
    // three 3
    num.forEach((value, key) => {
     console.log(value, key)
    })
    // 1 one
    // 2 two
    // 3 three
    

    與其他資料結構互換

    Map 轉為陣列

    　　Map 轉為陣列最方便的方法，就是使用擴展運算子 ... ，

    　　　　

    let myMap = new Map();
    myMap
    .set(true, "真")
    .set(false, "假");//因為每次會回傳新Map，可以連著寫
    console.log(myMap); // {true => "真", false => "假"}
    let newMap = [...myMap];
    console.log(newMap); // [[true, "真"], [false, "假"]]
    

    陣列轉為 Map

    　　將陣列傳入 Map 建構式中，就可以轉為 Map，

    let arr = [[true, "真"], [false, "假"]];
    let map = new Map(arr);
    console.log(map); // {true => "真", false => "假"}
    

    Map 轉為物件

    　　如果 Map 所有的鍵都是字串，它就可以轉為物件，

    function strMapToObj(strMap){
      let obj = {};
      for(let [k, v] of strMap){
          obj[k] = v;
      }
      return obj;
    }
    let myMap = new Map().set("green","綠").set("red","紅");
    console.log(myMap); // {"green" => "綠", "red" => "紅"}
    console.log( strMapToObj(myMap) ); // { green: "綠", red: "紅" }         
    

    物件轉為 Map

    function objToStrMap(obj){
      let strMap = new Map();
      for(let item in obj){
         strMap.set( item, obj[item] )
      }
      return strMap;
    }
    let obj = { name: "zhangsan", age: 20 };
    console.log( objToStrMap(obj) );
    // {"name" => "zhangsan", "age" => 20}    
    

21. pop: ? pop()

22. push: ? push()

23. reduce: ? reduce()

24. reduceRight: ? reduceRight()

25. reverse: ? reverse()

26. shift: ? shift()

27. slice: ? slice()

28. some: ? some()

29. sort: ? sort()

30. splice: ? splice()

31. toLocaleString: ? toLocaleString()

32. toString: ? toString()

33. unshift: ? unshift()

34. values: ? values()

35. Symbol(Symbol.iterator): ? values()

ES 6 的新特性

ES 6 面向物件

ES 6 異步編程

標籤：JavaScript

上一篇：循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼

下一篇：資料庫系統函式的注入利用（初識）