ES6基础内容

什么是ES6？

是 ECMAScript 的第六个版本

JavaScript的组成部分：   DOM  BOM   ECMAScript

DOM：提供dom接口

BOM：提供bom接口

ECMAScript：操作dom和bom 的语法

注意：ES6用在服务端（node），如果是客户端，用ES5。浏览器逐渐支持中

ES6语法基础语法

1.定义变量let

let定义的变量不能像val定义的变量那样声明提前，也不允许重复声明，let变量作用域是块级作用域{}。

2.常量const

一次定义，后面不能修改。

如果  const  a；

那么 a 是 undefined。后面也不能再赋值。

如果  const obj = {}；

obj.name = "xiaohua"；

则可以添加上属性。 因为 不可改变的原始变量，可以改变的引用对象。

3.字符串拼接

内容写在``中间，变量直接用 ${变量名}  ，不需要用+拼接直接写在变量的地方就可以。并且可以空格换行。

如： 

var uname = "xiaohua";
var str = "";
str += `<ul> 
            <li>${uname}</li> 
            <li>nan</li> 
            <li>18</li> 
            <li>xxx@xxx.com</li> 
        </ul>`

4.超引用

可用于数组的复制：

var arr = [1,2,3,4,5];

var  arr2 = [...arr];

arr2.push(6);

则 arr 为 [1,2,3,4,5], arr2 为 [1,2,3,4,5,6]

可用于参数：

function fun(...args){

       console.log(args);      // [1,2,3,4,5,6]

　　args.push(7);

　　console.log(args);    // [1,2,3,4,5,6,7]

}

fun(1,2,3,4,5,6)

5.解构赋值

数组的格式：

var  [a,b,c] = [40,20,30];    // 一一对应

var  [d,[e,f],g]  =  [10,[20,30],40]

json的格式：

var {a,b,c} = {a:10,c:30,b:20}  // 不用一一对应可以换位置赋值

也可以混用：

[{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30];

6.for  of 循环 

语法和 for  in 语法相同 但 

for（var i in arr）中 i 是索引，而for  of  中的i 直接是值

注意：for of 不能遍历 obj

7.Map对象

map就是用来存东西的，跟obj类似

var   map =  new  Map();

如果像普通对象那样添加属性

map.abc = "xiaohua";

不会添加到map的 entries，依然是Map(0){}

//设置值  增 改

map.set("a","red");

map.set("b","green");

//查

map.get("a");  

//删除

map.delete("a");

注意：map没有length属性。遍历用for of。可单独获得 key 或者 value

for(var index of map.entries()){ //全写 或者缩写：for(var index of map){}
console.log(index);
}

// 只想循环key
for(var key of map.keys()){
console.log(key);
}

// 只想循环value
for(var value of map.values()){
console.log(value);
}

8.箭头函数

function fun(){console.log("xiaohua");} 

改写成箭头函数就是  () => {}

如果有参数写在括号里

注意：1.不能用this，箭头函数中的this指向window  2.不能使用arguments

9.原型

写原型链后 __proto__ 直接指向最前的一个。比如 儿子，父亲，爷爷三个，儿子的 __proto__直接指向爷爷而不是父亲。

因为，在ES6以前是没有类的概念，构造函数即是构造，也是类。别的语言一般出对象 需要有类和构造函数

10.类 class  继承 extends

构建一个Person类：

class Person{

　　constructor(name,age){

　　　　this.name = name;

　　　　this.age = age;

　　}

　　showName(){return this.name}

　　showAge(){return this.age}

}

出一个person对象：

var person = new Person("xiaohua",18);

让Student类继承Person类：

class Student extends Person{

　　constructor(name, age, pid){

　　　　super(name,age);

　　　　this.pid = pid;

　　}

　　showPid(){return this.pid}

}

出一个继承了Person属性和方法的Student对象

var Student = new Studnet("xiaoming",50,"0001");