关于前端学习: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 (){}