es6学习总结

Posted 2020-10-16

本篇为阅读和学习《ECMAScript 6 入门》的总结笔记，仅摘取重要的点记录一下。

需要掌握的点

1.let与const

2.变量的解构赋值

3.数据结构set

4.数据结构map

5.iterator和for循环

6.class的使用

7.class的继承

8.Symbol数据类型

9.内置对象的扩展

10.函数的扩展

11.异步操作之promise

-----------------------------------分-----------------------割-------------------------线---------------------------------------------------

变量的解构赋值

基本概念：本质上就是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋予对应的值。
结构赋值主要分为：
1 数组的解构赋值
2 对象的结构赋值
3 基本类型的解构赋值

数据结构set

集合（set）：集合是由一组无序且唯一（即不能重复）的项组成的。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中。
特点：key 和 value 相同，没有重复的 value。
ES6 提供了数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

1.创建set

const s = new Set([1, 2, 3]);

2.set的属性

console.log(s.size); // 3

3.set的方法

set.add(value) 添加一个数据，返回Set结构本身
set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功
set.has(value) 判断该值是否为Set的成员，反回一个布尔值
set.clear() 清除所有数据，没有返回值
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员

s.add(‘a‘).add(‘b‘).add(‘c‘);
console.log(s.delete(‘a‘));
console.log(s.has(‘a‘)); // false
console.log(s.has(1)); // true
console.log(s.keys());
console.log(s.values());
console.log(s.entries());
s.forEach(function (value, key, set){
  console.log(value + ‘ miaov‘);
});

数据结构map

字典（map）：是用来存储不重复key的Hash结构。不同于集合(Set)的是，字典使用的是[键，值]的形式来储存数据的。
javascript 的对象（Object:{}）只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

1.创建一个Map

const map = new Map([
  [‘a‘, 1],
  [‘b‘, 2]
]);

2.Map类的属性

console.log(map.size);

3.Map类的方法

set(key, value) 设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键
get(key) get方法读取key对应的键值，如果找不到 key，返回undefined
delete(key) 删除某个键，返回true。如果删除失败，返回false
has(key) 方法返回一个布尔值，表示某个键是否在当前Map对象之中
clear() 清除所有数据，没有返回值。
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员

Iterator和for...of循环

基本概念：在ES6中新增了Set和Map两种数据结构，再加上JS之前原有的数组和对象，这样就有了四种数据集合，平时还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象等。这样就需要一种统一的接口机制，来处理所有不同的数据结构。
Iterator就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作，而且这种遍历操作是依次处理该数据结构的所有成员。

Iterator遍历器的作用：
- 为各种数据结构，提供一个统一的、简便的访问接口。
- 使得数据结构的成员能够按某种次序排列。
- ES6新增了遍历命令for...of循环，Iterator接口主要供for...of消费。

1.手写Iterator接口

const arr = [1, 2, 3];

function iterator(arr){
  let index = 0;
  return {
    next: function (){
      return index < arr.length ? 
      {value: arr[index++], done: false} :
      {value: undefined, done: true};
    }
  }
}

const it = iterator(arr);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

2.Iterator的遍历过程

- 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
- 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
- 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
- 不断调用指针对象的next方法，直到它指向数据结构的结束位置。
每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

3.凡是具有 Symbol.iterator 属性的数据结构都具有 Iterator 接口

4.具备iterator接口的数据结构都可以进行如下操作
- 解构赋值
- 扩展运算符

for...of循环

const ofArr = [1, 2, 3, 4];

for(let i of ofArr){
  console.log(i);
}

const m = new Map();

m.set(‘a‘, 1).set(‘b‘, 2).set(‘c‘, 3);
for(let [key, value] of m){
  console.log(key, value);
}

class

在ES6中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

class PeriHe {
  constructor(a, b){
    this.a = a;
    this.b = b;
    return this;
  }
  print(){
    console.log(this.a + ‘ ‘ + this.b);
  }
};

const PeriHe = new PeriHe(‘hello‘, ‘world‘).print();

1. PeriHe中的constructor方法是构造方法，this关键字则代表实例对象。也就是说，ES5的构造函数PeriHe，对应ES6的PeriHe这个类的构造方法。
2. PeriHe这个类除了构造方法，还定义了一个print方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。
3. 构造函数的prototype属性，在ES6的“类”上面继续存在。而且类的所有方法都定义在类的prototype属性上面。
4. 定义在类中的方法都是不可以枚举的。
5. constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
6. 生成类的实例对象的写法，与ES5完全一样，也是使用new命令。如果忘记加上new，像函数那样调用Class，将会报错。

class 的继承等相关知识

extends、 static、 super

Symbol

表示独一无二的值。它是 JS 中的第七种数据类型。

基本的数据类型： Null Undefined Number Boolean String Symbol
引用数据类型：Object

let s1 = Symbol();
console.log(typeof s1); // ‘symbol‘

Symbol 函数前不能使用 new 否则会报错，原因在于 Symbol 是一个原始类型的值，不是对象。
Symbol 函数接收一个字符串作为参数，表示对Symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分.

1.Symbol 数据类型的转换

console.log(String(Symbol(‘PeriHe‘))); // Symbol(PeriHe)
console.log(Symbol(‘leo‘).toString()); // Symbol(leo)

console.log(!!Symbol()); // true
console.log(Number(Symbol()));

console.log(Symbol(‘momo‘) + ‘pangzi‘);
console.log(Symbol(‘momo‘) * 100);  不能做任何运算。

2.作为对象的属性名

let yyy = Symbol(‘yyy‘);

const obj = {};

obj[yyy] = ‘hello‘;

console.log(obj);

console.log(obj[yyy]);

let ss = Symbol(‘ss‘);

const data = {
  [ss]: ‘PeriHe‘
};

console.log(data);

console.log(data[ss]);

3.不能被for...in循环遍，虽然不能被遍历，但是也不是私有的属性，可以通过Object.getOwnPropertySymbols方法获得一个对象的所有的Symbol属性。

console.log(Object.getOwnPropertySymbols(data)); // [Symbol()]

console.log(data[Object.getOwnPropertySymbols(data)[0]]);

函数的扩展

1 为函数参数指定默认值

2 函数的 rest 参数

rest 参数形式为（“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

3 箭头函数

- 箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义时所在环境的对象，而不是使用时所在环境的对象。
- 不能给箭头函数使用 call apply bind 去改变其内部的this指向
- 不可以当作构造函数，不可以使用new命令，否则会抛出一个错误。

数组的扩展

对象的扩展

字符串的扩展