es6深入了解

Iterator（遍历器）

js中一些数据类型是自带迭代器的，如：String、Array、Set、Map等，而还有一些是不自带迭代器的，如：Object。 由于ES6及以上的一些方法的操作是需要数据拥有迭代器才可以进行操作的，如：…展开运算符，但是Object不自带iterator，所以想要进行展开操作的话可以通过自定义迭代器的方式来进行。

自定义迭代器（遍历器）

  1. obj = {}
  2. obj[Symbol.iterator] = function* () {
  3.   yield [1, 11]
  4.   yield [2, 22]
  5.   yield [3, 33]
  6. }
  9. const a = [...obj]
  10. // Array(3) [ (2) […], (2) […], (2) […] ]

image.png

class

  1. class Person{
  2.    constructor(data) {
  3.        this.x = data;
  4.    }
  5.    test(){
  6.        console.log("test");
  7.    }
  8.    static say(){
  9.        console.log("say hello");
  10.    }
  11. }
  12. class Man extends Person{
  13.    constructor(){
  14.        super();//es6规定  在子类继承父类时，constructor内一定要调用一次super()方法，否则会报错,super()调用必须写在第一行
  15.        this.arr = [];
  16.    }
  17.    set menu(data){//在实例化后给menu赋值时会调用此函数
  18.        this.arr.push(data);
  19.    }
  20.    get menu(){ // 在实例化后取menu时会调用
  21.        return this.arr;
  22.    }
  23.    static tell(){//静态方法 可以不用实例化直接调用，静态方法不能被实例化,但可以被子类继承
  24.        console.log("hello");
  25.    }
  26.    test(){
  27.        super.test()  //调用父类的普通方法
  28.        console.log("111");
  29.    }
  30. }
  31. Man.tell() //hello
  32. Man.say(); // say hello 被子类继承
  33. var xiaowang = new Man();
  34. xiaowang.test(); // test 111
  35. xiaowang.menu = "juzi";
  36. console.log(xiaowang.menu); //Array [ "juzi" ]

注意点：
1.es6规定 在子类继承父类时，constructor内一定要调用一次super()方法，否则会报错,super()调用必须写在第一行。
2.在实例化后给menu赋值时会调用set menu函数，在实例化后取menu时会调用 get menu函数。
3.静态方法 可以不用实例化直接调用，静态方法不能被实例化,但可以被子类继承
4.super.test() 可以在任意对象方法中调用父类的普通方法 ，但super()只能在子类的构造函数中调用，super指代对象时 如：super.a = 123,
此时的super指代父类的protype即Father.protype
**

Set

简介：Set是es6中新出的一种数据结构，是除array，object之外的第三种数据结构，它有点类似于数组，但和数组又有区别 其特点是实例化出来的对象中没有重复的成员，每个值都是唯一的，是一个构造函数，需要new

Set 结构的实例有以下属性：**

  • Set.prototype.constructor：构造函数，默认就是Set函数。
  • Set.prototype.size：返回Set实例的成员总数。
  • Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
  • Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
  • Set.prototype.clear()：清除所有成员，没有返回值。
    1. let arr = new Set("Hello");
    2.   arr.delete("o"); //删除数据“o”
    3.   console.log(arr);//Set(3) [ "H", "e", "l" ]
    4.   arr.clear(); //清除所有数据
    5.   console.log(arr);//Set []
    6.   arr.add('🍎'); //添加数据
    7.   arr.add('🍎'); //添加相同数据
    8.   arr.add("🍌"); //添加不同数据
    9.   console.log(arr);// Set [ "🍎", "🍌" ],证明相同数据不能被添加
    10.   console.log(arr.has("🍎"));//判断对象中是否有该数据  true
    11.   for(var i of arr){ //Set中含有Iterator接口，因此可以被for...of循环遍历
    12.       console.log(i);
    13.   }
    注意： Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
    例如： ```javascript const set = new Set([1, 2, 3, 4, 4]); […set] // [1, 2, 3, 4]

// 去除数组的重复成员 […new Set(array)]

上面的方法也可以用于，去除字符串里面的重复字符。 […new Set(‘ababbc’)].join(‘’) // “abc”

Array.from方法可以将 Set 结构转为数组。 const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);

  2. <a name="GNZx2"></a>
  3. ### Map
  4. **简介：除array、object、set之外的第四种数据结构，es6新出的，与对象的形式差不多， 也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。**
  6. **ES5中 JavaScript 的对象（Object）, 本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制**
  7. ```javascript
  8. const data = {};
  9. const element = document.getElementById('myDiv');
  12. data[element] = 'metadata';
  13. data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。
**

ES6 Map方法

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

Map构造函数接受数组作为参数，实际上执行的是下面的算法。

const items = [
  ['name', '张三'],
  ['title', 'Author']];


const map = new Map(items);


items.forEach(
   ([key, value]) => map.set(key, value)
);
// [key, value] == item == ['name', '张三'] 数组解构

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • Map.prototype.keys()：返回键名的遍历器。
  • Map.prototype.values()：返回键值的遍历器。
  • Map.prototype.entries()：返回所有成员的遍历器。
  • Map.prototype.forEach()：遍历 Map 的所有成员。 ```javascript const map = new Map([ [‘F’, ‘no’], [‘T’, ‘yes’],]);

for (let key of map.keys()) { console.log(key);} // “F” // “T”

for (let value of map.values()) { console.log(value);} // “no” // “yes”

for (let item of map.entries()) { console.log(item[0], item[1]);} // “F” “no” // “T” “yes”

// 或者 for (let [key, value] of map.entries()) { console.log(key, value);} // “F” “no” // “T” “yes”

// 等同于使用map.entries() for (let [key, value] of map) { console.log(key, value);} // “F” “no” // “T” “yes”

> Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。

```javascript
const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],]);


[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]