一、ES6

ES6是JavaScript语言的下一代标准，已经在2015年6月正式发布。ES6的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

二、语法分析

1.let命令

• 1.ES6新增了let命令，用来申明变量。它的用法类似于var，但是声明的变量只在let所在的代码块有效。如果强行引用let的变量就会报错，如下图
  
  image.png
• 2.另外使用let声明的变量作用于不会被提前,var命令支持变量提升,即变量可以在声明之前使用，值为undefined,如图
  
  image.png
  但是let声明的变量一定要在使用之前声明，不然会报错，这其实才符合语言规范啊。如图，
  
  image.png
• 3.let命令在相同作用域下，不能声明相同的变量
  如果声明就会报错，如图
  
  image.png
  
  但是如果我们用var的话是可以的
  
  image.png

2.const命令

• 1.const声明一个只读变量，声明之后就不会改变了，这就说明const的变量声明之后要理解赋值，不然就会报错,如图
  
  image.png
• 2. const实际上保证的并不是常量的值不得改动，而是常量指向的那个内存地址不得改动。怎么理解呢？就是对于复合型数据（数组和对象），常量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就不受控制了。如图，下面的代码可以给对象添加属性，但是如果改变对象本身就会报错了。
     
     image.png

3.箭头函数

首先来看一段代码，

const Person = {
  'username':'小暖',
  'age': '19',
  'sayHello':function(){
    setInterval(function(){
     console.log('我叫'+this.username+'我今年'+this.age); 
      
    },1000);
    
    
  }
}
Person.sayHello();

如果对JavaScript特性不熟悉的话，会觉得输出"我叫小暖，我今年19",但实际输出的是我叫undefined我今年undefined。这是为啥呢？因为setInterval是在全局作用域下执行的，那么this指向的全局的window，但是window没有属性age和username，所以是undefined。要想正常显示，可以做如下的修改，用self来保存this 的值

 const Person = {
     'username':'小暖',
     'age': '19',
     
     'sayHello':function(){
       let self = this;
       setInterval(function(){
         
        console.log('我叫'+self.username+'我今年'+self.age); 
         
       },1000);
       
       
     }
   }
   Person.sayHello();

当然还可以箭头函数，如下

 const Person = {
     'username':'小暖',
     'age': '19',
     
     'sayHello':function(){
       setInterval(()=>{
         
        console.log('我叫'+this.username+'我今年'+this.age); 
         
       },1000);
       
       
     }
   }
   Person.sayHello();

这样输出结果也是预期的。那么箭头函数的优势有哪些呢？主要有以下方面

• 1. 不绑定this、arguments
• 2.更简化的代码语法

1.不绑定this
上面例子已经说明了，使用箭头函数之后，this的值始终是定义时的this，所以才会正常输出预期结果。
2.不绑定arguments
即在箭头函数使用arguments会出现问题，示例如下，

let arrowfunc = ()=>console.log(arguments.length);
arrowfunc(); //  Uncaught ReferenceError: arguments is not defined

同样的，使用普通函数，

let arrowfunc2 = function(){console.log(arguments.length)};
arrowfunc2();  //  0

从上面我们可以看到箭头函数不能直接使用arguments
3.箭头函数不适用的情况

• 1. 对象的方法
     因为对象的括号是不能封闭作用域的，所以this的指向还是window
• 2. 不能作为构造函数
• 3. 定义原型时的方法

4.map数据结构的特点

JavaScript的对象的本质就是键值对的集合(Hash结构)，但是一般对象都是"字符串-值",而map则提供了"值-值"的机构，是一种更完善的Hash结构。

• 1. 创建map
     下面是创建一个map的代码

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);
console.log(map);

运行结果如下，

image.png

• 2. Map的常用属性和方法

1. sit属性：返回map的成员总数

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);
console.log(map.size); // 2

2. set和get方法,土体使用方式如下
   set

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);
map.set('sex','man').set('height','175');
console.log(map);

运行结果如下图，

image.png

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);

console.log(map.get("name"));  // xwl

3. has方法,判断某个键是否在map中

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);

console.log(map.has("name")); // true
console.log(map.has("age")); // true
console.log(map.has("xwl"));//fase

4.delete方法,示例如下

const map = new Map([
    ['name','xwl'],
    ['age' ,'19']
]);
map.delete('name');

console.log(map);

运行之后发信name属性已经消失了，如图

image.png

5. 遍历方法，具体方法有

• 1.keys() 返回键名
• 2.values() 返回键值
• 3.entries() 返回所有成员
• 4.forEach() 遍历Map的所有成员

5.Module的语法

• 1.export命令
  一个模块就是一个独立的文件,文件内部的所有变量外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
  可以使用多种写法。

// 直接导出
export var name = 'xwl';
export var sex = 'man';
// 集合导出
var name = 'xwl';
var sex = 'man';
export {name,sex};
// 导出函数
export function add(x,y){
    return x +y;
};
// 导出多个函数
function  fn1(){};
function  fn2(){};
export {fn1,fn2};

• 2. import命令
     使用export命令电仪模块的对外接口以后，其他js文件就可以通过import来加载这个模块。
     import命令用于加载其他的文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名，大括号里面的变量名必须与被导入模块对外接口的名称相同。代码如下

// profile.js
var firstNname = 'jack';
var lastName = 'jsckson';
var year = '19';
export {firstNname,lastName,year};
// main.js
import {firstNname,lastName,year} from './profile.js';

console.log(firstNname);  // jack
// index.html
<script src="./main.js" type="module">  // type一定要是module

三、总结

这篇文章我们主要学习了ES6的一些语法特性，当然还有promise，我们以后会重点讲的。