一、什么是ES？
总所周知一个页面是由三大部分javascript、HTML、css组成的，而javascript又是由三部分组成：ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型)。
其中的ECMAScript就是简称ES，而ES6就是ECMAScript的第六个版本。
那么ECMAScript和JavaScript的关系是什么呢？
ECMAScript和JavaScript的关系是，前者是后者的规格（标准），后者是前者的一种实现。
ECMAScript 实际上是一种脚本在语法和语义上的标准。
二、语法
最常用的ES6特性
- let,const
这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。 首先来看下面这个例子了解一下var：
var name = 'aaa'
while (true) {
var name = 'bbb'
console.log(name) //bbb
break
}
console.log(name) //bbb
使用var 两次输出都是bbb，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。 那么我们试试let，就看出区别了，
var name = 'aaa'
while (true) {
let name = 'bbb'
console.log(name) //bbb
break
}
console.log(name) //aaa
let生成了一个块级作用域，出了那个块是访问不到的。
再来看一个我们特常见的例子。
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<script>
var buttons = document.getElementsByTagName("button");
for(var i = 0;i < buttons.length;i++){
buttons[i].onclick = function(){
console.log(i);
}
}
</script>
</body>
我们需要的是点击其中一个按钮，在控制台答应出相对应的123456789，可是事实是，我们不管点击哪一个，打印出来都是10。原因就是var它并不能给每一个button一个单独的域，这时候我们解决它就很简单，把var换成let就解决这个问题了。
const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。
const a = 10;
a=8;
console.log(a)
当我们尝试去改变用const声明的常量时，浏览器就会报错。const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug：
- ...运算符
...为展开运算符
let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }
...为剩余操作符
let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]
// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined
function test(a, ...rest){
console.log(a); // 1
console.log(rest); // [2,3]
}
test(1,2,3)
- ES6参数可以加默认值
function fun(a,b=10,c=20){
return a+b+c;
}
console.log( fun(1) )
4. 箭头函数
ES6新增了使用“箭头”（=>）定义函数
var f = v => v;
//上面的箭头函数等同于：
var f = function(v){
return v;
};
//如果箭头函数不需要参数或者需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5;
//等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 +num2;
//等同于
var sum = function(num1 , num2){
return num1 + num2;
}
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) => {return num1 + num2;}
注：1.箭头函数中没有this,argument,new.target,如果要强行使用，则指向函数外层对应的this,argument,new.target
重：this指向法则
- 对象调用函数，this指向对象
- 直接调用函数，this指向window
- 如果使用了new关键字，this指向新创建的对象
- 如果使用apply，call，bind this指向绑定的数据
- 如果是DOM事件函数，this指向事件源
