关于前端学习:JavascriptES6语法

理解ES6

ECMAScript 6 是JavaScript语言的第六次订正规范，以后版本的ES6是在2015年公布的，所以又称ECMAScript 2015，也就是说，ES6就是ES2015

ES6语法——定义变量

• 定义常量的语法：const 常量名 = 值
• 定义变量的语法：let 变量名 = 值

let/const 和 var 的区别

• var 定义的变量会进行预解析，而 let 、const 不会
• 在同一作用域下 var 同一变量名可反复定义，而 let、const 不能反复定义
• var 没有块级作用域（var 作用域只能在部分作用域中才受到限制），而 let 、const 有块级作用域，每一个{ }就是一个块级作用域，块级作用域限度了变量的应用范畴

let 与 const的区别

• let 定义的是变量，const定义的常量（不可变量）
• let 定义变量时能够不进行赋值，const 定义常量时必须赋值
• let 定义的变量的值能够被批改，const定义的常量的值不能被批改

ES6语法——箭头函数

• 箭头函数是ES6 推出的一种匿名函数的简写形式

语法：()=>{}
构造阐明：()内书写新参，=>是箭头函数的标识符，{}内书写执行代码

• 箭头函数的个性

当只有一个形参并且一句执行代码时，箭头函数可写成 形参=>执行代码

当只有一个形参和多条执行语句时，箭头函数可写成 形参=>{执行代码}

当多个形参和一句执行代码时，箭头函数可写成 (形参)=>执行代码

当有多个形参和多句执行代码时，箭头函数语法为 (形参)=>{执行代码}

• 在箭头函数中没有一般函数的 arguments属性
• 箭头函数里的this是捕捉其所在（即定义的地位）上下文的this值， 作为本人的this值，并且箭头函数中this无奈扭转

ES6语法——函数参数的默认值

• 定义函数时，给形参一个值，这个叫函数参数的默认值，当调用时有实参传递，应用实参赋值，如果没有实参传递，则应用默认值

function fn(a=100,b=200){}
let fun = (a=100)=>{}

ES6语法——函数参数的默认值

• 应用反引号包裹的字符串可进行换行操作，并且能够解析变量
• 模板字符串可用于调用函数，字符串内容就是函数参数，${ }将字符串进行切割，组成一个数组进行传参，${ } 里的内容也是参数，进行顺次赋值
• 模板引擎兼容问题：IE 低版本不反对，前期通过打包时，打包工具会主动兼容解决

var str = `<div class="right">
              <li>
                  <div class="img">
                      <p> 价格：${变量名} </p>
                  </div>             
              </li>
          </div>`

ES6语法——解构赋值

• 解构数组：let[变量1，变量2，变量3]=[数据1，数据2，数据3]
• 解构多维数组：let[变量1，[变量2，[变量3]]]=[数据1，[数据2，数据3]]]
• 解构对象：let{key值:别名,key值}=[key:value,key:value]
• 解构多维对象：let{key值,{key值,key值}}={key:value,{key:value,key:value}}

ES6语法——对象的简写

• 当对象中的 key 和 value 完全相同时，间接写 key
• 当 key：非箭头函数时，可间接写 key (){}