资讯专栏INFORMATION COLUMN

ECMAScript 6不完全教程

姘存按 / 473人阅读

摘要:从到有两种新的方式来声明变量用于声明块级作用于变量用于声明常量,其值不能被改变。更多信息箭头函数处理多个返回值一些函数或方法能通过数组或对象返回多个值。在中,总是需要创建中间变量来访问返回值。内置了模块语法,但并没有得到引擎良好支持。

1. 尝试ES6

这里有三种简单地方式用于ES6编程:

Web浏览器:使用Babel REPL,可以将ES6编译成ES5的平台,并且并不需要安装。

命令行:使用babel-node,可以执行ES6的Node.js版本(会在内部编译es5)。需要通过npm安装。

各种js引擎:根据ES6语法兼容表,找出被支持的ES6功能。

对于第一点和第二点,这有更多细节。

1.1 Babel REPL

Babel REPL主要有四个部分:

1、左上角包含es6源代码
2、左下角可以查看es6中的语法错误
3、右上角是es6被编译成es5的源代码
4、右下角是通过console.log()的输出结果

1.2 babel-node

babel-node可以通过npm安装:

$ npm install --global babel

跟node一样,可以命令开启REPL交互:

$ babel-node

一旦开启REPL,就可以去执行ES6代码:

> let arr = [1, 2, 3];
> arr.map(x => x * x)
[ 1, 4, 9 ]

注意:babel-node目前不支持多行输入
Babel官网上有管多关于Babel CLI的工具。

2. 从var到let/const

es6有两种新的方式来声明变量:
1、let用于声明块级作用于变量
2、const用于声明常量,其值不能被改变。

letconst可以用来替代var声明变量,但是不能盲目使用,因为不同的作用域会改变代码的行为。例如:

    var x = 3;
    function func(randomize) {
        if (randomize) {
            var x = Math.random(); // (A) scope: whole function
            return x;
        }
        return x; // accesses the x from line A
    }
    func(false); // undefined

func()会意外地返回undefined。你可以重写这部分代码,就知道为什么返回undefined了:

    var x = 3;
    function func(randomize) {
        var x;
        if (randomize) {
            x = Math.random();
            return x;
        }
        return x;
    }
    func(false); // undefined

如果用let代替之前的var,就会得到不同的结果:

    let x = 3;
    function func(randomize) {
        if (randomize) {
            let x = Math.random();
            return x;
        }
        return x;
    }
    func(false); // 3

因此,盲目地用letconst代替var是有风险的,我的建议是:
1、只在新代码中使用letconst
2、丢弃旧代码或仔细认证

更多信息:es6中的变量和作用域

3. 从IIFEs到代码块

在es5中,如果要维护本地变量,不得不使用IIFE:

(function () {  // open IIFE
        var tmp = ···;
        ···
    }());  // close IIFE
    
    console.log(tmp); // ReferenceError

而在es6中,则只需要代码块和let声明:

    {  // open block
        let tmp = ···;
        ···
    }  // close block
    
    console.log(tmp); // ReferenceError

更多信息:避免IIFEs

4. 从字符串拼接到模板常量

在es6中,对于字符串插值和多行字符串,Javscript能得到其字面值。

4.1 字符串插值

在es5中,是将结果放在字符串中进行拼接:

 function printCoord(x, y) {
        console.log("("+x+", "+y+")");
    }

es6中,通过字符串字面模板,可以在字符串中插入变量值:

function printCoord(x, y) {
        console.log(`(${x}, ${y})`);
    }
4.2 多行字符串

模板字面量也能输出多行字符串。
例如,在es5中,输出多行字符串,得这样:

var HTML5_SKELETON =
        "
" +
        "
" +
        "
" +
        "    
" +
        "    
" +
        "
" +
        "
" +
        "
" +
        "
";

如果通过反斜线转义新行,代码看起来会舒服点(但还是要显示的添加新行):

var HTML5_SKELETON = "
        

        

        

            

            

        

        

        

        ";

而es6得模板字面量能跨多行:

const HTML5_SKELETON = `
        
        
        
            
            
        
        
        
        `;

更多信息:字面量模板

5. 从函数表达式到箭头函数

在es5中,在函数表达式中必须小心使用this。在示例中,我创建了辅助变量_this_,以便于我能再line B处使用:

function UiComponent {
        var _this = this; // (A)
        var button = document.getElementById("myButton");
        button.addEventListener("click", function () {
            console.log("CLICK");
            _this.handleClick(); // (B)
        });
    }
    UiComponent.prototype.handleClick = function () {
        ···
    };

在es6中,可以使用箭头函数,它不会影响this

class UiComponent {
        constructor() {
            let button = document.getElementById("myButton");
            button.addEventListener("click", () => {
                console.log("CLICK");
                this.handleClick(); // (A)
            });
        }
        handleClick() {
            ···
        }
    }

对于只返回结果的短小回调函数,箭头函数是非常便利的。
在es5中,如下的回调是相对冗长的:

var arr = [1, 2, 3];
    var squares = arr.map(function (x) { return x * x });

在es6中,箭头函数会更简洁:

let arr = [1, 2, 3];
    let squares = arr.map(x => x * x);

在定义参数时,如果只有一个参数,括号是可以省略的。因而,(x) => x x and x => x x 都是允许的。
更多信息:箭头函数

6. 处理多个返回值

一些函数或方法能通过数组或对象返回多个值。在es5中,总是需要创建中间变量来访问返回值。es6中,可以使用解构。

6.1 通过数组返回多个值

exec()返回类数组对象的捕获组。es5中,当要访问捕获组的值时,需要一个中间变量:

var matchObj =
        /^(ffffdd)-(dd)-(dd)$/
        .exec("2999-12-31");
    var year = matchObj[1];
    var month = matchObj[2];
    var day = matchObj[3];

es6中,解构使代码更简单:

let [, year, month, day] =
        /^(ffffdd)-(dd)-(dd)$/
        .exec("2999-12-31");

空得逗号表示跳过数组的第一个元素。

6.2 通过对象返回多个值

Object.getOwnPropertyDescriptor()会返回一个属性描述符对象。

es5中,仍需要一个中间变量来访问你感兴趣的对象属性值:

var obj = { foo: 123 };
    
    var propDesc = Object.getOwnPropertyDescriptor(obj, "foo");
    var writable = propDesc.writable;
    var configurable = propDesc.configurable;
    
    console.log(writable, configurable); // true true

es6,可以使用解构:

let obj = { foo: 123 };
    
    let {writable, configurable} =
        Object.getOwnPropertyDescriptor(obj, "foo");
    
    console.log(writable, configurable); // true true

{writable, configurable}的值如下:

 { writable: writable, configurable: configurable }

更多信息:解构

7. 从for到forEach再到for-of

先说es6,一般会这样迭代数组:

var arr = ["a", "b", "c"];
    for (var i=0; i

也可以使用ArrayforEach

arr.forEach(function (elem) {
        console.log(elem);
    });

for循环的优点是可以中断,forEach的优点是简洁。
而es6的for-of循环则结合了两者的优点:

let arr = ["a", "b", "c"];
    for (let elem of arr) {
        console.log(elem);
    }

for-of循环也能通过数组的entries方法和解构返回数组的索引和对应的值:

for (let [index, elem] of arr.entries()) {
        console.log(index+". "+elem);
    }

更多信息:for-of循环

8. 参数默认值

es5中,指定参数默认值得这样:

function foo(x, y) {
        x = x || 0;
        y = y || 0;
        ···
    }

es6有个更简洁的语法:

function foo(x=0, y=0) {
        ···
    }

es6语法还一个优点:参数默认值只能被undefined触发,而在es5中,则会被任何z为false的值触发。

更多信息:参数默认值

9. 命名参数

在Javascript中,命名参数的普遍方式是对象字面量:

selectEntries({ start: 0, end: -1 });

其等价实现:

function selectEntries(options) {
        var start = options.start || 0;
        var end = options.end || -1;
        var step = options.step || 1;
        ···
    }

es6中,解构是语法更简单:

function selectEntries({ start=0, end=-1, step=1 }) {
        ···
    }
9.1 使参数可选

es5中使参数可选的做法是这样的:

function selectEntries(options) {
        options = options || {}; // (A)
        var start = options.start || 0;
        var end = options.end || -1;
        var step = options.step || 1;
        ···
    }

es6中,可以指定{}为参数的默认值:

function selectEntries({ start=0, end=-1, step=1 } = {}) {
        ···
    }

更多信息::模拟命名参数

10. 从arguments到参数扩展

es5中,若想让方法或函数接受任意个数的参数,就必须使用指定的arguments变量:

function logAllArguments() {
        for (var i=0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }

es6中,可以使用...操作达到同样地效果:

function logAllArguments(...args) {
        for (let arg of args) {
            console.log(arg);
        }
    }

还有更nice的语法:

function format(pattern, ...args) {
        ···
    }

而es5中的处理则相对笨拙:

function format() {
        var pattern = arguments[0];
        var args = arguments.slice(1);
        ···
    }

更多信息:Rest parameters

11. 从apply到散布操作符(...)

es5中,apply()会将数组转会成参数,es6中使用散布操作符达到同样地目的。

11.1 Math.max()

es5-->apply():

> Math.max.apply(null, [-1, 5, 11, 3])
    11

es6-->spread operator:

> Math.max(...[-1, 5, 11, 3])
    11
11.2 Array.prototype.push()

es5-->apply():

    var arr1 = ["a", "b"];
    var arr2 = ["c", "d"];
    
    arr1.push.apply(arr1, arr2);
        // arr1 is now ["a", "b", "c", "d"]

es6-->spread operator:

    let arr1 = ["a", "b"];
    let arr2 = ["c", "d"];
    
    arr1.push(...arr2);
        // arr1 is now ["a", "b", "c", "d"]

更多信息:spread operator

12. 从concat()到(...)

ES5 – concat():

    var arr1 = ["a", "b"];
    var arr2 = ["c"];
    var arr3 = ["d", "e"];
    
    console.log(arr1.concat(arr2, arr3));
        // [ "a", "b", "c", "d", "e" ]

ES6 – spread operator:

    let arr1 = ["a", "b"];
    let arr2 = ["c"];
    let arr3 = ["d", "e"];
    
    console.log([...arr1, ...arr2, ...arr3]);
        // [ "a", "b", "c", "d", "e" ]

更多信息:spread operator

13. 从构造器到类

对于构造器语法,es6的类则更简便。

13.1 基本类

es5中实现一个基本类如下:

function Person(name) {
        this.name = name;
    }
    Person.prototype.describe = function () {
        return "Person called "+this.name;
    };

es6中,类提供了更简洁的语法:

class Person {
        constructor(name) {
            this.name = name;
        }
        describe() {
            return "Person called "+this.name;
        }
    }
13.2 派生类

es5实现了类的派生,下面是实现派生类的一种规范方法:

function Employee(name, title) {
        Person.call(this, name); // super(name)
        this.title = title;
    }
    Employee.prototype = Object.create(Person.prototype);
    Employee.prototype.constructor = Employee;
    Employee.prototype.describe = function () {
        return Person.prototype.describe.call(this) // super.describe()
               + " (" + this.title + ")";
    };

es6内置了类派生语法,要借助extends关键字:

class Employee extends Person {
        constructor(name, title) {
            super(name);
            this.title = title;
        }
        describe() {
            return super.describe() + " (" + this.title + ")";
        }
    }

更多信息:

14. 从自定义error到Error派生

跟上面有点类似。es5中自定义error:

function MyError() {
        // Use Error as a function
        var superInstance = Error.apply(null, arguments);
        copyOwnPropertiesFrom(this, superInstance);
    }
    MyError.prototype = Object.create(Error.prototype);
    MyError.prototype.constructor = MyError;

es6通过派生实现:

class MyError extends Error {
    }

更多信心:Subclassing built-in constructors

15. 从对象字面量的函数表达式和方法定义

语法上的差别。es5实现:

var obj = {
        foo: function () {
            ···
        },
        bar: function () {
            this.foo();
        }, // trailing comma is legal in ES5
    }

es6:

 let obj = {
        foo() {
            ···
        },
        bar() {
            this.foo();
        },
    }

更多信息:方法定义

16. 从对象到图

es5中利用对象来实现图的数据结构,需要将对象的prototype指向null,并保证__proto__上没有对应的键。

var dict = Object.create(null);
    function countWords(word) {
        var escapedWord = escapeKey(word);
        if (escapedWord in dict) {
            dict[escapedWord]++;
        } else {
            dict[escapedWord] = 1;
        }
    }
    function escapeKey(key) {
        if (key.indexOf("__proto__") === 0) {
            return key+"%";
        } else {
            return key;
        }
    }

es6则内置了Map数据结构;

let map = new Map();
    function countWords(word) {
        let count = map.get(word) || 0;
        map.set(word, count + 1);
    }

更多信息:Maps and Sets

17. 从CommonJS模块到es6 模块

es5中,模块系统是基于AMD或CommocJS语法。es6内置了模块语法,但并没有得到Javascript引擎良好支持。

17.1 多个导出

在CommonJS中,可以这样实现:

 //------ lib.js ------
    var sqrt = Math.sqrt;
    function square(x) {
        return x * x;
    }
    function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    module.exports = {
        sqrt: sqrt,
        square: square,
        diag: diag,
    };
    
    //------ main1.js ------
    var square = require("lib").square;
    var diag = require("lib").diag;
    
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5

es6的语法是酱紫的:

//------ lib.js ------
    export const sqrt = Math.sqrt;
    export function square(x) {
        return x * x;
    }
    export function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    
    //------ main1.js ------
    import { square, diag } from "lib";
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5

或者作为一个对象导入:

//------ main2.js ------
    import * as lib from "lib"; // (A)
    console.log(lib.square(11)); // 121
    console.log(lib.diag(4, 3)); // 5
17.2 单个导出

Node.js继承了CommonJS的语法,能从模块导出单个值:

 //------ myFunc.js ------
    module.exports = function () { ··· };
    
    //------ main1.js ------
    var myFunc = require("myFunc");
    myFunc();

es6通过export default实现:

//------ myFunc.js ------
    export default function () { ··· } // no semicolon!
    
    //------ main1.js ------
    import myFunc from "myFunc";
    myFunc();

更多信息:Modules

相关文章:ECMAScript 6新特性介绍
译文出处:Getting started with ECMAScript 6

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

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

相关文章

  • [ ES6 ] 一. ECMAScript 6 相关学习资源

    摘要:浏览器兼容性列表可以看到还是全线飘红的和支持特新列表据此在和上使用这些新特新待补充二相关教程最重要的产品规格书,什么教程也脱离不了这里的标准,英文好的还是多看点。 一. ES6新特性相关 es6features : 经典的ES6新特性预览,github 逼近 10k star . ES6新特性概览 :同样也很全面的特性介绍的中文版。 浏览器兼容性列表 :可以看到还是全线飘红的~~~ ...

    Towers 评论0 收藏0
  • 前端相关汇总

    摘要:简介前端发展迅速,开发者富有的创造力不断的给前端生态注入新生命,各种库框架工程化构建工具层出不穷,眼花缭乱,不盲目追求前沿技术,学习框架和库在满足自己开发需求的基础上,然后最好可以对源码进行调研,了解和深入实现原理,从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

    BenCHou 评论0 收藏0
  • ECMAScript 2018 标准导读

    摘要:标准对象,语义由本规范定义的对象。三个冒号作为分隔符分割数字字符串文法的产生式。所有因为带来的问题,基本上是占着茅坑不拉屎的行为导致。以数组测试操作为例,标准中的描述如下相对于来说,规范中增加了对的处理。 前言 本文是对《ECMAScript 2018 Language Specification》的解读。本文是对标准的概述性导读,不是对 ES2018特性的详细描述,也不会针对某个技术...

    MiracleWong 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0

发表评论

0条评论

姘存按

|高级讲师

TA的文章

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