ES6--map對象，for of 遍歷，class類，extends繼承

ES6的map對象非數組的map（）方法

通俗解釋  map是用來存儲東西的，類似obj

寫法

舉例：

var map = new Map();
  map.a = 1
  map.b = 2
 console.log(map) 

 

再回頭看看數組，同樣的添加屬性

var arr = [];
  arr.a = 1
  arr.b = 2
 console.log(arr) 

 

 

兩者很相似

 由此得出結論：map對象，作為被new出來的引用值，通過打點的方式添加屬性，length卻是0，說明屬性被直接添加到了map對象上去了，而實際的存儲值卻沒有，

可以理解為，打點添加，只是在給map對象添加屬性，但是不作為map對象的子元素

 

關於map對象的增刪查改

 var map = new Map(); 
 map.set("a","123");
 map.set("b","456");  //增與改
 console.log(map)    
 console.log(map.get("a")) //查

刪

var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
 map.delete("a")  //刪
 delete map.a  //刪屬性
console.log(map) 

---

 

map對象的遍歷

此對象的遍歷用for循環肯定是不可行的

試一下for in

var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
for(var key in map){
    console.log(key)  //a
    console.log(map[key]) //1
}

結果表示利用 for in 循環來遍歷屬性還是挺好用的

---

 

 可以用ES6新增的for of

for of  循環對象的話，瀏覽器會告訴你，對象不可重復

可以遍歷數組的

但是主要是用來循環map對象的

如下：

 var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
for(var key of map){
    console.log(key)  //["a", "123"]  ["b", "456"]
}

key值以數組形式返回

 

既然key值是數組，那又有了新玩法： 

var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
for(var [key,value] of map.entries()){
    console.log(key)    //a  b
    console.log(value)  //123  456
}

補充 ：map.entries()為map對象的全寫

 

如果僅僅只想遍歷value呢？

map換map.values()

如下玩法：

 var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
for(var val of map.values()){
    console.log(val)  //123  456
}

如果僅僅只想遍歷key呢？

map換map.keys()
如下玩法：

var map = new Map(); 
 map.a = 1
 map.set("a","123");
 map.set("b","456")
for(var key of map.keys()){
    console.log(key)  //a b
}

 

calss（類）

傳統的javascript中只有對象，沒有類的概念。它是基於原型的面向對象語言。原型對象特點就是將自身的屬性共享給新對象。

class Person{//定義了一個名字為Person的類
    constructor(name,age){//constructor是一個構造，用來接收參數
        this.name = name;//this代表的是實例對象
        this.age=age;
    }
    say(){//這是一個類的方法，注意千萬不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"歲了";
    }
}

let p1 = new Person("jack",18)  //創建實例對象
console.log(p1.say())    //我的名字叫jack今年18歲了

注意：

1.類聲明不需要加function

2.方法不在constructor里

 繼承

通過extends來繼承

 class Person{//定義了一個名字為Person的類
    constructor(name,age){//constructor是一個構造方法，用來接收參數
        this.name = name;//this代表的是實例對象
        this.age=age;
    }
    say(){      //類的方法
        return  "我的名字叫" + this.name+"今年"+this.age+"歲了";
    }    
}
let p1 = new Person("jack",18)
 class Son extends Person {}
 let son =new Son("tony",20)
 console.log(son.name)  //tony

 繼承例子2：

class Person{
    constructor(name,age){
        this.name = name;
        this.age=age;
    }
    say(){
        return  "我的名字叫" + this.name+"今年"+this.age+"歲了";
    }
}
let p1 = new Person("jack",18)

class Son extends Person {
     constructor(name,age,color){
          super();   //寫繼承，必須加上的，而且是加在this的上面      
      this.name = name;
      this.age = age;
      this.color  = color;

     }
 }
 let son =new Son("tony",20,"black")
 console.log(son.name)  //tony
 console.log(son.say())  //我的名字叫tony今年20歲了