一、ES6
ES6是JavaScript语言的下一代标准，已经在2015年6月正式发布。ES6的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
二、语法分析
1.let命令
- 1.ES6新增了
let命令，用来申明变量。它的用法类似于var，但是声明的变量只在let所在的代码块有效。如果强行引用let的变量就会报错，如下图
image.png - 2.
另外使用let声明的变量作用于不会被提前,var命令支持变量提升,即变量可以在声明之前使用，值为undefined,如图
但是image.pnglet声明的变量一定要在使用之前声明，不然会报错，这其实才符合语言规范啊。如图，
image.png - 3.
let命令在相同作用域下，不能声明相同的变量
如果声明就会报错，如图
image.png
但是如果我们用var的话是可以的
image.png
2.const命令
- 1.
const声明一个只读变量，声明之后就不会改变了，这就说明const的变量声明之后要理解赋值，不然就会报错,如图
image.png -
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();
这样输出结果也是预期的。那么箭头函数的优势有哪些呢？主要有以下方面
- 不绑定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.箭头函数不适用的情况
- 对象的方法
因为对象的括号是不能封闭作用域的，所以this的指向还是window
- 对象的方法
- 不能作为构造函数
- 定义原型时的方法
4.map数据结构的特点
JavaScript的对象的本质就是键值对的集合(Hash结构)，但是一般对象都是"字符串-值",而map则提供了"值-值"的机构，是一种更完善的Hash结构。
- 创建
map
下面是创建一个map的代码
- 创建
const map = new Map([
['name','xwl'],
['age' ,'19']
]);
console.log(map);
运行结果如下，
image.png
发现有
key和value，这也验证了map是一宗Hash结构。
- Map的常用属性和方法
-
sit属性：返回map的成员总数
const map = new Map([
['name','xwl'],
['age' ,'19']
]);
console.log(map.size); // 2
-
set和get方法,土体使用方式如下
set
const map = new Map([
['name','xwl'],
['age' ,'19']
]);
map.set('sex','man').set('height','175');
console.log(map);
运行结果如下图，
image.png
get
const map = new Map([
['name','xwl'],
['age' ,'19']
]);
console.log(map.get("name")); // xwl
-
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
- 遍历方法，具体方法有
- 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};
-
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，我们以后会重点讲的。
