ECMAScript6
ECMAScript 6 也称为ECMAScript2015，是2015年出版的ECMAScript新的版本。ES6是继ES5之后的一次主要改进。ES6增添了许多必要的特性，例如模块和类，块级作用域，常量与变量。
支持情况：node.js几乎完全支持ECMAScript 6 ,标准浏览器支持大部分语法
变量：let
es6新增的用于变量申明的关键字
-
通过let申明的变量，不允许重复申明
var a = 1; var a = 2; console.log(a); //2 let a = 2; let a = 2; console.log(a); //error 已经被申明了
-
不支持变量申明的预解析，let变量，必须先申明后使用，我们把当前作用域最开始到let申明的变量之间的区域称为 - 暂存死区
console.log(a); //预解析 undefined var a = 1; console.log(b); //error 找不到 let b = 1; -
let支持块级作用域
- 全局
- 函数
- 块 - 一对{}包含的部分，称为一个块，在这样的块中就会有独立的一个作用域，var不支持块作用域
{
let a = 1;
var b = 2;
console.log(a); //1
console.log(b); //2
}
console.log(a); //error
console.log(b); //2
常量：const
常量申明，和var与let不一样，var,let申明的值是可以变化的（后期改变的），但是通过const申明的值是固定的，不能在后期去改变它
const其他的特性与let一致
因为const定义的是常量值，所以通过const定义一个常量的时候，一定需要初始化
const a = 1;
const a = 2;
console.log(a); //error a已经被定义
const a = 1;
a = 2;
console.log(a); //error a是一个常量，不能再重新赋值
const b; //如果不初始化
console.log(b) //那么b就是一个没有值的申明
当用常量申明一个对象的时候，对象本身不能重新修改赋值，但里面的内容是可以修改的
const obj = {x: 1};
/obj = {y: 2}; //不允许
obj.x = 10;
console.log(obj) //Object {x: 10}
如果希望一个对象本身以及子数据都不能变化，那么通过const和freeze（冻结对象）同时使用
const obj = {x: 1};
Object.freeze(obj);
obj.x = 10;
console.log(obj) //Object {x: 1}
变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
/之前获取一个对象的值
var obj = {x: 100,y: 200};
console.log(obj.x);
console.log(obj.x);
let left = getConmputedStyle(document.body).left;
let top = getConmputedStyle(document.body).top;
解构赋值
对象
- 申明{}中的变量
- 根据{}中的变量，去=后面的对象中提取对应的属性，并把该属性对应的值赋值给前面对应的变量，如果没有该属性，返回undefined
var obj = { foo: "aaa", bar: "bbb" };
var {foo,bar} = obj; //相当与是申明了foo,bar两个变量
console.log(foo) //aaa 去找=号后面里面对应变量名的属性
如果我们希望解构出来的属性名在使用的时候是用的另外一个名称，那么这个时候需要给需要使用的变量名设置一个别名
let {left,top} = getComputedStyle(document.body);
console.log(top) //error top是一个关键字，不能用作变量名
let {left: L, top: T, a} = getComputedStyle(document.body);
console.log(T) //auto
console.log(a) //undefined
数组
数组的解构赋值和对象的解构赋值：
- 数组使用[]，对象使用{}
- 数组解构赋值是一一对应的，而对象解构赋值是按照名称来进行的
let [x,y,z,w] = ["a","b","c"];
console.log(x) // a
console.log(y) // b
console.log(y) // b
函数参数扩展
函数参数的默认值
在es6之前，如果一个函数的参数是可选，那么我们通常需要手动在该函数的内部处理该参数的默认值
function fn(a,b) {
var a = a||10;
var b = b||10;
console.log(a+b)
}
fn(); //20
fn(20,30) //50
在es6之后，函数在定义的时候，可以直接在参数上处理默认
注意：必传参数一般写在前面，可选参数一般写在最后
function fn(a=20, b=10){
console.log(a+b)
}
fn(); //30
fn(20,20); //40
rest参数（剩余参数）
我们通常会一个函数定义一些参数，有些参数是确定的，而有些参数是不确定（个数）的,如arr.splice方法中，前2个参数是固定的值，第2个后面参数数量可以不确定
var arr = ["a","b","c"];
arr.splice(1,1,"e","f","g") //
es6之前，如果一个函数的参数个数不确定，我们原来是通过anguments,不定参来处理
function push() { //创建一个方法，用来给第一个参数（arr）,添加剩余参数的内容到里面
for (var i=1; ies6的rest参数，如果一个函数定义了剩余参数，那么在调用该的函数的时候传入的实参会赋值给对应形参，剩下没有对应的实参会全部赋值给剩余参数
function push(arr,...data) { //注意3个点
for (var i = 0; i < data.length; i++) {
arr.push(data[i])
}
}
var arr = ["a","b","c"];
push( arr, 1,2,3,x );
console.log(arr);
//...data 就是实参后，剩余没有对应实参全部 [1,2,3,x]
注意： 剩余参数必须是尾参数，最后面
扩展运算符
扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。
例如在之前，想要把一个数组里的内容用来做为参数调用
function area(w,h) {
console.log(w * h)
}
area(10,10) //100
var arr = [20,30];
area(arr[0],arr[1]) //600
var arr1 = ["a","b","c"];
var arr2 = [1,2,3];
arr1.splice(1,1,arr2);
console.log(arr1)
//这个时候，就会是["a",[1,2,3],"c"],要想显示为正常就要
arr1.splice(1,1,arr[0],arr[1],arr[2]) //['a',1,2,3,'c']
es6方法
var arr3 = ["a","b","c"];
var arr4 = [1,2,3];
arr3.splice(1,1,...arr4) //注意三个点
console.log(arr3) //['a',1,2,3,'c']
//之前把2个数组组合在一起
var arr5 = arr3.concat(arr4);
//现在
var arr6 = [...arr3,arr4];
//取最大值
var arr = [5,45,7,8,71,5];
console.log(Math.max(...arr)) //省略了循环
箭头函数
在es6中，提供了一种新的函数格式：箭头函数
之前的定义函数方法
//函数申明
function fn(a,b){
console.log(a+b);
}
//函数表达式
var fn2 = funciton(a,b) {
console.log(a - b)
}
箭头函数
格式要是表达式方式
var fn3 = (a,b) => {
console.log(a * b)
};
fn3(10,20) //200 省略了function
//*有几种有条件的简化写法,有且仅有一个形参的时候，可以省略参数的小括号
//当参数只有一个的时候,可以不要()
var fn4 = a => {
console.log(a)
}
//当没有参数的时候，要有()
var fn5 = () => {
console.log(1)
}
//只有一条语句的时候，可以省略{}，同时该条语句的结果将作为该函数的返回值
var fn6 = r => {
return r * r * Math.PI;
}
//简化
var fn7 = r => r * r * Math.PI;
//但是，如果有多条语句或者返回值是一个对象，则必须使用{}
注意：
- 箭头函数不能作为构造函数，也就是箭头函数不能使用new运算符
- 箭头函数的this永远指向当前申明作用域对象
- 普通函数this指向取决于调用
- 箭头函数this指向取决于申明
- 箭头函数没有arguments对象
var todo = function(){
console.log(this)
}
var todo1 = () => {
console.log(this)
}
document.onclick = todo; //this是document
document.onclick = todo; //this是window
//例如我们有个按钮
var btn = document.querySelector('input');
btn.onclick = function(){
var _this = this //定时器里的this是指向window，要存一下当前点击btn
setTimeout(function(){
_this.style.color = "red"
},1000)
}
btn.onclick = function(){
setTimeout(() =>{
this.style.color = 'red' //this是btn 是在它下面的作用域中声明的
},1000)
}
对象扩展
对象属性简洁表示法
当一个对象的key和对应的值（必须是一个变量名称）同名的话，那么可以简写成一个key
var a = 1;
var b = 2;
var obj = {
left: 100,
top: 100,
a: a,
b: b
};
console.log(obj) //var a = 1;
var b = 2;
var obj = {
left: 100,
top: 100,
a: a,
b: b
};
console.log(obj) //Object {left: 100, top: 100, a: 1, b: 2}
//*简写 ，对象名和对应的值是同名，可以省略名
var obj = {
left: 100,
top: 100,
a,
b
};
对象方法的简洁表示法
var a = 10;
let obj2 = {
a: a,
fn: function(){
console.log(1)
}
}
//简洁写法,对象里的方法可以省略掉function
let obj3 = {
a,
fn() {
console.log(1)
}
}
属性名表达式
ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。
var x = "usename";
let obj = {
x: "小明"
}
console.log(obj); //Object {x: "motao"}
//es6
let obj1 = {
[x]: "小明"
}
console.log(obj1); //Object {usename: "motao"}