走进大前端：ES6深入剖析解析彩票项目实战

CK2032-ES6深入剖析解析彩票项目实战


随笔背景：在很多时候，很多入门不久的朋友都会问我：我是从其他语言转到程序开发的，有没有一些基础性的资料给我们学习学习呢，你的框架感觉一下太大了，希望有个循序渐进的教程或者视频来学习就好了。对于学习有困难不知道如何提升自己可以加扣：1225462853进行交流得到帮助，获取学习资料.


CK2032-ES6深入剖析解析彩票项目实战

下载地址：http://pan.baidu.com/s/1jI05TPW

我们的目标是解读ES6，让你喜欢用它


手把手由浅入深的讲解ES6


从零开始学习ES6语法，针对特定知识点量身设计的迷你案例，深入掌握ES6每个知识点


复杂度较高的彩票项目


使用ES6开发复杂度较高的彩票项目，完整的开发项目流程，掌握如何最佳的发挥ES6优势


全面讲解ES6的特性及应用


熟练掌握ES6语法特性，教你在项目中如何选型和实施


兼容IE8+的ES6自动化构建


使用babel、gulp、webpack-stream完成兼容IE8+的ES6自动化构建，解决浏览器兼容性问题


打消初学者在ES6和ES5之间徘徊的顾虑


就目前发展形势来看，很多项目在应用ES6，相比ES5特性的优势也尤为突显，在本项目中你会掌握ES6强大的特性

箭头操作符


如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。

我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。

var array = [1, 2, 3];//传统写法array.forEach(function(v, i, a) {    console.log(v);});//ES6array.forEach(v = > console.log(v));

类的支持

ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。

下面代码展示了类在ES6中的使用。再次啰嗦一句，你可以将代码贴到traceur自己查看运行结果。

//类的定义class Animal {//ES6中新型构造器    constructor(name) {        this.name = name;    }    //实例方法    sayName() {        console.log('My name is '+this.name);    }}//类的继承class Programmer extends Animal {    constructor(name) {    //直接调用父类构造器进行初始化        super(name);    }    program() {        console.log("I'm coding...");    }}//测试我们的类var animal=new Animal('dummy'),wayou=new Programmer('wayou');animal.sayName();//输出 ‘My name is dummy’wayou.sayName();//输出 ‘My name is wayou’wayou.program();//输出 ‘I'm coding...’

//通过对象字面量创建对象var human = {    breathe() {        console.log('breathing...');    }};var worker = {    __proto__: human, //设置此对象的原型为human,相当于继承human    company: 'freelancer',    work() {        console.log('working...');    }};human.breathe();//输出 ‘breathing...’//调用继承来的breathe方法worker.breathe();//输出 ‘breathing...’

参数默认值，不定参数，拓展参数

默认参数值

现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name){//传统的指定默认参数的方式var name=name||'dude';console.log('Hello '+name);}//运用ES6的默认参数function sayHello2(name='dude'){console.log(`Hello ${name}`);}sayHello();//输出：Hello dudesayHello('Wayou');//输出：Hello WayousayHello2();//输出：Hello dudesayHello2('Wayou');//输出：Hello Wayou