ECMAScript6
ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言 现在主流浏览器使用的是ECMAScript5
1. 作用域变量
作用域就是一个变量的作用范围。也就是你声明一个变量以后,这个变量可以在什么场合下使用,以前只有全局作用域和函数作用域。
if (true) {
var a = “a”; // 期望a是某一个值
} console.log(a);
1.2 块级作用域
在用var定义变量的时候，变量是通过闭包进行隔离的，现在用了let，不仅仅可以通过闭包隔离，还增加了一些块级作用域隔离。 块级作用用一组大括号定义一个块,使用 let 定义的变量在大括号的外面是访问不到的
if(true){
let name = ‘zfpx’; }console.log(name);// ReferenceError: name is not defined
2.1 解析数组
解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量，可以将一个数组中的值按照规则赋值过去。
var [name,age] = [‘zfpx’,8]; console.log(name,age);
2.2 解构对象
对象也可以被解构
var obj = {name:’zfpx’,age:8};
//对象里的name属性的值会交给name这个变量，age的值会交给age这个变量
var {name,age} = obj; console.log(name,age);
3.1 模板字符串
模板字符串用反引号(数字1左边的那个键)包含，其中的变量用${}括起来
var name = ‘zfpx’,age = 8; let desc =
${name} is ${age} old!;
console.log(desc);
//所有模板字符串的空格和换行，都是被保留的
var str =
<ul> <li>a</li> <li>b</li> </ul>; console.log(str);
其中的变量会用变量的值替换掉
4.1 函数定义
ES6允许使用“箭头”（=>）定义函数。 箭头函数简化了函数的的定义方式，一般以 “=>” 操作符左边为输入的参数， 而右边则是进行的操作以及返回的值
inputs=>output
var double = v => v*2;
上面的箭头函数等同于
var double = function(v) { return v*2; };
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var fn = () => 100;
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var add = (a,b) => a+b;
4.3 this指针
箭头函数根本没有自己的this，导致内部的this就是外层代码块的this 正是因为它没有this，从而避免了this指向的问题
var person = {
name:’zfpx’,
getName:function(){
//在浏览器执行的话this指向window
setTimeout(function(){console.log(this);},1000);
//在浏览器执行的话this指向person
setTimeout(() => console.log(this),1000);
} } person.getName();
5.1 对象字面量
如果你想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值就可以直接在对象里加上这些属性
let name = ‘zfpx’; let age = 8; let getName = function(){
console.log(this.name); } let person = {
name,
age,
getName
} person.getName();
6.1 class
使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化
class Person {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name);
} } let person = new Person(‘zfpx’); person.getName();
6.2 继承extends
一个类可以去继承其它的类里的东西
class Person { constructor(name){
this.name = name; } }class Teacher extends Person{
constructor(name,age){
super(name);
this.age = age;
} } var teacher = new Teacher(‘zfpx’,8); console.log(teacher.name,teacher.age);
6.4 get与set
getter可以用来得获取属性，setter可以去设置属性
class Document {
constructor(){
this.cookies = [];
}
set cookie(cookie){
this.cookies.push(cookie);
}
get cookie(){
return this.cookies;
} } let document = new Document(); document.cookie = ‘name=zfpx’; document.cookie = ‘age=6’; console.log(document.cookie);
7. 模块
模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能。
7.1 导出
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
export var name = ‘zfpx’;
export var age = 8;
var name = ‘zfpx’; var
age = 8; export {name,age};
7.2 导入
使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）
import {name,age} from ‘./person.js’;
console.log(name,age);
7.3 在页面中引用(不支持es6模块化时可以引入下面三个插件)
7.4 默认导出
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。 为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出 此模块的默认输出是一个函数
export default function say(){
console.log(‘say’); }
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
import say from ‘./person.js’;