ES6语法 1（let，const，解构，模板字符串，扩展运算符）

1.变量声明（let）

• 变量不能重复声明

    let name='zhangsan';
   // let name='lisi';//错误 let不能重复声明
    name='xioaming'; //可以重复赋值
  

• 变量可以被重复赋值

• 块级作用域

   for(var i=0;i<10;i++){
       setTimeout(()=>{
           console.log(i);  //全为9 
       })
   }
   
    for(let i=0;i<10;i++){
       setTimeout(()=>{
           console.log(i);  //0-9 每次都产生一个新的局部块
       })
   }
  

• 不存在变量提升

   console.log(name);  //undefined
   var name;  //变量提升
  
   console.log(name); //报错
   let name;  //let不支持变量提升，先声明后使用
  

• 不影响作用域链

   let name='lisi';
   function b(){
       let name='zhangsan'
       console.log(name);  //不影响作用域链
   }
   b();
  

2.常量声明（const）

在项目中，常量通常在配置文件中使用

• 拥有变量的特性

• 必须赋值

• 常量名为大写

• 常量赋值后不能被修改

   const STU_NAME='xiaoming'; //常量
   const AGE; //错误 常量必须赋值
   STU_NAME='zhangsan'; //错误 常量赋值之后不能被修改
  

• 保存引用数据类型时，可以操作数据

   const OBJ={name:'list'};//将常量设置为引用数值类型，设置的是地址，只要地址不变即可
   OBJ.name='wangwu';  //可以操作对象中的数据，不会改变地址
  

3.解构

解构可以方便提取数组或对象中的数据

3.1 数组解构

完全解构

let stus=['张三','李四','王五','赵六'];//可以是某个模块导出的
let [name1,name2,name3,name4]=stus; //解构与与原模式相同
console.log(name1);  //张三

let nums=[1,[2,3,[4,[5]]]];
let [a,[b,c,[d,[e]]]]=nums;  //模式与原数组相同
console.log(a,b,c,d,e);

不完全解构

let [name1,name2]=stus;
console.log(name1,name2); 

异常解构

let [name1,name2,name3,name4,name5]=stus; //数组中不存在第五个元素
console.log(name5);  //undefined

3.2 对象解构

var obj={
    name:'zhangsan',
    age:10,
    getName(){
        console.log(this.name);
    }
}

完全解构

let {name,age,getName}=obj;
console.log(name);

let {age,name,getName}=obj;  //对象解构时可以不考虑顺序，因为属性有自己的名字
console.log(name);

不完全解构

let {name}=obj;
console.log(name);

异常解构

let {sex}=obj; //sex不是obj中的属性
console.log(sex);  //undefined

例

var arr=[1,2,obj];
let [a,b,{name,age,getName}]=arr; //完全解构
console.log(name）
let [a,b,c]=arr; //完全解构，c代表obj对象
console.log(c.name);
let [a,b,{name}]=arr; //不完全解构
console.log(name);

3.3 字符串解构

var str='xiaoming';

使用数组进行解构

var [a,b]=str;  //如果利用数组解构字符串，会以下标进行解构
console.log(a,b); // x  i

使用对象进行解构

var {length,toString,valueOf}=str; //可以利用对象去解构字符串对象中的属性和方法
console.log(length,toString);  

3.4 数值解构

var num=123456;

数值不能使用数组进行解构

var [n1,n2]=num;
console.log(n1,n2); //错误 数值类型不能用数组解构

使用对象进行解构

var {toString,valueOf}=num;  //数值类型也可以用对象进行解构，数值对象的属性和方法，没有length
console.log(toString,valueOf);

3.5 默认值解构

var obj={
    name:'xiaoming',
    age:10,
    getName(){
        console.log(this.name);
    }
}
//设置默认值，若没有设置name的值时，使用默认值；若给name赋值了，则覆盖默认值
var {age,name='zhangsan'}=obj;  //给name属性设置默认值，对象解构与顺序无关
console.log(name);  //xiaoming

var arr=[1,2,3,4];
var [a,b=9,c,d]=arr;  //数值中解构的顺序必须正确
console.log(b);

4.模板字符串

` 反引号中可以保存原字符串的结构，并且支持换行字符串

var arr=[1,2];
var tr="<tr>"
/*
 tr+="<td>1</td>"
 tr+="<td>2</td>"
 */
tr+="<td>"+arr[0]+"</td>"
tr+="<td>"+arr[1]+"</td>"
tr+="</tr>"
console.log(tr);

/*
 var tr= `
 <tr>
     <td>1</td>
     <td>2</td>
 <tr>
 `
 */
var tr= `
<tr>
    <td>${arr[0]}</td>
    <td>${arr[1]}</td>
<tr>
`
console.log(tr);

${}占位符

${}占位符也是为某一个JavaScript表达式占据位置。

字符串中插入一个JavaScript表达式：
（需要使用+对字符串进行拼接）

 let job="web前端开发工程师";
 let str1="我是"+job+"，工作5年了";

使用占位符在模板字符串中实现字符串拼接：

let job="web前端开发工程师";
let str2=`我是${job}，工作5年了`;//这里不是单引号，是esc下面的点符号，模板字符串
console.log(str2);


let func=(url)=>{
  return url;
}
let str = `本站的url地址是${func("www.baidu.com")}`;
console.log(str);//本站的url地址是www.baidu.com

占位符只能在模板字符串中使用，不能在普通字符串中使用

let job="web前端开发工程师";
let str1="我是"+job+"，工作5年了";
let str2=`我是${job}，工作5年了 `;
let str3='我是${job}，工作5年了';
console.log(str1);  //我是web前端开发工程师,工作5年了
console.log(str2); //我是web前端开发工程师,工作5年了
console.log(str3); //我是${job},工作5年了

5.扩展运算符 （…）

扩展运算符用于取出对象或数组中所有可遍历的属性或元素
… 可以将元素进行扩展或者聚合，一般情况下为扩展。配合解构进行使用。

• … 在数组中的运用

   //扩展
   var arr=[1,2,3,4,5];
   console.log(...arr);
   
   var arr1=[...arr];  //深拷贝
   console.log(arr1); //[1,2,3,4,5]
   
   var arr2=[...arr,6,7]; //和并操作
   console.log(arr2); //[1,2,3,4,5,6,7]
   
   var arr3=[-1,0,...arr2];
   console.log(arr3);  //[-1,0,1,2,3,4,5]
   
   //聚合
   //等号右边做扩展，等号左边做聚合
   var [a,...b]=arr; //将除a外余下的为解构的成员，都保存在b变量中
   console.log(a,b); // 1，[2,3,4,5]
  

• …在字符串中的运用

   var str='hello';
   //扩展
   console.log(...str); // h e l l o 字符串扩展出来都为字符
   var arr1=[...str];  //['h','e','l','l','o']
   console.log(arr1);
   
   var arr2=[...str,'xiaoming'];  //数组和并
   console.log(arr2);  // ['h','e','l','l','o','xiaoming']
   
   //聚合
   var [a,...b]=str; //a为一个部分，b为a以外的部分,聚合起来
   console.log(a,b); // h [ 'e', 'l', 'l', 'o' ]
  

• …在对象中的运用

   var obj={
       name:'zhangsan',
       age:10,
       getName(){
           console.log(this.name);
       }
   }
   //扩展
   var obj1={
       ...obj
   } //对象的深拷贝
   console.log(obj1);
   
   var new_obj={
       ...obj,
       sex:'female',
       sayHello(){}
   } //对象的和并
   console.log(new_obj);
   
   //聚合
   var {name,...o}=new_obj;
   console.log(name);
  

ES6基础
ES6语法 2（函数，对象，数组功能新增，for of ，symbol，set，map集合）
ES6语法 3（class，迭代器，promise，generator，async/await，proxy/reflect）