资讯专栏INFORMATION COLUMN

ES6入门,看这篇就够了

lewinlee / 1759人阅读

摘要:从入门到放弃是什么,黑历史,不讲,自己百度去。类你没有看错,这里面的就没有问题的。之前我们用过,和有了,再也不用这两个货了。一个函数,可以遍历状态感觉就是状态机,好吧不说了再说就懵逼了。

ES6从入门到放弃 1.ES6是什么,黑历史,不讲,自己百度去。 2.在浏览器中如何使用? 1.babel babeljs.io在线编译 2.traceur-----Google出的编译器,把ES6编译成ES5
traceur 编译

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



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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82501.html

相关文章

  • JS正则表达式入门看这篇就够了

    摘要:如果遇到非常的复杂的匹配,正则表达式的优势就更加明显了。关于正则表达式书写规则,可查看,上面说的很清楚了,我就不贴出来了。替换与正则表达式匹配的子串,并返回替换后的字符串。结语正则表达式并不难,懂了其中的套路之后,一切都变得简单了。 前言 在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断...

    wenzi 评论0 收藏0
  • 监听器入门看这篇就够了

    摘要:但监听器要在事件源上实现接口也就是说,直接用一个类实现和接口是监听不到内对象的变化的。 什么是监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行。。 为什么我们要使用监听器? 监听器可以用来检测网站的在线人数,统计网站的访问量等等! 监听器组件 监听器涉及三个组件:事件...

    eechen 评论0 收藏0
  • Lombok 看这篇就够了

    摘要:注解在类上为类提供一个全参的构造方法,加了这个注解后,类中不提供默认构造方法了。这个注解用在类上,使用类中所有带有注解的或者带有修饰的成员变量生成对应的构造方法。 转载请注明原创地址:http://www.54tianzhisheng.cn/2018/01/07/lombok/ showImg(http://ohfk1r827.bkt.clouddn.com/blog/180107/7...

    LeanCloud 评论0 收藏0
  • Python 3 入门看这篇就够了

    摘要:缩进不一致,会导致运行错误。变量变量在使用前必须先定义即赋予变量一个值,否则会报错数据类型布尔只有和两个值,表示真或假。 简介 Python 是一种高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python 由 Guido van Rossum 于 1989 年底在荷兰国家数学和计算机科学研究所发明,第一个公开发行版发行于 1991 年。 特点 易于学习:Python ...

    Shimmer 评论0 收藏0
  • 你真的完全了解Java动态代理吗?看这篇就够了

    摘要:动态地代理,可以猜测一下它的含义,在运行时动态地对某些东西代理,代理它做了其他事情。所以动态代理的内容重点就是这个。所以下一篇我们来细致了解下的到底是怎么使用动态代理的。 之前讲了《零基础带你看Spring源码——IOC控制反转》,本来打算下一篇讲讲Srping的AOP的,但是其中会涉及到Java的动态代理,所以先单独一篇来了解下Java的动态代理到底是什么,Java是怎么实现它的。 ...

    haitiancoder 评论0 收藏0

发表评论

0条评论

lewinlee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<