一、ES6基础

1. ECMAScript 6 简介

ECMAScript(ES6) 是JavaScript语言的下一代标准，已经在2015年6月正式发布了；在 JavaScript 的基础上做了重大的更新，提供了更优雅的语法和特性。

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。日常场合，这两个词是可以互换的。那为什么不叫 JavaScript 为换名字了呢？原因如下：

1. 商标，1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。根据授权协议，只有Netscape公司(Javascript 的创造者)可以合法地使用JavaScript这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。
2. 想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

2. ES6 新特性

let 和 const

ES6提供了两种新的声明变量的方式：let 和 const。其中let 和 const 相比于 var 声明的变量有块作用域，let 和 const 只在于当前的块作用域中有效。而 var 声明的变量是在函数作用域内有效。
没有块级作用域，会出现很多不合理的情况。
1、内层变量可能会覆盖外层变量。例如：

var n = 5;      
function f1() {
  console.log(n); 
  if (true) {
    var n = 10;
  }
}
f1();  //undefined

发生了变量提升，导致内层的n变量覆盖了外层的n变量。 而块级作用域不存在变量提升 ，let所声明的变量一定要在声明后使用，否则就会报错。上述代码如果使用let进行声明，则会报错。

let n = 5;      
function f1() {
  console.log(n); 
  if (true) {
    let n = 10;
  }
}
f1();  //报错

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。这样可以减少运行时的错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。
2、用来计数的循环变量会泄露为全局变量。例如下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

其中变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。
如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

变量的解构赋值

按照一定的模式，从数组或对象中提取值，对变量进行赋值的操作。

数组的解构

var [a,b,c] = [1,2,3] // 结果 a=1 b=2 c=3
var [a,[b,c]] = [1,[2,3]] // 结果 a=1 b=2 c=3

//解构不成功
var [a] = [];  // a = undefined   
var [a, b] = [1]; //a=1 b=undefined

//不完全解构
var [a] = [1,2]; //a=1

//默认值
var [a=1] = [] //a=1

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

对象的解构

var { b, a } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

字符串拓展

模版字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串（类似 pre 标签的作用），或者在字符串中嵌入变量。

// 普通字符串 想要换行需要加上 '\n'
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

// 字符串中嵌入变量
var name = "ac", time = "today";
`Hello ${name}, how are you ${time}?` // Hello ac, how are you today? 

rest 展开运算符

function example(...values){
    console.log(values)// console: [1,2,3,4]
}

example(1,2,3,4) 


var a = [1,2,3]

var b = [...a,4,5,6] //b = [1,2,3,4,5,6]

箭头函数

ES6 提供了新的方式 => 来定义函数

var func = parm => parm
等同于
var func = function (parm){
    return parm
}

如果函数没有参数或有多个参数，那么：

var func = () => //some code
等同于
var func = function (){
    some code
}

var func = (parm1,parm2) => //some code
等同于
var func = function (parm1,parm2){
    some code
}

如果箭头函数的函数体只包含一行代码，则可以不需要写大括号以及 return 语句返回（如果有返回值）

var sum = (num1,num2) => num1+num2
等同于
var sum = (num1,num2) => {return num1+num2}
等同于
var sum = function(num1,num2){return num1+num2}

箭头函数使得表达更加简洁

[1,2,3].map( item=> 2 * item)
等同于
[1,2,3].map(function(item){
    return item * 2
})

[1,3,2].sort((a,b) => a - b)

二、面向对象基础

什么是面向对象编程

• 把一组数据结构和处理它们的方法组成对象(Object)；
• 把相同行为的对象归纳为类(Class), 通过类的封装(encapsulation)隐藏内部细节；
• 通过继承(inheritance)实现类的特化(specializetion)/泛化(generalization),；
• 通过多态(polymorphism)实现基于对象类型的动态分派。

面向对象的好处？

1. 接近人的思维，符合人类对现实世界的认知；
2. 封装特性可以使开发者不必在意内部的具体实现，更方便互相协作；
3. 继承特性可以减少代码冗余，实现代码复用；
4. 多态特性令子类相比父类有不同的行为，这是非常接近现实的；

封装

1、字面量模式

var Cat = {
　name : '',
　color : ''
} 

这样的方法的缺点是如果多生成几个实例，写起来就非常麻烦。

2、工厂模式

function Cat(name,color) {
　return {
　   name:name,
　   color:color　　
  }
}

这样写可以解决生成多个实例的问题，比较方便，但是调用之后实例的类型只是一个普通的对象，而不是一个具体的类型。

3、构造函数模式

function Cat(name,color){
   this.name=name;
   this.color=color;
   this.eat = function(){};
}
var cat1 = new Cat("big","yellow");
var cat2 = new Cat("small","black");

这样解决了实例不为一个特定类型的问题，使用instanceof运算符可以验证原型对象与实例对象之间的关系。

console.log(cat1 instanceof Cat); //true

但是这样有一个问题是：每一次生成一个实例，都会产生一个新的内容一模一样的方法，是重复的部分，会多占用内存空间。

4、原型模式

function Cat(){ }
Cat.prototype = {  
   type='animal';
   this.eat = function(){};
}

使用原型模式所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。但是对任何一个实例的操作会影响到所有的实例。

5、混合模式

function Cat(name,color){
  this.name = name;
  this.color = color;
}
Cat.prototype.type = "animal";
Cat.prototype.eat = function(){};

需要变化的属性使用构造函数定义，不变的属性和方法使用原型来定义。但是这种写法不够美观。

6、类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。新的class写法可以让对象原型的写法更加清晰、更像面向对象编程的语法。

class Cat(){
  constructor(name,color) {
    this.name = name;
    this.color = color;
  }
  eat() {}
}

继承

Class 可以通过extends关键字实现继承，例如定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
class ColorPoint extends Point {
}

super关键字表示父类的构造函数，用来新建父类的this对象。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

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