ES6 常用语法

一什么是ES6?

　　ECMAScript 6 简称ES6, 在2015年6月正式发布!!!

二常用语法

　　1.声明变量 const/let/var

　　　　ES6以前用var来声明变量，存在变量提升现象---会提前创建变量

　　　　作用域也只有全局作用域和函数作用域---所以变量提升会在函数顶部或者全局作用域顶部

　　**********************************************************************************************************************

　　　　let 关键字表示变量，const 表示常量，都是块级作用域，比如一个函数内部，或一个{}内部。

　　var

　　　　var定义的变量可以修改，如果不初始化会输出undefined，不会报错

1 var a = 1;
2 // var a;//不会报错
3 console.log('函数外var定义a:' + a);//可以输出a=1
4 function change(){  
5     a = 4;
6     console.log('函数内var定义a:' + a);//可以输出a=4
7 }
8 change();
9 console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4

　　const

　　　　const定义的变量不可以修改，而且必须初始化

1 const b = 1;    //正确
2 const b;    //错误，必须初始化
3 console.log('函数外const定义b：' +　ｂ);/有输出值
4 //b = 5;
5 //console.log('函数外修改const定义b:' + b);//无法输出

　　let

　　　　let是块级作用域，函数内部使用let定义后，对函数外部无影响

1 let c = 3;
2 console.log('函数外let定义c：' + c);//输出c=3
3 funcion change(){   
4     let c = 6;
5     console.log('函数内let定义c：' + c);//输出c=6
6 }
7 change();
8 console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

　　let、const 和var的区别

　　　　let和var的一个明显的区别就是没有变量提升：

 1 function fun1(){
 2     for(var i = 0; i <= 10;i++){
 3         
 4     }
 5     console.log(i);//11;--------var变量提升
 6 };
 7 fun1();
 8 function fun2(){
 9     for(let i = 0; i <= 10;i++){
10         
11     }
12     console.log(i);//i is not defined;--------let没有变量提升
13 };
14 fun2();

　　 const和var的明显区别是，const声明的是常量，不可被后面的代码赋值改变：

1 var x = 1;
2 x = 2;
3 console.log(x);//2;-----var声明的是变量，可被赋值替换
4 
5 const y = 1;
6 y = 2;
7 console.log(y);//Assignment to constant variable.;------const声明的是常量，不可改变

　　2.模板字符串

 1 <body>
 2     <div id="head">
 3     </div>
 4     <script>
 5         let ele=`
 6             <div id="head">
 7                 <h1>模板字符串</h1>
 8                 <p>动态添加</p>
 9             </div>
10             `;
11         let ele_div=document.getElementById('head');
12         ele_div.innerHTML=ele
13     </script>
14 </body>

　　3.函数

　　　　箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。

　　最直观的三个特点

　　　　-- 不需要function关键字来创建函数

　　　　-- 省略return关键字

　　　　-- 继承当前上下文的this关键字（因为箭头函数的调用者是当前上下文，跟普通函数区别开

 1 // 函数在哪里调用了 才决定this到底引用的是谁~~~
 2 // 最后一个调用函数的对象才是传到函数里的上下文对象this~~~
 3 
 4 console.log(this)
 5 
 6 function test() {
 7     console.log(this)
 8 };
 9 
10 let obj = {
11     a: 1,
12     test: test,
13 };
14 
15 let obj2 = {
16     b: 3,
17     obj: obj,
18 };
19 
20 obj.test();
21 test();
22 obj2.obj.test();

　　4.import 和 export

　　　　略

　　5.数据解构

 1  const people = {
 2         name: "提莫",
 3         age: 2,
 4     };
 5     const {name, age} = people;
 6     console.log(name);
 7     console.log(age);
 8     
 9     const person = ["瑞文", "刀妹"];
10     const [name1, name2] = person;
11     console.log(name1);
12     console.log(name2)

　　6.class / extends / super　　　

　　　　ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。

　　类之间通过extends继承，继承父类的所有属性和方法。

　　super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，

　　否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。

 1 class Animal{
 2     constructor(){
 3         this.type = "animal"
 4     }
 5     says(say){
 6         console.log(this.type + "says" + say )
 7     }
 8 }
 9 
10 let animal = new Animal()
11 
12 animal.says("hello")
13 
14 class Dog extends Animal{
15     constructor(){
16         super();
17         this.type = "dog";
18     }
19 }
20 
21 let dog = new Dog()
22 dog.says("hello")