ES6入门（一）

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序(比如node.js,大部分使用es6语法)，成为企业级开发语言。
ES6官方中文教程：http://es6.ruanyifeng.com/

ECMAScript —>> ECMA（标准组织） javascript ----> netscape(网景公司)
es5.1之后的语法标准统称为es6

es6入门

###let 和 const

//es5变量的定义
var a = 5;
//es5常量的定义
var WIDIH = 400;

var 存在的缺陷:
1.没有块级作用域
2.变量的预处理和作用域的提升
3.可以定义重名的变量

//es6的变量定义
let的好处：
1.块级作用域
2.不能重名
3.不会预处理
推荐：定义变量使用let来定义
const 定义常量：能够很好的约束语法
注意：用来申明常量，必须初始化值；不能重复被赋值；同样有块级作用域；同样不能重命名，不会预处理。

2.es变量/对象/数组的解构赋值

  //对象的解构赋值赋值
    let p{
        name:"cc",
        phone:"123456",
        age:18
    }
    //对象的解构赋值赋值
    let{name,phone,age} = p;  
    //相当于==>（var name = p.name; var phone = p.phone; var age = p.age ）
    console.log(name,age)
    //使用场景：使用回调函数，调用服务器数据，
    function myCallBack(name,phone){
        console.log(name,phone)
    }
    //myCallBack(data)
    
    //es6数组的解构赋值
    let arr = [1,2,3,4,'a','b','c']
    //将目标数组中对应索引位置的值，一次赋值给变量名数组
    let [x,y,z] = arr;
    console.log(x,y,z);
    let [,,,,h,i,j] = arr;
    console.log(h,i,j,k);
    //使用场景
    //给函数添加可变的多个返回值，根据需求去获取指定的返回值
    function test(){
        return ['hello','world'];
    }
    let [,res2] = test();
    console.log(res2); //world

3.es6模板字符串
作用：简化字符串的拼接
使用场景：
1.使用get方式提交参数： url?username=xxx&pwd=xxx&form=xxx&sex=xxx
//使用es6拼接方式

let user = {
    username:"tom",
    pwd:"123",
    phone:"1123456",
    sex:"男"
}
let str ="localhost:8080/xxx?"+ "username="+user.username+"&pwd="+user.pwd+"&phone="+user.phone+"&sex="+user.sex;
console.log(str);  //localhost:8080/xxx?username=tom&pwd=123&phone=1123456&sex=男

es6语法：
.使用``来包含需要拼接的内容
.使用${}来引用需要拼接的变量

   let str =`localhost:8080/xxx?username=${user.username}&pwd=${user.pwd}&phone=${user.phone}&sex=${user.sex}`;   
    console.log(str);   //localhost:8080/xxx?username=tom&pwd=123&phone=1123456&sex=男

2.手动创建html元素：xxx

let menu = {
    id:"m001",
    name:"stumanger",
    url:"stumanger.htm",
    state:"normal"
}
let mHtml = `<a href = "${menu.id}" href="${menu.url}>${menu.name}</a>`;
console.log(mHtml);   //<a href = "m001" href="stumanger.htm>stumanger</a>

let divEle = document.createElement("div");
divEle.innerHTML = mHtml;
document.body.appendChild(divEle);