本系列文章合适疾速控制 ES6 入门语法，想深切进修 ES6 的小伙伴能够看看阮一峰先生的《ECMAScript 6 入门》
进修 20% 的学问完成 80% 的事情

关于 ES6

轻微引见下 ES6 吧，细致引见请自行 baidu 或 Google

1. ES2015 = ES6
2. ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代规范
3. 当代浏览器支撑大部分（90%+）的原生 ES6 ，然则为了兼容老版本的浏览器，一般运用 Babel 将 ES6 代码转为 ES5 代码。

常量变量 let and const

先说说常量和变量的观点吧，

常量是说那种举行一次赋值后不会变动的值，比方说游戏账户的 ID，
变量是说赋值后有变动的需求的，比方游戏名，游戏暗码。

在之前的 JavaScript 中是不辨别常量和变量的一切运用 var 来定义全局变量，

var userId = 666;
var userPassword = "mimabunengshuo";

如今 ES6 中运用 let 定义部分变量，const 定义部分常量

const userId = 666;
let userPassword = "wobuzidao";

为何须要运用部分变量与常量

//我愿望反复打印 0 到 9 ，打印10次
//运用 var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//运用 let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//效果打印只要一次 0 到 9
letI();//顺利完成

如果非要运用 var 完成这个需求的话能够运用闭包
关于闭包本次不多做议论

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//顺利完成

组织赋值

1. 摆布双方必需是一样的数据范例，或许转换后是一样的范例；
2. 等号右侧的值应该是数组或对象，不是对象或数组，就先将其转为对象；
3. 定义和赋值必需同步完成

比方声明变量

let a = 1;
let b = 2;
let c = 3;

ES6 许可写成下面如许。

let [a, b, c] = [1, 2, 3];

经常使用实例
1.交流变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];  

2.提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，特别有效。

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭头函数

在 ES6 之前定义函数是如许写

var f = function (i){
    return  i + 5;
}

有了箭头函数能够如许写（去掉 function 关键词，在”()”背面加”=>”）

let f = (i) => {
    return  i + 5;
}

彷佛没有太大区分？

• 箭头函数只要一个参数时,能够省略”()”,只写参数；当只要一条返回语句时，能够省略”{}”,以及 return 语句

上面的能够如许写

let f = i => return  i + 5;

箭头函数的 this 是牢固稳定的，就是指向定义时地点的对象，而不是运用时地点的对象

如果将 ES6 的箭头函数转换为 ES5 的一般函数,能够看到，箭头函数的 this 是在援用外层的 this

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

字符串模板

• 字符串模板重要用来处置惩罚变量和字符串夹杂的状况
• 字符串运用反引号(`字符串`)来包裹字符串，用$符加大括号 ( \${JavaScript}) 来包裹恣意的 JavaScript 表达式
• 字符串模板中能够运用回车

比方用 JavaScript 来天生 HTML 元素，元素的文本想运用本身 JavaScript 运算后的效果
ES5 中比较贫苦

$('#dom').append(
  '<div>你的用户名是：' + userName + '<br> ' +
  '你已注册了 ' + oNumber +'年</div>'
);

ES6中相对简朴

$('#dom').append(
  `<div>你的用户名是：${userName}<br>你已注册了${oNumber}年</div>`
);

面向对象

• class 用来定义一个类
• extends 用来示意继续哪一个类
• constructor 组织函数能够定义私有要领和属性,此函数外的为同享的
• super() 在 constructor 运用该要领继续父类的 this 对象

代码示例

class user {
    constructor() {
        this.name = '用户1';
    }
    sayHello(say) {
        console.log(`${this.name}，有人对你说：${say}`);
    }
}

let user1 = new user();
user1.sayHello('你好'); //用户1，有人对你说：你好

class xiaoming extends user {
    constructor() {
        super();
        this.name = '小明';
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello('你好'); //小明，有人对你说：你好
let user2 = new user();
user2.sayHello('你好')//用户1，有人对你说：你好

[ES6] 疾速控制经常使用 ES6 （一）
[ES6] 疾速控制经常使用 ES6 （二）