ES6

ECMAScript6

let和const

let命令：用来声明一个变量，和var非常类似

const命令：用来声明一个常量，常量就是不可以变化的量

//用let声明变量的注意事项

1、使用let声明的变量，所声明的变量只在命令所在的代码块内有效

2、使用let命令声明的变量在域解析的时候不会被提升

3、let不允许在同一个作用域下声明已经存在的变量

//let在for循环中的应用

在循环语句之内是一个父作用域，在循环体之中是一个子作用域

//const命令同样有上面let的1、2、3条特点，除此之外，在使用const声明常量的时候需要注意的两点：

1、声明的时候必须赋值

2、声明的变量储存简单的数据类型时候不可改变其值，如果储存的是对象，那么引用不可以被改变，至于对象里面的数据如何变化，是没有关系的

变量的解构赋值

本质上就是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋予相应的值。

结构赋值主要分为：

1、数组的解构赋值

2、对象的结构赋值

3、基本类型的解构赋值

null和undefined不能进行解构赋值

数据结构Set

集合的基本概念：集合是由一组无序且唯一（即不能重复）的项组成的。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中

特点：key和value相同，没有重复的value

Set不允许有重复的数据

ES6提供了数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值

1、如何创建一个Set

const s = new Set（[1，2，3]）；

console.log（s）;

2、Set 类的属性

console.log（s.size）；

3、Set类的方法

1）set.add（value）添加数据，返回Set结构本身

2）set.delete（value）删除指定数据，返回一个布尔值，表示删除是否成功

3）set.has（value）判断改值是否为Set的成员，返回一个布尔值

4）set.clear（）清除所有数据，没有返回值

5）keys（）返回键名的遍历器

6）values（）返回键值的遍历器

7）entries（）返回键值对的遍历器

8）forEach（）使用回调函数遍历每个成员

forEach（function（value，key，set）{}）

思考：如何利用Set数据结构为数组进行去重？

数据结构Map

字典：是用来存储不存在key的Hash结构。不同于集合（Set）的是，字典使用的是[键，值]的形式来储存数据的。

JavaScript的对象（Object：{}）只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串-值”的对应，Map提供了“值-值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

1、如何创建一个Map

const map = new Map([

['a'，1]，

['b'，2]

])；

console.log(map);

2、Map类的属性

console.log（map.size）；

3、Map类的方法

1）set（key，value）设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。

2）get（key）get方法读取key对应的键值，如果找不到key，返回undefined

3）delete（key）删除某个键，返回true。如果删除失败，返回false

4）has（key）方法返回一个布尔值，表示某个键是否在当前Map对象之中

5）clear（）清除所有数据，没有返回值

6）keys（）返回键名的遍历器

7）values（）返回键值的遍历器

8）entries（）返回键值对的遍历器

9）forEach（）使用回调函数遍历每个成员

4、Map在使用过程中的一些注意事项

1）NaN本身不相等，但map中认为NaN是同一个键

map.set（NaN，10）.set（NaN，100）；

console.log（map）；

2）引用数据类型比较的是实际上是它的内存地址，而不是它们的值

内存地址不一样，则视为两个键

map.set（{}，'x'）.set（{}，'y'）；

console.log(map);

console.log({}==={});

3）map里面的key的排列顺序是按照添加顺序

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());

Iterator的遍历过程：

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

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

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

不断调用指针对象的next方法，直到它指向数据结构的结束为止。

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

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

const arr = [ 1, 2, 3];

const set = new Set([ 'a', 'b', 'c']);

const map = new Map([[ 'a', 1]]);

const itArr = arr[ Symbol. iterator]();

const itSet = set[ Symbol. iterator]();

const itMap = map[ Symbol. iterator]();

console. log( itArr);

console. log( itSet);

console. log( itMap);

console. log( itSet. next());

console. log( itSet. next());

console. log( itSet. next());

console. log( itSet. next());

const obj = {};

console. log( obj[ Symbol. iterator]);

3、具备iterator接口的数据结构都可以进行如下操作：

- 解构赋值

- 扩展运算符

let str = 'lwl';

let arrStr = [ ... str];

console. log( arrStr);

const arr2 =[{}, 1, 'a', 1, 'a', 'b',[]];

console. log([ ...new Set( arr2)]);

4、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);

}

思考：如何给一个不具备iterator接口的数据结构部署一个iterator接口？

class的基本使用

JS语言的传统方法是通过构造函数，定义并生成新对象，是一种基于原型的面向对象系统。这种写法跟传统的面向对象语言（比如C++和java）差异很大，很容易让新学习这门语言的人感到困惑。所以，在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。

class Study{

constructor( a, b){

this. a = a;

this. b = b;

return this;

}

print(){

console. log( this. a + '' + this. b);

}

};

const study = new Study( 'hello', 'world'). print();

            console. log( typeof Study);

1、Study中的constructor方法是构造方法，this关键字则代表实例对象。也就是说，ES5的构造函数Study，对应ES6的Study这个类的构造方法。

2、Study这个类除了构造方法，还定义了一个print方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

3、构造函数的prototype属性，在ES6的“类”上面继续存在。而且类的所有方法都定义在类的prototype属性上面。

4、定义在类中的方法都是不可以枚举的。

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

6、生成类的实例对象的写法，与ES5完全一样，也是使用new命令。如果忘记加上new，像函数那样调用Class，将会报错。

class的继承

extends、static、super

Symbol数据类型

1、什么是Symbol?

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

基本数据类型：Null    Undefined    Number    Boolean    String    Symbol

引用数据类型：Objcet

let s1 = Symbol();

console. log( typeof s1);

Symbol函数不能使用new否则会报错，原因在于symbol是一个原始类型的值，不是对象。

Symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了在控制台控制，或者转为字符串的时候，比较容易区分

2、Symbol数据类型的转换

3、作为对象的属性名

4、不能被for..in循环遍

内置对象的扩展

1、字符串的扩展

//模板字符串

let flag = true;

let html = `<ul>

<span> ${ '首页' } </span>

<span></span>

<span></span>

<span class=" ${ flag ? 'show' : 'hide' } "></span>

<span></span>

</ul>`

console. log( html);

1）repeat

2）includes（）startsWith    endsWith（）

2、数组的扩展

Array.from（）

Array.of（）

find（）    findIndex（）

fill（）

3、对象的扩展

对象的简洁表示：

let a = 1;

// const obj = {

// a:a

// };

// const obj = {a};

// console.log(obj);

const obj = {

fn: function(){

console. log( 1);

},

fn2(){

console. log( 2);

}

}

obj. fn();

obj. fn2();

Object.is()

console. log( Object. is( NaN, NaN));

console. log( Object. is( + 0, - 0));

Object.assign()

用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

let obj1 = {a: 1};

let obj2 = {a: 2,b: 3};

let obj3 = {c: 'abc'};

Object. assign( obj1, obj2, obj3);

console. log( obj1);

函数的扩展，箭头函数

函数的扩展：

1、为函数参数指定默认值

// function fn(a,b){

// a = a || 10;

// b = b || 20;

// console.log(a+b);

// }

// fn();

// fn(0,10);

function fn( a = 10, b = 20){

console. log( a + b);

}

fn();

fn( 0, 10);

2、函数的rest参数

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

function sum( a, ... arr){

var res = a;

for( var i = 0; i < arr. length; i ++){

res += arr[ i];

}

console. log( res);

}

sum( 10, 1, 2, 3, 4, 5);

3、箭头参数

const fn = a => a;

const fn2 = function( a){

return a;

};

console. log( fn( 1));

console. log( fn2( 2));

//第一个等同于第二个

const fn = ( a, b) => a + b;

console. log( fn( 1, 2));

const fn = ( a, b) =>{

a = a * 2;

b = b * 2;

return a + b;

};

console. log( fn( 1, 2));

1）箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义时所在环境的对象，而不是使用时所在环境的对象。

不能给箭头函数使用call apply bind 去改变其内部的this指向

2）箭头函数体内没有arguments对象，如果要用，可以用Rest参数代替

3）不可以当作构造函数，不可以使用new命令，否则会抛出一个错误

4）箭头函数不能用作Generator函数

异步操作之Promise

Promise：是ES6中新增的异步编程解决方案，体现在代码中它是一个对象，可以通过Promise构造函数来实例化

new Promise(cb) ===>实例的基本使用    Pending    Resolved    Rejected

两个原型方法：

Promise.prototype.then()

Promise.prototype.catch()

两个常用的静态方法：

Promise.all()

Promise.resolve()

new Promise(cb)

pending(进行中)===>Resolved(已完成)

pending(进行中)===>Rejected(已失败)