ES6总结--Symbol、Set 和 Map 、Iterator、Class

最新推荐文章于 2022-12-01 22:30:06 发布

crli

最新推荐文章于 2022-12-01 22:30:06 发布

阅读量712

点赞数

分类专栏： JavaScript es6

本文链接：https://blog.csdn.net/liningaa/article/details/72626081

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

es6

6 篇文章 0 订阅

订阅专栏

1、Symbol

Symbol 值通过Symbol函数生成，表示独一无二的值，可用于对象的属性名，以保证不会与其他属性名产生冲突。
Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。
如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。

const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
sym // Symbol(abc)

Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

var s1 = Symbol('foo');
var s2 = Symbol('foo');

s1 === s2 // false

Symbol 值不能与其他类型的值进行运算，会报错。
Symbol 值可以显式转为字符串。

var sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

Symbol 值作为对象属性名时，不能用点运算符

var mySymbol = Symbol();
var a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

var a = {
  [mySymbol]: 'Hello!'
};
a[mySymbol] // "Hello!"

Symbol 值可定义一组常量，保证这组常量的值都是不相
Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名，方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值

var obj = {};
var a = Symbol('a');
var b = Symbol('b');

obj[a] = 'Hello';
obj[b] = 'World';

var objectSymbols = Object.getOwnPropertySymbols(obj);

objectSymbols
// [Symbol(a), Symbol(b)]

2、Set

Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构。
Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。
向Set加入值的时候，不会发生类型转换，所以5和”5”是两个不同的值。Set内部判断两个值是否不同，使用的算法类似于精确相等运算符（===），主要的区别是NaN等于自身，另外，两个对象总是不相等的

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

Array.from方法可以将 Set 结构转为数组。

const array = Array.from(new Set([1, 2, 3, 3, 5])) = [...new Set([1, 2, 3, 3, 5])];

Set 结构的实例有四个遍历方法，可以用于遍历成员。

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
需要特别指出的是，Set的遍历顺序就是插入顺序

let set = new Set(['red', 'green', 'blue']);

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法

Set.prototype[Symbol.iterator] === Set.prototype.values

for…of 、扩展运算符、数组的map和filter 等也可用于遍历Set

3、Map

Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

size属性返回 Map 结构的成员总数
set(key, value)方法设置键名key对应的键值为value，然后返回整个 Map 结构。
get(key)方法读取key对应的键值，如果找不到key，返回undefined。
has(key)方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
delete(key)方法删除某个键，返回true。如果删除失败，返回false。
clear()方法清除所有成员，没有返回值。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，包括0和-0，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

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

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
需要特别注意的是，Map 的遍历顺序就是插入顺序。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

for…of 、扩展运算符、数组的map和filter 等也可用于遍历Map

WeakSet、WeakMap

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 和WeakMap的成员只能是对象，而不能是其他类型的值。
其次，WeakSet 和WeakMap中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用
WeakSet和WeakMap没有size属性，没有办法遍历它的成员。不能遍历,是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet和WeakMap 的一个用处，是储存 DOM 节点

WeakSet 结构有以下三个方法。

add(value)、delete(value)、has(value)

WeakMap只有四个方法可用。

get()、set()、has()、delete()。

4、Iterator

Iterator接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for…of循环，任何数据结构只要部署Iterator（遍历器）接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）、使得数据结构的成员能够按某种次序排列。
凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

Iterator的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象（存在数值键名和length属性）、Set和Map结构。

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

字符串是一个类似数组的对象，也原生具有Iterator接口。

var someString = "hi";
typeof someString[Symbol.iterator]
// "function"

var iterator = someString[Symbol.iterator]();

iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }

下面是类似数组的对象调用数组的Symbol.iterator方法的例子

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

普通对象部署数组的Symbol.iterator方法，并无效果

let iterable = {
  a: 'a',
  b: 'b',
  c: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // undefined, undefined, undefined
}

解构赋值、扩展运算符、各种数组方法等都调用Iterator接口

并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

5、Class

Class类的数据类型就是函数，类本身就指向构造函数。
constructor方法，这就是构造方法，而this关键字则代表实例对象
事实上，类的所有方法都定义在类的prototype属性上面。
Class不存在变量提升
类的内部所有定义的方法，都是不可枚举的
类的属性名，可以采用表达式

//定义类
let Name = "li";
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';

  [Name]() {
    // ...
  }
}
typeof Point // "function"
Point === Point.prototype.constructor // true

在类的实例上面调用方法，其实就是调用原型上的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true
B.prototype.constructor === B // true

Object.assign方法可以很方便地一次向类添加多个方法。

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

另一种解决方法是使用箭头函数

class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

Class的继承

Class之间可以通过extends关键字实现继承

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

子类的proto属性，表示构造函数的继承，总是指向父类。
子类prototype属性的proto属性，表示方法的继承，总是指向父类的prototype属性。

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

class A {}

class B extends A {
  constructor() {
    super();
  }
}
super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。

作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。
super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。下面是一个继承Array的例子。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。父类的静态方法，可以被子类继承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function