现代WebGIS开发教程之ES6基础3——ES6常用新特性

混沌寄存器
• 阅读 1053

开端

 上篇讲述如何调试ES6项目,本篇将介绍ES6的基本知识,涉及的主要是ES6特性,如果系统学习请找相关资料,强烈推荐《ES6 标准入门(第3版)》,在线版本http://es6.ruanyifeng.com/

ES6常用特性

定义变量和常量

 ES6推荐使用let定义变量,使用const定义常量,而不是原来的var。为啥,主要有以下原因
 1.var允许重复定,而let和const不能在同一作用域中重复定义。如下

//以下代码没毛病
 function fun(){
    var a =3;
    console.log(a);
    var a = 4;
    console.log(a);
}
//语法错误
 function fun(){
    let a =3;
    console.log(a);
    let a = 4;
    console.log(a);
}

 2.let和var是块级作用域,var是顶级作用域。顶级作用域用起来一时爽,用多了就要呵呵了,不知道变量什么时候就被改了,因为在哪里都能定义,在哪里都能引用。

箭头符号

ES6中很多函数定义都会使用箭头符号"=>",比如:

fun=()=>{
    const a =3;
    console.log(a);
}

 为什么放弃原来的定义方法,换成箭头符号,做过JavaScript中前端人员都有被this搞糊涂过经历,有了箭头符号就是指路明灯。再也不会把this是啥搞错啦,因为箭头符号定的函数体内,this肯定会是函数所在的对象。

面向对象开发

 是的ES6支持面向对象开发,可以定义类,支持类的继承,静态成员,属性设置,一应俱全。
类的定义如下

//类定义
export default class Animal{
    // 构造函数
    constructor(nickName){
        this._nickName = nickName;
        Animal.count ++;
    }
    // 公有成员函数
    speak(){return "hello";}
    // 私有成员函数
    _say(){return "zzz";}
    // 获取属性
    get NickName(){return this._nickName;}
    // 设置属性
    set NickName(value){this._nickName = value;}
    // 静态方法
    static showCount(){return Animal.count;};
}
// 静态变量
Animal.count = 0;

类的继承也不是问题

export default class Cat extends Animal{
    constructor(nickName){
        super(nickName);
    }
    playGame(){return "let's play";}
}
export default class Dog extends Animal{
    constructor(nickName){
        super(nickName);
    }
    doorGuard(){return "door guard";}
    speak(){
        return super.speak() + ', I\'m ' + this._nickName;
    }
}

Promise和async

 前端的IO或者服务访问都是异步的,比如http请求啥的。异步就得有个回调机制Promise就是为这个来做的,常用方法resolve,reject,这是自己定义Promise对象用的,但是对于伸手党,更熟悉的应该是then吧。这里不展开将如何定义Promise,使用是这样的。

fetch(`${url}`)
    .then(resp => resp.json())
    .then(json => json.result)

 这么时候的时候还算方便,但是如果需要按顺序调用多个服务呢,那么就需要在then中嵌套fetch,这样就会嵌套好多层,代码那个酸爽。有什么办法呢,于是async出现了这货能让你不搞嵌套,写法

export async function getScenes(sceneName) {
  const result = await fetch(`${url}`)
    .then(resp => resp.json())
    .then(json => json.result);
  return result;
}

 调用,要加上await。

async function call() {
    const result = await getScenes('');
}

 很多人以为fetch是ES6的方法,然鹅不是,fetch是DOM接口,所以在node.js中是无法使用的,特此说明。

其他

1.模板字符串,再也不用拼凑字符串啦,看上一节例子自己找亮点。
2.数组方法,我讲的是find,map,reduce这些,你确定不是讲hadoop??谁用谁知道,比你们写for不知道强了多少倍了
3.解构赋值,Object.assign,嗯,塞私货真方便
4.Reflect和Proxy,元编程了解一下,各种动态特性,让你眼花缭乱
5.Decorator,可以预见一波AOP的骚操作

“其他”一节提到的没有搞定之前,不要说自己精通JavaScript,你只是敲开了JavaScript的门,还没有进去!

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
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
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
凯特林 凯特林
4年前
ES 家族新特性,闪亮登场!
前言前端学习永无止境,学习吧骚年本文集合了ES6至ES11常用到的特性,包括还在规划的ES12,只列举大概使用,详细介绍的话内容量将十分巨大.。PS:使用新特性需要使用最新版的bable就行转义新特性ES6(2015)1\.类(class)class Man   constructor(name)     this.n
Buzz69 Buzz69
4年前
ES6环境搭建及react-router学习
一、起因ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下。不过,由于现在大部分的浏览器对ES6的支持程度都不是很好。所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES7的代码转为ES5的代码。今天,就配置了一下环境
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年前
ES6新特性整理,你需要了解的ES6知识
ES6是新版本JavaScript语言的标准,上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作已经完成,14年12月份放出了正式版本。目前主流的浏览器都支持运行ES6代码,如果你的不支持,还等什么呢,换浏览器啊~潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采。箭头操作符
Stella981 Stella981
3年前
JavaScript 是如何工作的:JavaScript 的内存模型
个人专栏ES6深入浅出已上线,深入ES6,通过案例学习掌握ES6中新特性一些使用技巧及原理,持续更新中,←点击可订阅。(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fqq449245884%2Fcategory_9606068.html
Stella981 Stella981
3年前
ES6, Angular,React和ABAP中的String Template(字符串模板)
StringTemplate(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性。本文将Jerry工作中使用到的StringTemplate的特性做一个总结。ES6阮一峰老师有一个专门的网站介绍ES6入门,还出了一本书:《ECMAScript6标准入门》。http://es6.ruanyifeng.com/(https