ES6入门,看这篇就够了

来源:互联网 发布:团伙研发作弊软件 编辑:程序博客网 时间:2024/06/16 01:50
## ES6从入门到放弃


1.ES6是什么,黑历史,不讲,自己百度去。


2.在浏览器中如何使用?


1.babel babeljs.io在线编译


2.traceur-----Google出的编译器,把ES6编译成ES5


traceur 编译


bootsrap 引导程序,和我们理解的bootstrap css那个框架没有半毛钱关系。 


```javascript
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="module">


    </script>
```
---


3.es6新功能


1.定义变量


let 替代var 拥有块级作用域。


2const 


定义常量 常量不可以修改,如果修改会报错


3.字符串连接


ES6管它叫模板引擎,其实就是字符串连接这个破玩意。


用键盘1左边那个键,反引号。





```javascript
var str = '帅';//注意这里是正常双引号
var str2 = `你们从我脸上看到了什么${str},难道不是么?`;
```


4.解构赋值


var [a,b,c] = [12,5,8];


console.log(a,b,c);//12,5,8 是不是很简洁?


5.ES6新技巧


a)复制数组


arr2.from(arr)//再也不用用循环了,吼吼,还可不可以更性感一点


arr2 = [...arr]//简直是bug级别的用法,不过真心简单


b)for of循环


c)map 、delete


6.箭头函数 重点,angular 2.x用的不少。


```
/*function show(a){
return a;
}
var s=show(12);
alert(s);*/


var show=(a,b)=>a+b;


var s=show(12,5);
```


相当简单。


```
([param] [, param]) => {
   statements
}
param => expression
```


解释:


param 是参数,根据参数个数不同,分这几种情况: 
() => { … } // 零个参数用 () 表示
x => { … } // 一个参数可以省略 ()
(x, y) => { … } // 多参数不能省略 ()


7.更简洁的对象语法


```
var name='abb';
        var age=101;
        var preson={
            name,
            age,
            showName(){
               return this.name;
            },
            showAge(){
                return this.age;
            }
        };
        alert(preson.showName());
```


你没有看错,bug一样的语法。


8.重中之重,不懂这个你彻底懵逼,完全看不懂angular2.x在干啥。类。


类,真特么累,一个语法糖,废柴,然而你还得懂。





```
class Person{ //类
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }


        var p1=new Person('aaa',10);


        alert(p1.showName());
```


你没有看错,这里面的this就没有问题的。玩类,不得不说的一个东西就是继承,这里得感谢ES6,我们再也不用


apply 和 constructor 混合的方式继承了,太特么恶心了,直接用extend,鼓掌,送火箭。


```
        class Person{ //类
            constructor(name='default',age=0){
                this.name=name;
                this.age=age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }


        //继承
        class Worker extends Person{
            constructor(name,age,job='扫地的'){
                super(name,age);
                this.job=job;
            }
            showJob(){
                return this.job;
            }
        }
```


早特么应该这么玩,话说吐槽一下,敢不敢把construtor这么丑逼的东西给我换成真正的构造函数?


再说一个模块化,前方高能,必须必须必须会!!否则你载angular2.x中连代码你都组织不起来,不知道你往哪里写。


之前我们用过seajs,和require,有了ES6,再也不用这两个货了。


定义模块


```
const a = 12;
export a;
```


再来一个angular2.x中的例子


```
class hero{
//属性
  xxxx
  //方法
}


exports hero;
```


怎么使用?


```
        import modA from './a.js';
        import modB from './b.js';


        console.log(modA+modB);
```


9.promise


如果你想玩一些新的库,肯定离不开数据交互,外面炒的很火。


就是一个对象,用来传递异步操作的数据(消息)


pending(等待、处理中)—> Resolve(完成、fullFilled)
  —> Rejected(拒绝、失败)
使用:


var p1=new Promise(function(resolve,reject){
//resolve  成功了
//reject    失败了
    });

var p1=new Promise(function(resolve,reject){
if(异步处理成功了){
resolve(成功数据)
}else{
reject(失败原因)
}
    });

p1.then(成功(resolve),失败(reject))
--------------------------------------------
p1.catch——用来捕获错误
10.生成器Gennerator.


看起来挺悬,其实就是那么回事儿,我们看看是什么鬼。


一个函数,可以遍历状态,感觉就是状态机,好吧不说了再说就懵逼了。


语法:


function *show(){


}


注意:


a)函数名字前有星号


b)内部用yield 


c)next执行下一个状态


```
        function* show(){
            yield 'Hello';
            yield 'World';
            yield 'Es6';
            return 'well';
        }


        var res=show();


        console.log(res.next()); //{value:'Hello', done:false}
        console.log(res.next()); //{value:'World', done:false}
        console.log(res.next()); //{value:'Es5', done:false}
        console.log(res.next()); //{value:'well', done:true}
```


ES6基本上会这么多就可以了,剩下的时间就可以去泡妹子了,JS大法好,收工!

原创粉丝点击