ES6学习笔记

1.JavaScript包含3个部分，分别是ECMAScript、DOM和BOM。

ES5是ECMAScript的第5个版本，ES6是第6个版本。

ECMAScript是核心，它规定了语言的语法、类型、关键字、保留字、操作符、语句、对象；DOM文档对象模型；BOM是浏览器对象模型

2.ES5在以前的版本上增加了一些Array方法、Object方法、strict模式等；而ES6又在向下兼容的条件下新增了一些属性方法。因此ES6相对于ES5具有一些特性：

块级作用域，let关键字，const常量，赋值结构，字符串模板生成器等等

3.ES6教程：https://www.runoob.com/w3cnote/es6-tutorial.html

教程讲得非常详细，下面这张图做出来概述

图片来自菜鸟教程

ES6的详细学习（关于ES6进行具体的学习，笔记记录在下方）

1.let和const

let和const是在ES6中新增的两个关键字。let限定了变量只在代码块内使用，不会进行变量提升（而var会有变量提升）；const定义静态变量，使用const定义变量必须进行赋值，且静态变量不允许对其进行改变。

let使用在计数器中效果会很好：这里面使用let的循环，每次输出的j都是不同的变量

for (var i = 0; i < 10; i++) {

 setTimeout(function(){

   console.log(i);

 })

}

// 输出十个 10

for (let j = 0; j < 10; j++) {

 setTimeout(function(){

   console.log(j);

 })

}

// 输出 0123456789

ReferenceError: 参数错误，没有定义该变量

undefined：没有给变量赋值就使用，但是该变量已经存在

SyntaxError: 语法错误，如使用const定义变量却不对它赋值

2.解构赋值

剩余运算符:

//数组模型的解构

let [a, ...b] = [1, 2, 3];

//a = 1

//b = [2, 3]

//对象模型的解构

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

// a = 10

// b = 20

// rest = {c: 30, d: 40}

3.数据类型Symbol

在ES6中新增了数据类型Symbol，其用途有如下几点：

·作为对象的属性名，可以保证属性名不重复

·定义常量，保证常量是独特的

·Symbol.for（）类似于单例模式

·Symbol.keyFor()返回一个已经登记的Symbol类型值得key

相同参数 Symbol() 返回的值不相等

let sy = Symbol("KK");

console.log(sy);   // Symbol(KK)

typeof(sy);        // "symbol"

// 相同参数 Symbol() 返回的值不相等

let sy1 = Symbol("kk");

sy === sy1;       // false

4.关于set和Map

set对象存储的值总是唯一的

5.Proxy和Reflect

ES6中定义了Proxy和Reflect对API进行一些操作。基本方法和实例方法有点多，这里不做详细的记录，用到的时候去具体搞清楚。

6.ES6字符串

ES6中扩展了对字符串的处理方法，如判断是否包含子串，以前用indexOf(),ES6中有：

includes()

startsWith()

endWith()

//重复字符串

repeat()

//字符串补全

padStart()

padEnd()

//模板字符串，反引号'   可以用来定义多行字符串的

let string1 =  `Hey,

can you stop angry now?`;

console.log(string1);

// Hey,

// can you stop angry now?

//字符串插入变量和表达式$(),变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

//...

7.字符串数值

ES6在Math对象上新增了17个数学静态方法，这些方法通过Math调用；

......

8.ES6对象

对象字面量：允许对象属性直接写变量；函数名简写等

对象拓展运算符：拷贝对象的所有可遍历的属性；合并两个对象。需要注意的是，当拓展对象中和现有的对象有相同属性时，后面的会覆盖前面的

let person = {name: "Amy", age: 15};

let someone = { ...person, name: "Mike", age: 17};

someone;  //{name: "Mike", age: 17}

对象的新方法：

//复制源对象的所有可枚举对象

Object.assign(target, source_1, ···)

//比较两个值是否严格相等

Object.is(value1, value2)

9.ES6数组

包含一些数组的操作方法，如数组的创建、遍历、包含、数组缓冲区、定型数组等

10.ES6函数

在参数和箭头函数方面做了扩展。例如可以定义不定长度的参数，在回调函数中使用箭头函数可以解决使用this的问题（具体的问题，还有使用的注意点要看一下教程，教程中很清晰）

11.迭代器

迭代器是ES6中引入的遍历机制，可以通过Symbol.itertor创建迭代器进行遍历。

12.class类

13.ES6模块

基本的用法：

/*-----export [test.js]-----*/

let myName = "Tom";

export { myName as exportName }

/*-----import [xxx.js]-----*/

import { exportName } from "./test.js";

console.log(exportName);// Tom

export defualt命令：

var a = "My name is Tom!";

export default a; // 仅有一个

export default var c = "error";

// error，default 已经是对应的导出变量，不能跟着变量声明语句

import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

14.ES6 Promise对象

Promise是一个对象，用来进行异步编程。Promise有三个状态，分别是pending（正在进行），fulfilled（成功），rejected（失败）；Promise的状态只能由pending转向fulfilled或者rejected。fulfilled和rejected都是属于resolved状态。

15.Generator函数

该函数可以通过关键字yeild将函数执行流挂起，以实现异步操作。

在函数名前面加上*表示该函数是Generator函数，在函数内部使用yeild关键字来定义函数内部的状态对象。

通过.next()方法遍历对象，当next()方法不传入参数的时候，yeild表达式的返回值是undefiend，当next()方法有传入参数时，该参数会作为上一步yeild的返回值。具体的例子如下：

function* sendParameter(){

   console.log("strat");

   var x = yield '2';

   console.log("one:" + x);

   var y = yield '3';

   console.log("two:" + y);

   console.log("total:" + (x + y));

}

var sendp1 = sendParameter();

sendp1.next();

// strat

// {value: "2", done: false}

sendp1.next();

// one:undefined

// {value: "3", done: false}

sendp1.next();

// two:undefined

// total:NaN

// {value: undefined, done: true}

next传参

var sendp2 = sendParameter();

sendp2.next(10);

// strat

// {value: "2", done: false}

sendp2.next(20);

// one:20

// {value: "3", done: false}

sendp2.next(30);

// two:30

// total:50

// {value: undefined, done: true}

16.async函数

async是ES7才有的，与Promise和Generator有很大关联。

async函数返回一个Promise对象，可以通过then添加回调函数；

async函数执行时可能会遇到await表达式，这时会将触发的异步操作执行完毕之后再继续执行async函数；

await关键字在async函数内部有效，外部会报语法错误