es6

ECMAScript 6简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

EMCA6新增两个关键字 let const

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块({ })内有效。

const声明一个只读的常量。一旦声明，常量的值就不能改变。

var关键字和let和const关键字声明变量到底有什么区别？

1、let和const不允许重复声明变量。

let num1 = 10;
let num1 = 20;
alert(num1);     //报错Identifier 'num' has already been declared
const num2 = 10;
const num2 = 20;
alert(num2);      //报错Identifier 'num' has already been declared

 2、let和const声明的变量不会进行声明提升。（通过let声明变量，之前的区域，叫做暂时性死区）

let num;
alert(num); //undefined
alert(num2); //直接报错
const num2 = 20;

 3、let和const声明的变量会被所有的代码块限制作用域（作用域更小），只要遇到大括号就形成作用域。

if(1){
   var num = 10;
    let num2 = 20;
    const num3 = 20;
    alert(num2);  //20
    alert(num3);  //30
}
alert(num);  //10
alert(num2);  //undefined
alert(num3);   //undefined

let关键字和const的区别

1、let声明的变量的值可以被改变   const声明的变量的值不可以被改变（const一般情况声明常量）
2、let声明的时候可以不赋值，const声明的时候必须赋值

let num1 = 10;
alert(num1);   //10
num1 = 20;
alert(num1);    //20

const num2 = 10;
alert(num2);    //10
num2 = 20;    //报错
alert(num2);  

解构赋值

1、通过数组解构进行赋值

var x = 10, y = 20, z = 30;
alert(x + ", " + y + ", " + z); 

2、通过对象解构进行赋值

var [x, y, z] = [10, 20, 30];
alert(x + ", " + y + ", " + z);

解构的好处：
1、交换两个数位置的时候[num1, num2] = [num2, num1];
2、函数传参的时候没有必要考虑函数的顺序
3、解构的形式里面，也可以给参数设置默认值
4、函数可以同时返回多个结果

var num1 = 10;
var num2 = 20;
alert("num1:" + num1 + ", num2:" + num2);
[num1, num2] = [num2, num1];
alert("num1:" + num1 + ", num2:" + num2);
alert("num1:" + num1 + ", num2:" + num2);
var tmp = num1;
num1 = num2;
num2 = tmp;
alert("num1:" + num1 + ", num2:" + num2);

ECMA6新的字符串 — 模板字符串

1.必须用反引号``括起来，可以随机换行
2.占位符的语法，进行字符串拼接 ${表达式}

function showSelf({name, age = 40, sex = "男"}){
    alert(`我的名字叫${name}, 我的年龄是${age}, 我的性别是${sex}`);
}
showSelf({
    name: "贝吉塔",
    age: 33,
    sex: "男"
})

ES6 里面新添加了一个运算符 … ，叫做展开运算符

1.作用，将数组展开

var arr = [10, 20, 30];
function show(x, y, z){
    alert(x);
    alert(y);
    alert(z);
}
show(arr[0], arr[1], arr[2]);
show(...arr);

2.作用，将对象展开

var person = {
			name: "Jack",
	       age: 18
	   }
	   var person2 = {
	       ...person,
	       sex: "男"
	   }
	   var person2 = {
	       name: person.name,
	       age: person.age,
	       sex: "男"
	   }
console.log(person2)

ES6新增函数-----箭头函数

函数声明式写法

var add = (x, y) => x + y;
alert(add(30, 40));

重点：箭头函数只能简写函数表达式，不能简写声明式函数。

function fn(){} //不能简写
var fun = function(){  //可以简写var fun = () => {};
 }
 var obj = {
     fn: function(){ //可以简写
     }
 }

特殊性
1、箭头函数中没有this，箭头函数里面的this指向上一层函数中的this。

var person = {
     username: "钢铁侠",
     showName: () => {
          alert("我的名字叫" + person.username);
          alert("我的名字叫" + this.username); //我的名字叫undefined
         alert(this);
     }
 }
person.showName();

2、箭头函数中没有arguments这个对象

var show = () => {    //arguments is not defined
		 console.log(arguments);
         console.log(arguments[1]);
  }
show(10, 20, 30);

箭头函数的写法
1、函数的形参只有一个的时候可以不写()，其余情况下必须写
2、如果函数体只有一行代码的时候，可以不写{}，并且会自动return

var obj = {
		func1: () => {
		     alert("没有参数，必须写小括号");
		 },
		 func2: a => {
		     alert("有一个参数，可以不写小括号");
		 },
		 func3: (a, b) => {
		     alert("两个以上参数，必须写小括号");
		 }
}
obj.func1();
obj.func2();
obj.func3();

箭头函数的应用场景
箭头函数和ECMA5的语法结合使用，非常完美。
forEach 遍历

var arr = [10, 20, 30, 40, 50];
arr.forEach(item => {document.write(item + "<br/>");})

filter 过滤

var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter(item => item > 20);

map 映射

var arr = [10, 20, 30, 40, 50];
var newArr = arr.map(item => item * 2);
alert(newArr); 

在ES6中我们可以直接把默认值写在函数的形参位置

var func = (a = 30) => {
    alert(a);
}
func();
func(100);

ES6的类---- class语法

类的数据类型就是函数，类本身就指向构造函数。
ColorPoint类该类通过extends关键字，继承了Person类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Person类。

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.showName = function(){
    alert("我的名字是：" + this.name);
}
Person.prototype.showSex = function(){
    alert("我的性别是：" + this.sex);
}
class Worker extends Person{
	 constructor(name, sex, job){
	     super(name, sex);
	     this.job = job;
	 }
	 showJob(){
	     alert("我的工作" + this.job);
	 }
}
 var w1 = new Worker("小明", "男", "演员");
w1.showName();
w1.showJob();
w1.showSex();

super 关键字
super这个关键字，既可以当作函数使用，也可以当作对象使用。
1.super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}
class B extends A {
  constructor() {
    super();
  }
}

2.super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
let b = new B();

类的 prototype 属性和__proto__ 属性

proto：构造函数构造出来的对象，拥有一个属性__proto__，这个属性指向构造函数的prototype原型。
prototype：构造函数都有一个属性prototype，一般情况下构造函数的方法是添加在构造函数的原型上的。

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.showName = function(){
    alert("我的名字叫：" + this.name);
}
Person.prototype.showSex = function(){
    alert("我的性别是：" + this.sex);
}
//继承于Person创建一个新的构造函数叫做Worker
function Worker(name, sex, job){
    //继承属性  构造函数的伪装
    Person.apply(this, [name, sex]);
    this.job = job;
}
//继承方法
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.showJob = function(){
    alert("我的工作是" + this.job);
}
var w1 = new Worker("小明", "男", "演员");
w1.showName();
w1.showSex();
w1.showJob();
alert(w1.__proto__ == Worker.prototype); //true
alert(w1.__proto__.showName == Worker.prototype.showName); //true
var w2 = new Worker("小白", "女", "画家");
alert(w2.__proto__.showSex == Worker.prototype.showSex); //true
alert(w1.__proto__ == w2.__proto__); //true
alert(w1.__proto__.showName == w2.__proto__.showName); //true
alert(w1.showName == w2.showName); //true

for…of遍历数组，直接取出数组中的元素

var arr = [10, 20, 30];
 for(var item of arr){
     document.write(item + ", for...of 遍历<br/>")
 }