es介绍
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript,是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性
为什么要学习新特性？
- 语法简洁，功能丰富
- 框架开发应用
- 前端开发职位要求
为什么要学习es6
- ES6 的版本变动内容最多，具有里程碑意义
- ES6加入许多新的语法特性，编程实现更简单、高效
- S6是前端发展趋势，就业必备技能
let关键字
let关键字与var关键字一样是用于声明变量的，只不过与var有以下不同之处：
变量不能重复声明
在es6中let关键字不允许重复声明变量，如下图所示就会报错：Uncaught SyntaxError SyntaxError: Identifier 'name' has already been declared
let name ='suliang'; let name = 'xiaoming';
块级作用域
使用let在代码块中声明变量时，只在代码块中生效。
{ var name = 'su' let age = 21; } console.log(name); //su console.log(age); //ReferenceError: age is not defined
不存在变量提升
使用var关键字定义一个变量时，可以在定义变量之前输出该变量，数据类型为未定义，但使用let关键字定义变量时，不允许在声明变量前调用该变量。
console.log(age); //ReferenceError: Cannot access 'age' before initialization let age = 21;
不影响作用域链
function fun1(){ let num = 10; function fun2(){ let num1 = num +15; console.log(num1); } return fun2(); } fun1(); //25
let关键字小案例
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //let 案例 window.onload = function(){ let items = document.getElementsByClassName('item'); for(let i = 0;i<items.length;i++){ items[i].onclick = function(){ items[i].style.backgroundColor = 'yellow' } } } </script> <style> div{ width: 150px; height: 80px; border: 2px solid lightblue; display: inline-block; } </style> </head> <body> <div class="item"></div> <div class="item"></div> <div class="item"></div> </body> </html>
当使用for循环遍历元素时，使用var关键字声明变量i，则会报错：TypeError: Cannot read properties of undefined，因为此时var 声明的i并没有块级作用域，最后i的值为3，而item[3]不存在，因此就会报错。而用let可以解决这个问题。
window.onload = function(){ let items = document.getElementsByClassName('item'); for(var i = 0;i<items.length;i++){ items[i].onclick = function(){ items[i].style.backgroundColor = 'yellow' } } }
const关键字（声明常量）
在es6中怎加了对常量的声明方式，那就是用const关键字，其中使用const关键字，有以下特性。
声明时必须赋予初始值
在声明常量时必须赋予初始值，否则报错：SyntaxError: Missing initializer in const declaration
声明常量时尽量使用大写字母
const NAME = 'suliang';
常量的值不能被修改
常量的值一旦定义就不能被修改，否则报错：TypeError: Assignment to constant variable.
const NAME = 'suliang'; NAME = 'xiaoming';
块级作用域
和let一样，const一样有块级作用域
{ const AGE= 15; } console.log(AGE) //ReferenceError: AGE is not defined
对于数组/对象的元素来说，不算对常量的修改
const LIST = ['gala','xiaohu','wei','ming']; LIST.push('breath'); console.log(LIST); //(5) ['gala', 'xiaohu', 'wei', 'ming', 'breath']
解构赋值
在es6中可以将一个常量中的各个值赋给多个变量。
数组的解构赋值
const RNG = ['xiaohu','ming','gala']; let [a,b,c] = RNG; console.log(a); //xiaohu console.log(b); //ming console.log(c); //gala
对象的解构赋值
最常用的通常为对象的解构赋值，这样调用对象的方法时更简便。
//对象的解构赋值 const su = { name:'suliang', age : 21, sayName:function(){ console.log(name) } } let {name,age,sayName} = su; console.log(name); //suliang console.log(age); //21 console.log(sayName); //ƒ (){console.log(name) } //调用对象方法 su.sayName(); //不适用解构赋值 sayName(); //使用解构赋值
