? ECMAScript 8都发布了,你还没有用上ECMAScript 6? 100元怎么倍投40期
圈子系统信息
      圈子系统信息
  • 圈主:我是超管
  • 粉丝:1 人
  • 人气:156 关注度
      联系方式
  • 电话:400-889-3333
  • 地址:广州大道102号
ECMAScript 8都发布了,你还没有用上ECMAScript 6?
2018-02-02 09:09:48 598
  • 收藏

    ES8已经与17年6月底发布,而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6,并将ES6的语法应用到实战项目中。

    阅读全文大约需要15分钟。

    文中以 ES 表示 ECMAScript。

    今年六月底,TC39发布新一版的ES 8(ES 2017),自从ES6在15年发布之后,每一年TC39都会发布新一版的ES语言标准。

    我了解的前端开发者中,还有很多人没有用上ES6,有的人是觉得ES5用的挺好的,懒得去学ES6,有的人是有想学ES6的决心,但是苦于没有合适的机会(项目)去实战练习。

    如果你用过React,Vue或Nodejs等,那你多多少少都会使用到一些ES6语法的。

    ES8中的新特性,浏览器厂商和语法转换器还需要一段来实现,不如我们还是先聊聊怎么在你的项目中用上ES6吧。

    什么是ES6?它和ES5有什么区别?

    我们常说的JavaScript是指ES3和ES5,ES6是ECMAScript 6 的缩写。

    100元怎么倍投40期对于经常写原生JavaScript的前端开发者来说,对ES5中的语法肯定比较熟悉,比如数组中的一些方法forEach,map,filter,some,every,indexOf,lastIndexOf,reduce,reduceRight ……,以及对象(Object)和函数(Function)都拓展了很多方法,这里不多赘叙。

    ES6给前端开发者带来了很多的新的特性,可以更简单的实现更复杂的操作,很大的提高开发效率,提高代码的整洁性。

    ES6中的新特性有很多,列一些比较常用的特性:

    Block-Scoped Constructs Let and Const(块作用域构造Let and Const)

    Default Parameters(默认参数)

    Template Literals (模板字符串)

    Multi-line Strings (多行字符串)

    Arrow Functions (箭头函数)

    Enhanced Object Literals (增强的对象文本)

    Promises

    Classes(类)

    Modules(模块)

    Destructuring Assignment (解构赋值)

    下面介绍下这些常用的ES6特性。

    Block-Scoped Constructs Let and Const(块作用域构造Let and Const)

    ES6提供了两个新的声明变量的关键字:let和const。而let和const要和块级作用域结合才能发挥其优势。

    什么是块级作用域?

    块级作用域的表示一对大括号{}包围的区域是一个独立的作用域,在这个作用域内用let声明的变量a,只能在这个作用域内被访问到,在这对大括号外面是访问不到a的。

    当然,在块级作用域中还可以声明函数,该函数也是只能作用域内部才能被访问到。所以,在if、else、for甚至是一对单独的{},都是一个块级作用域。

    在ES6之前,是没有块级作用域的概念的,只有全局作用域和函数作用域两种,并且,用var声明的变量和用function声明的函数会被提前到作用域的顶部,这也就是我们常说的声明提前。

    用let声明的变量是存在于距离声明语句最近的一个作用域(全局作用域、函数作用域或块级作用域)内的,在声明的时候,可选的将其初始化成一个值。

    语法如下:


    let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;

    这一点与var的声明不同,用var声明的变量是属于离他最近的一个全局作用域或函数作用域中,且声明会被提前。在块级作用域中,var的声明与在全局作用域和函数作用域中是一样的。


    块级作用域和let声明变量,解决了使用var一些痛点,相当于用let声明的变量不会被提前到作用域顶部。


    有一点需要注意,let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前,在声明之前引用会报错该变量未被声明,且let不允许重复声明相同名称的变量,否则会报错。我们看下例子:


    {

    ? var hello = 'Hello';

    ? let world = 'World';

    }

    console.log(hello);

    console.log(world);

    在Chrome浏览器的控制台(最新版本的Chrome已支持一部分ES6语法)执行一下,会发现有报错,见下图。constconst声明与let基本相同,它也是存在于块级作用域内。

    有一点区别就是const声明的是常量,即不可被重新赋值改变原值。需要注意,const在声明常量的时候,必须同时给常量初始化赋值。如果只声明,不初始化值的话,会报错。见下面代码。

    const MAX;

    // Uncaught SyntaxError: Missing initializer in const declaration

    声明变量的方法

    在ES5中,可以通过var和function这两种方法来声明变量。


    而在ES6中,除了增加了let和const两种声明方式,还有接下来要介绍的import和class的声明方式。

    Default Parameters(默认参数)

    默认参数是ES6中对函数拓展的一个特性,可以直接为函数的参数设置默认值,当某一参数设置了默认值时,如果调用函数的时候没有传该参数,则该参数的值为默认值,如果传了该参数,则该参数的值为传递的参数值。

    在ES6之前,我们可以通过手动的方式,为函数的参数设置默认值,代码如下:

    function sign (x) {

    ? if (typeof x === 'undefined') {

    ? ? x = 'default'

    ? }

    ? console.log(x)

    }

    sign('new sign') ? ?// new sign

    sign() ? ? ? ? ? ? ?// default

    将上述代码换成ES6模式,可以这样写:


    function sign (x = 'default') {

    ? console.log(x) ? ?

    }

    sign('new sign') ? ?// new sign

    sign() ? ? ? ? ? ? ?// default

    Template Literals (模板字符串)


    ES6提供了模板字符串的特性,模板字符串是使用反引号(`)和${}实现字符串的拼接,字符串中可以嵌入变量。

    在ES6之前,我们一般这样输出模板:

    var name = 'Henry';

    var welcome = 'Hello, ' + name + '!';

    console.log(welcome); ? // Hello, Henry!

    在ES6中,模板字符串可以这样拼接字符串:

    let name = 'Henry';

    let welcome = `Hello, ${ name }!`;

    console.log(welcome); ? // Hello, Henry

    模板字符串的计算规则是在两个反引号之间将字符串拼接到一起,如果反引号之间含有${},则会计算这对大括号内的值,大括号里面可以是任意的JavaScript表达式,可以进行运算和引用对象属性。

    let a = 3;

    let number = `$ {a + 2 }`;

    console.log(`${ number }`); ? ?// 5


    let b = { c: 2, d: 4 };

    console.log(`${ b.c * b.d }`) ; ? ? // 8

    Multi-line Strings (多行字符串)


    多行字符串是模板字符串的拓展,它跟模板字符串是同样的解析方式,不同的是,它可以拼接多行的字符串,且拼接的字符串中会保留所有的空格和缩进。

    如果需要用字符串来拼接DOM树结构时,可以这样写:

    let titleValue = 'This is a title';

    let htmlStr = `

    ?


    ? ? ?

    ${ titleValue }


    ? ? ?

    This is a paragraph.

    ?

    `;

    上述代码中,能看到JavaScript代码和伪html代码的结合,完全可以将模板字符串的多行字符串封装成一个页面模板工具,绝对是轻量高效的。

    还有,这种书写方式是不是很眼熟,跟React的JSX是不是很像双胞胎啊。

    Arrow Functions (箭头函数)

    在ES6中,可以使用箭头(=>)来声明一个函数,称作箭头函数。

    ES5中声明一个函数,可以这样写:

    var func = function (a) {

    ? return a + 2;

    }

    将这个函数换成 箭头函数:

    let func = a => a + 2;

    如果函数有多个参数,需要用括号包含所有参数,只有一个参数的时候,可以省略括号,如果没有设置参数,也必须有括号。示例如下:


    let func1 = (arg1, arg2, arg3) => {

    ? return arg1 + arg2 + arg3;

    }


    let func2 = arg => {

    ? console.log(arg)

    }

    let func3 = () => {

    ? console.log(`This is an arrow function.`)

    }

    需要注意的是,箭头函数没有自己的this,如果在箭头函数内部使用this,那样这个this是箭头函数外部的this,也是因为箭头函数没有this,所以,箭头函数不能用作构造函数。如果用箭头函数来写回调函数时,就不用再将外部this保存起来了。

    // ES5

    function foo() {

    ? var _this = this;

    ? ??

    ? setTimeout(function() {

    ? ? console.log('id:', _this.id); ? ? ? ?

    ? }, 200)

    }

    // ES6

    function foo() {

    ? setTimeout(() => {

    ? ? console.log(`id:${ this.id }`) ? ? ? ?

    ? }, 200)

    }

    Enhanced Object Literals (增强的对象文本)


    在ES6,对象字面值扩展支持在创建时设置原型,简写foo:foo分配,定义方法,加工父函数(super calls),计算属性名(动态)。总之,这些也带来了对象字面值和类声明紧密联系起来,让基于对象的设计得益于一些同样的便利。


    var obj = {

    ? // __proto__ 原型

    ? __proto__: theProtoObj,

    ? // Shorthand for ‘handler: handler’ ?简写

    ? handler,

    ? // Methods

    ? toString() {

    ? ? // Super calls ? ? 继承

    ? ? return "d " + super.toString();

    ? },

    ? // Computed (dynamic) property names 计算属性名

    ? ['prop_' + (() => 42)()]: 'name'

    };

    Promises

    Promise是异步编程的一种解决方案,它是一个对象,且只要开始就会一直进行下去,直到成功或者失败。就像它的字面意思诺言一样,一个诺言,只要被许下,就只有两种解决:成功或失败。

    Promise的结果是由异步操作的结果决定的,且一旦结果形成,便不可再被改变,任何时候都得到同样的结果。

    需要注意的是:Promise被新建后,便无法被取消,会执行下去,直到出现结果;如果不设置回调,Promise内部抛出的异常,不会反应到外部。




    上一页:Zdal分库分表:支付宝是如何在分布式环境下完爆数据库压力的? 下一页:在美团点评当工程师的第一年总结,慢慢融入团队后,会迎来一个成长期
    ?
    全部评论(0)
    在线咨询
    400-8000-400