ES6入门,看这篇就够了

邢夫人
• 阅读 8192

ES6从入门到放弃

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

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

1.babel babeljs.io在线编译

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

traceur 编译

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

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

3.es6新功能

1.定义变量

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

2.const

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

3.字符串连接

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

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

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大法好,收工!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
ES6学习笔记(3)
参考书《ECMAScript6入门》http://es6.ruanyifeng.com/字符串的扩展ES6之前只能识别\\u0000\\uFFFF之间的字符,超过此范围,识别会出错;ES6弥补了这个错误ES6扩展的新方法codePointAt"𠮷".CodePointAt(0)//返回超过\\u00
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这